FrontEnd 공부 9일차 -css 자주쓰는 속성 ( 개인 스터디 )

안녕하세요. 달리는 애아빠입니다.

 

오늘은 이전에 html 문서 만들시 자주 사용했던 태그 정리했던 포스팅처럼 CSS 도 정리한번 하도록 하겠습니다.

 

 

1. width (가로길이) , height ( 세로길이 )

auto : 기본값, 브라우저가 계산한 너비
px : 픽셀
% : 부모 요소에 상대적인 너비
initial :기본값으로 초기화
inherit : 부모 요소로부터 상속 받은 값

2. margin (안쪽에서 늘어남) , padding ( 밖에서 늘어남 )

margin-top : 위 여백 지정
margin-bottom : 아래 여백 지정
margin-left : 왼쪽 여백 지정
margin-right : 오른쪽 여백 지정
margin:40px 30px 20px 10px : 순서대로 위, 오른쪽,아래,왼쪽

padding-top : 위 여백 지정
padding-bottom : 아래 여백 지정
padding-left : 왼쪽 여백 지정
padding-right : 오른쪽 여백 지정
padding:40px 30px 20px 10px : 순서대로 위, 오른쪽,아래,왼쪽

3. color (글자의 색상을 변경)

inherit : 기본값 , 부모의 색상을 가져온다
red 또는 blue : 이미 css로 정의된 색상
#000 또는 #FFFFFF : 16진수의 색상코드
rgb(255,255,255) : rgb 색상
rgba(200,100,150,0.5) : 알파(투명도)가 적용된 rgba

4. font (글자의 폰트를 변경)

font-style : 기울기 등의 스타일 지정
font-weight : 글자 두께
font-variant : 글꼴 변형 (소문자를 대문자로 바꾸는 등)
font-size : 글자 크기
line-height : 줄 간격
font-family : 글꼴

5. text-align ( 텍스트의 정렬 방향을 지정 )

left
right
center
justify : 양쪽 정렬

6. background ( 태그의 배경을 변경한다 )

background-color : 배경 색
background-image : 배경 이미지
background-repeat : 배경 이미지 반복 여부
background-position : 배경 이미지 위치

 

7. border ( 속성을 표시할 테두리를 지정합니다)

border-width : 테두리의 두께 px 단위사용
border-style : 테두리의 스타일
border-color : 테두리의 색상 .. color 값과 동일함

border-style 속성은 표시할 테두리의 종류를 지정합니다 .
다음 값이 허용됩니다.
dotted : 점선 테두리를 정의합니다.
dashed : 점선 테두리를 정의합니다.
solid : 단색 테두리를 정의합니다.
double : 이중 테두리 정의
groove : 3D 홈 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
ridge : 3D 융기된 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
inset : 3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
outset : 3D 아웃셋 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
none : 경계를 정의하지 않음hidden- 숨겨진 테두리를 정의합니다.

 

8. border-radius (테두리를 둥글게 만들어준다. px, % 단위를 사용하고 border 속성없이도 사용가능하다)

 

#box{border-radius:5px;}  여러 방향 다르게 지정
 #box{border-radius:1px 2px 3px 4px;}

 

9. visibility ( 4 속성값을 가지며 기본값은 inherit )

visible : 보임
hidden : 숨김 (대신 영역은 차지함)
collapse : 겹치도록 지정 (테이블 행과 열 요소만 지정할 수 있으며, 그외 요소 지정 시 hidden으로 해석)
inherit : default 값, 부모 요소의 값을 상속

 

10. display ( 보여지는 요소를 어떻게 보여줄지 지정한다 )

none : 보이지 않음
block : 블록 박스 (세로)
inline : 인라인 박스 (가로)
inline-block : 블록과 인라인의 중간 형태

 

11. cursor ( 마우스 커서를 변경 할수 있다)

 

auto : 자동
default : 기본 값 (화살표)
pointer : 손가락 모양 (클릭 가능한 버튼)
wait : 로딩

 

 

오늘하루도 수고하셨습니다.