본문 바로가기
웹 표준 사이트 만들기/레이아웃 구조 실습

웹 표준 사이트 만들기 4강

Code K 2022. 12. 28. 21:19
반응형
SMALL

04.layout04.html 파일 생성

 

!(느낌표)누르고 Tab 누르면 기본 구조 자동 완성

 

언어에 ko 입력, 타이틀에 Layout04 입력

 

박스 6개가 필요하다는 뜻

 

Tab 누르면 자동 입력

 

id 와 class 입력

 

style 입력하고 Tab 눌러 스타일 선언하기

 

style에 복붙

 

class는 . (점)으로 써야해서 고침. width, height, background 입력

 

width, height, background 입력 후 미리보기 1

 

width, height, background 입력 후 미리보기 2

 

사이드,컨텐트(1,2)에 float left 입력

 

사이드,컨텐트(1,2)에 float left 입력 후 미리보기

 

wrap에 width, height, margin 입력

 

wrap에 width, height, margin 입력 후 미리보기

 

footer에 clear both 입력

 

footer에 clear both 입력 후 미리보기

 

복붙

 

복붙 후 미리보기

 

wrap에 폰트 크기,색상,위치,대문자 입력

 

wrap에 폰트 크기,색상,위치,대문자 입력 후 미리보기

 

line height 입력

 

line height 입력 후 미리보기

 

body 만들고 background-color 입력

 

body 만들고 background-color 입력 후 미리보기. 완성!

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Layout04</title>
    <style>
        body {background-color: #ffe0b2;}
        #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 30px; color:#fff; text-align: center; text-transform: uppercase;}
        .header {width: 1000px; height: 100px; line-height: 100px; background: #ef6c00;}
        .nav {width: 1000px; height: 100px; line-height: 100px; background: #f57c00;}
        .side {float: left; width: 300px; height: 600px; line-height: 600px; background: #fb8c00;}
        .content1 {float: left; width: 700px; height: 300px; line-height: 300px; background: #ff9800;}
        .content2 {float: left; width: 700px; height: 300px; line-height: 300px; background: #ffa726;}
        .footer {clear: both; width: 1000px; height: 100px; line-height: 100px; background: #ffb74d;}
    </style>
</head>
<body>
    <div id="wrap">
        <div class="header">header</div>
        <div class="nav">nav</div>
        <div class="side">side</div>
        <div class="content1">content1</div>
        <div class="content2">content2</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>

 

 

 

 

 

https://inf.run/Ks2S

https://inf.run/Ks2S

반응형
LIST

'웹 표준 사이트 만들기 > 레이아웃 구조 실습' 카테고리의 다른 글

웹 표준 사이트 만들기 6강  (0) 2022.12.29
웹 표준 사이트 만들기 5강  (2) 2022.12.29
웹 표준 사이트 만들기 3강  (0) 2022.12.28
웹 표준 사이트 만들기 2강  (0) 2022.12.28
웹 표준 사이트 만들기 1강  (0) 2022.12.27

'웹 표준 사이트 만들기/레이아웃 구조 실습' Related Articles

티스토리툴바