꿈소년의 개발 이야기

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 06 CSS의 기본(1) 본문

Do it 스터디!

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 06 CSS의 기본(1)

꿈소년 2026. 1. 14. 22:40
반응형

DAY 8

🔖 오늘 읽은 범위 :

🔥01/14(수) 진도표 알림
👉🏻공부 내용: 06 CSS의 기본(1)
👉🏻쪽수: 170~193쪽

스타일과 스타일 시트

CSS; cascading style sheets

  • 스타일 : HTML 문서에 글꼴, 색상, 정렬, 각 요소의 배치 방법 같은 겉모습을 결정짓는 것
  • HTML로 웹사이트 내용을 나열하고 → CSS 로는 웹 문서 디자인을 구성한다 ⇒ 웹 표준의 시작.
  • 내용과 스타일의 분리 ⇒ 서로 영향을 미치지 않는다.
  • 다양한 기기에 맞춰서 스타일이 바뀌는 문서 ⇒ 반응형 웹 디자인

스타일 형식

// 기본형태
선택자 { 속성1: 속성값1; 속성2: 속성값2; }
  • 다양한 CSS 속성.
  • 스타일 규칙을 작성하는 방법
    • 세미콜론(;)으로 구분하여 중괄호({}) 안에 나열한다.
    • /* <p> 태그 스타일 적용하기 */ p { text-align: center; color: blue; } /* <p> 태그에 스타일 적용하기 */ p { text-align: center; color: blue; }
  • 스타일 주석 표기
    • /* …. */ 형태.
  • CSS 코드 경량화(minify)
    • CSS 코드를 네트워크에서 내려 받기 때문에 파일 크기가 작은 것이 좋다.
    • 주석이나 줄바꿈, 공백 등을 제거하여 크기를 작게 만든다.
    • 경량화 툴이 여러 종류가 있으니 참고바람.
    • https://www.toptal.com/developers/cssminifier

