[CSS3] CSS 스타일 속성

🚩 크기 단위

%	백분율 단위
em	배수 단위
px	픽셀

- 가장 많이 사용하는 단위

- %, em, cm, mm, inch, px 

- %(퍼센트 단위) = 기본 설정된 크기에서 상대적으로 크기 지정

- em(배수 단위) = 배수를 나타내는 단위

- px(픽셀) = 절대적으로 크기를 지정할 때 사용

🚩 색상 단위

#000000	HEX 코드 단위
RGB(red, green, blue)	RGB 색상 단위
RGBA(red, green, blue, alpha)	RGBA 색상 단위
HSL(hue, saturation, lightness)	HSL 색상 단위
HSLA(hue, saturation, lightness, alpha)	HSLA 색상 단위

- 단어로 표현할 수 있는 색상은 한정적

🚩 URL 단위

background-image: url()

url() 함수 내부에 경로를 입력

- 이미지 파일이나 폰트 파일을 불러올 때 사용

🚩 display 속성

none	태그를 none 형식으로 지정
block	태그를 block 형식으로 지정
inline	태그를 inline 형식으로 지정
inline-block	태그를 inline-block 형식으로 지정

- none 키워드를 적용하면 태그가 화면에 보이지 않음

- inline 키워드를 적용한 코드는 width 속성과 height 속성이 적용되지 않음

- margin 속성이 div 태그의 좌우로만 지정

- inline-block 키워드를 적용하면 width 속성과 height 속성을 적용할 수 있음

- margin 속성이 상하좌우 적용

🚩 visibility 속성

visible	태그를 보이게 만듬
hidden	태그를 보이지 않게 만듬
collapse	table 태그를 보이지 않게 만듬

- 대상이 보이거나 보이지 않게 지정하는 스타일 속성

- display 속성을 사용하면 태그가 화면에서 제거되지만 visibility 속성을 사용하면 화면에서 보이지 않음

🚩 opacity 속성

- 태그의 투명도를 조절하는 스타일 속성

- 0.0부터 1.0 사이의 숫자를 입력 가능

- 0.0은 투명 상태, 1.0은 불투명 상태를 나타냄

 

🚩 width 속성, height 속성

- 글자를 감싸는 영역의 크기를 지정하는 스타일 속성

- 글자가 들어가는 영역의 너비와 높이를 지정

🚩 margin 속성, padding 속성

- margin 속성은 마진의 너비를 지정하는 속성

- padding 속성은 패딩의 너비를 지정하는 속성

- 왼쪽, 오른쪽, 위쪽, 아래쪽을 각각 지정 가능

🚩 box-sizing 속성

- 키워드를 적용하면 width 속성과 height 속성이 글자가 들어가는 영역의 크기를 지정하게 만듬

🚩 border-width 속성, border-style 속성

- border-width 속성은 테두리의 너비를 지정하는 스타일 속성

- border-style 속성은 테두리의 형태를 지정하는 속성

🚩 border-radius 속성

- 테두리가 둥근 사각형 또는 원을 만들 수 있음

- 속성을 사용하면 테두리가 둥근 버튼을 별도 이미지 없이 만들 수 있음

🚩 background-image 속성

- 배경에 넣을 그림을 지정하는 스타일 속성

- URL 단위 또는 그레이디언트 등 입력

🚩 background-size 속성

- 크기 조절할 때 사용

- 1개 또는 2개의 크기 단위를 적용하여 각각 너비와 높이 의미

- 숫자로 띄어쓰기를 구분하는 것과 쉼표로 구분하는 것을 다름

- 쉼표를 사용하면 각각의 배경에 서로 다른 크기를 적용하는 것으로 인식

🚩 background-repeat 속성

- 이미지가 패턴을 이루고 -x 키워드를 적용하면 X축 방향으로 이미지가 반복, -y 키워드를 적용하면 Y축 방향으로 이미지가 반복

🚩 background-attachment 속성

- 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지 지정하는 스타일 속성

- 기본 키워드는 scroll 키워드

-  scroll 키워드는 화면 스크롤에 따라 배경 이미지가 함께 이동한다는 것 적용

🚩 background-position 속성

- 다음과 같은 형태로 값을 적용

1. background-position: 키워드;
2. background-position: x축크기;
3. background-position: x축크기 y축크기;

🚩 font-size 속성

- 글자의 크기를 지정하는 스타일 속성

🚩 font-family 속성

- 폰트를 지정하는 스타일 속성

- 한 단어로 이루어진 폰트는 따옴표를 사용하지 않음

- 두 단어 이상으로 이루어지는 단어는 따옴표를 반드시 사용

- 폰트를 적용할 때는 몇가지 주의할 점이 있음'

1. 개발하고 있는 우리의 컴퓨터에는 설치되어 있지만 개발한 웹 페이지를 사용할 사용자에게는 폰트가 설치되어 있지 않을 수 있음
2. 웹 브라우저는 지정한 폰트를 사용자의 컴퓨터에서 차례대로 찾아 출력
3. 다국어 웹 페이지를 제공할 경우 사용자에게 무슨 폰트가 있는지 일일이 확인할 수 없음

