CSS에 대한 자세한 설명이 있는 곳

2013. 11. 12. 14:01 Posted by 초절정고수


'생활 코딩'이란 곳인데 정말 자세히 설명해 주십니다. ^^

http://opentutorials.org/



선택자(selector)란?

CSS의 효과가 적용될 태그를 지정

Id 선택자

  • id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
  • 우선순위가 가장 높음
  • css 선택자에서는 #을 사용해서 id임을 표시
  • 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함


Class 선택자

  • class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용
  • class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음
  • css선택자에서는 '.'을 사용해서 class임을 표시

type 선택자

  • 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용
  • css선택자에서는 태그의 이름을 사용함


하위 선택자

  • 특정 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용
  • 부모가 먼저 나오고 자식이 나중에 나옴
  • 공백을 통해서 부모와 자식을 구분


하나의 CSS선언을 여러개의 선택자에 적용하기

  • 하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용
  • 선택자와 선택자를 ',(콤마)'로 구분


자식선택자 -child selector

  • 특정 엘리먼트의 직접적인 하위 엘리먼트에 대해서만 선택할 때 사용(하위 선택자와 다름)
  • ie6는 지원되지 않음

span 태그

텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다. 줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다. 


텍스트에 컬러를 부여할 때는 color 효과를 사용한다. CSS에서는 색상을 지정하는 3가지 방법이 있는데 아래와 같다. 

Hex16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현,  RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명red, blue, green등 칼러코드 참고


텍스트를 정렬하기 위해서는 정렬하고자 하는 텍스트를 태그로 감싸고 이 태그에 text-align 효과를 지정한다. CSS에서는 4가지 형태의 정렬방식을 지원한다.

left왼쪽 정렬
right오른쪽 정렬
center가운데 정렬
justify양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴


text-decoration

overline윗줄예제
line-through취소선예제
underline밑줄예제

line-height

행간격을 지정한다. 

letter-spacing

문자와 문자사이의 간격을 지정한다. 참고

vertical-align

텍스트의 수직 정렬을 지정한다. 참고

white-space

줄바꿈되는 방식을 지정한다. 참고



Font Family

일반적인 방법으로는 웹페이지에는 글꼴을 포함할 수 없다. 그렇기 때문에 웹페이지에 지정된 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에도 해당 글꼴이 포함되어 있어야 한다. 그래서 CSS에서는 font family라는 개념이 있는데, 글꼴의 우선순위를 정해서 여러개 지정하면 그 중에서 사용할 수 있는 폰트를 반영하게 된다. 예를들어 아래의 구문은 사용자 컴퓨터에 Times New Roman 글꼴이 있다면 적용하고 없다면 Times를 적용한다. 

p{font-family:"Times New Roman", Times, serif;}


고정폭, 가변폭?

일반적으로 글꼴을 디자인 할 때 문자의 폭을 문자의 모양에 따라서 다른 넓이를 갖게 된다. 이를테면 숫자 1과 문자 m의 폭을 같게 디자인하면 어색하게 느껴질 수 있기 때문이다. 이러한 방식을 가변폭이라고 한다. 반대로 데이터 분석이나 코딩과 같은 일을 하는데는 미려함 보다는 정확함을 더 중시하기 때문에 글자의 폭을 같게 디자인하는데 이러한 방식을 고정폭이라고 한다. 일반적으로 고정폭 글꼴은 굴림체처럼 폰트의 이름 뒤에 '체'를 붙인다. 아래는 NHN에서 제공하는 글꼴인 '나눔고딕'과 '나눔고딕코딩'의 글자간의 넓이를 비교한 그림이다. (참고)


Sans-serif VS serif

serif(세리프)란 문자의 디자인에 포함된 장식적인 요소로 아래 그림의 붉은색에 해당된다. 대표적인 글꼴로 바탕체, 궁서체, Time New Roman이 있다. 

sans-serif(산세리프)란 세리프의 장식적인 요소가 없는 디자인으로 굴림체, 돋음체, Arial, Verdana가 대표적이다.

font-family에 serif나 sans-serif를 지정하면 운영체제 내부적인 기준에 따라서 적당한 글꼴이 표시된다.


글꼴의 크기를 지정할 때는 font-size 효과를 사용한다. font-size 효과에서 자주 사용되는 단위는 px와 em이 있고,  W3C에서는 em의 사용을 권장하고 있다. em은 상대적인 크기인데, 폰트의 대문자 M의 폭을 16px로 계산하기 때문에 1em은 기본적으로 16px과 같다고 생각하면 된다. 하지만 em은 현재 엘리먼트가 상속하고 있는 폰트 크기를 기준으로 상대적으로 결정된다. (참고:em과 px를 변환해주는 서비스)



링크의 상태

링크는 아래와 같이 4가지의 상태를 가지고 있고, 각 상태에 따라서 시각적으로 다른 모양을 가질 수 있다.

방문하지 않은 링크a:link{} 
방문했던 링크a:visited{} 
마우스를 오버한 링크a:hover{}a:link과 a:visited 뒤에 와야 함
마우스를 누른 상태의 링크a:active{}

a:hover 뒤에 와야 함



엘리먼트의 배경

엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다. 

배경색

background-color:색상값

Hex16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현,  RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명red, blue, green등 칼러코드 참고



background-image: url('이미지의 URL');

배경 이미지의 반복

background-repeat: 반복방식

repeat수직, 수평 모두 반복함
repeat-x수평만 반복함
repeat-y수직만 반복함
no-repeat반복하지 않음

참고 : w3school.com

배경 이미지의 위치

background-position: 위치값

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
배경 위치를 지정
x% y%x%는 수평위치를 y%는 수직 위치를 의미하고, 이미지의 상대적인 위치를 지정한다.
xpos ypos이미지의 절대적인 위치를 지정한다.

참고 : w3school.com

단축속성

body {background:#00ffff url('image.png') no-repeat right top;}