Do it 웹사이트 따라 만들기 - 전체 레이아웃 만들기

# 3-1 HTML과 레이아웃

시맨틱 마크업이란?

각 태그를 문서의 의미에 맞게 작성하는 것
HTML SECTIONING 태그를 이용해 구조적으로 HTML을 이해할 수 있다.
<section> : 하나의 콘텐츠. 즉, 제목으로 시작하는 콘텐츠. <h1> ~ <h6>와 같이 제목 태크가 있어야 한다. 검색엔진이 제목 테그와 내용을 수집 가능하다.
<div> : 레이아웃을 나누는 용도로, 의미상 관계없는 내용으로 영역을 나눈다.

# 3-2. HTML 구조화

레이아웃은 큰 구조로 볼 떄 헤더 영역, 각각의 콘텐츠 영역, 페이지의 푸터 영역으로 나뉜다.

실습에서 사용한 코드와 페이지 모습이다.

<!DOCTYPE html>
<html>
<head>
<title>이지스퍼블리싱</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<!-- 전화, 주소, 이메일 자동 링크 없앨 때 -->
<!--<meta name="format-detection" content="telephone=no, address=no, email=no" />-->
<!-- 기본 포맷 삭제 -->
<!--<meta name="format-detection" content="no" />-->
<meta name="title"  property="og:title" content="이지스퍼블리싱">
<meta name="images" property="og:image" content="./images/link_thumb.jpg">
<meta name="description" property="og:description" content="이지스퍼블리싱">
<meta name="type" property="og:type" content="article">
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/ui.js"></script>
<link rel="stylesheet" type="text/css" href="./css/ui.css">
</head>
<body>
	<section id="wrap">
		<h1>이지스퍼블리싱</h1>
		<header>
		 	<strong class="logo_box"><img src="./images/mainLogo.png" alt="이지스퍼블리싱"></strong>
		 	<nav>        
		 		<ul>        
		 			<li><a href="#">회사소개</a></li>        
		 			<li><a href="#">도서소개</a></li>        
		 			<li><a href="#">FAQ</a></li>        
		 			<li><a href="#">Contact Us</a></li>    
		 		</ul> 
		 	</nav>
		</header> 
		<section id="container">
		  	<section id="menu1" class="content">
		  	 	<h2>회사소개</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu2" class="content">
		  	 	<h2>도서소개</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu3" class="content">
		  	 	<h2>FAQ</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu4" class="content">
		  	 	<h2>Contact Us</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  </section>    
		  <footer>
		  	  <address>(04003)서울특별시 마포구 잔다리로 109 TEL (02)325-1722 FAX (02)326-1723</address>    
		  	  <p>Copyright(c)2015 이지스퍼블리싱㈜ EasysPublishing Co., Ltd. All Rights Reserved</p> 
		  	  <a href="https://www.facebook.com/easyspub" class="face" title="페이스북으로 이동"></a>    
		  	  <a href="https://twitter.com/easyspub" class="twit" title="트위터로 이동"></a>    
		  	  <a href="https://www.instagram.com/easyspub_book/" class="instar" title="인스타그램으로 이동"></a>
		  </footer> 
	</section>
</body>
</html>

먼저 <body></body> 태그 안에 <section id>태그를 작성하고 id값으로 wrap을 지정한다. 이것은 페이지 전체 영역이 된다.
하나의 <section> 태그 안에는 제목을 정의하는 요소를 작성해야 한다. <h1>FE공부</h1>로 작성했다. 즉 이 콘텐츠는 FE 공부의 내용을 담고있다는 의미가 된다.
영역을 왼쪽과 오른쪽으로 구분한다. 왼쪽은 id=container <section> 태그로 묶고, 오른쪽 영역은 <header> 태그로 만든다. <header> 태그는 보통 화면 상단에 위치하며 메뉴, 검색 등을 담는 구조를 위한 SECTIONING 태그의 종류이다.
로고는 <strong></strong> 태그를 작성하고 logo_box라는 클래스명으로 지정한다.(특별히 내 사진 넣어줌) 이제 CSS 속성으로 화면을 디자인한다. section id="wrap"가 화면 전체를 차지하므로 width와 height의 속성값을 100%로 지정한다.

CSS작업을 해줘야 한다. 폰트랑 까만 배경은 기본으로 주어진 css임.

