💭 CSS 사용법
속성:값형태로 사용되며 여러 속성을 줄 때는 세미콜론(;)으로 구분한다.
구글크롬의 개발자모드(f12)를 사용하면 쉽다.
💭 CSS 자주 사용하는 속성
① width , height
width은 가로길이, height은 세로길이를 의미
auto: 기본값, 브라우저가 계산한 너비
px: 픽셀
%: 부모 요소에 상대적인 너비
initial: 기본값으로 초기화
inherit: 부모 요소로부터 상속 받은 값
② margin, padding
margin은 바깥쪽 여백, padding은 안쪽 여백을 의미
두 속성은 방향(top, right, bottom, left)을 지정할 수 있고 width,height 속성과 마찬가지로 px, auto 등 값을 사용한다.
*예제*
margin:10px -> 상하좌우 모두 10px 여백
margin:20px 10px -> 상하 20px , 좌우 10px 여백
margin:40px 30px 20px 10px -> 위 40px, 오른쪽 20px, 아래 20px, 왼쪽10px 여백
margin:40px 30px 10px -> 위 40px, 좌우 30px, 아래 10px 여백③ box-sizing
width 와 height 를 원하는 값으로 지정해도, padding 이나 border 옵션을 주게 되면 가로길이나 세로길이가 그만큼 더해져서 요소가 커진다. 이는 box-sizing 옵션으로 바꿀 수 있다.
content-box: default, width를 지정하여도 padding이나 다른 속성들이 들어오면 요소가 그만큼 커짐
border-box: 다른 속성을 주어도 지정해둔 width와 height의 크기를 벗어나지 않음
❌ 주의
css에서 width 속성을 100% 주면 부모의 width 만큼 너비가 설정된다. 하지만 box-sizing 속성의 값이 content-box 일때 width:100% 나 padding , border 등을 주게되면 부모의 영역을 초과해서 너비가 정해질 때가 있다. 이런 문제를 해결하기 위해서는 box-sizing 속성값을 border-box로 설정하거나 width를 auto를 주어 해결한다.
④ color
글자의 색상을 지정
inherit: 기본값 , 부모의 색상을 가져옴
red 또는 blue: 이미 css로 정의된 색상
#000 또는 #FFFFFF: 16진수의 색상코드
rgb(255,255,255): rgb 색상
rgba(200,100,150,0.5): 알파(투명도)가 적용된 rgba 색상
⑤ font
글자의 폰트를 정의
-
font-style: 기울기 등의 스타일 지정
nomal : 기본
italic : 기울기
-
font-weight: 글자 두께
100~900 사이의 숫자를 통해 설정하거나, 지정된 값을 사용한다.
lighter (100)
normal (400)
bold (700)
bolder (900) -
font-variant: 글꼴 변형 (소문자를 대문자로 바꾸는 등) -
font-size: 글자 크기
px 나 em(반응형웹에서 다룬다)등을 사용 -
line-height: 줄 간격 -
font-family: 글꼴
통상적으로 구글폰트에서 가져와서 head내부에 link태그로 External방식으로 적용시킴
⑥ text-align
텍스트의 정렬 방향을 지정
left
right
center
jutify -> 양쪽 정렬
⑦ background
태그의 배경을 지정
-
background-color: 배경 색
color의 값과 동일 -
background-image: 배경 이미지
*예제*
background-image : url("이미지 경로나 이미지url주소")-
background-repeat: 배경 이미지 반복 여부
no-repeat : 반복안함
repeat-x : x축으로 반복
repeat-y : y축으로 반복
repeat : 모든 방향으로 반복 -
background-position: 배경 이미지 위치
숫자값 (x , y)
left
top
center
bottom
right
⑧ border
테두리를 지정
-
border-width: 테두리의 두께
px 단위사용 -
border-style: 테두리의 스타일
solid : 실선
dotted : 점선
dashed : 조금긴 점선 -
border-color: 테두리의 색상
color 값과 동일함
⑨ border-radius
테두리를 둥글게 만들어주는 속성이며 px와 % 단위를 사용한다.
border 속성 없이도 사용 가능하며 4개 모서리의 값을 띄어 쓰면 left -> top -> right -> bottom으로 각자 다른값을 지정한다.
*예제*
border-radius : 1px 2px 3px 4px;⑩ visibility
visible: 보임
hidden: 숨김 (대신 영역은 차지함)
collapse: 겹치도록 지정 (테이블 행과 열 요소만 지정할 수 있으며, 그외 요소 지정 시 hidden으로 해석)
inherit: default, 부모 요소의 값을 상속
