front-end 국비과정 일차 8학습일지 CSS에서 사용되는 핵심속성1
css 속성
block요소 : width와 height값을 가질 수 있다 모든 면에 margin, padding값을 줄 수 있다
lnline요소 : width와 height값을 가질 수 없다 윗면, 아랫면의 margin, padding값을 가질 수 없다.
1 박스 모델
width : 요소의 가로나비를 설정한다.
기본값 :auto
height : 요소의 세로 너비를 설정한다.
기본값 :auto
max-width , max-height: 요소가 가질 수 있는 최대 가로/세로 너비를 설정한다
기본값:none
min-width , max-height: 요소가 가질 수 있는 최소 가로/세로 너비를 설정한다
기본값:0
css에 사용되는 단위
px:픽셀
%: 상대적 백분율
em: 요소가 가진 글꼴 크기
rem: 루트 요소(html)의 글꼴 크기
vw/vh: 뷰포트 가로/세로 너비의 백분율
외부 여백(margin)
기본값:0
사용 가능 값: 단위(음수 값을 사용할 수 있다.), auto(브라우저가 여백을 계산)
단계별로 작성 가능
1 값을 하나 명시한 경우 : 모든 면에 동일한 margin값을 적용한다
2 값을 두 개 명시한 경우 : (위, 아래) (좌, 우)에 명시한 margin값을 적용한다
3 값을 세게 명시한 경우 : (위), (좌, 우), (아래)에 명시한 margin값을 적용한다
4 값을 네게 명시한 경우 : 위, 좌, 아래 , 우에 명시한 margin값을 적용한다
margin-top, right, left, bottom을 이용해 특정 면에 margin값을 개별적으로 적용할 수 있다.
내부 여백(padding)
기본값:0
사용 가능 값: 단위, auto(브라우저가 여백을 계산)
단계별로 작성 가능
1 값을 하나 명시한 경우 : 모든 면에 동일한 padding값을 적용한다
2 값을 두 개 명시한 경우 : (위아래) (좌, 우)에 명시한 padding값을 적용한다
3 값을 세게 명시한 경우 : (위), (좌, 우), (아래)에 명시한 padding값을 적용한다
4 값을 네게 명시한 경우 : 위, 좌, 아래 , 우에 명시한 padding값을 적용한다
padding-top, right, left, bottom을 이용해 특정 면에 padding값을 개별적으로 적용할 수 있다.
테두리(border)
개별속성
border-width: 선의 두께를 설정한다 CSS단위
border-style: 선의 종류를 설정한다 ex) solid(실선) dotted(점선) dashed(파선), doble(두 줄선)
border-color: 선의 색상을 설정한다 ex) HEX코드, 색상 이름, RGB, RGBA(투명도 지원)
단축 속성
border: border-width border-style border-color;
border-top, left, right, bottom을 통해 특정 면에 테두리를 설정할 수 있다.
border-radius: 테두리의 형태를 둥글게 만든다
기본값:0
속성 값 : css 단위
border-radius의 50%라고 값을 명시하면 테두리가 원형이 된다.
box-sizing: 요소의 크기 계산 기준을 설정한다
기본값 :content-box
속성 값:
content-box :요소의 border와 padding값을 고려하지 않고 요소의 width/height를 계산한다
border-box : 요소의 border와 padding값을 고려하여 요소의 width/height 계산한다
overflow: 요소 안에 글자가 넘쳤을 때 넘친 내용을 제어하는 속성이다
기본값:
visible: 넘친 내용을 그래도 보여줌
hidden: 넘친 내용을 숨김
auto: 넘친 내용이 있는 경우에만 scroll바 생성
scroll: 넘친 내용을 숨기고 넘치는 내용이 없어도 scroll바 생성
overflow-x: overflow와 같은 기능을 하지만 가로축으로 넘치는 부분만 제어한다
overflow-y: overflow와 같은 기능을 하지만 세로축으로 넘치는 부분만 제어한다
display:
block:상자 요소(레이아웃)
inline:글자 요소
inline-block: inline요소이지만 block요소처럼 width/height 값을 설정할 수 있게 해주는 기능
flex: 1차원 레이아웃
grid: 2차원 레이아웃
none: 화면에서 사라짐
opacity: 요소의 투명도를 설정한다
기본값 :1
설정값 : 1을 100%로 불투명이라 기준점을 정하고 소수점 0.1~1 사이 값을 이용해 백분율로 투명도 지정 이때 0은 생략하여. 1이라 명시할 수 있다.
font-style: 글자의 기울기를 설정한다
기본값: normal
설정값:
normal:기울기 없음
itaric: 이탤릭체로 약간 기울임
font-weight: 글자의 두께를 설정
기본값 normal(400)
설정값:
100 단위로 100~ 900까지 사용할 수 있다
normal: 글자 두께 400을 의미
bold: 글자 두께 700을 의미
font-size: 글자 크기를 설정한다
기본값:16px
설정값 : css 단위
line-height: 한 줄의 높이를 설정 주로 줄 간격을 잡을 때 사용한다
기본값 : normal
설정값
숫자 1은 글자 크기만큼의 높이를 의미하고 숫자 1을 기준으로 배수로 사용, css 단위
font-family: 글꼴을 설정한다
글꼴 후보를 2개 이상(개수 제한 x)을 , 로 구분하여 명시하고 마지막에는 글꼴에 계열을 명시한다 글꼴 후보 중 내 컴퓨터에 사용 가능한 글꼴이 없다면
마지막에 명시한 글꼴 계열로 브라우저가 사용 가능한 글꼴을 자동으로 출력한다
color: 글자 색상을 설정한다
기본값: 부모 요소의 color값
설정값: 색상 이름 명시
text-align: 문자 정렬 방식을 설정
left:왼쪽 정렬
right:오른쪽 정렬
center:가운데 정렬
justify: 양쪽 정렬(2줄 이상일 때 사용 가능)
text-decoration:문자의 선을 설정
기본값:none
설정값:
none:장식 없음
underline:글자 밑줄에 선을 설정
overline: 글자 윗줄에 선을 설정
line-through: 글자 중앙에 선을 설정
text-indent: 문자 첫 줄을 들여쓰기한다 음수 값을 허용하는데 음수 값을 이용하여 내어 쓰기를 한다
기본값:0
설정값 : css 단위
background-
1 background-color: 요소의 배경 색상을 설정한다.
기본값 :transparent(투명색)
설정값: 색상, hex, rgb(), rgba()
2 background-image : 요소의 배경에 하나 이상(여러 개 image)의 이미지를 삽입할 수 있다.
기본값:none
사용법 background-image:url("경로") url을 여러 개 사용할 때는 , 로구분한다
3 background-repeat: 배경 이미지에 반복 여부를 설정한다.
기본값: repeat
속성 값:
repeat: 배경 이미지를 x축, y축으로 바둑판식 반복한다
repeat-x: 배경 이미지를 가로축으로 반복한다.
repeat-y: 배경 이미지를 세로축으로 반복한다.
no-repeat: 배경이미지를 반복하지 않는다.
4 background-position: background-image로 만들어진 배경 이미지의 위치를 설정한다
기본값 : 0
속성 값:
CSS단위
요소의 영역 안에서 left, right, center(x축) top, bottom(y축)으로 위치 설정
5 background-attachment: 요소가 스크롤될 때 배경 이미지의 스크롤 여부를 설정
기본값 : scroll
background-attachment의 속성 값
scroll: 요소가 스크롤될 때 배경 이미지도 같이 스크롤된다
fixed: 요소가 스크롤돼도 배경 이미지는 해당 위치에 고정된다.
6
background-size: 요소의 배경 이미지 크기 설정
기본값 :auto
속성 값:
auto:이미지의 실제 크기
CSS단위: 단위로 크기를 명시할 경우 width/height 둘 중 하나의 값만 설정해야 비율이 제대로 유지된다.
cover: 요소의 width/height값 중 값이 더 큰 부분에 맞춰진다
contain: 요소의 width/height값 중 값이 더 작은 부분에 맞춰진다