<h1>으로 지정된 전체 콘텐츠 제목은 화면에는 표시되지 않고 정보만 제공하도록 font-size 속성값을 0으로 만든다.
이미지가 <header> 태그를 기준으로 오른쪽 상단 중앙에 고정되도록 position 속성값을 absolute로 지정한다. 그리고 right와 top의 속성값을 각각 35px, 75px로 지정한다.
이제 로고 영역 .logo_box 태그레 이미지를 크기에 맞게 지정한다. 원본 로고 이미지를 width 100px로 크기를 줄인다.
<header>의 태그 영역은 고정된 너비로 화면 오른쪽 모두를 차지하도록 한다. 너비는 width 180px, height 속성값을 100%로 지정한다.
<header>태그는 항상 오른쪽에 위치하도록 속성값을 fixed로 지정하고, right와 top값은 0으로 지정한다.
<header> 태그 영역의 background image를 지정한다. 너비는 고정된 값, 높이는 100%로 한다. reapeat-y로 지정하면 세로 기분으로 지정된 배경이 반복되어 지정된다.
<header> 태그가 화면에서 가장 상위에 위치하도록 x-index를 지정한다.

콘텐츠 영역이 <header> 태그 영역을 침법하지 않도록 여백을 지정한다. <padding-right>속성값을 지정하여 오른쪽 여백을 만들고, 페이지를 다채우도록 container의 너비와 높이 값을 100%로 지정한다.
HTML에 <footer>태그를 작성한다. 나중에 페이지관련 정보를 작성할 것이다.

# 3-3. HEADER 영역

콘텐츠의 정보를 전달하는 역할을 한다. 이번 실습에서는 <header>영역에 각 페이지로 이돌할 내비게이션을 만든다.

<nav> 태그를 이용해 다른 페이지로 이동할 수 있는 링크가 들어있는 메뉴를 만든다.
순서가 없는 목록을 담는 <ul> 태그를 사용하여 메뉴 목록을 만든다. 여기에 <a> 태그를 사용해 링크 이동이 가능한 메뉴를 만든다.
<nav> 태그의 너비와 높이를 100%로 지정한다.
<header> 태그가 항상 수직 정렬이 되도록 한다. <ul> 태그는 높이 100%로 지정하고, display: flex로 지정한다.
<li> 태그가 상단에서 하단으로 수직 정렬하도록 flex-direction을 column으로 지정하고, 중앙 정렬을 위해 justify-content를 center로 지정한다. 이렇게 하면 <ul> 태그를 기준으로 <li> 태그가 세로로 수직정렬하게 된다.

이제 <li> 태그의 스타일을 정한다. 메뉴 <li> 태그는 <nav> 태그의 왼쪽으로부터 30px 옆에 위치시키고, 각 메뉴 하단에서 10px씩 여백이 생기도록 만든다. 태그의 영역을 포함하지 않는 margin으로 구분한다.(margin은 top, right, bottom, left 순으로 속성값을 지정한다.)
메뉴의 text 스타일을 지정한다. 텍스트 크기, 색상, 굵기, 높이를 지정하였다.
텍스트 앞에 css의 가상 요소 중 하나인 after로 지름이 5px인 흰색 불릿을 지정한다.
불릿이 텍스트 왼쪽에 위치하고 15px 떨어져 있도록 만든다. <li> 태그에 position의 속성값을 relative로 지정하여 왼쪽에 위치하게 한 후, padding-left 속성값을 15px로 지정한다. 또한 불릿이 생성된 after의 position을 absolute, legt와 top 속성값을 지정해 위치를 위로 올린다.

:hover 속성을 이용하여 마우스 커서를 올리면 메뉴 색상이 바뀌도록 한다. <li> 태그에 :hover를 사용하여 <a> 태그는 color를 지정하고, <li> 태그의 가상요소인 :after는 background를 지정하여 마우스반응에 따라 색상이 바뀌게 한다.
메뉴에 해당하는 섹션이 페이지 영역이 될 때도 메뉴가 계속 활성화되도록 <li> 태그의 on이라는 클래스를 지정한다.

# 3-4. FOOTER 영역

<footer> 태그는 문서에 대한 정보(제작자 정보, 저작권, 연락처, 관계 문서 등)를 담는 태그이다.

<header> 태그 영역과 겹쳐있는 형태로 만들기 위해 position 속성값을 fixed로 지정한다. width는 태그 영역과 같은 180px, bottom과 right 속성값을 0으로 지정한다.
텍스트가 시작될 위치를 정하기 위해 padding속성을 지정한다.
<footer> 태그의 텍스트 스타일을 지정한다. font-size의 속성값을 지정하면 footer 태그의 자식, 자손 태그 모두 상속 받는다. <footer> 태그의 내용을 화면에서 확인하기 위해 <header> 태그보다 상위(11이상)로 z-index를 지정한다.
HTML 파일에 주소 정의 <address> 태그와 <p> 태그를 이용해 저작권 정보를 작성한다.
css파일에서 <address> 태그 하단 여백을 15px로 지정한다.
sns는 링크로 연결하여 각 페이지로 연결되도록 <a> 태그를 사용하여 작성한다. 각 SNS이미지를 css의 background 속성으로 지정한다. 영역(페이스북, 트위터, 인스타 등) 구분은 각 class로 하고 title에 태그의 이동, href에 url을 넣는다.
sns의 이동링크는 <footer> 태그의 자식으로 모두 놓이와 위치가 같으므로 공통인 속성을 묶어 지정해준다.
이제 아이콘이 보이도록 background 속성을 지정한다.
:hover 선택자로 SNS 아이콘 이미지 위에 마우스 오버했을 때 이미지가 바뀌도록 지정한다. 이미지가 부드럽게 전환되도록 <a> 태그에 transition 속성의 속도를 .4s로 지정한다.

