CSS

유슬기·2022년 11월 10일

프론트엔드강의

프론트엔드

목록 보기

9/64

CSS 개요

기본 문법, 주석

기본 문법

선택자 { 속성: 값; }
- 선택자 : CSS(스타일)를 적용할 대상
- 속성 : CSS(스타일)의 종류 (Property)
- 값 : CSS(스타일)의 값

div {
	color: blue;
	margin: 20px;
}

주석

브라우저가 해석하지 않는다

/*설명 작성*/

선언 방식

내장 방식
- HTML 문서 내 영역에 작성
- 유지보수 측면에서 관리가 어려워 권장하지 않음
```
<head>
	<style>
		div {
			color: red;
			margin: 20px;
		}
	</style>
</head>
```
링크 방식
- link 태그로 외부 CSS 문서를 가져와서 연결하는 방식
```
<link rel="stylesheet" href="./css/main.css">
```
인라인 방식
- 요소의 style 속성에 직접 스타일을 작성하는 방식
- 요소에 직접 입력하므로 선택자 없음
```
<div style="color: red; margin: 20px;"></div>
```
@import 방식
- CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
- 직렬 연결 방식이라 앞서 연결된 CSS 문서(예시에서 main.css)가 모두 해석된 뒤에 @import 로 연결한 CSS 문서(예시에서 box.css)가 연결됨
  → 연결이 지연될 수 있음

선택자

기본 선택자

*: 모든 요소를 선택
- 복합 선택자에서 자주 사용

태그 선택자: 태그 이름으로 요소 선택

div {
	color: red;
}
li {
	color: red;
}

class 선택자: class 속성 값으로 요소 선택

/* class="orange" 일때, */
.orange {
	color: red;
}

id 선택자: id 속성 값으로 요소 선택

/* id="username" 일때, */
#username {
	color: red;
}

복합 선택자

일치 선택자: 선택자 A와 선택자 B를 동시에 만족하는 요소 선택
- 공백 없이 두 선택자를 붙여서 작성
- 태그 선택자가 포함된 경우 태그 선택자는 맨 앞에 작성
```
<span class="orange">오렌지</span>
```
```
span.orange {
	color: red;
}
```

자식 선택자: 선택자 A의 자식 요소인 선택자 B 선택

두 선택자 사이에 > 기호 작성

<div>
  <ul>
    <li>사과</li>
    <li class="orange">오렌지</li> <!-- 이 요소를 선택함 -->
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orange">오렌지</span>
</div>

ul > .orange {
	color: red;
}

하위(후손) 선택자: 선택자 A의 하위(후손) 요소인 선택자 B 선택

두 선택자 사이에 띄어쓰기(공백) 작성
선택자 A 하위의 모든 선택자 B 요소 선택됨

<div>
  <ul>
    <li>사과</li>
    <li class="orange">오렌지</li> <!-- 이 요소를 선택함 -->
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orange">오렌지</span> <!-- 이 요소를 선택함 -->
</div>
<span class="orange">오렌지</span> <!-- 이 요소는 선택안함 -->

div .orange {
	color: red;
}

인접 형제 선택자: 선택자 A의 다음 형제 요소 선택자 B 하나를 선택

두 선택자 사이에 + 작성

<ul>
	<li>딸기</li>
	<li>수박</li>
  <li class="orange">오렌지</li>
	<li>망고</li> <!-- 이 요소를 선택함 -->
	<li>사과</li>
</ul>

.orange + li {
	color: red;
}

일반 형제 선택자: 선택자 A의 다음 형제 요소 선택자 B 모두를 선택

두 선택자 사이에 ~ 작성

<ul>
	<li>딸기</li>
	<li>수박</li>
  <li class="orange">오렌지</li>
	<li>망고</li> <!-- 이 요소를 선택함 -->
	<li>사과</li> <!-- 이 요소를 선택함 -->
</ul>

.orange ~ li {
	color: red;
}

가상 클래스 선택자

hover: 선택자 A 요소에 마우스 커서가 올라가 있는 동안 선택(동작)
- 선택자 뒤에 :hover 입력 (공백 X)
```
 a:hover {
	color: red;
}
```
active: 선택자 A 요소에 마우스를 클릭하고 있는 동안 선택(동작)
- 선택자 뒤에 :active 입력 (공백 X)
```
 a:active {
	color: red;
}
```
focus: 선택자 A 요소가 포커스되면 선택(동작)
- 선택자 뒤에 :focus 입력 (공백 X)
- 가능한 요소에만 적용 됨 (ex: input, select)
- 불가능한 요소에 focus 적용 시키려면 해당 요소에 tabindex=”-1” 속성 추가
```
 input:focus {
	color: orange;
}
```

first-child

선택자 A이 형제 요소 중 첫째라면 선택