🚩 font-style 속성, font-weight 속성 

- 폰트의 기울기 또는 두께를 조정하는 스타일 속성

- 두께를 지원하지 않는 폰트는 font-weight 속성을 사용해 두께 조절 가능

🚩 line-height 속성

- 글자의 높이 지정

- 현대의 HTML 페이지는 문서 형태보다 애플리케이션 형태로 사용하므로 글자의 높이를 지정하는 기능보다 글자를 수직 중앙 정렬할 때 사용

- font-sixe 속성과 line-height 속성 사이에는 "/" 문자를 입력해야 하므로 주의

🚩 text-align 속성

- 글자 정렬과 관련된 속성

🚩 text-decoration 속성

- a 태그에 href 속성을 사용하면 글자에 밑줄이 생기고 글자의 색상이 파란색으로 변경

- 일반적인 웹 페이지에는 링크에 밑줄이 없음

- text-decoration 속성을 사용하여 밑줄 제거

- text-decoration 속성으로는 밑줄만 제거되며 색상은 color 속성을 사용해 별도로 적용

🚩 position 속성

- HTML 태그의 위치 설정 방법을 변경 할 때 사용

- 상대 위치 좌표를 사용할 때는 position 속성에 static 키워드 또는 relative 키워드 적용

- static 키워드 적용하면 태그가 "위에서 아래로"와 "왼쪽에서 오른쪽으로" 순서에 맞게 배치

- relative 키워드 적용하면 static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 이동할 수 있음

- 절대 위치 좌표를 사용할 때 position 속성에 absolute 키워드 또는 fixed 키워드 적용

static	태그가 위에서 아래로 순서대로 배치
relative	초기 위치 상태에서 상하좌우로 위치 이동
absolute	절대 위치 좌표 설정
fixed	화면을 기준으로 절대 위치 좌표 설정

🚩 z-index 속성

- 순서를 변경하고 싶을 때 사용

- 숫자를 적용하며 숫자가 클수록 앞에 위치

🚩 위치의 속성과 관련된 공식

- position 속성에 absoulte 키워드 적용하면 부모 태그가 영역을 차지하지 않음

- 자손의 position  속성에 absolute 키워드를 적용하면 부모의 height 속성 사용

- 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative 키워드 적용

🚩 overflow 속성

- 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성

hidden	영역을 벗어나는 부분을 보이지 않게 만듬
scroll	영역을 벗어나는 부분을 스크롤로 만듬

- overflow 속성에서 scroll 키워드를 적용하면 무조건 모든 축에 스크롤 생성

- 특정한 방향으로만 스크롤을 생성할 때 overflow-x 속성과 overflow-y 속성 사용

- 프로그래밍 요소를 사용해 애니메이션을 구현할 때 많이 사용

🚩 float 속성

- 웹 페이지를 만들 때 가장 많이 사용하는 스타일 속성

left	태그를 왼쪽에 붙임
right	태그를 오른쪽에 붙임

🚩 float 속성 개요

- 부유하는 대상을 만들 때 사용하는 스타일 속성

- img 태그는 inline 방식이고 p 태그는 block 형식의 태그이므로 글자와 그림을 분리하여 출력

- 속성을 사용하면 그림을 글자 위에 띄울 수 있음

- 현대에는 웹 페이지의 레이아웃을 만들 때 더 많이 사용

🚩 float 속성을 사용한 수평 정렬

- float 속성 사용하면 태그를 수평으로 정렬 가능

🚩 float 속성을 사용한 레이아웃 구성

- 자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드 적용

- 태그에 width 속성을 사용하고 margin-left 속성과 margin-right 속성에 auto 키워드 적용하면 자동으로 중앙 정렬

- float 속성을 사용한 태그의 부모에 overflow  속성을 사용하고  hidden 키워드 적용

🚩 clean:both를 사용한 레이아웃

- clean:both를 사용하면 float으로 일그러진 레이아웃을 쉽게 초기화 가능

🚩 text-shadow 속성

- 글자에 그림자를 부여하는 스타일 속성

🚩 box-shadow 속성

- 박스에 그림자를 부여하는 속성

🚩 그레이디언트

- 2가지 이상의 색상을 혼합해서 채색하는 기능

- 선형 그레이디언트 이외에 원형 그레이디언트도 쉽게 생성 가능

- 색상 블록은 왼쪽 위치에 색상 단위를 적용하고 오른쪽에서 퍼센트 단위를 적용해 위치를 지정

🚩 벤더 프리픽스

- 각각의 속성에 지정된 값을 보면 -moz, -webkit 등 글자가 써있는 것

- 웹 브라우저 공급 업체에서 제공하며, 실험적인 기능이 필요할 때 사용

- 현재는 대부분의 실험적인 기능이 실제 표준으로 들어가면서 벤더 프리픽스를 많이 사용하지 않아도 되도록 변경

- 최신 웹 브라우저에서는 벤더 프리픽스 없이도 많은 속성 사용 가능