# 3-5. 콘텐츠 영역

section id = "container" 태그 안 각 페이지 영역이 될 section 태그를 만드로 4개의 페이지가 구분되도록 한다. 공통으로 스타일을 지정하기 위해 content라는 class를 지정한다.(id는 고유한 속성)
css로 영역의 width 속성값이 동일한 비율이 되도록 25%로 지정한다.
4개의 각 영역이 하나씩 페이지로 사용되며 왼쪽에서 오른쪽으로 이동이 가능하도록 left의 값을 지정한다. container 태그의 position 속성값을 relative로 지정하고 content의 position 값을 absolute로 지정한다. 각 left 값은 왼쪽부터 25% 증가.
각 영역의 background 이미지를 지정한 후 전체 영역을 차지하도록 repeat 속성값을 지정한다.
section id=container 태그에 max-width를 지정하여 콘텐츠 영역이 동일하게 보이도록 한다. 그리고 전체 콘텐츠를 중앙 정렬하도록 margin 속성에 0 auto를 지정한다.

이제 콘텐츠가 들어갈 영역을 만든다. 4개 영역 각각 <h2> 태그를 작성해 제목을 지정한다.
콘텐츠 영역을 위한 <div> 태그를 생성하고 conbox라는 클래스를 생성한다.

# 3-6. 가상 요소 활용하기

각 영역을구분하는 라인과 제목이 되는 텍스트를 가상 요소로 넣는다. content 클래스를 기준으로 before와 after의 영역을 만든다.
가상 요소의 position 값을 absoulte로 지정한다.
각 영역을 구분하는 라인은 before에 만든다. 라인이 가장 상단에 오도록 z-index의 속성값을 4로 지정한다.
가상 요소로 만든 after의 각 영역에 제목이 되는 텍스트를 넣는다. 4개 영역 모두 다른 텍스트가 들어가 있어 menu# 기준으로 이미지와 텍스트를 삽입한다. 텍스트 스타일은 공통, 내용만 따로 작성한다.
content안에 .conbox를 기준으로 가상 요소인 before를 생성하여 영역을 만든다. 각 캐릭터 이미지가 위칫값을 가질 수 있도록 position 값을 absolute로 지정한다.
각 캐릭터는 영역별로 이미지가 다르므로 id를 기준으로 선택자를 만들고 이미지를 경로에 맞게 지정하고 크기와 위치에 맞게 지정한다.
메인 페이지 상단의 <h2> 제목은 웹사이트 첫 진입시에 나오지 않도록 opacity 속성값을 0으로 지정한다.

# 회고

position이 제일 헷갈린다.

relative : 내 원래 위치 기준
static : 좌표 이동 X
fixed : 현재 화면 기준
absolute : 부모 태그 기준

이렇게.. 좌표도 따로 작성할 수 있다.

'개인 스터디 > 정리' 카테고리의 다른 글

Do it 웹사이트 따라 만들기 - 회사소개 페이지 만들기 (0)	2024.01.22
Do it 웹사이트 따라 만들기 - 페이지 이동 효과 만들기 (0)	2024.01.21
Do it 웹사이트 따라 만들기 - 웹사이트 만들 준비하기, 개발 환경 준비하기 (0)	2024.01.18
[Django] Do it 장고+부트스트랩 16주차 정리 (0)	2023.03.13
[Django] Do it 장고+부트스트랩 13~15주차 정리 (0)	2023.02.26

유미의 기술들

Do it 웹사이트 따라 만들기 - 전체 레이아웃 만들기

# 3-1 HTML과 레이아웃

# 3-2. HTML 구조화

# 3-3. HEADER 영역

# 3-4. FOOTER 영역

# 3-5. 콘텐츠 영역

# 3-6. 가상 요소 활용하기

'개인 스터디 > 정리' 카테고리의 다른 글

티스토리툴바

Do it 웹사이트 따라 만들기 - 전체 레이아웃 만들기

# 3-1 HTML과 레이아웃

# 3-2. HTML 구조화

# 3-3. HEADER 영역

# 3-4. FOOTER 영역

# 3-5. 콘텐츠 영역

# 3-6. 가상 요소 활용하기

'개인 스터디 > 정리' 카테고리의 다른 글

'개인 스터디/정리' Related Articles

티스토리툴바