CSS

oatraspberry·2022년 11월 8일

CSS

HTML이란?

HyperText Markup Language
웹 문서를 만드는 언어

CSS

텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당한다.

스타일과 스타일 시트

style

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

p { 
	text-align: center;
    /* text-align 텍스트 정렬 지정 */
    color: blue;
    /* color 글자색 지정 */

외부 스타일 시트

*.css 확장자 사용
외부 스타일 시트 파일에 스타일 작성할 때는 <style> 태그를 사용하지 않는다.
웹 문서에 연결해야 스타일이 문서에 적용된다.
외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그다.

<link rel="stylesheet" href="외부 스타일 시트 파일 경로">

CSS 기본 선택자

전체 선택자

말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용함. 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용함.

* { 속성: 값; ... }

전체 선택자는 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용함.

마진, 패딩: 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이에 여백을 두는 것.

타입 선택자

특정 태그를 사용한 모든 요소에 스타일 적용
해당 태그를 사용한 모든 요소에 적용된다.

태그명 { 스타일 규칙 }

클래스 스타일

이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼 class 속성을 사용해서 지정한다.
클래스 스타일은 여러 곳에 적용할 수 있다.

클래스 선택자

특정 부분만 선택해서 스타일 적용하는 것.
클래스 이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 함.

.클래스명 { 스타일 규칙 }

id 선택자

웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용함.
# 기호를 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같다.

#아이디명 { 스타일 규칙 }

🔎 클래스 선택자와 id 선택자의 차이
클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다.

그룹 선택자

같은 스타일 규칙을 사용하는 요소들을 묶어줌

선택자1, 선택자2 { 스타일 규칙 }

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

캐스케이딩(cascading)

CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함.

스타일 우선순위

사용자 스타일 -> 2. 제작자 스타일 -> 3. 브라우저 기본 스타일

!important: 어떤 스타일보다 우선 적용하는 스타일
인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용함.
id 스타일: 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용할 수 있음. (선택자 앞에 # 기호를 사용함)
클래스 스타일: 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있다. (선태자 이름 앞에 마침표(.) 기호 사용함)
타입 스타일: 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용함.

스타일 상속

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달됨.

포함하는 태그- 부모 요소
포함된 태그- 자식 요소

글꼴 관련 스타일

font-family

font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

body { font-family: "맑은 고딕", 돋움, 굴림 }

font-family 속성은 <body> 태그 스타일에서 일단 한번 정의하면 문서 전체에 적용됨.
문서 안의 모든 자식 요소에 계속 같은 글꼴 사용함.

| = 나열한 옵션 중 하나가 값이 되어야 한다.

font-size

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

font-style

font-style: normal | italic | oblique

normal: 기본값
italic: 이탤릭체
oblique: 이탤릭체

font-weight

font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 900

normal: 기본값
bold: 굵게
bolder: 더 굵게
lighter: 더 가늘게
100~900: 100은 가장 가늘게, 900은 가장 굵게

웹 폰트 사용하기

@font-face {
	font-family: <글꼴 이름>;
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ......];
}

텍스트 관련 스타일

color

color: <색상>

text-align

문단의 텍스트 정렬 방법을 지정한다.

text-align: start | end | left | right | center | justify | match-parent

start- 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
justify- 양쪽에 맞추어 문단을 정렬
match-parent- 부모 요소에 따라 문단을 정렬

line-height

줄 간격을 원하는 만큼 조절할 수 있다.

text-decoration

텍스트에 밑줄을 긋거나 취소선을 표시합니다.

<p style="text-decoration:none">none</p>
<p style="text-decoration:underline">underline</p>
<p style="text-decoration:overline">overline</p>
<p style="text-decoration:line-through">line through</p>

text-shadow

텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체감 나게 보여줄 수 있다.

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

가로 거리: 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만듦.
세로 거리: 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만듦.

.shadow {
	color: red;
    text-shadow: 1px 1px black; 
    /* 가로, 세로거리, 색상 지정 */
}

text-transform

영문자를 표기할 때 텍스트의 대소문자를 원하는 대로 바꿀 수 있다. 이 속성은 한글에는 영향을 미치지 않고 영문자에만 적용된다.
capitalize- 첫 번째 글자를 대문자로 변환
uppercase- 모든 글자를 대문자로 변환
lowercase- 모든 글자를 소문자로 변환
full-width- 가능한 한 모든 문자를 전각 문자로 변환

letter-spacing, word-spacing

letter-spacing: 글자와 글자 사이의 간격을 조절
word-spacing: 단어와 단어 사이의 간격을 조절
이 두가지 속성은 px, em과 같은 단위나 퍼센트(%)로 크깃값을 조절한다.

em과 rem

em과 rem은 CSS의 font-size 속성 값에 비례해서 결정되는 상대 단위이다.

em은 해당 단위가 사용되고 있는 요소의 font-size에 비례해서 커진다.
rem은 최상위 요소인 <html\>의 font-size 속성 값이 기준이 된다.

목록 스타일

list-style-type

.book1 {
	list-style-type: none;
    /* 순서 없는 목록 */
}
.book2 {
	list-style-type:upper-alpha;
    /* 알파벳 대문자 목록 */
}

list-style-image

list-style-image: <url(이미지 파일 경로)> | none
/* 불릿으로 사용할 이미지 */

불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋다.

list-style-position

list-style-position: inside | outside;

불릿이나 번호의 위치를 들여 쓸 수 있다.
inside - 불릿이나 번호를 기본 위치보다 안으로 들여쓴다.
outside - 기본값

list-style

list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있다.

표 스타일

caption-side

표 제목의 위치를 정해줌.
<caption> 태그를 이용해 캡션으로 표시함.
캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 이용하면 표 아래쪽으로 옮길 수 있다.

caption-side: top | bottom

top - 표 윗부분에 표시. 기본값
bottom - 표 아랫부분에 표시

border

표에 테두리를 그림.
표 바깥 테두리와 셀 테두리를 각각 지정함.

border-spacing

셀과 셀 사이의 여백을 조절할 수 있다.

border-spacing: 수평거리 수직거리

border-spacing 속성값은 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타냄.
두 값이 같다면 1개만 지정해도 된다.

border-collapse

collapse - 표와 셀의 테두리를 합쳐 하나로 표시
separate - 표와 셀의 테두리를 따로 표시. 기본값.

CSS와 박스 모델

블록 레벨 요소와 인라인 레벨 요소

블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것

한 줄을 차지하는 것: 해당 요소의 너비가 100%라는 뜻.
블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. ex) <h1>, <div>, <p>

