셀렉터를 이용해 CSS 코드 양 줄이기

HTML태그에 클래스 두개 이상 붙이기

<div class="container text-center"> </div>

navbar 만들기

<section></section>
<footer></footer> // footer를 표현하고 싶을 때

@footer란?
footer= 꼬리말(인쇄 때 문서의 각 페이지 아랫부분에 자동으로 첨가되는 표제, 날짜 등)
<footer> 요소가 포함되어 있는 문서나 섹션에 대한 정보를 포함한다.

• 저자(author)정보, 저작권 정보, 연락처, 사이트맵(sitemap), 페이지 맨 위로 되돌아갈 수 있는 Top 버튼, 연관 페이지 등

하나의 HTML 문서에는 여러 개의 <footer> 요소가 포함될 수 있다.

셀렉터 사용법 1. 공백

<nav>
	<ul>
    	<li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

.navbar li {
	display : inline-block;
}

<nav> 기능은 <div> 기능과 똑같지만 <div>보다 읽기 쉬울 수 있다.
*select 문법 중 공백: '~안에 있는' 모든 자식
공백을 이용해 안에 있는 li 태그인 모든 자손을 선택할 수 있다.

셀렉터 사용법 2. 꺾쇠괄호 >

<ul class="navbar">
	<li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.navbar>li {
	display: inline-block;
    text-decoration: none; // a 태그의 밑줄 제거 가능
}

*selector 문법 중 > : '~안에 있는' 직계자식
기호를 이용해 .li-inline 바로 밑에 있는 자식만 선택할 수 있다.
ex) <li>영화<li></li></li> 이 코드에서 내부에 있는 li코드는 선택할 수 없다.

셀렉터 사용법 3. 더욱 상세히 선택하고 싶을 때

<ul class="navbar">
	<li><span> 하이 </span></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

.navbar li>span {
	color: red;
}

셀렉터를 연달아 사용하면 된다.