자주 사용하는 CSS 속성값 정리
자주 사용하는 CSS 속성값
CSS에서 자주 사용하는 속성값을 정리한 내용이다.
색상(Color)
css에서 색을 표현하는 방법에는 색상 이름으로 표현, RGB 색상값으로 표현, 16진수 색상값으로 표현 3가지 방법이 있다.
색상 이름으로 표현
표준 색상 명을 입력하여 표현한다.
{
color:black;
}
RGB 색상값으로 표현
RGB의 범위인 0~255까지의 숫자로 조합된 색 표현 방식이다.
{
color:rgb(0,0,255);
}
16진수 색상값으로 표현
16진수로 표현된 색 표현 방식이다.
{
color:#0000FF
}
배경(background)
css background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한번에 지정할 수 있다.
background-color
background-color는 해당 요소의 배경색을 설정한다.
background-image
background-imag는 해당 요소의 배경으로 나타낼 이미지를 설정한다.
background-size
background-size는 해당 요소의 배경 이미지의 크기를 설정한다.
CSS에서 자주 사용하는 속성값을 정리한 내용이다.
css에서 색을 표현하는 방법에는 색상 이름으로 표현, RGB 색상값으로 표현, 16진수 색상값으로 표현 3가지 방법이 있다.
표준 색상 명을 입력하여 표현한다.
{
color:black;
}
RGB의 범위인 0~255까지의 숫자로 조합된 색 표현 방식이다.
{
color:rgb(0,0,255);
}
16진수로 표현된 색 표현 방식이다.
{
color:#0000FF
}
css background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한번에 지정할 수 있다.
background-color는 해당 요소의 배경색을 설정한다.
background-imag는 해당 요소의 배경으로 나타낼 이미지를 설정한다.
background-size는 해당 요소의 배경 이미지의 크기를 설정한다.
속성값으로는 contain, cover, auto, 길이값 직접 입력, 퍼센트 입력이 존재한다.
텍스트 정렬
text-align
text-align은 블록 요소나 표의 칸 상자의 가로 정렬을 설정한다.
속성값으로는 start, end, left, right, center, justify 등이 존재한다.
글꼴(font)
css font 속성에는 여러개가 있지만 여기에서는 font-family, font-weight, font-size 3가지만 소개한다.
font-family
font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해준다.
font-family는 하나의 글꼴만을 설정할 수 도 있고 여러 개의 글꼴을 같이 설정할 수 도 있다.
font-family 사용시 글꼴의 이름이 한 단어 이상이면 반드시 따옴표를 사용하여 둘러 쌓아야 하며 여러개의 글꼴을 나열 할 때에는 쉼표로 구분 짓는다.
font-weight
font-weight 속성은 텍스트의 굵기를 설정한다.
font-size
font-size 속성은 텍스트의 크기를 설정한다.
크기를 지정하는 방식에는 2가지 방식이 있는데 바로 절대적 크기와 상대적 크기이다.
절대적 크기
절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용 한다.
즉 모든 웹 브라우저에서 같은 크기로 표현된다.
단위에는 px, pt 등이 있다.
px(픽셀) : 스크린의 픽셀을 기준으로 하는 절대적인 크기이다.
pt(포인트) : 포인트 크기를 의미하는 절대적인 크기이다.
상대적 크기
상대적 크기는 텍스트의 크기도 같이 변하는 방식이다.
단위에는 %, em, rem, vw, vh 등이 있다.
% : 백분율 단위로 기본 크기를 100%로 설정하고 그에 대한 상대적인 크기를 설정한다.
em : 해당 글꼴의 기본 크기를 1em으로 설정하고 그에 대한 상대적인 크기를 설정한다.
rem : html의 폰트 사이즈를 1rem으로 설정하고 그에 대한 상대적인 크기를 설정한다.
vw(Viewport Width) : 브라우저 너비값의 100분의 1이다. 즉 1vw는 viewport의 넓이의 1%와 같다.
vh(Viewport Height) : 브라우저 높이값의 100분의 1이다. 즉 1vh는 viewport의 높이의 1%와 같다.
반응형 웹사이트들이 많아 지면서 절대 단위보다는 상대 단위를 많이 쓰는 추세이다.
Author And Source
이 문제에 관하여(자주 사용하는 CSS 속성값 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryurbsgks5114/자주-사용하는-CSS-속성값-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)