HTML과 비슷하게,CSS도 특정한 기능을 하는 속성들이 미리 정의되어 있으며, 이를 활용하여 태그의 스타일을 정의 할수 있다. 속성:값 의 형태로 사용되며, 여러 속성끼리는 ;를 통해 구분된다.
선택자{ 속성1: 값1; 속성2: 값2 }
/* or */
선택자{
속성1: 값1;
속성2: 값2;
}width,height
width와 height 속성은 각각 가로 길이, 세로 길이를 의미한다.
값을 정의 할때는 “100px” 처럼 숫자 뒤에 단위를 표시하여 적는다.(px는 픽셀 이라는 의미의며 ‘50%’ 처럼 ‘%’ 단위를 사용 할 수도 있음)
<span> 태그등 inline 요소는 적용 되지 않는다.
#box{ width: 100px; height: 60px }margin,padding
margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미한다.width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습는다.
margin과 padding는 [border](https://ofcourse.kr/css-course/border-%EC%86%8D%EC%84%B1) 을 경계로 나뉜다.
방향마다 여백을 다르게 설정할 수 있다.
margin: 20px같은 표현은 상하좌우 모두 20px을 의미한다margin: 30px 10px은 상하 30px, 좌우 10px을 의미한다.margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미한다.margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미한다.
즉 방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정한다.
#box{ margin: 10px; padding: 20px }box-sizing
content-box
width를 200px로 설정했다고 할지라도 전체 너비가 200px이 되는 것이 아닌, 여기에 padding과 border-width가 더해져서 그려지게 된다.
이는 계산 방법을 content-box라고 하며, box-sizing 속성을 content-box로 주게 되면 이와 같이 계산하게 된다. 기본적으로 CSS에서 위처럼 요소를 렌더링하는 이유는 box-sizing 속성의 기본 값이 content-box이기 때문이다.
border-box
padding과 border에 영향을 받지 않고 전체 너비를 설정
CSS에서 width란 패딩, 마진, 보더를 제외한 값이다. 그러므로, width를 정하고 패딩, 마진과 같은 값들을 따로 주게 되면 예상한 레이아웃의 가로길이는 훨씬 크게 보인다.속성 하나하나를 생각하며 레이아웃 짜는 것은 매우 불편하기 때문에 box-sizing: border-box;를 이용하는 것이 편하다.
color
color 속성은 단어 뜻대로 색상, 정확히는 글자의 색상을 의미한다.
red,blue등 이미 정의된 색#000,#FFFFFF등의 16진수 색상 코드rgb(255, 255, 255)등의 rgb 색상rgba(200, 100, 150, 0.5)등의 알파(투명도)가 적용된 rgba 색상
color 속성은 위 목록등의 값을 사용할 수 있으며, 기본값은 inherit으로 부모의 색상을 가져온다.
#text1 { color: red; }
#text2 { color: #0A0; }
#text3 { color: rgb(0, 0, 150); }
#text4 { color: rgba(30, 150, 100, 0.5); }font
font-style: 글꼴지정
font-weight: 두께
font-variant: 글꼴 변형(소문자를 대문자로 바꾸는 등)
font-size: 글자크기
line-height: 줄 간격
font-family: 글꼴(굴림,돋움,...)
text-align
텍스트의 정렬 방향을 의미
left: 왼쪽 정렬right: 오른쪽 정렬center: 중앙 정렬justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)
#box1 { text-align: right; }
#box2 { text-align: left; }
#box3 { text-align: center; }background
배경을 지정하는 속성
background-color: 배경색
background-image: 배경 이미지
배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용한다.경로는 background-image: url("이미지 경로") 처럼 작성한다.
특별한 점은 컨테이너의 크기와 상관없이 삽입된 background-image의 크기는 컨테이너에 맞춰 늘어나거나 줄어들지 않고 그대로 표시되며,이미지 보다 컨테이너가 더 크다면 이미지는 반복되어 표시되게 된다.
background-repeat: 배경 이미지 반복 여부
background-image로 컨테이너보다 작은 이미지를 적용하면 이미지가 반복되어 출력된다.
#box3-1{ background-repeat: no-repeat }
#box3-2{ background-repeat: repeat-x } /* x축으로 반복 */
#box3-3{ background-repeat: repeat-y } /* y축으로 반복 */
#box3-4{ background-repeat: repeat }background-position 배경 이미지 위치
일반적으로 background-image 는 왼쪽 위부터 이미지를 출력한다.background-position 속성을 사용하면 이미지의 좌표를 수정 할 수 있게 된다.
margin, padding 속성에서 지정했던 것과 비슷하게 띄어쓰기를 기준으로 x좌표, y좌표를 지정한다.픽셀 뿐만 아니라 left, top, center, bottom, right 등의 상수도 쓸 수 있다.
border
태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성이다. width - style - color의 순서로 사용한다.
border-width
테두리의 두께로, 주로 px 단위를 사용한다.
border-style
테두리의 스타일로 실선,점선, 이중선 등의 옵션이 존재한다.
border-color
테두리의 색상으로, 값은 color 포맷을 사용한다.
border-radius
border-radius 속성은 요소의 테두리를 둥글게 만들어준다. px 단위와 % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있다.
총 4개의 모서리를 각각 다른 값으로도 줄 수 있다. margin 및 padding 속성 처럼 4개의 값을 띄워쓰면 왼쪽-위 부터 시계 방향으로 각자 다른 값을 지정할 수 있다.
visibility
visibility 속성은 태그의 가시성을 결정한다.
아래의 4가지 값을 가지며, 기본 값은 inherit 이다.
visible: 보임hidden: 숨김 (자신의 영역은 계속 차지)collapse: 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)inherit: 부모 요소의 값을 상속
display
요소를 어떻게 보여줄지를 결정한다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다.
none
요소를 렌더링하지 않도록 설정한다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않는다.
<style>
.display-none{ display: none }
.invisible{ visibility: hidden }
</style>
<div class="display-none">1</div>
<div>2</div>
<div class="invisible">3</div>
<div>4</div>block
div, p, h, li 등이 이에 해당된다.
기본적으로 가로영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된것처럼 보인다.
width, height 속성을 지정할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음줄에 렌더링 된다.
inline
span, b, i, a 등이 이에 해당된다.
block과 달리 줄바꿈이 되지 않고, width와 height를 지정할 수 없다. inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시된다.
inline-block
block과 inline의 중간 형태로 볼수 있는데, 줄바꿈이 되지 않지만 크기를 지정할 수 있다.
position
태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다.
static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다.relative: 원래 있던 위치를 기준으로 좌표를 지정한다.fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다.inherit: 부모 태그의 속성값을 상속받는다.- relative 인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 된다. (없다면 전체 문서가 기준)
cursor
해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.
auto: 자동default: 기본값 (화살표)pointer: 손가락 모양 (클릭 가능한 버튼)wait: 로딩
float
원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.
inherit: 부모 요소에서 상속left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.none- 요소를 부유시키지 않음
left와 right를 통해 부유속성을 지정시 display는 무시된다. (none은 제외)또한 이후 요소에 [clear](https://ofcourse.kr/css-course/clear-%EC%86%8D%EC%84%B1) 속성이 있으면 페이지 흐름이 달라진다.
Clear
float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰인다.방향에 따라 3가지 속성을 사용할 수 있다.
left: 좌측 부유 제거right: 우측 부유 제거both: 양쪽 모두 제거
