오늘은 CSS의 기본에 대해 공부하겠다.
기본적으로는 위 책을 참고하되, 'Do it! html css 자바스크립트 웹 표준의 정석' 유튜브도 참고하여 공부하였다.

https://www.youtube.com/watch?v=XdFWx0lO5B4&list=PLG7te9eYUi7tS_nx58Z1Zi9Iqt0JEQ1Is&pp=iAQB

CSS 사용하기

style 속성을 사용

태그에 style 속성을 부여하여 css를 적용할 수 있다.

<태그명 style="(스타일 속성): (스타일 값)">

<style> 태그를 활용

html의 <style> 태그를 활용하면 css를 적용할 수 있다.

<style>
	css 문법 코드 작성
</style>

별도의 파일로 분리하기

새 파일을 생성하여 .css 를 붙여준다.
외부의 css 파일을 html 문서에 연결하려면 html의 <head> 태그를 수정한다.

<head>
  <lind href="css파일명" rel="stylesheet">
</head>

css 파일을 별도의 파일로 분리해야 협업에 도움이 된다.

CSS 선택자

css 코드의 기본 규격은 아래와 같다.

(선택자){
	(스타일 속성1): (스타일 값);
    (스타일 속성2): (스타일 값);
    ....
}

클래스

클래스는 하나의 그룹이다.
태그를 입력할 때 class라는 속성을 부여하고, 클래스 이름을 입력하면 된다.

<태그 class="클래스 이름">
  	내용
</태그>

주로
1. 남들과는 구분되지만
2. 여러 번 등장할 수 있는 정보
에 사용한다.

css에는 앞에 점(.)을 붙여 사용한다.

.my_class{
	color: red;
}

아이디

아이디는 클래스와 달리 화면에 단 한 개만 존재한다.

디자인을 적용하기는 해야 하는데
태그를 선택자로 사용하자니 너무 범위가 넓어 의도치 않은 곳에도 디자인이 적용되고
문서를 통틀어 딱 한 번만 등장하므로 클래스와는 차별점을 두고 싶을 때

사용한다.

<태그 id="이름">
  내용
</태그>

아이디는 css에서 앞에 샵(#)을 붙여 사용한다.

#my_id{
	color: red;
}

복합 선택자

부모 태그와 자식 태그의 관계를 고려하여 복합 선택자를 사용할 수 있다.
태그 선택자뿐만 아니라, 클래스나 아이디 사이에서도 적용 가능하다.

선택자 두 개를 연달아 기재한다. 사이에는 띄어쓰기를 넣는다. 이렇게 하면 부모 태그의 자식, 후손 태그에 스타일이 적용된다. 2개 이상도 가능하다.

p img{
	...
}

">"을 사용하면 바로 한 계층 아래에 위치한 자식 태그에만 스타일이 적용된다. ">"을 여러 번 사용할 수도 있다.

p>img{
	...
}

쉼표를 이용하여 태그 여러개를 선택할 수 있다.

td, th{
	...
}

"~"을 이용하여 형제 선택자를 선택할 수 있다. 이는 선택자1 이후의 모든 선택자2에 적용된다.

h1~p{
	...
}

위 상황에서 h1 태그 이후에 있는 모든 p태그에 속성이 적용된다.

"+"을 이용하여 인접 형제 선택자를 사용할 수 있다. 이는 선택자1 직후의 선택자2에게만 속성이 적용된다.

h1+p{
	...
}

특정 속성을 갖고 있는 요소에게만 속성을 부여할 수도 있다.

a[href]{
	...
}

위 코드에서는 a 태그 중 href 속성이 있는 태그에게만 속성이 적용된다.

속성	의미
[속성]	같은 의미
[속성 = 값]	값과 같은 속성
[속성 ~= 값]	값의 단어를 포함함
[속성 \| =값]	값을 포함함
[속성 ^= 값]	값으로 시작함
[속성 $= 값]	값으로 끝남
[속성 *= 값]	값과 일부가 일치함

스타일의 중첩

동일한 요소를 대상으로 하는 css 코드가 여러 번 등장할 수 있다.
해당 경우의 우선순위는 어떻게 될까?