스타일 시트

  • 스타일 규칙을 여러 개 사용하는데 한군데 묶어 놓은 것.
  • 스타일 시트
    • 브라우저 기본 스타일
    • 웹 브라우저에서 표시할 때 자동 적용되는 스타일.
    • 제작자 스타일
      • 인라인 스타일 
          <p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
      • 간단한 스타일 정보를 적용 대상에 직접 표시하는 것.
      • 내부 스타일 시트웹 문서마다 내부 스타일 시트로 만들면 서버 공간이 늘어나고, 스타일 다운로드 시간이 발생함.
      • <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <!-- Do it! 내부 스타일 시트 작성하기 --> <style> h1 { padding: 10px; background-color: #222; color: #fff; } </style> </head>
      • 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것.
      • 외부 스타일 시트*.css 확장자로 css 폴더에 저장해둠.외부 스타일 시트 → 웹 문서 연결 시, <link> 태그 사용. 
          <link rel="stylesheet" href="외부 스타일 시트 파일 경로">
  <!-- 외부 스타일 연결 -->
  <link rel="stylesheet" href="css/style.css">
      • <!-- 외부 스타일 시트; style.css --> h1 { padding: 10px; background-color: #222; color: #fff; }
      • 외부 스타일 시트 파일에 스타일 작성할 때 <style> 태그 사용하지 않음.
      • 스타일 정보를 따로 저장해 놓은 것. 같은 스타일을 여러 웹 문서에 사용함.

CSS 기본 선택자

전체 요소에 스타일 적용하자 = 전체 선택자

  • Universal selector
  • 스타일을 문서의 모든 요소에 적용할 때 사용함.
  • 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용함.
  • 별표(*) 사용.
  • <style> * { margin: 0; } </style>

태그와 요소의 차이

  • tag? element?
  • 태그(tag) : 태그 자체를 가리키는 것.
  • 요소(element) : 태그를 적용한 것.
  • <!-- <p>, </p> 는 태그 --> <p>제목</p> <!-- 이 한줄 전체는 p요소 -->
  • 태그에 스타일을 적용 ❌, 요소에 스타일 적용 ⭕

특정 요소에 스타일 적용하자 = 타입 선택자

  • type selector
<!-- 모든 p 요소에 스타일 적용하기 -->
<style>
    p {
        font-style: italic; /* 이탤릭체 */
    }
</style>

특정 부분에 스타일을 적용하자 = 클래스 선택자

  • class selector
  • 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때, 특정 부분만 선택해서 스타일을 적용하려는 경우.
  • 클래스 이름을 사용해서 다른 선택자와 구별.
  • 클래스 이름은 접두사 마침표(.)가 클래스 이름 앞에 붙여야 함.
<!-- .클래스명 { 스타일 규칙 } -->
  <style>
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>

<!-- accent bg 적용 -->
<h1 class="accent bg">레드향</h1>
<!-- accent 적용 -->
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>

특정 부분에 스타일을 한 번만 적용하자 = id 선택자

  • id selector
  • 클래스 선택자처럼 웹 문서 특정 부분을 선택해서 스타일 지정할 때 사용함.
  • 마침표 ❌ , # 기호 사용한다는 점.
  • 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면,
  • id 선택자는 문서에서 한 번만 적용할 수 있다는 것. ⇒ 중복 적용 불가.
  • 주로 문서 레이아웃과 관련된 스타일 지정하는 경우.
  • 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용.
<!-- #아이디명 {스타일 규칙} -->
  <style>
    #container {
      width:500px;  /* 너비 */
      margin:10px auto;  /* 바깥 여백 */
      padding:10px;  /* 테두리와 내용 사이 여백 */ 
      border:1px solid #000;  /* 테두리 */
    }    
  </style>

 <!-- container 적용 -->
  <div id="container">
  ...
  </div>

같은 스타일 규칙을 사용하는 요소를 묶어 표현하기

  • 여러 선택자들이 같은 스타일 규칙을 사용하자.
<!-- 선택자1, 선택자2 {스타일 규칙 } -->
h1, p {
    text-align: center;
}

캐스케이딩 스타일 시트

캐스케이딩의 의미

  • 우선 순위가 위에서 아래 = 계단식으로 적용된다는 의미
  • CSS 는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위를 결정한다.
  • 케이스케이딩은 스타일 간의 충돌을 막아주는 중요 개념.

스타일이 충돌하지 않는 2가지 원칙

  1. 스타일 우선 순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선 순위가 결정되고, 그 우선 순위에 따라 위에서 아래로 스타일을 적용한다.
  2. 스타일 속성: 태그의 포함관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.

스타일 우선 순위

  • 얼마나 중요한가?
    • 사용자가 지정한 스타일 >> 제작자 스타일 >> 브라우저 기본 스타일
  • 적용 범위는 어디까지인가?
    • 적용 범위가 좁을수록 = 필요한 요소에만 정확히 적용할 스타일 ⇒ 우선순위가 높아짐.
    • 스타일 규칙에 !important 를 붙이면 우선순위가 높아짐.
    • !import >> 인라인 스타일 >> id 스타일 >> 클래스 스타일 >> 타입 스타일
  • 소스 코드의 작성 순서는 어떠한가?
    • 스타일을 정의한 코드 순서.
    • 나중에 작성한 스타일 >> 먼저 작성한 스타일

스타일 상속

  • 포함하는 태그 = 부모 요소
  • 포함된 태그 = 자식 요소
  • 스타일 상속 = 자식 요소에 스타일을 별도 지정하지 않으면 부모 요소의 스타일 속성이 자식 요소에 전달 됨.
  • 스타일 시트를 효과적으로 만들 수 있음.
  • 배경색과 배경 이미지는 스타일 상속 불가.
  • 스타일 상속만으로 모든 스타일 충돌 해결 불가.
  • 웹 표준에 대해서 알아보는 것도 좋은 것 같다.
  • 스타일 시트도 구조적으로 잘 만들어 두면 요긴하게 사용할 수 있을 것 같다.

🤟소감 3줄 요약

  • 역시나 오늘도 양이 많아서 퇴근하고 와서 하는 게 점점 힘들다 😭
  • 스타일 시트 속성도 다양해서 많이 알아봐야겠다.
저작자표시 비영리 변경금지 (새창열림)

'Do it 스터디!' 카테고리의 다른 글

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(2)  (0) 2026.01.13
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(1)  (0) 2026.01.13
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기(2)  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 03 HTML 기본 문서 만들기  (0) 2026.01.10
'Do it 스터디!' Related Articles more