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

웹 표준 사이트 만들기 5강

Code K 2022. 12. 29. 02:11
반응형
SMALL

05.layout05.html 파일 생성 후 !(느낌표)입력 후 Tab 누르고 기본 구조 완성

 

div 박스가 4개 필요하다는 뜻

 

Tab 누르면 div 4줄 자동 입력

 

입력하라는대로 입력함

 

style 선언

 

복붙

 

전체 영역이기 때문에 width 값 100%로 입력 (뭔말인지 이해안감. 그냥 따라한다)

 

나머지도 width값 100% 입력

 

background color 복붙

 

height 값 입력

 

height 값 입력 후 미리보기

 

header에서 height 값 500px로 입력

 

header 에서 height 값 500px로 입력 후 미리보기. 커졌다

 

선생님이 차근차근 설명해주는 데 5번 돌려봐도 이해안감. 그냥 따라서 입력

 

margin 과 padding 입력 후 미리보기. 여백이 없어짐. 사이트가 복잡해지면 태그들이 많아져 시간이 늦어질 수 있기 때문에 실무에선 잘 쓰지 않는다.(feat.이해안감. 그냥 따라쓰자)

 

.(점)찍고 header-container 입력 후 Tab을 누르면

 

class 문장 자동 완성

 

나머지도 class 문장 입력

 

style 안에 container 입력 width 와 height 입력

 

background color 복붙

 

 

background color 복붙 후 미리보기. 왼쪽으로 치우쳐 있다.

 

margin 0 auto 입력

 

margin 0 auto 입력 후 미리보기. 가운데 정렬 됨.

 

복붙

 

복붙 후 미리보기. 블록 마다 글자가 있다

 

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

 

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

 

width 값은 기본 값 100%라 써도 되고 안 써도 된다. (이해 안가지만 그냥 따라하기)

 

width 값 지움

 

 

부모 자식 문장에서 값이 같으면 부모 문장에서 값을 지울 수 있다. 자식 문장에서 값을 인식하기 때문이다. 값이 다르면 지울 수 없다.

 

부모 문장 height 지움

 

처음이라 헷갈릴수도 있으니 width 값 그대로 입력

 

line height 입력

 

line height 입력 후 미리보기. 완성!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout05</title>
    <style>
        * {margin: 0; padding: 0;}
        #wrap {width: 100%; color:#fff; font-size: 30px; text-align: center; text-transform: uppercase;}
        #header-wrap {width: 100%; background-color: #8d6e63;}
        #banner-wrap {width: 100%; background-color: #a1887f;}
        #content-wrap {width: 100%; background-color: #bcaaa4;}
        #footer-wrap {width: 100%; background-color: #d7ccc8;}
        
        .header-container {width: 1000px; margin: 0 auto; height: 100px; line-height: 100px; background-color: #3e2723;}
        .banner-container {width: 1000px; margin: 0 auto; height: 300px; line-height: 300px; background-color: #4e342e;}
        .content-container {width: 1000px; margin: 0 auto; height: 500px; line-height: 500px; background-color: #5d4037;}
        .footer-container {width: 1000px; margin: 0 auto; height: 100px; line-height: 100px; background-color: #6d4c41;}
    </style>
</head>
<body>
   
    <div id="wrap">
        <div id="header-wrap">
           <div class="header-container">header</div>
        </div>
        <div id="banner-wrap">
            <div class="banner-container">banner</div>
        </div>
        <div id="content-wrap">
            <div class="content-container">content</div>
        </div>
        <div id="footer-wrap">
            <div class="footer-container">footer</div>
        </div>
    </div>
</body>
</html>

 

 

https://inf.run/Ks2S

https://inf.run/Ks2S

반응형
LIST

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

웹 표준 사이트 만들기 7강  (0) 2022.12.29
웹 표준 사이트 만들기 6강  (0) 2022.12.29
웹 표준 사이트 만들기 4강  (0) 2022.12.28
웹 표준 사이트 만들기 3강  (0) 2022.12.28
웹 표준 사이트 만들기 2강  (0) 2022.12.28

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

티스토리툴바