일반적으로 동일한 선택자를 대상으로 여러 개의 css 명령어가 입력되면 모든 명령어가 적용된다. 단, 스타일 속성이 서로 다를 때만 적용된다.
css 코드가 중복될 경우 항상 마지막에 입력된 명령이 실행된다.
서로 다른 선택자가 섞인 경우 우선 순위는 다음과 같다.

아이디 선택자
클래스 선택자
태그 선택자

스타일링에 따른 우선 순위는 다음과 같다.

HTML 내부의 style 속성
HTML 코드 내부의 <style> 태그
외부 css 파일

CSS의 다양한 스타일 속성

색상을 표현하는 방법

inherit

inherit 속성을 지정하면 부모 태그의 색상을 그대로 물려받는다.

컬러 네임

스타일 값으로 red, blue, green 등 색상을 의미하는 영단어를 입력한다.

RGB 또는 RGBA 코드

RGB 코드는 빨강, 녹색, 파란색을 의미하는 빛의 3원색 순서쌍이다. (255, 255, 255)

RGBA 코드를 사용하면 투명도를 포함하는 알파 값이 추가된다.

16진수 컬러 코드

16진수를 이용하여 색상을 표현한다. (#FFFFFF)

글자를 표현하는 스타일

color

글자의 색상을 변경한다.

color: #1233ff;

font-style

폰트의 스타일을 적용한다. 주로 기울임쫄을 표현한다.

font-style: italic; 또는 oblique;

또한 html 문서에서 내용을 <em> 태그로 감싸주면 이탤릭체를 표현할 수 있다.

font-weight

글자의 두께를 의미한다.
100부터 900까지의 숫자를 입력할 수 있다.

font-weight: 900;

font-variant

주로 대소문자를 강제로 변환하는 용이다.

font-variant: small-caps

위 코드로 하면 대문자는 그대로 두고, 소문자는 크기가 작은 대문자 형태로 출력된다.

font-size

폰트 크기를 지정한다.
픽셀 단위로 사이즈를 입력한다.
반응형 웹을 제작할 때는 em이라는 단위도 사용한다.
(1em = 16px. 대문자 M의 폭 크기)

font-size: 80px

font-family

글꼴을 변경하는 기능을 수행한다.

font-family: "Times New Roman", Times, serif;

기본적으로 제공되는 폰트에는 한계가 있으므로, <link> 태그를 사용해 외부 폰트를 가져온다.

<link href="외부 폰트 링크" rel="stylesheet" type="text/css">

link 태그를 html에 부착시킨다.

text-align

글자의 정렬 방향을 지정한다. left, right, center 을 이용한다.

text-align: center;

글자뿐만 아니라 그림이나 동영상 등 다른 정보에도 적용할 수 있다.

text-decoration

글자에 밑줄을 그을 때 사용한다.

밑줄 - underline
윗줄 - overline
취소선 - line-through

동시에 여러 종류의 선을 입력할 수 있다.

또한 선의 색상도 지정할 수 있다.

text-decoration: underline overline blue;

text-shadow

텍스트의 그림자를 설정할 수 있다.

공간을 표현하는 스타일

공간의 단위

1. %

부모 대비 비율만큼의 공간을 차지한다.

2. auto

브라우저가 자동으로 계산한다. 주로 margin 과 padding 설정 시에 사용된다.

3. vw, vh

30vw는 화면 너비 100% 대비 30%을 의미한다.
마찬가지로 20vh는 화면 높이의 20%을 이미한다.

vh 보다는 vw가 중요도가 높다.

크기 지정하기

일반적으로 크기를 지정할 때는 width 속성과 height 속성을 활용하면 충분하다.

	헤더
사이드 바		사이드 바
	푸터

전체 가로는 1200px, 세로는 820px이다.

width: 200px;

span

html에서 span 태그로 요소를 둘러주면 해당 요소에 필요한 만큼한 공간을 차지한다.

여백 지정하기

css에서 여백은 외부 여백과 내부 여백 두 가지가 있다.

margin > border > padding

1. 외부 여백 margin

외부 여백은 요소 바깥쪽을 의미한다.
여백에는 다른 요소가 침범할 수 없다.

좌, 우, 상, 하 모두 지정 가능하다.
각각 margin-left, margin-right, margin-top, margin-bottom 을 사용한다.

display 속성이 block인 경우에 외부 여백을 auto로 입력하면 브라우저가 여백을 자동으로 계산하여 좌우에 동일한 값을 지정한다.

요소를 세로로 배치할 경우 margin과 margin 이 만나면 margin이 큰 쪽의 값만 적용된다.
가로로 배치할 경우 그렇지 않다.

2. 내부 여백 padding

내부 여백은 요소 안쪽의 여백을 의미한다.
외부 여백과 마찬가지로 다른 요소가 침범하지 못한다.

좌, 우, 상, 하 여백을 지정할 수 있다.
각각 padding-left, padding-right, padding-top, padding-bottom 을 이용한다.

float, clear

float 속성을 이용하여 해당 방향에 떠있게 만들 수 있다.
사이드바를 만드는 등에 이용된다.

float: left;

clear 속성을 사용하여 float 속성을 해제할 수 있다.

float: left; 또는 right; 또는 both;

가상 요소

html에 after, before 등을 이용하여 가상 요소를 만들 수 있다.

태그.클래스명::after{...}

떨어진 위치 지정

방향으로부터 얼마만큼 떨어져 있는지 지정할 수 있다.

left: 20px;

이미지 object-fit

object-fit 속성을 사용하여 이미지를 자를 수 있다.

fill: 미디어를 부모 요소에 꽉 들어맞게 채운다. 찌그러질 수 있다.
contain: 미디어를 비율을 유지한 채, 부모 요소 밖으로 튀어 나가지 않도록 크기를 축소
cover: 미디어 일부가 부모 요소 밖으로 삐져나가더라도 비율을 유지한 채로, 부모 요소에 꽉 들어맞게 채운다.

영역을 표현하는 스타일

border

1. border: 선의 종류

선의 종류를 입력한다.

border: solid;

스타일 값	속성
none	없음
hiddin	감춤
dotted	점선
dashed	대시선
solid	실선
double	이중선
inset	안으로 들어간 선
outset	밖으로 튀어나온 선
groove	입체선
ridge	튀어나온 선

2. border-width: 선의 두께

선의 두께를 수정할 수 있다.

border-width: 3px;

필요하다면 top, left, right, bottom을 지정하여 상하좌우 선 두께 지정이 가능하다.

3. border-color: 선의 색상

테두리 색상을 지정할 수 있다.

border-color: blue;

마찬가지로 top, bottom, left, right 을 지정하여 테두리 색상을 상하좌우 각각 지정할 수 있다.

4. 단축 표현

아래와 같이 한 줄에 여러 속성값을 이용하여 border 을 설정할 수 있다.

border: 5px red solid;

한 줄에 border의 종류와 색상, 두께를 입력할 수 있다.
정보의 순서는 상관없다.

5. border-radius: 둥근 모서리

border의 모서리를 둥글게 만들 수 있다.
단위는 픽셀도 가능하고, 퍼센트도 가능하다.

border-radius: 5px;

50%을 입력하면 원형으로 잘린다.

네 모서리의 곡률을 모두 다르게 주고 싶다면 각각의 모서리에 적용할 반지름을 하나씩 입력한다.

border-radius: 40px 10px 80px 50px;

방향 순서는 좌측 상단 모서리부터 시계방향으로 곡률이 적용된다.

box-shadow

요소의 그림자를 설정할 수 있다.

background

1. background-color: 배경의 색상

html 요소에 배경색을 입힐 수 있다.

background-color: yellow;

2. background-image: 배경 이미지 삽입

배경에 이미지를 삽입한다.
스타일 값으로는 url()을 활용한다.

background-image: url("이미지 경로");

background-position-x 를 활용하여 이미지의 좌우 위치를,
background-position-y를 활용하여 이미지의 상하 위치를 바꿀 수 있다.

background-position-x: -200px;

3. background-repeat: 배경 이미지 반복

배경의 이미지를 단순 반복, x로 반복, y로 반복 등을 설정할 수 있다.

4. background-position: 배치 방향 설정

배경 이미지의 배치 방향을 설정할 수 있다.

5. backgroung-attachment: 부착 위치 설정

값을 fixed로 설정하면 화면을 스크롤하더라도 이미지의 위치가 바뀌지 않고 따라온다.
위 3, 4, 5번도 border과 마찬가지로 한 줄에 한꺼번에 설정이 가능하다.

6. background-size: 이미지 크기 설정

배경 대비 들어갈 이미지 배경의 크기 조절이 가능하다.

n%, contain, cover 등으로 설정이 가능하다.

7. 배경 그라데이션

선형 그라데이션

background: linear-gradient(to bottom, 색1, 색2, ..);

to bottom 은 그라데이션의 방향을 의미하며, 다른 방향(top 등) 각도(30deg)로도 지정이 가능하다.

색 n%로도 지정이 가능하다.

원형 그라데이션

background- radial-gradient(circle, at 20% 20%, 색1, 색2, 색3, ..)

원형의 크기는 아래와 같이 설정이 가능하다.

크기	의미
closet-side	가장 가까운 측면에 닿을 때까지
closet-corner	가장 가까운 코너에 닿을 때까지
farthest-side	가장 먼 측면에 닿을 때까지
farthest-corner	가장 먼 코너에 닿을 때까지

visibility, display

visibility

화면에 보이게 하거나 안 보이게 할 수 있다.
visibility 속성을 hidden 으로 설정하면 요소가 화면에 보이지 않는다.

visibility: hidden;

그렇더라도 요소가 화면을 차지하는 공간이 사라지지는 않는다.

display

화면에 표시될 규격을 정한다.
display의 속성값으로 inline을 지정하면 해당 요소는 줄 바꿈을 유발하지 않게 된다.

display: inline;

반면 block 을 입력하면 줄 바꿈일 실행된다.

기본 속성을 바꾸는 법

기본으로 설정된 속성을 바꿀 수도 있다.

:link 링크(보통 바란 색, 밑줄 형태)
:visited
:hover 마우스가 위에 올려졌을 때
:active 마우스로 클릭하는 순간

위 4가지 속성을 순서대로 입력해주어야 된다.

변형

transform 속성을 사용하여 요소를 2차원, 3차원으로 변형할 수 있다.

2차원 변형

2차원 변형은 크기와 각도만 지정하여 사용한다.

스타일 값	의미
translate(tx, ty)	지정한 x, y 값만큼 요소를 이동
translateX(tx)	지정한 x 값만큼 요소를 이동
translateY(ty)	지정한 y 값만큼 요소를 이동
scale(sx, sy)	x, y 방향으로 확대/축소
scaleX(sx)	x 방향으로 확대/축소
scaleY(sy)	y 방향으로 확대/축소
rotate(각도)	각도만큼 회전
skew(ax, ay)	x, y 방향으로 왜곡
skewX(ax)	x 방향으로 왜곡
skewY(ay)	y 방향으로 왜곡

3차원 변형

3차원 변형에서 z축은 앞뒤를 의미한다.
우리가 화면을 봤을 때 우리가 보는 방향이다.

스타일 값	의미
translate3d(tx, ty, tz)	지정한 x, y, z 값만큼 요소를 이동
translateZ(tz)	지정한 z 값만큼 요소를 이동
scale3d(sx, sy, sz)	x, y, z 방향으로 확대/축소
scalez(sz)	z 방향으로 확대/축소
rotate(rx, ry, 각도)	각도만큼 x, y 로 회전
rotate3d(rx, ry, rz, 각도)	각도만큼 x, y, z 로 회전
rotateX(각도)	각도만큼 x로 회전
rotateY(각도)	각도만큼 y로 회전
rotateZ(각도)	각도만큼 z로 회전
perspective(길이)	입체적 깊이의 값

<div> 태그의 그리드 표현

그리드 스타일은 css를 사용해 일종의 격자를 그린다.

display: grid;
을 <div> 태그를 대상으로 사용하면 된다.

격자를 쪼갤 때는 grid-template-columns와 grid-template-rows를 사용한다.
전자는 열로 쪼개고, 후자는 행으로 쪼갠다.

.myGrid{
	display: grid;
    grid-template-columns: 1fr 1fr;
}

fr이라는 표현은 fraction 의 약자이다. 1fr 1fr은 너비를 1:1 비율로 나눠 가지겠다는 것을 의미한다.
3fr 1fr 로 변경하면 너비를 3:1 비율로 나누어 가진다.

픽셀 단위로 너비를 입력하고 나머지를 fr단위로 표현해도 된다.
그러면 남은 너비를 모두 가져간다.

grid-template-columns: 100px 1fr;

‎육란

프로그래밍 공부 블로그

이전 포스트

HTML <input> 태그

다음 포스트

CSS 속성

프론트엔드