CSS 주요 속성 정리

width 와 height

width= 가로 길이
height = 세로 길이

값을 정의 할때는 "100px"처럼 숫자 뒤에 단위를 적어 표시 (% 사용가능)

ex)

#box {
width : 100px;
height : 60px;

margin 과 padding

margin = 바깥쪽 여백
padding = 안쪽 여백

값을 정의 할때는 "100px"처럼 숫자 뒤에 단위를 적어 표시 (% 사용가능)

ex)

#box3{ 
margin-top: 0;  
padding: 10px 30px 5px;
}

margin: 50px 같은 표현은 상하좌우 모두 50px을 의미
margin: 20px 10px은 상하 20px, 좌우 10px을 의미
margin: 50px 10px 30px 50px은 위 50px, 오른쪽 10px, 아래 30px, 왼쪽 50px을 의미
margin: 15px 10px 25px은 위 15px, 좌우 10px, 아래 25px을
4개의 값을 쓸 때는 상 -> 우 -> 하 -> 좌 순서로 입력 됨

margin-top : 100px -> 방향 지정하고 입력 가능

font

font 속성은 글자의 폰트를 정의 하는 속성

font 관련 속성

font-style - 이탤릭체 등의 글꼴의 스타일 지정

• nomal : 기본
• italic : 이탤릭체
  font-weight - 글자 두께
• 글꼴의 두께로, 미리 정의된 단어나 100 ~ 900 사이의 숫자를 통해 설정 기본값은 normal
  font-size - 글자 크기
• px, px, em, 등의 단위와 small, big 등의 상수 크기를 사용할 수 있음

font-family - 글꼴(굴림,돋움,...)

• 쉼표로 여러 글꼴을 등록 할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 맨 앞에 있는 글꼴이 사용자의 컴퓨터에 없을 때 그 다음 글꼴을 사용, default값으로 sans-serif를 사용

text-align

text-align 속성은 텍스트의 정렬 방향을 의미

• left: 왼쪽 정렬
• right: 오른쪽 정렬
• center: 중앙 정렬
• justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

background

태그의 배경을 지정하는 속성

background-color - 배경 색

• 태그의 크기가 없을 경우 배경색은 표기되지 않음

background-image - 배경 이미지

• background-image: url("이미지 경로") 처럼 작성

background-repeat - 배경 이미지 반복 여부

• 반복 여부 지정

background-position - 배경 이미지 위치

• 일반 적으로 왼쪽 위부터 이미지를 출력
• background-position 속성을 사용하면 이미지의 좌표를 수정 할 수 있음
• margin, padding에서 지정했던 것과 비슷하게 띄어쓰기를 기준으로 x좌표,y좌표를 지정하며 픽셀뿐만 아니라 left, top, center, bottom, right 등의 상수도 쓸 수 있음

ex)

#box5{
	width: 300px;
	height: 100px;
	background: yellow url('/images/attach/google.png') no-repeat center center;
}

border 속성

• boder 속성은 태그의 테두리를 설정하는 속성
• width - style - color의 순서로 사용

border-width - 테두리의 두께로, 주로 px단위를 사용
border-style - 테두리의 스타일로 실선,점선,이중선 등의 옵션이 존재
border-color - 테두리의 색상으로, 값은 color 속성의 포맷을 사용

방향

• border-top
• border-bottom
• border-left
• border-right

border-top-color처럼 방향과 색,두께,스타일을 따로 설정할 수도 있음

border-radius

• 테두리를 둥글게 만들어 주고, px단위와 %단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있음
• 총 4개의 모서리를 각각 다른 값으로도 줄 수 있고, margin 및 padding 속성 처럼 4개의 값을 띄어쓰면 왼쪽-위 부터 시계방향으로 각자 다른 값을 지정할 수 있음

display

display 속성은 요소를 어떻게 보여줄지 결정

none : 보이지 않음

• 요소를 랜더링하지 않도록 설정. 영역도 차지하지 않음.

blcok : 블록 박스

• div태그,p태그,h태그#,li 태그 등이 해당
• 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된것처럼 보임.
• width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링

inline : 인라인 박스

• span 태그, b 태그, i 태그, a 태그 등이 해당
• block 과 달리 줄 바꿈이 되지 않음
• width와 height를 지정 할 수 없음
• word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위

inline-block : block과 inline의 중간 형태

• 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음.

float

float 라는 단어는 뜨다 라는 의미이며, 웹 페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성

• 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식으로 사용 가능

left: 왼쪽에 부유하는 블록 박스를 생성

• 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.

right: 오른쪽에 부유하는 블록 박스를 생성

• 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐 none 이 아니라면 display 속성은 무시

clear

float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 사용

• left: 좌측 부유 제거
• right: 우측 부유 제거
• both: 양쪽 모두 제거

레이아웃에서의 clear

float 속성을 적용한 태그는 붕 뜨며 정상적인 요소로 처리가 안되기 때문에
아래에 나타나야 하는 내용이 부유된 태그의 중간에 나타나는 문제 및 상위 태그의 높이가 없어지는 문제 등이 발생 이 때 clear 사용

position

태그를 어떻게 위치시킬지를 정의하는 태그

static:

• 기본값, 다른 태그와의 관계에 의해 자동으로 배치
• 위치를 임의로 설정해 줄 수 없습니다

absolute: 절대 좌표와 함께 위치를 지정 가능
relative: 원래 있던 위치를 기준으로 좌표를 지정
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정
inherit: 부모 태그의 속성값을 상속

###cursor

해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있음

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