CSS정리

CSS 문법 살펴보기 🗺️

 

문법 형식

CSS 문법은 크게 선택자와 선언부로 구분된다. 선택자는 CSS 스타일을 적용할 HTML 태그를 선택하는 영역입니다.

선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호안에 넣습니다.

 

   h1     {color:red}

선택자    속성 : 값

 

CSS 적용하기 ⚠️

 

내부 스타일 시트 사용하기

 

<style></style>

실제 코드에서 내부 스타일 시트 방법으로 CSS를 적용할 떄는 다음과 같이 작성합니다.

 

style 태그를 사용하는 위치는 정해진 기준이 없지만 보통 앞의 코드처럼 head 태그 안에 사용합니다.

웹 브라우저는 HTML 문서를 해석할 떄 HTML 문서에 작성도니 코드를 첫 번쨰 줄부터 순차적으로 해석합니다.

 

외부 스타일 시트 사용하기

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

 

인라인 스타일 사용하기

<태그 style="CSS 코드"></태그>

 

선택자 다루기 🚥

 

선택자

선택자는 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원합니다.

 

기본 선택자

전체 선택자 : 모든 태그를 선택자로 지정합니다. ex) *{}

태그 선택자 : 태그명으로 선택자를 지정합니다. ex) 태그명{} / p{}

아이디 선택자 : id 속성값으로 선택자를 지정합니다. ex) #id속성값{} / #title{}

클래스 선택자 : class 속성값으로 선택자를 지정합니다. ex) .class속성값{} / .red{} / .blue{}

기본 속성 선택자 : HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정합니다.

    ex) [속성]{}, [속성=값]{} / a[href]{}, a[target="_blank"]{}

문자열 속성 선택자 : 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정합니다.

ex) [속성~=문자열], [속성|=문자열], [속성^=문자열], [속성$=문자열], [속성*=문자열]

 

조합 선택자

조합 선택자는 기본 선택자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역활을 합니다.

 

그룹 선택자 : 여러 선택자를 , 기호로 구분해 선택자를 그룹을 묶어 지정합니다.

자식 선택자 : 선택자 범위를 자식 관계로 제한하고, > 기호를 구분자로 사용합니다. ex) 부모 선택자 > 자식 선택자 {}

하위 선택자 : 선택과 범위를 자식 및 자손 관계로 제한하고, 공백을 구분자로 사용합니다.

ex) div p{}

인접 형제 선택자 : 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정하고, + 기호를 구분자로 사용합니다.

ex) 이전 선택자 + 대상 선택자{}

일반 형제 선택자 : 특정 태그와 형제 관계에 있는 모든 태그를 선택자로 지정하고, ~ 기호를 구분자로 사용합니다.

ex) 이전 선택자~대상선택자{}

 

가상 요소 선택자

실제로 존재하는 요소는 아니지만, 존재한다고 가정하고 선택하는 방법입니다.  

가상요소 선택자 앞에는 :: 기호(콜론 2개)를 붙입니다.

 

기준 선택자::가상 요소 선택자{}

 

::before 요소의 맨 앞 선택

::after 요소의 맨 뒤 선택

 

가상 클래스 선택자

가상 클래스 선택자는 요소의 상태를 이용해 선택자를 지정하는 방법입니다.

가 클래스 선택자 앞에는 : 기호를 붙입니다.

 

1. 링크 가상 클래스 선택자

기준 요소:가상 클래스 선택자{}

 

:link 마우스 올린 상태

:visited 링크를 한 번 이상 방문한 적이 있는 상태

 

2. 동적 가상 클래스 선택자

:hover 마우스를 올린 상태

:active 마우스로 클릭한 상태

 

3.입력 요소 가상 클래스 선택자

:focus 입력 요소에 커서가 활성화된 상태

:checked 체크박스 요소에 체크한 상태

:disabled 상호작용 요소가 비활성화된 상태

:enabled 상호작용 요소가 활성화된 상태

 

4. 구조적 가상 클래스 선택자