<div class="fruits">
	<span>딸기</span> <!-- 이 요소를 선택함 -->
	<span>수박</span>
  <div>오렌지</div>
	<p>망고</p>
	<h3>사과</h3>
</div>

/* class="fruits"의 후손 요소 중 첫째 span 요소를 선택 */
.fruits span:first-child {
	color: red;
}

last-child

선택자 A이 형제 요소 중 막내라면 선택

<div class="fruits">
	<span>딸기</span>
	<span>수박</span> <!-- 이 요소를 선택함 -->
  <div>오렌지</div>
	<p>망고</p>
	<h3>사과</h3>
</div>

/* class="fruits"의 후손 요소 중 막내 span 요소를 선택 */
.fruits span:last-child {
	color: red;
}

nth-child(n)

선택자 A이 형제 요소 중 (n)째라면 선택
괄호 내 n은 연산 가능
- 2n → 짝수번째
- 2n + 1 → 홀수번째
- n + 2 → 2번째 요소부터 선택

<div class="fruits">
	<span>딸기</span>
	<span>수박</span> <!-- 이 요소를 선택함 -->
  <div>오렌지</div>
	<p>망고</p> <!-- 이 요소를 선택함 -->
	<h3>사과</h3>
</div>

/* class="fruits"의 모든 후손 요소 중 2n번째(짝수번) 형제 요소를 선택 */
.fruits *:nth-child(2n) {
	color: red;
}

not

선택자 B를 제외한 선택자 A 선택

<div class="fruits">
	<span>딸기</span>
	<span>수박</span>
  <div>오렌지</div> <!-- 이 요소를 선택함 -->
	<p>망고</p> <!-- 이 요소를 선택함 -->
	<h3>사과</h3> <!-- 이 요소를 선택함 -->
</div>

/* class="fruits"의 후손 요소 중 span 요소를 제외한 모든(*) 요소를 선택 */
.fruits *:not(span) {
	color: red;
}

가상 요소 선택자

가상 요소 선택자는 내용(content)을 삽입하기 때문에 스타일(CSS)에 content 속성을 필수로 입력

before

선택자 A 요소의 내부 앞에 내용(content)을 삽입
콜론 두개를 붙여 작성한다 (::before)

<div class="box">
	<!-- 이 위치에 삽입된다 -->
	Content!
</div>

.box::before {
	content: "앞!";
}

after

선택자 A 요소의 내부 뒤에 내용(content)을 삽입
콜론 두개를 붙여 작성한다 (::after)

<div class="box">
	Content!
	<!-- 이 위치에 삽입된다 -->
</div>

.box::before {
	content: "뒤!";
}

속성 선택자

[ABC]

속성 ABC를 포함한 요소 선택

<input type="text value="HEROPY" />
<input type="password value="1234" />
<input type="text value="ABCD" disabled /> <!-- 이 요소 선택 -->

[disabled] {
	color: red;
}

[ABC=”XYZ”]

속성 ABC를 포함 && 값이 XYZ인 요소 선택

<input type="text value="HEROPY" />
<input type="password value="1234" /> <!-- 이 요소 선택 -->
<input type="text value="ABCD" disabled />

[type="password"] {
	color: red;
}

스타일 상속

상속이란 부모(상위)요소에 적용된 값을 자식(하위)요소가 물려받는 것
- 부모, 상위 요소에 적용된 스타일이 자식, 하위 요소에 상속되어 적용됨
- 상속이 되는 속성
  - font-family
  - font-size
  - font-weight
  - line-height
  - visibility
  - opacity
  - color
  - line-height
  - text-align
  - white-space
  - list-style
- 상속이 되지 않는 속성
  - margin
  - padding
  - border
  - box-sizing
  - display
  - background
  - vertical-align
  - text-ecoration
  - top/right/bottom/left
  - position
  - overflow
  - width/height
- 강제 상속 : 속성 값에 inherit을 써주면 상속이 되지 않는 속성도 강제로 상속 받을 수 있음

선택자 우선순위

우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
1. 점수 매기기: 점수가 높은 선언이 우선함
  - !important = 9999999999(무한대)점
  - 인라인 선언 = 1000점
  - id 선택자 = 100점
  - class 선택자 = 10점
  - 태그 선택자 = 1점
  - 전체 선택자 = 0점
  - 상속 = 점수 계산 X
