✅ Background
배경 스타일링 CSS 속성 입니다.
-
background-color : 배경색
-
background-image : 배경 이미지 | 작성 방법 :
url(“이미지주소”)절대경로, 상대경로, 웹주소
- background-repeat : 배경 이미지 반복 여부
| 속성값 | 설명 |
|---|---|
| no-repeat | 반복하지 않음 |
| repeat | 반복함 |
| repeat-x, repeat-y | 가로반복, 세로반복 |
- background-position : 배경 이미지의 위치 지정
기본 키워드 : top, bottom, left, right, center
✅ Font
폰트에 관련된 CSS 속성 입니다.
1️⃣ font-size (폰트 사이즈를 정하는 속성)
| 단위 | 설명 |
|---|---|
| px | 고정값, 절대 단위 |
| em | 가변 크기(반응형 웹), 상대 단위, 상위 요소의 폰트 사이즈를 상속받음 |
| 브라우저 디폴트 1em == 16px | |
| rem | r은 root, 즉 최상위 요소를font-size 속성 값 의미 |
2️⃣ font-style (폰트 스타일을 정하는 속성)
| 속성값 | 설명 |
|---|---|
| normal | 보통 모양입니다. |
| italic | 기울임꼴입니다. |
| oblique | 기울임꼴입니다. |
| initial | 기본값으로 설정합니다. |
| inherit | 부모 요소의 속성값을 상속받습니다. |
3️⃣ font-weight (폰트의 굵기를 정하는 속성)
| 속성값 | 설명 |
|---|---|
| normal | 보통 굵기이다. 숫자 400과 같다. |
| bold | 굵은 굵기이다. 숫자 700과 같다. |
| bolder | 상속된 값보다 굵은 굵기다. |
| lighter | 상속된 값보다 얇은 굵기이다. |
| number | 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| initial | 기본값으로 설정한다. |
| inherit | 부모 요소의 값을 상속받는다. |
✅ text-align
텍스트 가로 정렬을 위해 사용하는 속성 입니다.
| 속성값 | 설명 |
|---|---|
| left | 디폴트값) 왼쪽 정렬 |
| right | 오른쪽 정렬 |
| center | 가운데 정렬 |
| justify | 양쪽 정렬(한글은 잘 작동하지 않음) |
| start, end |
✅ Box model
HTML의 모든 요소는 box로 표현됩니다.
- content : width, height 속성으로 크기 조절
- width, height 속성은 자식 요소에게 상속되지 않음
- border : 테두리
- padding : border 내부의 여백 (content 주위를 둘러싸는 여백)
- margin : border 외부의 여백(요소와 요소 사이의 여백)
1️⃣ box-sizing
이 값에 따라 화면에 표시하는 방식이 달라집니다.
| 속성값 | 설명 |
|---|---|
| content-box(default) | 오직 content의 크기만 width, height로 지정 |
| 총 width(height) content 크기(width, height 속성으로 준 값) + padding + border | |
| border-box | padding, border를 포함하여 크기 지정 |
| 총 width(height) = width, height 속성으로 준 값(content, padding, border가 다 포함되어있음) |
✅ Border
테두리 스타일을 지정하는 속성입니다.
1️⃣ border-style
| 속성값 | 설명 |
|---|---|
| none | hidden 키워드와 마찬가지로 테두리를 표시하지 않습니다.주변 칸이 테두리를 가진다면 테두리를 그립니다. |
| hidden | none 키워드와 마찬가지로 테두리를 표시하지 않습니다. 주변 칸이 테두리를 가지더라도 그리지 않습니다. |
| dotted | 테두리를 둥근 점 여러개로 그립니다.(점의 반지름은 해당 면 border-width의 절반) |
| dashed | 테두리를 직사각형 여러개로 그립니다. |
| solid | 테두리를 하나의 직선으로 그립니다. |
| double | 테두리를 두 개의 평행한 직선으로 그립니다. |
| groove | 테두리가 파인 것처럼 그립니다.ridge의 반대 |
| ridge | 테두리가 튀어나온 것처럼 그립니다. groove의 반대 |
| inset | 요소가 파인 것처럼 테두리를 그립니다.outset의 반대 |
| outset | 요소가 튀어나온 것처럼 그립니다. inset의 반대 |
2️⃣ border-width
선의 굵기를 설정하는 속성 입니다.
사용방법
1. 수치 직접 지정하기(px, pt, cm, em …)
2. 미리 지정된 이름 사용하기 (thin, medium, thick)
3️⃣ border-color
모든 면의 테두리 색상을 설정하는 속성 입니다.
문법
border-color: red;4️⃣ border-radius
모서리를 둥글게 만듭니다.
문법
border-radius: 10px;💡 border의 shorthand
border의 shorthand를 주로 사용합니다.
사용방법
- 순서대로 border-width -> border-style -> border-color
예) border: 10px solid red;
✅ margin
boder 외부의 여백 (box model 이미지 참고)
- 상하좌우 하나에만 지정하여 줄 수 있다.
| 속성 | 설명 |
|---|---|
| margin-top | 상단 마진 |
| margin-bottom | 하단 마진 |
| margin-left | 왼쪽 마진 |
| margin-right | 오른쪽 마진 |
- margin 속성에 들어가는 값
- 수치(length) : px, em, rem, pt, cm …
- 기본값은 0
- 양수, 음수 모두 사용 가능
- 퍼센트(%) : 감싸고 있는 컨테이너(부모 컨테이너)의 width 대비
- auto : 브라우저가 계산한 값 자동 적용 (대부분 균등하게 분배)
✅ padding
content를 둘러싸는 여백
- 상하좌우 하나에만 지정하여 줄 수 있다.
| 속성 | 설명 |
|---|---|
| padding-top | 상단 패딩 |
| padding-bottom | 하단 패딩 |
| padding-left | 왼쪽 패딩 |
| padding-right | 오른쪽 패딩 |
- padding 속성에 들어가는 값
- 수치(length) - 양수만 가능함
- 퍼센트(%)
💡 margin, padding의 shorthand
문법
margin: 10px 400px 10px 400px;
padding: 10px 400px 10px 400px;
/* 순서대로 top right bottom left; */✅ Selector(선택자)
1️⃣ Selector란?
어떤 HTML 요소에 스타일을 입힐지 지정하기 위해 사용됩니다.
하나의 HTML 파일에서 Selector에 해당하는 모든 요소에 CSS를 적용할 수 있습니다.
Selector {
property1 : value1;
property2 : value2;
}2️⃣ 기본 선택자
1️⃣ Type Selector(Tag 선택자, 요소(Element) 선택자, 유형 선택자)
HTML 요소 이름 기재
어떤 HTML 요소에 스타일을 적용할지 지정
문법
a {
color: red;
}
span {
background-color: DodgerBlue;
color: #ffffff;
}2️⃣ Universal Selector (전체 선택자)
*을 사용하여 기재한다.- HTML 전체에 적용되는 스타일에 사용합니다.
- 다른 요소에 상속시켜 사용가능합니다.
예) div > *
문법
* {
color: red;
}3️⃣ Group Selector (그룹 선택자)
,을 사용하여 기재한다.- 여러개를 동시에 선택해서 동일한 스타일을 적용하고 싶을 때 사용합니다.
- CSS Rule의 중복을 피할 수 있고, 코드의 양을 줄일 수 있습니다.
문법
span, p {
color: red;
}3️⃣ id & class Selector
가장 많이 사용하는 선택자 입니다.
숫자로 시작할 수 없습니다.
1️⃣ ID Selector
- id라는 HTML 속성(Attribute)에 따라 요소를 선택합니다.
- id는 문서내에 중복없이 단 하나여야 합니다.
문법
#id {
color: red;
}2️⃣ Class Selector
- class라는 HTML 속성(Attribute)에 따라 요소를 선택합니다.
- class는 중복 가능합니다.
- 공백(space)으로 구분해서 여러개의 class를 줄 수 있습니다.
문법
.class-name {
color: red;
}3️⃣ id 와 class의 네이밍 규칙(naming convention)
- id : camelCase (Javascript 표준)
- class : kebab-case (CSS 표준)
3️⃣ Attribute Selector
HTML의 attribute 값으로 특정 요소를 선택할 수 있습니다.
많이 사용하지는 않지만 종종 사용됩니다.
1️⃣ [attr]
- 해당 attr을 갖고있는 요소를 선택합니다.
예) a[target] : <a> 태그 중 target 속성을 갖고있는 요소만 선택
2️⃣ [attr=value]
- attr 의 값이 특정 value 인 요소 선택
예) input[type=”submit”] : <input> 태그 중 type 속성의 값이 submit인 요소만 선택
3️⃣ [attr~=value]
- 존재 여부나 그 값에 따라 요소를 선택
4️⃣ [attr^=value]
- ^(캐럿) : value로 시작하는 요소 선택 (prefix)
5️⃣ [attr$=value]
- $(달러) : value로 끝나는 요소 선택(postfix)
6️⃣ [attr*=value]
- *(star) : value를 적어도 하나포함하고 있는 요소 선택
✅ 결합 선택자(상속, 형제)
1️⃣ 상속
- 자손 결합자 (공백)
- 하위에 있는 태그, 즉 자식 태그들로 범위를 좁혀서 선택
- 자식 결합자 (>)
- 바로 아래 자식 태그만 좁혀서 선택
div p 는 div 안에 있는 모든 p를 선택하여 pink color가 입혀진 모습입니다.
div > p 는 div 안에 있는 직속 자식 p만 선택하여 coral color가 입혀진 모습입니다.
2️⃣ 형제
- 일반 형제 결합자 (~)
- 내 뒤에 있는 형제 선택
- 형제 = 같은 레벨
예) span ~ p : span 뒤에 있는 p
div와 같은 레벨에 있는 형제. 즉, p 태그만 선택하여 색상이 입혀진 모습입니다.
- 인접 형제 결합자 (+)
- 바로 뒤에 있는 형제만 선택
예) span + p : span 바로 뒤의 p만 선택- 형제를 선택할때는 ‘순서'가 중요합니다.
div 바로 뒤에 있는 형제들만 yellowgreen color로 입혀진 모습입니다.
✅ 가상 클래스 선택자
사용자의 동작에 따라 변경 되었을 때, 그에 따라 스타일을 변경할 수 있게 해주는 선택자입니다.
| 선택자 | 설명 |
|---|---|
| a:link | 아직 방문한 적이 없는 링크 |
| a:visited | 방문한적이 있는 링크 |
| :hover | 마우스를 올렸을 때 |
| :active | 마우스를 눌러서 활성화되었을 때. 즉, 마우스를 ‘누르는' 순간. 클릭하려고 (아직)누르기만 한 상태 |
| :focus | 키보드의 tab키로 특정 요소가 포커싱되었을 때 or input을 입력하기 위해서 클릭했을 때 |
| :disabled, :enabled, :checked | input에서 주로 사용 |
| :enabled | 활성화된 (일반적인, default) input |
| :checked | checkbox, radio 등에서 사용자가 선택한 요소 |
✅ 가상 요소 선택자
실제로 존재하지 않는 가상의 요소를 추가해서 스타일을 적용합니다.
문법
selector::가상_요소_선택자 { }| 가상요소 선택자 | 설명 |
|---|---|
| ::before, ::after | 앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용 |
| ::first-letter | 첫번째 글자 |
| ::first-line | (브라우저에서 보이는 기준으로) 첫번째 라인 |
| ::selection | 마우스로 드래그해서 선택한 영역 |
✅ 상속과 우선 순위
1️⃣ 상속
부모 요소에 적용되는 스타일은 자식 요소로 상속됩니다.
예) body에 font를 적용하면 default로 전체 요소에 적용됩니다. 대부분의 요소가 기본적으로 상속되지만, 일부 속성은 자식에게 상속되지 않습니다. (예 - 배경 색, 배경 이미지, margin, padding 등)
2️⃣ 우선 순위
- 선언된 위치 : 브라우저는 HTML/CSS 코드를 위에서 아래로 해석합니다.
- 예) 브라우저 기본 스타일 < 외부 스타일 시트 < 내부 스타일 시트 < inline 스타일
-
코드 위치 : 제일 마지막에 선언된 코드(CSS rule)이 적용됩니다.
-
Specificity(명시도) : 적용 범위가 더 구체적일수록 우선적으로 적용된다.
- 단순 tag로 지정된 스타일 < id/class/attribute 등 직접 지정한 스타일 id는 class보다 우 선입니다.
✅ 레이아웃
1️⃣ display
inline요소, block 요소로 변경할 수 있습니다.
속성값
-
inline
- 영역의 크기가 딱 컨텐츠 크기로 정해짐
- width, height 지정 불가능
- margin, padding의 top, bottom을 지정할 수 없음. 양 옆(left, right)만 가능
- 여러 요소를 추가하면 가로방향으로 추가됩니다.
예) <span>, <a>, <img>
-
block
- 영역의 크기를 width, height로 지정할 수 있음
- width를 지정하지 않으면 가로줄 전체 크기를 차지 함
- 여러 요소를 추가하면 세로 방향으로 추가됩니다.
예) <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>
-
inline-block
- width, height, margin, padding 지정 가능 (block)
- 여러 요소를 추가하면 가로방향으로 추가됩니다. (inline)
예) input
-
none
- 요소를 눈에 보이지않게 없앨 수 있음
- 개발자도구에서 보면, 코드상으로는 존재하지만 브라우저에 보이지 않습니다.
- 참고) visibility: hidden; 으로도 요소를 안보이게 할 수 있습니다.
차이점 : 요소의 자리는 그대로 차지함. 즉, 레이아웃은 남아있음
2️⃣ float
특정 요소를 뜨게 만들어, 별도의 레이어처럼 배치가 가능합니다.
| 속성값 | 설명 |
|---|---|
| left | (부모 요소의) 왼쪽에 뜨도록 |
| right | (부모 요소의) 오른쪽에 뜨도록 |
| none | 디폴트값) 정렬하지 않는다. |
| inherit | 부모의 float 값을 상속받음 |
3️⃣ position
| 속성값 | 설명 |
|---|---|
| static | 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. |
| relative | 기준을 잡습니다.(absolute와 함께 사용됩니다.) |
| absolute | 요소를 일반적인 문서 흐름에서 제거합니다.(가장 가까운 relative로 기준을 잡은 요소로 배치됩니다.) |
| sticky | 스크롤 하여도 정해놓은 위치에 고정되어 따라 옵니다. |
| fixed | 화면 위치에 고정됩니다. |
4️⃣ z-index
여러 요소가 겹칠 때, 어떤 요소가 제일 위로 올지 정하는 속성 입니다.(z축)
사용방법
1. z-index는 position이 지정된 요소에만 동작합니다.
2. 수가 클수록 위로 올라옵니다.
문법
z-index: 9999;5️⃣ overflow
콘텐츠가 요소의 크기보다 커서 넘칠 때, 어떻게 표현할지 정하는 속성입니다.
예) 텍스트가 요소의 크기보다 커서 텍스트가 넘쳐 옆 요소를 가릴 때
| 속성값 | 설명 |
|---|---|
| visible | 디폴트 값) 넘치면 깨져서 보입니다. |
| hidden | 넘치는 컨텐츠는 안 보이게 가립니다. |
| scroll | 넘치는 컨텐츠는 스크롤로 내려서 볼 수 있습니다. |
| auto | 브라우저가 알아서 선택합니다. |