:first-child, :last-child : 첫 번째 자식 태그와 마지막 자식 태그

:nth-child(n), :nth-last-child(n) : n번째 자식 태그와 끝에서 n번째 자식 태그

:nth-of-type(n), :nth-last-of-type(n) : n번쨰 특정 자식 태그와 끝에서 n번쨰 특정 자식 태그

:first-of-type, :last-of-type : 부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그

 

CSS 필수 속성 다루기 📍

CSS속성의 단계적 속성으로 적용된다.

 

상속

p 태그에는 color 속성이 없지만 p 태그의 부모인 div 태그는 color 속성이 있습니다. 

이럴 때 자식인 p 태그는 부모인 div 태그의 스타일을 그대로 물려받습니다. 그래서 그림과 같은 결과가 나오게 됩니다.

CSS속성은 상속된다는 것을 알아야 합니다.

 

단위

CSS 속성에는 다양한 단위의 값을 사용할 수 있는데, 단위는 절대 단위와 상대 단위로 나뉩니다.

 

절대 단위 - px

상대 단위 - %,em,rem,vw,vh

 

색상표기법

키워드 표기법

 

RGB표기법

rgb(red, green, blue)

rgba(red, green, blue, alpha)

 

HEX 표기법

#RRGGBB

 

텍스트 속성으로 텍스트 꾸미기 🔠

font-family 속성

한글로 된 글꼴이나 공백이 있는 글꼴명은 ""로 감싸야 한다.

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

 

font-size 속성

font-size<크기>

 

font-weight 속성 : 텍스트의 굵기를 지정하는 데 사용합니다. 굵기를 나타내는 속성값에는 숫자 표기법과 키워드 표기법을 사용할 수 있습니다.

font-weight:<숫자 표기법>|<키워드 표기법>;

 

font-style 속성

font-style:<속성값>;

normal , italic, oblique

 

font-variant 속성 : font-variant 속성은 영문 텍스트를 크기가 작은 대문자로 변경할 때 사용합니다.

font-variant:<속성값>;

normal 텍스트를 변환하지 않습니다.

small-caps 텍스트를 크기가 작은 대문자로 변환합니다.

 

color 속성

color:<속성값>;

 

text-align 속성

text-align<속성값>;

left : 텍스트를 왼쪽 정렬합니다.

center : 텍스트를 중앙 정렬합니다.

right : 텍스트를 오른쪽 정렬합니다.

justify : 텍스를 양쪽 정렬합니다.

 

text-decoration 속성

text-decoration:<속성값>;

none : 텍스트 장식을 모두 지웁니다.

line-through : 텍스트 중간을 관통하는 선ㅇ르 긋습니다.

overline : 텍스트 위에 선을 긋습니다.

underline : 텍스트 아래 선을 긋습니다.

 

letter-spacing 속성 : 속성 자간을 조절할 떄 사용합니다. 

letter-spacing:normal|<크기>;

 

line-height 속성 : line-height 속성은 텍스트 한 줄의 높이를 지정할 때 사용하는 속성입니다.

line-height:normal|<속성값>;

normal : 웹 브라우저에서 정한 기본값을 적용합니다.

숫자 : 현재 font-size 값에 입력한 숫자를 곱한 값을 적용합니다.

퍼센트 : 현재 font-size 값에 입력한 비율을 곱한 값을 적용합니다.

크기 : 입력한 크기를 적용합니다.

 

우리가 알고 있는 font-size 속성은 말 그대로 글자 자체의 크기를 지정합니다. 그러나 모든 텍스트는 웹 브라우저에 표시될 때 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가지고 있스빈다.

그리고 이러한 여유공간을 전부 포함한 글줄 사이의 간격을 행간이라고 하며 line-height 속성으로 제어할 수 있습니다

 

박스 모델을 구성하는 속성 다루기 📦

 

margin : 요소의 외부 여백을 의미합니다.

