[TIL] CSS ( 1 ) 기초 - 선택자 ( Selector )

Topic = CSS 기초에 대해서 학습하기.

 

 

---

 

 

CSS ( Cascading Style Sheets )

 

CSS란?

HTML과 같이 CSS는 프로그래밍 언어가 아니고, 마크업 언어가 실제 표시되는 방법을 기술하는 Style Sheets - 스타일 언어이다. 

CSS는 실제 화면에 표시되는 요소의 색상, 크기, 폰트, 레이아웃 등의 표현을 지정해 콘텐츠를 꾸며주는 정적인 시각적 표현을 담당한다. == HTML 정보를 토대로 컴포넌트를 가공하는 역할을 한다.

 

 

 

 

 

✅ HTML에 CSS를 적용하기 위해선 HTML 파일 내 헤더 태그 안에 아래와 같이 CSS 경로를 Link 해주어야 한다.

<header>
<link rel="stylesheet" href="/css/test1.css" />
</header>

 

 

[ CSS의 구성 ]

Rule Set ( Rule )은 HTML 페이지 안의 특정 요소들을 어떻게 랜더링 할 것인지 브라우저에게 알려주는 CSS 규칙이다. CSS는 위의 Rule Set 규칙의 목록으로 구성된다. 각 규칙이나 규칙 집합은 하나 이상의 셀렉터와 하나의 선언 블록을 이룬다.

• 선택자 - Selector
  • 샐랙터는 어느 부분의 마크업에 스타일을 적용할지 선언하는 것으로 Rule Set의 영향을 받는 HTML 페이지 안의 특정 요소들을 선택해서 선언 블록의 내용을 적용시키는 것이다. 샐랙터로는 태그명과 클래스, ID 등을 지정할 수 있다.
• 선언 블록
  • 선언 블록은 괄호로 이루어진 선언들의 목록으로 이루어진다. 각 선언은 그 자체가 프로퍼티와 콜론, 값으로 구성되며. 한 블록 안에 여러 선언이 있으면, 세미콜론이 각각의 선언에 삽입되어야 하며, 단 하나의 선언이라도 세미콜론을 넣지 않으면 동작하지 않는 경우가 있으니 주의하여야 한다.
• 속성 ( Property)
  • 선택한 HTML 요소를 꾸밀 속성을 지정해준다. 위의 예제에서 속성은 ' color ' 가 된다.
• 속성 값
  • 속성을 지정한 뒤 콜론 ( : ) 뒤에 세부 속성 값을 지정해준다.

 

[ 여러 속성 지정 예제 ]

p {
    color: #0000FF;
    font-size:20px;
    background-color: red;
}

• 각 속성들은 세미콜론을 통해 작성해주어야 한다.  가독성을 위해 줄바꿈으로 속성을 구분 해주면 된다. 

 

 

[ 여러 요소 ( HTML ) 지정 예제 ]

h1,
h2,
h3 {
    color: royalblue;
}

• 각 요소들을 콤마로 구분해주고 속성과 마찬가지로 가독성을 위해 줄바꿈 구분.

 

 

아직 학습 초반이라 문서 작성하다보면 햇갈리는데, HTML은 등호( = ) +  슬래시 ( / )로 마무리 , CSS는 콜론 + 세미콜론으로 마무리 하는 것으로 이해하고 있으면 될 것 같다.

 

 

 

 

선택자( Selector ) 개념

 

p { color: red; }

• 태그 선택자 ( == 요소 선택자, 타입 선택자 )
  
  • CSS → 특정 타입의 모든 HTML 요소를 샐랙터로 지정한다. 해당 태그에 CSS 스타일을 적용.
  • HTML → 해당 태그 사용 시 자동 적용

 

/* CSS */
#test-id {}


<!-- HTML -->
<div id="test-id"> </div>

• 아이디 선택자
  
  • CSS → 선택자 앞에 해시 # 기호를 붙여 id를 생성할 수 있다. id는 HTML 문서 내의 1가지 요소에만 적용할 수 있어 유연성이 떨어진다. 
  • HTML →  태그내에 id 속성을 통해서 지정해준다.

 

/* CSS */
.test-class {}


<!-- HTML -->
<div class="test-class"></div>

• 클래스 선택자
  • CSS → 선택자 앞에 마침표 . 기호를 붙여 생성할 수 있다. Class 선택자는 HTML 문서 내의 여러 요소에 적용될 수 있어 재사용성이 높다.
  • HTML → 태그내에서 class 속성을 통해서 지정해준다.

 

/* CSS */
a[title] { }


<!-- HTML -->
<a href="" title="적용">  </a>

• 속성 선택자
  • 대괄호로 지정한 속성이 포함된 태그만 특정한 스타일이 적용된다.
  • CSS → 태그 선택자 뒤에 대괄호 ' [ ] ' 로 감싼 속성 지정.
  • HTML → 태그내에서 속성 선택자로 지정된 속성이 포함되어 있다면 적용.

 

/* CSS */
p:active {}

• 가상 클래스 선택자 
• ➡️ 스타일을 적용하는 HTML 요소의 상태나 특정 조건을 지정하는 키워드이다. 마우스 포인트를 올리거나, 클릭된 상태 등 동적인 스타일 지정.  
  • CSS → 선택자 뒤 콜론 ( : ) 뒤 가상 클래스 속성 지정.
  • HTML → 해당 요소 사용 시 자동으로 적

 

✅ 각각 선택자 들의 여러 속성들은 추가로 작성 후 링크할 예정.

 

 

 

 

---

[Reference]

 

의사 클래스 - CSS: Cascading Style Sheets | MDN

 

icon → icons8.com