web_frontend(13)CSS 속성

CSS 속성

 

속성이란 이름도 HTML, CSS 그리고 JS에 따라 한글은 똑같지만 영어는 다르다. (CSS와 JS는 동일)

• HTML 속성(Attributes)
• CSS 속성(Properties)
• JS 속성(Properties)

 

CSS로 다음의 

박스 모델

글꼴, 문자

배경

배치 

플렉스

전환

변환

띄움

애니메이션

그리드

다단

필터 

등등 다양한 스타일 작업을 할수 있다.

 

 

 

 

박스모델

 

width, height 

요소의 가로/ 세로 너비

 

auto: 브라우저가 너비를 계산  (기본값)

단위: px. em ,vw 등 단위로 지정

 

 

<span></span>

대표적인 인라인 요소! 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도.

세로 auto:  포함한 콘텐츠 크기만큼 자동으로 줄어듬

가로 auto:  포함한 콘텐츠 크기만큼 자동으로 줄어듬

 

 

<div></div>

대표적인 블록 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도

세로 auto: 포함한 콘텐츠 크기만큼 자동으로 줄어듬

가로 auto: 부모 요소의 크기만큼 자동으로 늘어남

 

 

max-width, max-height

요소가 커질수 잇는 최대 가로/세로 너비

 

none: 최대 너비 제한 없음

auto: 브라우저가 너비를 계산

단위: px, em, vw 등 단위로 지정

 

 

 

min-width, min-height

요소가 작아질 수 있는 최소 가로/세로 너비

 

0: 최소 너비 제한 없음

auto: 브라우저가 너비를 계산

단위: px, em, vw등 단위로 지정