1. Semantic Elements(시맨틱 요소)란 무엇일까?
- 브라우저와 개발자가 그 의미를 명확하게 설명하는 요소
- 엘리먼트의 이름에 의미를 충분히 담은 요소
- 태그에 의미를 담아 콘텐츠 영역을 논리적으로 구분하기 위한 요소
다음 예제를 보면 쉽게 이해할 수 있다.
1-1. <div>,<span>
1-2. <form>,<table>,<article>
1-1번과 1-2번을 비교할때 어느것이 의미적인 뜻이 담긴 요소인가?
당연히 2번일것이다. 2번의 태그들은 형식, 테이블모양, 기사같은 의미를 직관적으로 알아차릴 수 있다.
- Semantic Elements의 종류와 주로 사용되는 곳
<article>: 블로그 포스트, 신문기사 등
<aside>:
<details>
<figcaption>
<footer>
<header>
<main>
<mark>
<nav>: 목차, 색인, 메뉴에 사용
<section>: 하나의 구역을 구분하는데 사용(<div>대신 사용)
<summary>
<time>
참고로 <div>은 block-box인데, 시멘틱요소들은 다 block-box로 화면에 한줄을 다 차지한다! 그리고 Width와 Height 다 적용된다.
2. HTML, CSS연습해보기!
2-1. html 작성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>THis is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>THis is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>THis is an aside section.</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>2-2. index.css
body {
margin: 0;
padding: 0;
background: #fff;
color: navy;
font-size: large;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: yellowgreen;
color: green;
}
nav {
background-color: pink;
color: red;
font-size: large;
margin: 20px;
padding: 20px;
}
main {
background-color: yellow;
color: orangered;
font-size: 80%;
}
aside {
background-color: lightblue;
color: yellow;
font-size: x-small;
}2-3. html+css연동해서 다음과 같은 화면이 출력된다.
- 2-1(html)을 보면 알겠지만 모두 block-level요소만으로 구성되어있다. 그래서 정렬을 하지 않은 상태이기 때문에 모두 가로를 꽉차게 차지하고 있다.(가로=너비) 높이는 컨텐츠만큼 차지하고있다.
2-4. 이제 flex로 정렬해보겠다.(layout.css)
body {
display: flex;
}
- 2-3 화면은 요소들이 block-level이기 때문에 너비가 끝까지 차지하고 높이가 컨텐츠만큼 차지한다 하지만 body에 flex를 지정하자 body에 있는 첫번째 자식들(여기서 header,div.container,footer)가 flex가 적용되면서 세로로 길어지게 된다.. 즉 높이가 끝까지 늘어나고 너비가 컨텐츠만큼만 차지한다.
정리하자면,
block level element -> flex적용 -> 다른점을 알고있자!
2-5. 그런데 화면 전체가 아니라 왼쪽 상단으로 붙어버렸다. 화면전체에 붙게 하기 위해서 다음과 같이 layout.css에 body에 넣어주자.
body {
display: flex;
/*여기서부터 추가*/
min-height: 100vh;
}min-height속성
- 요소의 최소 높이를 설정한다.
- height속성의 사용값이 자신의 값보다 작아지는것을 방지한다.
- vh는 view height의 약자로 브라우저의 기본값을 상대값으로 지정할 수 있는데 여기서는 100으로 넣음으로 브라우저의 보이는 height(높이)를 100프로 사용해서 보여준다.
자, 그럼 적용된 화면을 볼까?
높이는 화면끝까지 차지한다. 하지만 너비는 역시 그대로다.
2-6. 이제 .container에 있는 nav,main,aside 태그들을(block-level) 상태에서 flex를 지정해서 inline-level로 만들어보자.
body {
display: flex;
min-height: 100vh;
}
/*여기서부터 추가*/
.container {
display: flex;
오오! div.container에 있는 자식요소들이 inline-level처럼 되었다. 하지만 오른쪽에 여백이 남아있다. 오른쪽 여백을 마저 채우자.(너비를 확장시키려면 어떻게 해야할까?)
2-7. flex속성 사용하자.
- flex속성은 하나의 플렉스 아이템이 자신의 컨테이너안에서 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.
현재 .container는 부모와 자식은 있어도 형제는 없기 떄문에
body {
display: flex;
min-height: 100vh;
}
.container {
display: flex;
/*여기서부터 추가*/
flex: 1;
}
예상대로 완벽하게 나오지는 않았다.
분명 너비가 완전히 찼지만 aside와 footer사이에 공백은 왜 생길걸까?ㅜㅜ ?????
** 2-7-1. flex속성 사용하자. 이번엔 main에다가 적용해보자.
body {
display: flex;
min-height: 100vh;
}
.container {
display: flex;
flex: 1;
}
/*여기서부터 추가*/
main {
flex: 1;
}적용한 결과는
원하는대로 .container의 3가지 요소들이 꽉 찼다.
하지만 왜 그런지는 의문...공부를 더 해보자..
