CSS 기본 속성

웹 개발을 하려면 HTML과 CSS는 뗄래야 뗄 수 없는 끈끈한 관계라는 것을 알 것이다.

 

개발은 직접 무언가를 만들어보면서 공부하는 것이 제일 좋기 때문에, CSS를 깊게 들여다보지 않고 필요한 만큼만 간단하게 설명하려고 한다.

CSS의 ruleset

 

css ruleset

css의 코드들은 위와 같은 ruleset들으로 이루어져 있다.

p는 selector(선택자)라고 하며, h1, h2, p 등등 여러가지 항목을 바꿔적어주면 그 항목에 대하여 설정할 수 있다.

color 과 text-align 은 Property(속성)으로, 선택자의 속성을 바꿀 때 사용한다.

Value(속성 값)은 선택자의 값을 원하는 값으로 바꿀 때 사용한다.

 

위와 같은 형식은 기본이므로 생략하면 안된다.

중괄호({}), 콜론(:), 세미콜론(;)의 사용에 대해서 잘 기억해두자.

 

 

p {
	color : black;
	width : 1000px;
}

위의 값은 문단을 나타내는 p 요소에 대한 속성들 중 색상(color)를 검은색으로, 너비(width)를 1000픽셀로 설정한다는 것을 의미한다.

 

꼭 위처럼 하나씩 설정하라는 법은 없다.

p, li, oi {
	color : black;
	width : 1000px;
}

여러 값들을 동일한 속성값으로 설정하려면 위처럼 콤마(,)를 이용하여 적어주면 된다.

 

 

 

다음으로는 기본적인 속성들을 알아보겠다.

 

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

각각 가로길이, 세로길이를 의미한다. 

속성값의 종류 : auto(브라우저가 자동으로 계산), px(픽셀), %(퍼센트), initial(기본값으로 초기화), inherit(상속받은 값)

 

 

margin(바깥쪽 여백), padding(안쪽 여백)

width와 height처럼 px, auto 등의 값을 지원하고, 방향 조절이 가능하다.

방향 조절 : margin-top(위 여백), matgin-bottom(아래 여백), margin-left(왼쪽 여백), margin-right(오른쪽 여백)

 

color

글자의 색상을 지정한다.

속성값의 종류 : inherit(기본값), red, blue, black등 (css로 정의된 색상), #000~#FFFFFF(16진수의 색상코드), rgb(255,255,255) (rgb색상), rgba(200,100,150,0.5) (투명도가 적용된 rgba 색상)

 

font

폰트를 정의한다. font라는 하나의 속성에 여러개의 속성들의 값을 모두 쓸 수 있다.

font의 속성 :

 

font-style(기울기 등의 스타일) 

값 : nomal(기본), italic(기울기)

 

font-weight(글자 두께)

값 :  100부터 900 사이의 숫자를 통해 설정

ex)

• lighter(100)
• normal(400)
• bold(700)
• bolder(900)

 

font-variant(글꼴 변형)

• normal : 소문자를 작은 대문자로 바꾸지 않는다.
• small-caps : 소문자를 작은 대문자로 바꾼다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

 

font-size(글자 크기)

글자  크기로, px나 em 등을 사용한다.

 

 

line-height(줄 간격)

• normal : 웹브라우저에서 정한 기본값. 보통 1.2 이다.
• length : 길이로 줄 높이를 정한다.
• number : 글자 크기의 몇 배인지로 줄 높이를 정한다.
• percentage : 그자 크기의 몇 %로 줄 높이를 정한다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

 

font-family(글꼴)

font 태그의 face 속성과 같다.

 

 

text-align

텍스트의 정렬 방향을 정한다.

• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 중앙 정렬
• jutify : 양쪽 정렬

 

background

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

 

background-color(색상값) 

배경 색을 의미한다.

• 값

color의 값과 동일하게 기본적으로 CSS에 내장된 색상, 16진수 색상코드, rgb,rgba 가 가능하다.

 

background-image(반복값)

배경 이미지를 설정한다.

ex) background-image:url("이미지 경로나 이미지 url주소")

 

 

background-repeat(값)

배경 이미지 반복 여부를 나타낸다.

• no-repeat : 반복하지 않음
• repeat-x : x축으로 반복
• repeat-y : y축으로 반복
• repeat : 모든 방향으로 반복

 

background-position(값)

배경 이미지 위치를 설정한다.

• 숫자값 (x,y)
• left
• right
• center
• bottom
• top

 

 

나머지는 공부하면서 천천히 기록하겠다.