CSS 기본

HTML은 웹 문서의 내용을 담당 / CSS는 웹 문서의 디자인을 담당
CSS을 사용하면 반응형 웹 디자인을 적용 가능함

기본형: 선택자 {속성1: 속성값1; 속성2: 속성값2; }

p {
  text-align: center; /* 텍스트 정렬 중앙 */
  color: blue;
}

스타일 시트

웹 문서 안에는 스타일 규칙을 여러 개 사용함
이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 묶어 놓은 것을 스타일 시트라고 함

스타일 시트
- 브라우저 기본 스타일 : 웹 브라우저에 기본으로 생성
- 사용자 스타일 : 사이트 제작자가 만듦
  - 인라인 스타일 : 스타일 시트 사용X 스타일을 적용할 대상에 직접 표시
    <p style="color": blue;>인라인 스타일 예시입니다.</p>
  - 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리
    /* <h1> 태그를 사용한 부분에 배경과 글자색을 지정하는 예시 */ ···(생략)··· <style> h1 { padding: 10px; background-color: #222; color: #fff; } </style> ···(생략)··· <h1>예시입니다</h1>
  - 외부 스타일 시트 : 따로 저장해 놓은 스타일 정보 *.css라는 파일 확장자 사용
    - 기본형 <link rel=”stylesheet” href=”외부 스타일 시트 파일 경로”>

CSS 기본 선택자

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

전체 선택자(universal selector)는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용

기본형: * { 속성: 값; ……… }

/* 전체 선택자를 통해 여백을 없앰 */
<style>
  * {
    margin: 0;
  }
</style>

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

타입 선택자(type selector)는 특정 태그를 사용한 모든 요소에 스타일을 적용

기본형: 태그명 { 스타일 규칙 }

  * 모든 p 요소에 스타일을 적용함 */
···(생략)···
<style>
  p {
    font-style: italic; /* 이탤릭체 */
  }
</style>
···(생략)···
<p>안녕하세요</p>
<p>예시입니다</p>

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

타입 선택자는 그 태그를 사용한 모든 요소에 스타일을 적용이 가능함
그런데 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때 클래스 선택자(class selector)를 사용함
클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하므로 클래스 이름 앞에 마침표(.)는 필수임

기본형: .클래스명 { 스타일 규칙 }

  ···(생략)···
  <style>
    p {
      font-style: italic; /* 이탤릭체 */
    }
    .accent {
      border: 1px solid #000; /* 테두리 */
      padding: 5px;           /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color: #ddd; /* 배경색 */
    }
  </style>
  ···(생략)···
  <h1 class="accent bg">귤</h1>
  <p>껍질엔 주황 빛이 돌아 <span class="accent">귤</span>이라 불림.</p>

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

id 선택자(id selector)도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용
마침표(.) 대신 # 기호를 사용, 웹 요소에 적용할 때는 id=”아이디명”처럼 사용함
클래스 선택자는 문서에서 여러 번 적용 가능 / id 선택자는 문서에서 한 번만 적용 가능

기본형 : #아이디명 { 스타일 규칙 }

  ···(생략)···
  <style>
    #container {
      width: 500px;             /* 너비 */
      margin: 10px auto;        /* 중앙 배치 */
      padding: 10px;            /* 테두리와 내용 사이 여백 */
      border: 1px solid #000;   /* 테두리 굵기와 색깔 */
    }
  </style>
  ···(생략)···
  <div id="container">
    <h1>귤</h1>
  ···(생략)···

같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

여러 선택자에서 같은 스타일 규칙을 사용할 때 쉼표(,)로 구분해 여러 선택자를 나열 후 스타일 규칙을 한 번만 정의함

기본형: 선택자1, 선택자2 { 스타일 규칙 }

  /*사용하기 전 */
  h1 {
    text-align: center; /* 중앙 정렬 */
  }
  p {
    text-align: center; /* 중앙 정렬 */
  }

  /* 사용 후 */
  h1, p {
    text-align: center; /* 중앙 정렬 */
  }

캐스케이딩 스타일 시트

캐스케이딩 의미

CSS에서 ‘C’는 케스케이딩(cascading)의 줄임말 / 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용 됨
CSS는 우선순위가 있는 스타일 시트. CSS는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정

스타일이 충돌하지 않게 하는 방법

스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위 결정 / 우선순위에 따라 위에서 아래로 스타일 적용
- 중요도
  1. 사용자(user) 스타일
  2. 제작자(author) 스타일
  3. 브라우저(browser) 기본 스타일
중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있음
- 적용 범위
  1. !important: 어떤 스타일 보다 우선 적용
  2. 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용
  3. id 스타일: 지정한 부분에만 적용되는 스타일 / 한 문서에 한 번만 가능(선택자 이름 앞에 # 기호 사용)
  4. 클래스 스타일: 지정한 부분에만 적용되는 스타일 / 한 문서에 여러 번 적용 가능(선택자 이름 앞에 마침표(.)기호 사용)
  5. 타입 스타일: 웹 문서에서 사용한 특정 태그에 스타일을 똑같이 적용
- 소스 작성 순서: 소스 작성 순서는 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀
스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있음. 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 함.
스타일 시트에서 자식 요소를 별도로 스타일 지정하지 않으면 부모 요소의 스타일 속성들이 자동으로 자식 요소로 전달됨. 이것을 스타일 상속이라고 함.
예를 들어 문서 구조의 <body> 태그는 웹 문서에서 사용한 모든 태그의 부모 요소임. <body> 태그 스타일에 글자색이나 글꼴을 지정하면 그 스타일은 웹 문서 전체에 적용 가능함.(부모 요소의 스타일이 자식 요소에게 그대로 상속되므로)

Algoruu's box

Search Results: