레이아웃과 div태그
- 레이아웃배치 : 가로로 잘라보고 (대부분 가로 우선) 더이상 나눌 수 없을 때 세로로 잘라 레이아웃 배치하기
<div> : 구역 나누기 <header>, <nav>, <main>, <footer> -> 시멘틱태그 ( 특별한 div 태그 )CSS와 선택자
- html파일에 css쓰는 방식 - 인라인 스타일 (권장하지 않음)
<div style="margin : 0 auto; width: 1080px;">
<!-- 속성명: 속성값; 속성명2: 속성값2 -->❗ 그래서 따로 css파일을 만들고 선택자를 붙여준다!
✔ 링크를 걸어줘야 html파일에서 css파일 존재를 안다!
<link rel="stylesheet" href="./naver.css">픽셀과 자식/자손 선택자, display
-
px(픽셀) - 상대적인 개념 ( 내 모니터 1920px, 1080px )
-
자식과 자손 구별법 :
✨ '>' 의 유무 차이 ✨
• 자식
div#header-search > h1 {}
• 자손
div#header-center h1 {} -
display
display : none -> 안보이게
display : block -> 전체너비
display : inline-block -> width, height 지정가능 ( block과 inline 중간 )
display : inline -> 딱 그 너비만 가능전체코드
- naver.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- meta태그는 문서에 대한 정보를 나타냄 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네이버</title>
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
<link rel="stylesheet" href="./naver.css">
</head>
<body>
<header>
<div id="header-center"> <!-- 가운데 정렬용 div -->
<!-- 속성명: 속성값; 속성명2: 속성값2 -->
<span>네이버를 시작페이지로</span>
<span>쥬니어네이버</span>
<span>해피빈</span>
<!-- <div style="display : inline-block">네이버를 시작페이지로</div>
<div style="display : inline-block">쥬니어네이버</div>
<div style="display : inline-block">해피빈</div> -->
<div id="header-search">
<!-- href 는 a태그의 부가정보 속성(attribute) -->
<h1><a href="www.naver.com">네이버</a></h1>
<h2>검색창</h2>
<fieldset>
<legend>검색</legend>
<input type="text">
<button>검색</button>
</fieldset>
</div>
</div>
</header>
<nav>
<ul> <!-- unordered list --> <!-- ol태그도 있음 ordered list -->
<li>메일</li> <!-- list item -->
<li>카페</li> <!-- list item -->
<li>블로그</li> <!-- list item -->
<li>지식인</li> <!-- list item -->
<li>쇼핑</li> <!-- list item -->
<li>네이버페이</li> <!-- list item -->
<li>네이버쇼핑</li> <!-- list item -->
</ul>
</nav>
<main>
<h2>실시간 검색어</h2>
<h3>연합뉴스</h3>
<ol>
<li>정렬</li>
<li>ㅋ</li>
<li>ㅋㅋㅋ</li>
</ol>
<h3>언론사 목록</h3>
<ul>
<li><img src="image/서울신문.png" alt="서울신문"></li>
<li><img src="image/스포티비.png" alt="스포티비"></li>
</ul>
<h3>로그인</h3>
<h3>뉴스</h3>
<h3>법률</h3>
<h3>쇼핑</h3>
</main>
<footer>
<div>공지</div>
<div>creaters</div>
<div>회사소개</div>
</footer>
</body>
</html>- naver.css
/* 선택자 (selector) */
#header-center {
margin: 0 auto;
width: 1080px;
}
/* 자식 선택자 */
div#header-search>h1 {
width: 280px;
display: inline-block;
}
div#header-search h2 {
display: none;
}
div#header-search fieldset {
width: 520px;
display: inline-block;
}
/*
div#header-center h1 {
자손 선택자
}
*/
안녕하세요