ID / CLASS
#: id 앞에 붙여줌
.: class 앞에 붙여줌
자식/후손
<body>
<header>Easy_Living Velog</header>
<nav>
<ul>
<li>Java</li>
<li>python</li>
<li>html/css</li>
</ul>
</nav>
</body>
body의 자식 태그는 header/nav 태그
body의 후손은 header/nav/ul/li 태그
nav > ul{}
nav li{}
자식 태그 선택: 부모>자식
후손 태그 선택: 부모 자식 (띄어쓰기 한번)
특정 속성 태그 꾸미기
<head>
<style>
[title] {color: green;}
[title='selector'] {color: blue;}
span.easy[title] {color: red;}
</style>
</head>
<body>
<div>
<p>
<span title="selector">
<em>selector</em>
</span>
<span class="easy" title="easy">easy</span>
<b>bold</b>
</p>
</div>
</body>
특정 속성을 가진 태그를 선택할 수 있음
동시 선택
<head>
<style>
h1,p{}
</style>
</head>
<body>
<section>
<article>
<h1>공지사항</h2>
<p>언제쯤 html이 끝날까?</p>
<p>언제쯤 tag를 다 외울까?</p>
<p>모르겟고, 오늘꺼나 잘하나</p>
</article>
<aside>
<ul>
<li>이전글</li><li>다음글</li>
</ul>
</aside>
</section>
</body>
,를 통해서 동시 선택도 할 수 있다.
Link tag
<head>
<title>css</title>
<link rel="stylesheet" href="css/css1.css">
</head>
HTML <link> 요소는 현재 문서와 외부 리소스의 관계를 명시
<link>는 스타일 시트를 연결할 때 제일 많이 사용
위의 간단한 예제는 href 특성에 스타일 시트의 경로를,
rel 특성에 stylesheet을 사용합니다.
rel 은 관계(relationship)를 뜻하며,
현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명