📂 시맨틱 태그(Semantic Tag)
📍 정의
semantic = 의미가 있는
즉, 의미가 있는 태그를 뜻함
=> div, p처럼 용도에 따른 구분이 아니라, 웹사이트에서의 '역할'과 '의미'에 따라서 사용
📍 장점
- SEO(검색 최적화) 최적화
- 높은 웹 접근성
- 유지 보수의 용이성(가독성 향상)
📍 자주 사용되는 시맨틱 태그
<header> : 머릿말을 의미(가장 상단)
<nav> : 다른 페이지로 갈 수 있게 하는 태그 (like 링크)
<section> : 문서의 일반적인 섹션 (연관된 내용들 묶어주는 역할)
<article> : 텍스트 위주의 컨텐츠를 담는 태그
<footer> : 사이트 가장 하단에 위치하며, 주로 회사 위치, 전화번호, 저작권 등 세부 정보를 기입하는 태그
<aside> : 부차적인 내용을 담는 태그
📂 CSS 심화
list up
<ul>/<li> 순서x
<ol>/<li> 순서o (1-2-3, a-b-c 처럼)
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
<link rel="stylesheet" href="week3.css">
</head>
<body>
<ol>
<li>첫번째입니다. </li>
<li>두번째입니다. </li>
<li>세번째입니다. </li>
</ol>
<ul>
<li>첫번째입니다. </li>
<li>두번째입니다. </li>
<li>세번째입니다. </li>
</ul>
<ol>
<li>동일내용 </li>
<li>동일내용 </li>
<li>동일내용 </li>
</ol>
</body>
</html>
📂 결합자와 가상 클래스
결합자
* 자손 결합자, outer클래스가 적용된 태그아래의 모든 li 태그들에 적용 */
.outer li {
color: olivedrab;
}
/* 자식(1촌 자손) 결합자, 바로 하나 밑의 자손만 적용됨 */
.outer > li {
color: dodgerblue;
}
/* 자식(1,2촌 자손) 결합자, 바로 하나 밑, 두번째 밑 자손에 적용됨*/
.outer > li li {
text-decoration: underline;
}
/* 뒤따르는 모든 동생들 결합자, 같은레벨에 있는 것들에 적용 */
.starter ~ li {
font-style: italic;
}
/* 뒤따르는 바로 다음 동생 결합자, 지정된 클래스가 적용된 태그 바로 다음 태그에 적용됨 */
.starter + li {
font-weight: bold;
color: yellow;
}
/* 첫 번째, 마지막 요소 가상 클래스, :은 sudo class, 가상클래스라고함 */
ol li:first-child,
ol li:last-child {
color: yellowgreen;
}
/* ~가 아닌 요소 가상 클래스 */
.outer > li:not(:last-child) {
text-decoration: line-through;
}
/* ul중에서 outer 클래스가 적용되지 않은 ul태그 아래의 li 태그에 적용 */
ul:not(.outer) li {
font-weight: bold;
}
/* ~번째 요소 가상 클래스 */
/* #, #n, #n+#, odd, even 등 시도해보기 */
/* 2 :두번째꺼, 2n:2의 배수번째꺼, 2n+1:2의배수+1번째꺼 , odd:홀, even:짝 */
ol li:nth-child(3n) {
font-weight: bold;
color: deeppink;
}
/* 마우스오버 가상 클래스, 마우스가 올라간거만 색을 바꿔줌 */
li:hover {
font-weight: bold;
color: blue;
}
📂 Inline/Block
📍 태그
- inline 태그
대표: <span>
- 기본 너비가 컨텐츠 요소까지
- 한 줄에 주르륵 = 가로공간 차지
- 다른 요소 안에 포함됨 (block 안에 incline 가능)
- 너비나 높이 무시함
- block 태그
대표: <div>
- 한 줄에 하나당 차지 (가로공간 독점)
- 너비나 높이 설정 가능
- inline-block 태그
- incline과 마찬가지로 컨텐츠 요소만큼 차지
- block처럼 너비 영향 받음
- 다른 요소 안에 포함 가능
- 블록 사이에 공간 있음
📍 여백
padding > border > margin
-
margin(외부 여백)
incline : 좌우에만 적용
block : 상하좌우 모두 적용 -
padding(내부 여백)
incline : 좌우는 서로 영역 침범x, 상하는 침범o
block : 상하좌우 적용
➡️ 이 사이트 공부할 때 추천!
안녕하세요ꯁ