margin : <margin-top> <margin-right> <margin-bottom> <margin-left>
margin : <margin-top> <margin-right> <margin-bottom>
margin : <margin-top & margin-bottom> <margin-right & margin-left>

 

border : 요소의 테두리(경계선)를 의미합니다.

none : 테두리를 그리지 않습니다
hidden : 테두리를 화면에서 감춥니다.
solid : 테두리를 실선으로 그립니다.
double : 테두리를 이중 실선으로 그립니.
dotted : 테두리를 점선을 그립니다.
dashed : 테두리를 dotted보다 긴 점선으로 그립니다.
groove : 테두리가 파인 것처럼 그립니다.
ridge : 테두리가 튀어나온 것처럼 그립니다.
inset : 테두리를 요소가 파인 것처럼 그립니다.
outset : 테두리를 요소가 튀어나온 것처럼 그립니다.

padding : 요소의 내부 여백을 의미합니다.

 

content : 요소의 내용을 의미합니다.

width:<크기>;
height:<크기>;

 

box-sizing : <속성값>;

content-box : width, height 속성의 적용 범위를 content 영역으로 제한합니다.

border-box : width, height 속성의 적용 범위를 border 영역으로 제한합니다.

 

배경 속성을 요소의 배경 설정하기 🌠

 

background-color 속성

background-color:<색상값>

 

div{

    width:100px;

    height:100px;

    background-color:red;

}

 

background-image 속성

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

