[CSS] CSS 기초 - 선택자, 캐스케이딩

Date: 2021.10.14

카테고리: HTML/CSS

1. CSS란?

웹 개발에서 스타일링을 담당
프론트 개발자에게 레이아웃과 타이포그래피는 기본 소양
정렬 및 배색에 대한 감각/UX에 대한 고민은 추가로 있으면 좋음
단순해 보이나 규모가 커지면 의미있게 구성하기가 어려움
-> 정해진 Best Practice는 없으나 찾기위해 노력해야 함

2. CSS 스타일

기본 표기법

선택자를 쓰고 중괄호 내에 원하는 속성을 입력

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

주석 표기법

/_ (내용) _/ 사이에 원하는 내용을 입력

/* 스타일 밖에 있는 주석 */
선택자 {
  속성1: 속성값1; /* 스타일 내 모두 가능 */
  속성2: 속성값2;
}

기타 (CSS소스 경량화)

웹 브러우저에게 꼭 필요한 정보만 남긴 형태
CSS경량화 방법 소개
CSS경량화사이트

3. CSS 스타일시트

스타일 규칙을 한눈에 확인하고 수정하기 쉽도록 묶어놓은 것

브라우져 기본스타일 (태그 사용 시 기본적용)

<h1>큰 제목</h1>
<h4>작은 제목</h4>
<o>문단</p>

인라인 스타일 (간단한 스타일 적용)

태그에 style=”속성 : 속성값;” 형태로 적용

<p>그냥 문단</p>
<p style="color : blue;">파란색 문단</p>

내부 스타일 시트 (스타일을 여러 곳에 적용)

head 태그 내 정의 -> style 태그 내 작성

(... head 태그 하단)
<style>
  h1 {
    padding: 10px;
    background-color: #222;
    color: #fff;
  }
</style>

외부 스타일 시트 (스타일 정보를 따로 저장)

.css 파일 별도 작성 => html에 링크 태그 사용

<link rel="stylesheet" href="파일경로">

4. CSS 기본 선택자

a. 전체 선택자 (*) : 주로 기본 스타일 초기화 시 사용
b. 타입 선택자 (태그명) : 해당 되는 태그에 적용
b. class 선택자 (.클래스명) : 해당 되는 클래스에 적용
(여러 곳에 적용 가능, 한 요소에 2개이상 클래스 스타일도 가능)

.classname {
  padding: 10px;
  background-color: #222;
}
``````css li.name {
  padding: 10px;
  background-color: #222;
}
/*class명이 'name'인 li 요소에 적용 */

d. id 선택자(#아이디명) : 해당 되는 아이디에 적용
(클래스와는 달리 단 한 번만 적용 가능)

#idname {
  padding: 10px;
  background-color: #222;
}

<!-- 잘못된 예제 -->
<ul>
  <li id="item">A</li>
  <li id="item">B</li>
  <li id="item">C</li>
  <li id="item">D</li>
</ul>

id	class
`#`	`.`
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙임	스타일의 분류에 사용

e. 그룹 선택자 : 콤마(,)로 같은 스타일 사용 선택자 묶어줌

h1,
#two {
  padding: 10px;
  background-color: #222;
}

5. 캐스케이딩 스타일 시트

CSS의 ‘C’는 Cascading의 줄임말 (우선순위가 계단식 적용)
둘 이상의 스타일의 충돌을 막기 위한 규칙(우선순위, 상속)
※ 아래 설명에서 먼저나온것, 왼쪽이 우선순위가 높음

스타일 우선순위 (중요도, 범위, 순서)
a. 얼마나 중요한가?
사용자 -> 제작자 -> 브라우저 기본

b. 적용범위는 어디까지인가?

적용범위가 좁을수록 우선순위 높음
!important -> 인라인 -> id -> class -> 타입

c. 작성 순서는 어떠한가?

나중에 작성한 스타일이 먼저 것보다 우선함 !important -> 인라인 -> id -> class -> 타입

p {
	color: black; !important;
	/*css에 !important를 적용한 모습*/
}

스타일 상속 (부모 -> 자식)

자식요소에서 별도 스타일 없을 시 부모요소 것 사용 (단, 배경색과 배경이미지는 상속 불가)

6. CSS 예시

전체영역이 아닌 글자부분에만 효과

display를 inline-block으로 설정

//탐라국 입춘국에 대한 CSS 설정
h1 {
  display: inline-block;
  color: white;
  background: blue;
}

김준영