2. 선언 순서: 점수가 같다면 가장 마지막에 해석된(마지막에 작성된 코드) 선언이 우선함
```
<div 
	id="color_yellow" 
	class="color_green" 
	style="color: orange;"> 
	Hello world!
</div>
```
```
div {color: red !important;} /* !important=9999999999(무한대)점 */
#color_yellow {color: yellow;} /* id 선택자=100점 */
.color_green {color: green;} /* class 선택자=10점 */
div {color: blue;} /* 태그 선택자=1점 */
body {color: violet;} /* 상속=점수 계산 안함 */
```
- 점수 계산 연습문제
  1. .list li.item {color: red;}
    1. .list → class 선택자 10점
    2. li → 태그 선택자 1점
    3. .item → class 선택자 10점
    4. 총 21점
  2. .list li:hover {color: red;}
    1. .list → class 선택자 10점
    2. li → 태그 선택자 1점
    3. :hover → 가상 class 선택자 10점
    4. 총 21점
  3. .box::before {content: “Good”; color: red;}
    1. .box → class 선택자 10점
    2. ::before → 가상 요소 선택자 1점 (태그 선택자와 동일)
    3. 총 11점
  4. #submit span {color: red;}
    1. #submit → id 선택자 100점
    2. span → 태그 선택자 1점
    3. 총 101점
  5. header .menu li:nth-child(2) {color: red;}
    1. header → 태그 선택자 1점
    2. .menu → class 선택자 10점
    3. li → 태그 선택자 1점
    4. :nth-child → 가상 class 선택자 10점
    5. 총 22점
  6. h1 {color: red;}
    1. h1 → 태그 선택자 1점
    2. 총 1점
  7. :not(.box) {color: red;}
    1. :not → 가상 class 선택자 10점
    2. 총 10점

CSS 속성

개요

HTML 속성 = Attributes

CSS 속성 = Properties

JS 속성 = Properties

각 CSS 속성을 사용하면 화면에 어떻게 보일지 머릿속으로 떠올리는게 중요!
CSS 로 어떤걸 제어할 수 있는지?
- 박스 모델, 글꼴, 문자, 배경, 배치, 플렉스(정렬), 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터

* 기본값 : 따로 설정하지 않아도 기본적으로 들어가있는 값

너비

width, height : 요소의 가로/세로 너비
- 기본값 : auto(브라우저가 너비를 계산)
  - span과 같은 인라인 요소는 width, height 모두 포함한 콘텐츠 크기만큼 자동으로 줄어듬
  - div와 같은 블록 요소는 width는 부모 요소의 크기만큼 자동으로 늘어나고, height는 포함한 콘텐츠 크기만큼 자동으로 줄어듬
- 단위 : px, em, vw 등 단위로 지정
  - ! 여기서 인라인 요소는 w, h 값을 설정할 수 없는 점 다시한번 기억하기!
max-width, max-height
- 기본값 : none(최대 너비 제한 없음)
- 단위 : px, em, vw 등 단위로 지정
min-width, min-height
- 기본값 : 0(최소 너비 제한 없음)
- 단위 : px, em, vw 등 단위로 지정

CSS 단위

px : 픽셀 → 가장 많이 사용하는 단위
% : 상대적 백분율(1~100%)
em : 요소의 글꼴 크기
rem : 루트 요소(html)의 글꼴 크기
- 루트 요소 : 최상위 요소
vw : 뷰포트 가로 너비의 백분율
vh : 뷰포트 세로 너비의 백분율

* em 사용 시 폰트 사이즈가 바뀌면 사이즈도 바뀔 수 있어 관리 필요함

margin(외부 여백)

요소의 외부 여백(공간)을 지정하는 속성, 음수 값 설정 가능

기본값 : 0(외부 여백 없음)
auto : 브라우저가 여백을 계산
단위 : px, em, vw 등 단위로 지정
~~% : 부모 요소의 가로 너비에 대한 비율로 지정~~ → 잘 사용하지 않음
단축 속성(시계방향)
- margin: 10px;
  - margin: top right bottom left ;
- margin: 10px 20px;
  - margin: top bottom left right ;
- margin: 10px 20px 30px;
  - margin: top left right bottom ;
- margin: 10px 20px 30px 40px
  - margin: top right bottom left ;
개별 속성 : margin-top/right/bottom/left로 방향마다 각각 설정도 가능함

padding(내부 여백)

요소의 내부 여백(공간)을 지정하는 속성(요소 내부에 여백이 생기기 때문에 요소 자체의 크기가 커짐)

기본값 : 0(내부 여백 없음)
단위 : px, em, vw 등 단위로 지정
% : 부모 요소의 가로 너비에 대한 비율로 지정
단축 속성(시계방향)
- padding: 10px;
  - padding: top right bottom left ;
- padding: 10px 20px;
  - padding: top bottom left right ;
- padding: 10px 20px 30px;
  - padding: top left right bottom ;
- padding: 10px 20px 30px 40px
  - padding: top right bottom left ;
개별 속성 : padding-top/right/bottom/left로 방향마다 각각 설정도 가능함

border(테두리 선)

요소의 테두리 선을 지정하는 단축 속성

border: 선-두께(border-width) 선-종류(border-style) 선-색상(border-color)

