CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다.
셀렉터는 요소 이름이나 id, 클래스를 선택 할 수 있습니다. 셀렉터가 특정 요소를 선택했다면, 중괄호 안에 있는 속성명의 속성값으로 스타일을 부여합니다.
<LINK>
하기CSS 파일을 HTML 파일에 연결할 때는, <LINK>
태그 안에서 href 속성을 통해 연결합니다.
<link rel="stylesheet" href="index.css" />
<LINK>
요소의 rel
은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. href
속성에는 해당 파일의 위치를 절대 경로 또는 상대 경로를 사용해 추가합니다.
스타일을 부여해주고 싶은 특정 요소를 정확하게 선택하고 싶을 때 사용됩니다.
ex)
<p id='red-text' class='text'> 안녕하세요 </p>
<p class='text'> 반갑습니다 </p>
#red-text {
color: red;
}
.text {
font-weight: bold;
}
안녕하세요 // red-text 라는 id에 color: red, text 라는 class에 font-weight: bold 스타일이 적용됨
반갑습니다 // text 라는 class에 font-weight: bold 스타일이 적용됩니다.
* { }
tag1, tag2 { }
// 쉼표로 복수 선택 가능#id { }
.class { }
a[href] { }
header > p { }
<header>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
</header>
첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다.
header p { }
<header>
<p><!-- 선택 -->
<span>
<p><!-- !!선택!! -->
</p>
</span>
</p>
<p><!-- 선택 -->
<span>
<p><!-- !!선택!! -->
</p>
</span>
</p>
</header>
첫 번째로 입력한 요소의 후손을 선택합니다.
section ~ p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>
CSS 레퍼런스
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
피드백은 환영입니다!!