인라인 레벨 요소: 한 줄을 차지하지 않고 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. ex) <span>, <img>, <strong>

박스 모델

콘텐츠 영역
패딩(padding) - 박스와 콘텐츠 영역 사이의 여백
테두리(border) - 박스의 테두리
마진(margin) - 여러 박스 모델 사이의 여백

마진, 패딩은 웹 문서에서 다른 콘텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념.

width, height

너비 width, 높이 height
width 속성과 height 속성은 박스 모델에서 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킴.

속성값의 종류
1. <크기> - 너비나 높이의 값을 px이나 em 단위로 지정
2. <백분율> - 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정
3. auto - 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정. 기본값.

box-sizing

border-box - 테두리까지 포함해서 너빗값을 지정함.
요소의 너비와 높이를 균일하게 유지해주는 편리한 속성
content-box - 콘텐츠 영역만 너빗값을 지정함. 기본값.

box-shadow

box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

테두리 스타일 지정

박스 모델의 방향 살펴보기

맨 윗부분 top, 아랫부분 bottom, 왼쪽 left, 오른쪽 right
top → right → bottom → left ❗ 시계방향 ❗

border-style

테두리 스타일 지정하는 것
기본값은 none
속성값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다.
테두리를 그리려면 가장 먼저 테두리 스타일의 속성값을 지정해야 함.

hidden: 테두리를 감춤.
solid: 테두리를 실선으로 표시.
dotted: 테두리를 점선으로 표시.
등

border-width

테두리 두께를 지정하는 것

border-width: <크기> | thin | medium | thick

상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정할 수 있는데, 이때 값을 1개만 지정할 수도 있고 2개나 3개, 또는 4개를 각각 지정할 수도 있다.

border-color

박스 모델에서 테두리 색상을 지정하는 것

border

테두리 스타일 묶어서 지정하는 것

border-radius

둥근 테두리를 만듦

border-radius: <크기> | <백분율>

크기 - 반지름의 크기를 px, em의 단위와 함께 수치로 표시
백분율 - 현재 요소의 크기를 기준으로 비율(%)로 지정

border-radius 속성을 사용하여 원 형태로 만들 수 있다 -> 반지름값을 너비나 높이의 50%로 지정하면 원이 됨.

여백을 조절하는 속성

마진 margin

요소 주변의 여백을 의미함.

margin: <크기> | <백분율> | auto

패딩 padding

콘텐츠와 테두리 사이의 여백을 설정
테두리 안쪽의 여백

웹 문서의 레이아웃 만들기

display

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다.
주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.

