✍️ 기록/HTML CSS

CSS

김물사 2019. 7. 17. 15:01

📌 CSS (Cascading Style Sheets)

- CSS는 "Cascading Style Sheets"의 줄임말로, 웹 문서의 전반적인 스타일을 미리 지정해두는 "스타일시트"

- HTML 문서의 디자인을 담당하며, W3C에서 웹 표준으로 정한 스타일 규칙을 적용할 수 있도록 개선된 기술

 

📍 CSS의 기본 문법

Selector { property: value; }

 

📍 선택자 (Selector)

CSS에서 스타일을 적용할 요소를 지정하는 방법.

 

✅ 태그 선택자 : 태그명으로 선택 (예: h1, p, div)

h1 { font-size: 20px; color: #333; }

 

✅ 아이디 선택자 : # 기호를 사용하여 특정 ID를 가진 요소 선택

#header { background-color: #f5f5f5; }

 

✅ 클래스 선택자 : . 기호를 사용하여 특정 클래스를 가진 요소 선택

.content { font-size: 16px; color: #555; }

 

📍 속성과 값 (Property & Value)

스타일을 지정하는 방식으로, 속성: 값; 형식으로 사용됩니다. 예를 들어, color 속성은 글자 색상을, font-size 속성은 글자 크기를 조정할 수 있습니다.

p { color: blue; font-size: 14px; }

 

📍CSS의 우선순위 (Cascading)

  CSS는 우선순위 규칙에 따라 스타일이 적용됩니다.

  1. 중요도 (!important): 최우선 적용
  2. 인라인 스타일 (style 속성): HTML 요소 내부에 직접 작성된 스타일
  3. ID 선택자 (#id): 특정 요소를 지정하는 스타일
  4. 클래스 선택자 (.class), 속성 선택자, 가상 클래스 등
  5. 태그 선택자 (h1, p 등)
  6. 브라우저 기본 스타일
p {
  color: black; /* 기본값 */
}

.text {
  color: blue; /* 클래스 적용 */
}

#main-text {
  color: red; /* ID 선택자로 덮어씀 */
}

<p class="text" id="main-text">이 문장의 색상은?</p>
/* 결과적으로 ID 선택자 때문에 글자 색상이 빨강(red)으로 적용됨 */

 

📗 우선순위 계산 예시

CSS 규칙을 적용할 때는 특수성 점수를 계산하여 가장 높은 점수를 가진 규칙이 적용됩니다.

선택자특수성 점수설명

#id 100 ID 선택자
.class 10 클래스 선택자
div 1 태그(요소) 선택자
* 0 모든 요소 선택자 (유니버설)
color: red !important (해당 특수성 점수 + 중요도) !important 사용 시 우선 적용

 

✅ 아래와 같은 규칙이 있을 때 

div { color: red; }       /* 특수성 점수 1 */
.box { color: blue; }     /* 특수성 점수 10 */
#header { color: green; } /* 특수성 점수 100 */

✔️ #header 규칙이 적용됩니다. (#header의 점수 100이 가장 높음)

 

✅ !important가 사용된 경우 

div { color: red !important; }       /* 특수성 점수 1, 중요도 1 */
.box { color: blue; }               /* 특수성 점수 10 */
#header { color: green; }           /* 특수성 점수 100 */

 ✔️ div { color: red !important; } 규칙이 적용됩니다. (!important가 우선 적용됨)

 

📍반응형 웹 디자인 (Responsive Web Design)

반응형 웹 디자인을 구현하기 위해 @media 규칙을 사용하여 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.

@media screen and (max-width: 768px) {
  body { background-color: lightgray; }
}

위 코드에서는 화면의 최대 너비가 768px 이하일 경우 body 배경색이 연한 회색으로 변경됩니다.

 

📍 CSS 적용 방식

CSS는 다양한 방식으로 HTML에 적용할 수 있습니다.

  1. 인라인 스타일 (Inline Style)
    •   요소 내부에 직접 스타일을 작성하는 방식
    • 우선순위가 가장 높지만 유지보수에 불리함
    <p style="color: red; font-size: 18px;">인라인 스타일 적용</p>
  2. 내부 스타일 (Internal Style Sheet)
    • HTML 파일의 <head> 태그 안에 <style> 태그를 사용하여 스타일을 적용하는 방식
    <style>
  p { color: blue; }
</style>
  3. 외부 스타일 (External Style Sheet)
    • 별도의 .css 파일을 생성하여 링크하는 방식
    • 가장 많이 사용되는 방식이며 유지보수에 용이
    <link rel="stylesheet" href="styles.css">

 

CSS는 웹 디자인을 구성하는 핵심 기술로, 선택자, 속성, 우선순위 등의 개념을 이해하는 것이 중요합니다. 또한, 반응형 웹 디자인과 최신 CSS 기능(Flexbox, Grid)을 활용하면 더욱 효율적인 스타일링이 가능합니다.

 

반응형