LAYOUT
* layout을 잘 나누는게 중요
** <div>: 콘텐츠 분할 요소
*** <div id=header>
<div id=nav>
<div id=main>
<div id=footer>
초기에는 이렇게 div tag 속 나누어준 속성을 써줬다면
지금은 그냥 바로 header/ nav/ main/ footer를 바로 사용
즉, 역할을 이름으로 하고 있는 div tag라고 보면 되겠다.
이를 _Semantic(시멘틱)_ tag라고 한다.
*** <HEADER> 요소
HTML5에 새롭게 추가된 요소로서,
웹 문서 맨 윗부분에 있으며 웹 사이트 이름,
글로벌 링크(로그인, 회원가입, 사이트맵,
언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로
구성된 영역이다.
*** <NAV> 요소
HTML5에 새롭게 추가된 요소로서, 목적지로 이동할 수 있도록 링크를
별도로 모아둔 영역이다.
*** <SECTION> 요소
HTML5에 새롭게 추가된 요소로서, 섹션을 표시한다.
*** <ARTICLE> 요소
HTML5에 새롭게 추가된 요소로서, 독립적으로 구성된 글을 표시한다.
*** <MAIN> 요소
HTML5 권고후보에 main요소가 추가되었다.
***<ASIDE> 요소
HTML5에 새롭게 추가된 요소로서,
페이지 전체 내용과는 어느정도 관련성이 있지만
주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.
***<FOOTER> 요소
HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 아래쪽에 있으며
저작권, 연락처등으로 구성된 영역이다.출처: https://webdir.tistory.com/310 [WEBDIR:티스토리]
구역 가운데 정렬
네이버 사이트를 들어가보면 화면을 축소/확장에 따라 구역이
오른쪽으로 정렬되거나 왼쪽으로 정렬되지 않고 가운데 정렬된다.
구역 속 컨텐츠들은 원래 정렬되어 있는대로 정렬된다.
<header>
<div style="margin:0 auto; width: 1080px;">
<!--가운데 정렬용 div-->
<!--css 문법 = 속성명:값 , 속성이 여러개 일때는 ;으로 표시-->
<!--인라인 스타일-->
HTML 속에서 CSS를 넣을때는 위의 방식으로 입력해주면 된다.
이를 인라인 스타일이라고 한다.
용어🤏:인라인 스타일(Inline style)
인라인 스타일이란 HTML 요소 내부에
style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
하지만 이러한 방식은 코드 자체를 번잡스럽게 만들 수 있기 때문에
선호되지 않는다. 따라서 CSS 문서를 따로 만들어 준다.
/* CASCADING STYLE SHEET*/
/* 선택자(selector)*/
div#header-center{
margin:0 auto;
width: 1080px;
}
tip🤏: css문서에서 주석은 /* */이다.
tip🤏: div는 워낙 많이 쓰기 때문에 생략 가능하다.
단, header나 다른 tag는 생략 불가능!
#header-center{
margin:0 auto;
width: 1080px;
}
tip🤏: 속성 값이 같다면, 한번에 묶을 수 있다.
#header-center,div#easyliving{
margin:0 auto;
width: 1080px;
}
🪓 css를 작성 후, html이랑 연결해줘야한다.
<link rel="stylesheet" href="./naver.css">
🔑 이렇게 작성된 css의 위치를 link 시켜주면 된다.tip🤏: pixel(px)은 상대적인 단위이다.
내 모니터의 픽셀이 궁금하다면
개발자 도구->console에서
screen.width
screen.height
입력하면 모니터 픽셀 결과값이 나온다. div로 구역 나누기
#header-search> h1{
width:280px;}
tip🤏: ">" 는 자식을 의미한다.
#header-search h1{
}
tip🤏: 자손의 경우, 띄어쓰고 뒤에 자손을 붙여주면 된다.
tip🤏: display 속성이 block으로 지정된 엘리먼트는
전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고
혼자 한 줄을 차지합니다./ 전체 넓이 모두 차지
이 경우 display inline-block으로 옆으로 나란히 배치 가능하게 할 수 있다.
tip🤏: display 속성이 inline-block으로 지정된 엘리먼트는
마치 하이브리드 모드처럼 동작한다.
기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이
한 줄에 다른 엘리먼트들과 나란히 배치된다.
내부적으로는 block 엘리먼트의 규칙을 따르면서
외부적으로 inline 엘리먼트의 규칙을 따르게 된다.
/넓이를 지정 가능
<div>네이버를 시작페이지로</div>
<div>쥬니어네이버</div>
<div>해피빈</div>
이 경우 셋 다 div tag 니까, 100%로 가로를 차지하면서 세로로 쌓일 것 이다.
하지만 네이버 웹사이트는 이 부분을 가로로 배열하고 있기에,
<div style="display: inline-block">네이버를 시작페이지로</div>
<div style="display: inline-block">쥬니어네이버</div>
<div style="display: inline-block">해피빈</div>
이렇게 inline-block을 이용해서 가로배열 해주거나,
<span>네이버를 시작페이지로</span>
<span>쥬니어네이버</span>
<span>해피빈</span>
span을 통해 가로 배열 해줄 수 있다.
tip🤏: display 속성이 inline으로 지정된 엘리먼트는
전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.
대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있다.
/ 자기 content만큼만 넓이를 차지함CODE
🔑<naver.css code>
/* CASCADING STYLE SHEET*/
/* 선택자(selector)*/
div#header-center{
margin:0 auto;
width: 1080px;
}
#header-search> h1{
width:280px;
display: inline-block;
}
#header-search h2{
display:none;
}
#header-search fieldset{
width: 520px;
display: inline-block;
}
🔑<naver.html code>
<!DOCTYPE html>
<html lnag="ko">
<head>
<meta charset="utf-8"/>
<title>네이버</title>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico?1" />
<link rel="stylesheet" href="./naver.css">
</head>
<body>
<header>
<div id="header-center"><!--가운데 정렬용 div-->
<!--css 문법 = 속성명:값 , 속성이 여러개 일때는 ;으로 표시-->
<!--인라인 스타일-->
<div>
<span>네이버를 시작페이지로</span>
<span>쥬니어네이버</span>
<span>해피빈</span>
</div>
<div id="header-search">
<h1>
<a href="https://www.naver.com">네이버</a>
</h1>
<h2>검색창</h2>
<fieldset>
<legend>검색</legend>
<input/>
<button>검색</button>
<input type="checkbox"/>
<input type="radio" name="group"/>
<input type="radio" name="group"/>
</fieldset>
</div>
</div>
</header>
<nav>
<ul> <!--unordered list-->
<li>메일</li><!--list item-->
<li>카페</li>
<li>블로그</li>
<li>지식인</li>
<li>쇼핑</li>
<li>네이버페이</li>
</ul>
</nav>
<main>
<h2>실시간 검색어</h2>
<h3>연합뉴스</h3>
<ol> <!--ordered list-->
<li>충격) !!!!!!</li><!--list item-->
<li>속보) ~~~~~~</li>
<li>중대발표: !@#!@#!</li>
</ol>
<h3>언론사 목록</h3>
<ul>
<li><img src="./서울경제.png" alt="서울경제"/></li>
<li><img src="./한국경제.png" alt="한국경제"/></li>
</ul>
<h3>로그인</h3>
<h3>뉴스</h3>
<h3>법률</h3>
<h3>쇼핑</h3>
</main>
<footer>
<div>공지사항</div>
<div>creators</div>
<div>회사소개</div>
</footer>
</body>
</html>
📈 이 포스팅은 유투브 ZeroCho님의 TVHTML/CSS 무료 강좌(네이버 메인)를 2-1~2-3강까지 들으면서 정리한 것입니다.
가끔져요