block - <div>, <p>, <h1> 등
새로운 줄로 시작하며 해당 줄의 가로를 다 차지함. 다음 태그는 무조건 줄바꿈이 적용됨.
block 요소에만 text-align 속성을 적용할 수 있다.
정렬되는 것은 block 요소 안에 있는 inline 요소만 가능함.
inline 요소란 text뿐 아니라 이미지 등도 포함.
inline - <span>, <a>, <img> 등
태그 안의 글자 길이만큼 공간 차지하고 줄바꿈 하지 않음.
width, height 속성에 영향을 받지 않는다.
inline-block - block 속성과 inline의 속성을 섞어놓은 것과 같다.
줄바꿈을 하지 않고 동일한 라인에 작성 가능하고, width/height, margin/padding-top/bottom line-height 변경 및 적용 가능하다.
❗ inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size:0를 적용하면 해결됨.
❗ inline-block끼리 높이가 안 맞을 때 상위 공백이 생기게 되는데 vertical-align:top 을 적용하면 해결할 수 있음.
none - 해당 요소를 화면에 표시하지 않음.
flex - 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있다.
콘텐츠 위주의 정렬.
- flex-direction: column과 row로 나열
- flex-wrap: nowrap으로 지정한다면 한 줄로 표현, wrap으로 설정하면 container 영역을 벗어났을 경우 줄바꿈으로 처리가 됨.
- flex-align: flex 내부 항목의 열의 정렬을 결정하는 방식.
- 가로방향 justify-content, 세로방향 align-items
grid - 2차원으로 수평 수직을 동시에 영역을 나눌 수 있다. fr 단위를 사용함.
레이아웃 위주의 정렬.
- grid-template-columns 행
- grid-template-rows 열.
  repeat 속성을 사용하면 같은 간격을 전체 또는 일부분을 반복해서 나열해줄 수도 있다.

float

float 속성은 웹 요소를 문서 위에 떠 있게 만듦.
'떠 있다'=요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것을 말함.

left: 해당 요소를 무넛의 왼쪽에 배치
right: 해당 요소를 문서의 오른쪽에 배치
none: 좌우 어느 쪽에도 배치하지 않음. 기본값.

clear

float 속성이 더 이상 유용하지 않다고 알려주는 속성이 필요한데 그것이 바로 clear 속성.

clear: left; /* float: left를 해제함 */
clear: right; /* float: right를 해제함 */
clear: both; /* float: left 와 float: right를 해제함 */

웹 요소의 위치 지정하기

left, right, top, bottom

position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 됨.

position

웹 문서 안의 요소를 자유자재로 배치해줌.
텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다.

static: 문서의 흐름에 맞춰 배치함. 기본값
relative: 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다.
absolute: relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치함.
fixed: 브라우저 창을 기준으로 위치를 지정해 배치함.

배경색과 배경 범위 지정하기

background-color

border-box: 박스 모델의 가장 외곽인 테두리까지 적용함. 기본값
padding-box: 박스 모델에서 테두리를 뺀 패딩 범위까지 적용함.
content-box: 박스 모델에서 내용(콘텐츠) 부분에만 적용함.

background-image

background-image: url('이미지 파일 경로')

repeat: 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복. 기본값
repeat-x: 브라우저 화면 너비에 가득 찰 때까지 가로로 반복.
repeat-y: 브라우저 화면 높이에 가득 찰 때까지 세로로 반복.
no-repeat: 한 번만 표시하고 반복하지 않음.

background-position

배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있음.

background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>

background-origin

박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수 있다.

content-box: 박스 모델에서 내용 부분에만 배경 이미지를 표시함. 기본값
padding-box: 박스 모델에서 패딩까지 배경 이미지를 표시함.
border-box: 박스 모델에서 테두리까지 배경 이미지를 표시함.

background-attachment

scroll: 화면을 스크롤하면 배경 이미지도 스크롤됨. 기본값
fixed: 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤됨.

background-size

배경 이미지 크기 조절

auto: 원래 배경 이미지 크기만큼 표시함. 기본값
contain: 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소함.
cover: 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소함.
<크기>: 이미지의 너비와 높이를 지정함. 값이 하나만 주어질 경우 너빗값으로 인식하며, 이미지의 너비와 너빗값에 맞춘 높잇값도 자동 계산함.
<백분율>: 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대, 축소함.

연결 선택자

하위 선택자

부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다.
하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다.

상위요소 하위요소

section p { ... }

자식 선택자

하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자
두 요소 사이에 > 기호를 표시해 부모 요소와 자식 요소를 구분함.

부모요소 > 자식요소

section > p { ... }

속성 선택자

[속성]선택자

대괄호([ ])사이에 원하는 속성을 입력하면 된다.

a[href] { ... }

[속성=속성값]선택자

주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용함.
대괄호([ ]) 안에 속성과 속성값을 넣고 그 사이에 =기호를 표시함.

a[target = _blank] { ... }

[속성~=값]선택자

여러 속성값 중에서 해당 속성값이 포함된 요소를 선택함.
이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리함.
[속성~=값] 선택자는 button 값과 정확하게 일치하는 요소를 선택한다는 것.

[class ~= button] { ... }

[속성|=값]선택자

특정 속성값이 포함된 속성에 스타일을 적용한다.
속성값은 한 단어로 일치해야 한다.

oatraspberry

개발자가 될테야

이전 포스트

Vue.js

다음 포스트