div{

    width:320px;

    height:120px;

    background-image:url('image/coffee.jpg');

 

 

background-repeat 속성

background-repeat:<속성값>;

no-repeat: 이미지를 반복하지 않습니다.
repeat-x : 이미지를 가로 방향으로 반복합니다.
repeat-y : 이미지를 세로 방향으로 반복합니다.

repeat : 이미지를 가로와 세로 방향으로 반복합니다.
round : 이미지를 반복하되 이미지가 요소에 딱 맞도록 크기를 자동 조절합니다.
space 이미지가 잘리지 않도록 반복합니다.

 

background-size 속성

요소의 배경 크기가 이미지보다 크면 background-repeat 속성으로 해결할 수 있지만, 요소의 배경 크기가 이미지보다 작을 때 이미지가 잘려보이는 문제는 해결할 수 없습니다. 그 대신 이 문제는 background-size 속성으로 이미지 크기를 지정해서 처리할 수 있습니다.

 

속성  값은 auto, cover, contain을 사용하거나 크기를 직접 지정해도 됩니다.

auto : 이미지 크기를 유지합니다.
cover : 이미지의 가로 세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경에 꽉 채웁니다.
contain : 이미지의 가로 세로 비율을 유지하면서 이미지가 배경 요소 안에 들어가도록 크기를 확대하거나 축소합니다.
<너비 높이> 이미지 크기를 직접 지정합니다.

 

background-position 속성

background-position 속성으로 삽입하려는 이미지의 위치도 결정할 수 있습니다.

background-position : <x 위치> <y 위치>;

 

 

위치	속성값	설명
x	left, center, right	x 축(가로) 방향의 위치를 지정합니다.
y	top,center, bottom	y축(세로) 방향의 위치를 지정합니다.
공통	px rem, em, %	위치를 직접 지정합니다.

 

background-attachment 속성

background-attachment:<속성값>;

 

local : 삽입된 이미지가 요소와 웹 브라우저에서 모두 스크롤 됩니다.

scroll : 삽입된 이미지가 요소에서는 고정되지만 , 웹 브라우저에서는 스크롤됩니다.

fixed : 삽입된 이미지가 요소와 웹 브라우저에서 모두 고정됩니다.

 

background 속성으로 한 번에 지정하기

background:<color 속성값> <image 속성값> <repeat 속성값> <position 속성값/size 속성값> < attachment 속성값>

 

위치 속성으로 HTML 요소 배치하기 🧮

 

position 속성

 

static : 요소를 기본 흐름에 따라 배치합니다.
relative : 요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있습니다.
absolute : 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치합니다.
fixed : 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치합니다. 단 스크롤해도 해당 위치에 고정되어 있습니다.
sticky : 요소를 static 값처럼 기본 흐름에 따라 배치하지만, 지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정됩니다.

 

z-index 속성

z - index 속성을 사용하면 position 속성으로 배치한 요소의 z축 위치를 결정할 수 있습니다.

속성값으로는 하나의 정숫값이 옵니다.

 

float 속성 

 

none ,left, right 사용 가능! 

 

clear 속성

 

 

전환 효과 속성 적용하기 ⏱️

전환이란 CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값을 ㅗ변하게 하는 것을 전환이라고 합니다.

전환이 어떤 건지 다음 코드를 보며 이해해 봅시다.

 

코드를 실행하면 빨간색 요소로 보입니다. 빨간색 요소에 마우스를 올리면 :hover 가상 클래스 선택자 때문에 파란색으로 변합ㄴ디ㅏ.

이처럼 전환은 기존 속성값이 다른 값으로 변경되는 것을 말합니다.

 

그리고 CSS3에서 이런 전환이 발생할 때, 전환 효과를 직접 속성을 지정할 수 있는 전환 효과 속성이 새로 추가됐습니다.

 

transition-property 속성

    속성값에는 전환 효과의 대상이 되는 속성명을 적거나 미리 정해진 키워드를 넣습니다. 

    속성값에 사용할 수 있는 키워드는 다음과 같습니다.

 

transition-property: background-color;

 

transition-property: background-color, color, width;

 

transition-property: all;

 

transition-duration 속성

    전환 효과의 지속시간을 설정하는데 사용합니다.

 

transition-duration:1s;

 

transition-delay 속성

    .red-box{

    transition-delay:1s;

    }

 

transition-timing-function 속성

transition-timing-function 속성은 전환 효과의 진행 속도를 지정합니다.

속성값으로는 정해진 키워드와 cubic-bezier()함수를 사용할 수 있습니다.

 

linear : 처음 속도와 마지막 속도가 일정합니다.👨‍👩‍👧‍👦

ease : 처음에는 속도가 점점 빨라지다가 중간부터 점점 느려지니다.

ease-in : 처음에는 속도가 느리지만 완료될 때까지 점점 빨라집니다.

ease-out : 처음에는 속도가 빠르지만 완료될 때까지 점점 느려집니다.

ease-in-out : 처음네는 속도가 느리지만 점점 빨라지다가 다시 점점 느려집니다.

cubic-bezier(p1,p2,p3,p4) 사용자가 정의한 속도로 진행합니다.

 

.container .bar{

 width:10px;

 transition-property:width;

 transition-duration:5s;

}

 

.container:hover .bar{

    width:110px;

}

 

transition 속성으로 한 번에 지정하기

transition: <property>, <duration>, <timing-function>, <delay>;

 

애니메이션 속성으로 전환 효과 제어하기 & 변형 효과 적용하기 👨‍👩‍👧‍👦

추후 필요시 공부하거나 CSS는 너무 방대해서 w3shools를 참고해야 할 가능성이 높다.

W3Schools Online Web Tutorials

 

플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기💪

 

플렉스 박스 레이아웃 구성요소

 

주축 , 교차축, 플렉스 컨테이너, 플렉스 아이템

 

플렉스 박스 레이아웃의 기본 속성🧚‍♂️

display:flex

 

flex-direction 속성

flex-direction: <속성값>

 

row : 주축 방향을 왼쪽에서 오른쪽으로 지정합니다.

row-reverse:  주축 방향을 오른쪽에서 왼쪽으로 지정합니다.

column: 주축 방향을 위쪽에서 아래쪽으로 지정합니다.

column-reverse: 주축 방향을 아래쪽에서 위쪽으로 지정합니다.

 

flex-wrap 속성

flex-wrap:<속성값>;

 

nowrap: 플렉스 아이템이 플렉스 컨테이너를 벗어나도 무시합니다.

wrap: 플렉스 아이템이 플렉스 컨테이너를 벗어나면 줄 바꿈합니다.

wrap-reverse : 플렉스 아이템이 플렉스 컨테이너를 벗어나면 wrap의 역방향으로 줄 바꿈합니다.

 

flex-flow 속성

flex-flow:<flex-direction> <flex-wrap>;

direction과 wrap을 동시에 적용한다.

 

플렉스 박스 에이아웃의 정렬 속성👅

justify-content:<속성값>;

 

flex-start: 주축 방향의 시작을 기준으로 정렬합니다.

flex-end: 주축 방향의 끝을 기준으로 정렬합니다.

center: 주축 방향의 중앙에 정렬합니다.

space-between : 플렉스 아이템 사이의 간격이 균일하도록 정렬합니다.

space-around : 플렉스 아이템의 둘레가 균일하도록 정렬합니다.

space-evenly : 플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬합니다.

 

 

 

align-items, align-content, align-self 속성

 

align-items:<속성값>;

 

stretch: 교차축 방향을 플렉스 아이템의 너비나 높이가 늘어납니다.

flex-start : 교차축 방향의 시작을 기준으로 정렬합니다.

flex-end : 교차축 방향의 끝을 기준으로 정렬합니다.

center : 교차축 방향의 중앙을 기준으로 정렬합니다.

baseline : 플렉스 아이템의 baseline을 기준으로 정렬합니다.

 

그리드 레이아웃 살펴보기🗓️

 

구성요소

행,열 , 그리드 셀, 그리드 갭, 그리드 아이템, 그리드 라인, 그리드 넘버, 그리드 컨테이너

 

 

 

 

그리드 레이아웃 기본 속성😀

 

display 속성

그리드 레이아웃은 항상 display 속성값을 grid나 inline-grid로 지정하는 것에서 시작합니다.

 

display : gird;

 

해당 속성이 지정된 요소는 그리드 컨테이너가 되고, 자식요소는 그리드 아이템이 됩니다.

 

gird-template-columns와 grid-template-rows 속성

그리드 컨테이너의 기본 구성 요소는 행과 열 입니다. 따라서 행과 열을 생성하고, 행과 열을 지정해 그리드 셀을 생성해야 합니다.

열은 grid-template-columns 속성으로, 행은 grid-template-row 속성으로 생성합니다. 속성값은 공백으로 구분해 순서대로 작성하는데, 앞에서부터 1행 또는 1열의 값이 됩니다.

 

grid-template-columns:<1열값> <2열값> ....;

grid-template-rows:<1행값> <2행값> ....;

 

repeat(2, 100px), minmax(50px, 100px)를 사용할 수 있다는 것도 알아야 합니다!

 

row-gap과 column-gap 속성

row-gap : <크기>

column-gap: <크기>;

 

그리드 레이아웃의 정렬 속성😇

align-items와 align-self 속성

stretch : 그리드 아이템이 그리드 셀을 꽉 채우도록 크기를 늘립니다.

start : 그리드 아이템을 그리드 셀의 맨 위에 배치합니다.

center : 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치합니다.

end : 그리드 아이템을 그리드 셀의 맨 아래에 배치합니다.

justify-items와 justify-self 속성

stretch : 그리드 아이템을 그리드 셀이 꽉 차도록 늘립니다.

start : 그리드 아이템을 그리드 셀의 왼쪽 끝에 배치합니다.

center : 그리드 아이템을 그리드 셀의 가로 방향 중간에 배치합니다.

end : 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치합니다.

 

 

place-items와 place-self 속성

place-items 속성은 align-items와 justify-items 속성을 ,

place-self 속성은 align-self와 justify self 속성을 한 번에 사용할 수 있는 단축속성입니다.

 

place-items : <align-items> <justify-items>;

place-self : <align-self> <justify-self>;

 

그리드 레이아웃의 배치 속성 🥳

grid-template-areas와 grid-area 속성 

 

 

 

gird-column-start, grid-column-end, gird-row-start, gird-row-end 속성