본문 바로가기
IT/웹코딩기초

[HTMl/CSS] 헤더, 메인, 푸터 섹션 나누기 / 시멘틱 태그 레이아웃 예제

by 복자정 2023. 5. 10.

출처 : https://www.htmlgoodies.com/html/html-styling-block/

1. Header (헤더;머릿말)

제목, 영상,이미지 등을 넣어서 이 페이지가 어떤 사이트인 지를 파악하게 하는 역할 
- 가장 공을 많이 들이는 부분
- 그래픽이 중요한 역할을 함 


2. Main (메인;본문)

실제 내용, 핵심 컨텐츠를 담음

 

3. Footer (푸터;꼬릿말)

웹사이트 내의 하단 영역 브랜드 로고부터 사이트 맵, 필수 페이지에 대한 링크, 소셜 정보, 저작권 표기, 언어 설정 등의 기능을 모아놓은 영역

 


1. html 작업 

 

오늘 해볼 시멘틱 태그 레이아웃 예제는 다음과 같다. 

 

시멘틱 태그 예제

 

<div id="container"> 이름을 지어주는 이유는 css에서 불러오기 위해서 씀. 

 <div id="container"> <!-- 전체 박스 --!>

        <header id="header">
            <h1>사이트 제목</h1>
        </header>

        <section id="sec 1">
            <h2>본문</h2><br>
            <p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>
            <p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>

            <aside id="side">
                <h2>사이드 바</h2>
                <p>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</p>
            </aside>
            
            <footer id="foot">
                <h2>푸터</h2>
                <p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
            </footer>
        </section>

    </div> <!-- 전체 박스 -->



2. CSS 추가 

모든 요소 공통사항으로 폰트와 보더박스를 지정해주었다. 

* { /*모든 요소 공통 사항 */
            font-family: 'Gothic A1', sans-serif;
            box-sizing: border-box;
        }



3. 들어갈 스타일 미리 작성해놓기
    

CSS에 들어갈 스타일을 미리 작성해놓으면 편하다.

그러나, 반복되는 것이 많고 너무 번거롭다는 게 단점.

코딩 시 노가다를 줄일 수 있으면 최대한 줄이는 것이 좋다.

 

=> 결론은 h2와 p태그에 class 태그를 달아 묶어주면 반복되는 것이 줄어든다. 

#container {}
        #header {}
        #header > h1 {}
        
        #sec1 {}
        #sec1 > h2 {}
        #sec1 > p {}
        
        #sec1 {}
        #sec1 > h2 {}
        #sec1 > p {}
        
        #sec1 {}
        #sec1 > h2 {}
        #sec1 > p {}

=> 반복되는 것이 많고 너무 번거로움


5. container 로 전체박스 크기를 지정

 #container { /*전체 박스*/
            padding: 20px;
            margin:auto;
            border:1px solid #aaa;
            width:90%
        }

 

6. header 헤더 영역 화면과 같이 맞추기

   #header > h1 {
            margin: 0; padding:20px; /*글자가 너무 띄워져 있어서*/
        }



7. 섹션과 사이드바의 비율을 나눠보고, float로 본문, 사이드바를 나누기  

        #sec1 { /*본문*/
            float:left; /*왼쪽에 맞추기. 다음 내용을 오른쪽 빈 공간에 맞추기*/
            width:70%
        }

        #side { /*사이드바*/
            float:right;
            width:30%
        }

 

   
8. 정리된 HTML문서 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>시멘틱 태그.Semantic Layout</title>
    <!-- 구글 폰트 CDN 연결 -->
   
    <style>

        * { /*모든 요소 공통 사항 */
            font-family: 'Gothic A1', sans-serif;
            box-sizing: border-box;
        }
   
        #container { /*전체 박스*/
            padding: 20px;
            margin:auto;
            border:1px solid #aaa;
            width:90%
        }

        #header { /*헤더 영역*/
            width:100%; /*안써도 무방하지만 확실하게 하기 위해서 쓰는 걸로!*/
            height:300px; background-color: rgb(255, 255, 220);
        }

        #header > h1 {
            margin: 0; padding:20px; /*글자가 너무 띄워져 있어서*/
        }
       
        #sec1 { /*본문*/
            border: 1px solid #aaa;
            float: left; /*왼쪽에 맞추기. 다음 내용을 오른쪽 빈 공간에 맞추기*/
            width: 70%; padding: 10px;
        }

        .title { }
        .content { }
       
        #side { /*사이드바*/
            border: 1px solid #aaa;
            float:right;
            width:30%; padding:10px;
        }
     
        #foot { /*푸터*/
            border: 1px solid #aaa; padding:10px;
     
            clear: both; /*이전에 모든 float 기능 해제*/
        }


</style>

</head>

<body>
   
    <div id="container"> <!-- 전체 박스 -->

        <header id="header">
            <h1>사이트 제목</h1>
        </header>

        <section id="sec1">
            <h2 class="title">본문</h2><br>
            <p class="content">재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하                                              여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결                                                하여야 한다.</p>
            <p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다.
                  제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한                      허가는 인정되지 아니한다.</p>
        </section>

            <aside id="side">
                <h2 class="title"></h2class>사이드 바</h2>
                <p class="content">모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을
                                                민주주의원칙에 따라 법률로 정한다.</p>
            </aside>
           
            <footer id="foot">
                <h2 class="title"></h2class>푸터</h2>
                <p class="content">이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.                      </p>
            </footer>


       

    </div> <!-- 전체 박스 -->


</body>

</html>
저작자표시 비영리 변경금지

'IT > 웹코딩기초' 카테고리의 다른 글

[HTML/CSS] 제주 게스트하우스/펜션민박집 - 메인 웹페이지 리디자인(화면설계 과정/파일코드공유)  (0) 2023.05.15
[CSS] Transition Animation 광주시 마우스 닿으면 위로 올라가며 바뀌는 로고 애니메이션 효과/HTMl 파일 공유  (0) 2023.05.12
[HTML/CSS] div요소와 box안에 box이미지 넣어서 반응형 데스크탑 모바일 페이지 만들기  (1) 2023.05.09
[CSS] 링크선택자와 가상 클래스 선택자 요소와 순서 정리  (0) 2023.05.08
[HTML] 초보자에게 유용한 비주얼 스튜디오 코드 단축키 태그 정리  (0) 2023.05.05

관련글

댓글

티스토리툴바