[CSS] 기초

CSS (Cascating Style Sheet)

CSS란?

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다.

CSS 문법 구성

셀렉터는 요소 이름이나 id, 클래스를 선택 할 수 있습니다. 셀렉터가 특정 요소를 선택했다면, 중괄호 안에 있는 속성명의 속성값으로 스타일을 부여합니다.

HTML 파일에 링크 <LINK> 하기

CSS 파일을 HTML 파일에 연결할 때는, <LINK> 태그 안에서 href 속성을 통해 연결합니다.

<link rel="stylesheet" href="index.css" />

<LINK> 요소의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. href 속성에는 해당 파일의 위치를 절대 경로 또는 상대 경로를 사용해 추가합니다.

셀렉터 (selector)

스타일을 부여해주고 싶은 특정 요소를 정확하게 선택하고 싶을 때 사용됩니다.
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 셀렉터 #id { }
• class 셀렉터 .class { }
• attribute 셀렉터 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

---

피드백은 환영입니다!!