[HTML]기본 익히기 PART 2
Semantic 태그
- HTML에서 의미를 가지는 태그를 말한다.
- 검색엔진 최적화, 웹 접근성 향상, 가독성 향상이라는 이점이 있다.
예시) div 태그에는 클래스명을 사용해서 style을 적용했지만 semantic 태그를 쓰면 번거로움이 줄어든다 - 대표적인 시멘틱 태그로느 <header>, <nav>, <section>, <footer> 등이 있다.
- MDN 사이트에서 Semantic 태그를 확인할 수 있다.
https://developer.mozilla.org/en-US/docs/Learn
Learn web development | MDN
Welcome to the MDN learning area. This set of articles aims to provide complete beginners to web development with fundamental skills for coding websites. The aim is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable
developer.mozilla.org
원본 코드
<body>
<div class="header">Header 영역</div>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
<div class="main">Content 영역</div>
<div class="footer">Footer 영역</div>
</body>
스타일 코드
<style>
* {
text-align: center;
}
.header {
border: 2px solid red;
line-height: 55px;
height: 55px;
}
.nav {
border: 2px solid blue;
height: 110px;
}
.main {
border: 2px solid green;
height: 300px;
line-height: 300px;
}
.footer {
border: 2px solid black;
height: 55px;
line-height: 55px;
}
ul {
list-style: none;
padding-left: 0px;
}
</style>
변경된 코드
<body>
<header>Header 영역</header>
<nav>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
<main>Content 영역</main>
<footer>Footer 영역</footer>
</body>
스타일 코드
<style>
* {
text-align: center;
}
header {
border: 2px solid red;
line-height: 55px;
height: 55px;
}
nav {
border: 2px solid blue;
height: 110px;
}
main {
border: 2px solid green;
height: 300px;
line-height: 300px;
}
footer {
border: 2px solid black;
height: 55px;
line-height: 55px;
}
ul {
list-style: none;
padding-left: 0px;
}
</style>
결과는 원본 코드와 동일하게 나온다
Block level element & Inline level element
Block 요소와 Inline 요소를 이야기 할 때 div와 span 태그를 예로 들어 많이 설명하고 있다
div태그와 span태그
- div태그
division의 약자
block level element
영역 분할이나 컨테이너의 역할을 한다.
컨테이너(박스) 형태로 영역을 분할 하면서 다른 요소들을 담을 수 있다. - span태그
inline level element
영역을 나누는 태그
특정 텍스트나 문장 영역에서 사용된다
<style>
div {
background-color: red;
}
span {
background-color: blue;
}
</style>
<div>
애국가의 가사는 1900년대 초에 쓰여졌다. 작사자는 크게 윤치호라는 설과
안창호라는 설 두 가지가 있으며, 국사편찬위원회의 공식적인 입장으로는
미상이다. 작사자 윤치호 설은 윤치호가 애국가의 가사를 1907년에 써서 후에
그 자신의 이름으로 출판했다는 것이다. 한편 안창호가 썼다는 주장은 안창호가
애국가를 보급하는 데에 앞장섰다는 데에 중점을 두고 있다. 1908년에 출판된
가사집 《찬미가》에 수록된 것을 비롯한 많은 일제 강점기의 애국가 출판물은
윤치호를 작사자로 돌리고 있는 등 윤치호 설에는 증거가 많은 반면[4] 안창호
설에는 실증적인 자료가 부족하다.
</div>
<span>
애국가의 가사는 1900년대 초에 쓰여졌다. 작사자는 크게 윤치호라는 설과
안창호라는 설 두 가지가 있으며, 국사편찬위원회의 공식적인 입장으로는
미상이다. 작사자 윤치호 설은 윤치호가 애국가의 가사를 1907년에 써서 후에
그 자신의 이름으로 출판했다는 것이다. 한편 안창호가 썼다는 주장은 안창호가
애국가를 보급하는 데에 앞장섰다는 데에 중점을 두고 있다. 1908년에 출판된
가사집 《찬미가》에 수록된 것을 비롯한 많은 일제 강점기의 애국가 출판물은
윤치호를 작사자로 돌리고 있는 등 윤치호 설에는 증거가 많은 반면[4] 안창호
설에는 실증적인 자료가 부족하다.
</span>
Block level element
- 부모 요소의 전체 공간을 차지하고 block 한다.
- 한칸을 모두 차지하기 때문에 세로로 나열 된다.
- 가로 세로 영역 속성이 적용된다.
Inline level element
- 컨텐츠를 구성하는 요소 태그에 할당된 영역만 block 한다.
- 콘텐츠 영역 만큼 차지하게 되어 가로로 나열된다.
- 가로 세로 영역 속성이 적용이 안된다.
원본 코드
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span>1</span><span>2</span><span>3</span>
</body>
요소는 서로 변경이 가능하며 변경하는 방법은 style 에서 적용하는 방법이다.
block 속성일 경우 스타일에서 display: inline으로 요소를 변경 할 수 있다.
display 관련 요소는 inline과 block등등이 있으며 알고 있으면 요소배치 후 수정해야 할때 쉽게 수정이 가능하다.
원본 코드의 스타일 코드
<style>
div {
background-color: red;
width: 100px;
height: 100px;
border: 1px solid black;
display: inline; <!--요소 변경 -->
}
span {
background-color: yellow;
width: 100px;
height: 100px;
border: 1px solid black;
display: block; <!--요소 변경 -->
}
</style>