방향마다 설정 가능함 (ex: border-left: 1px solid red;)

border-width
- 기본 값 : medium
- 단위 : px, em, % 등 단위로 지정
- thin, thick 등 키워드로도 지정 가능하나, 권장하지 않음
border-style
- 기본 값 : none(선 없음)
- solid(실선, 일반 선) ———
- dashed(파선) - - - -
- 이외 dotted, double 등의 스타일이 있음
border-color
- 기본 값 : black
- 색상 : 선의 색상을 직접 선택 (#rgb, 색상키워드 등)
- transparent : 투명

색상 표현

색을 사용하는 모든 속성에 적용 가능한 색상 표현

색상 이름 : 브라우저에서 제공하는 색상 이름 (ex: red, tomato, royalblue 등)
Hex 색상코드 : 16진수 색상 (ex: #000, #FFFFFF 등)
RGB : 빛의 삼원색 (ex: rgb(255, 255, 255))
RGBA : 빛의 삼원색 + 투명도 (ex: rgba(0, 0, 0, 0.5)
- 투명도: 0~1 사이로 입력, 0이 투명
HSL : 색상, 채도, 명도 (ex: hsl(120, 100%, 50%))
HSLA : 색상, 채도, 명도 + 투명도 (ex: hsl(120, 100%, 50%, 0.3))

border-radius(모서리 둥글게)

요소의 모서리를 둥글게 깎음

기본값: 0 (둥글게 없음)
단위: px, em, vw 등 단위로 지정
- 모서리의 반지름 크기
원하는 모서리만 둥글게 깎을 수 있음 (왼쪽 상단부터 시계방향) border-radius: 0 0 10px 0; → 우측 하단 모서리 10px 만큼 깎임

box-sizing(크기 계산)

div {
width: 100px;
height: 100px;
background-color: orange;
border: 4px solid red;
padding: 20px;
}
.item1 {
box-sizing: content-box;
}
.item2 {
box-sizing: border-box;
}

box-sizing: content-box (기본값)

box-sizing: border-box

padding, border 속성 적용 시 요소의 크기가 커질 수 있는데, 원하는 요소의 크기로 설정하려면 padding과 border의 사이즈까지 고려해서 설정해야 함
→ 수동 계산은 비효율이므로 box-sizing: border-box 속성을 이용한다.

overflow(넘침 제어)

visible(기본값) : 내용 넘침
hidden : (자식요소가 부모요소보다 커서) 넘친 부분을 잘라냄
scroll : 넘친 부분을 스크롤로 보여줌, 넘친 부분이 없어도 x, y축 모두 무조건 생성
auto : 넘친 부분이 있을 경우에만 자동으로 스크롤 생성

display(출력 특성)

요소의 화면 출력(보여짐)특성

각 요소에 이미 지정되어 있는 값
- block : 상자(레이아웃) 요소
- inline : 글자 요소
- inline-block : 글자 + 상자 요소
  - 기본적으로 인라인 속성을 따르나, width와 height 값을 가질 수 있음
따로 지정해서 사용하는 값
- flex : 플렉스 박스 (1차원 레이아웃)
- grid : 그리드 (2차원 레이아웃)
- none : 보여짐 특성 없음(화면에서 사라짐)

opacity(투명도)

0~1 사이의 값으로 지정
- 1 : 불투명
- 0 : 투명

글꼴

font-style
- normal(기본 값): 기울기 없음
- italic: 이텔릭체(기울기 있음)
font-weight (글자의 두께, 가중치)
- normal(기본 값): 기본 두께(400)
- bold, 700: 두껍게
- 100~900까지 100단위의 숫자 9개, normal과 bold 이외의 두께
font-size
- 16px(기본 값): 기본 크기
- 단위: px, em, rem 등 단위로 지정
line-height (한 줄의 높이, 행간과 유사)
- normal(기본 값): 브라우저의 기본 정의를 사용
- 숫자: 요소의 글꼴 크기의 배수로 지정 (ex: line-height: 2; → 해당 요소의 폰트 사이즈 2배) ⇒ 권장!
- 단위: px, em, rem 등 단위로 지정
font-family

font-family: 글꼴1, "글꼴2", ... 글꼴계열;
- 앞에 써져있는 글꼴부터 찾아서 적용. 적용 불가 시 다음 글꼴 확인
- 띄어쓰기나 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 함
- 글꼴계열은 필수로 작성
  - serif: 바탕체 계열
  - sans-serif: 고딕체 계열 → 주로 사용
  - monospace 고정너비(가로폭이 동등) 글꼴 계열
  - cursive: 필기체 계열
  - fantasy: 장식 글꼴 계열

유슬기

아무것도 모르는 코린이

이전 포스트

HTML

다음 포스트

CSS