CSS는 웹페이지의 디스플레이, 폰트색상, 폰트크기, 여러가지 우리 눈에 보이는 웹페이지의 UI를 이쁘게 꾸며주는 역활이라고 생각하면 된다. CSS의 구문은 마크업 언어인 HTML만큼 다루기 쉬우며, HTML의 코드, id, class를 선택해서, 속성(property)와 값(Value)를 설정하는 아주아주 간단한 언어다.


CSS 문법 이해

구성은 아래와같이

선택자 { 속성: ; }

으로 사용되며, 사람의 시야에 가독성을 위해 보통

선택자 {
    속성: ;
}

이와같이 표기한다. 이유는 CSS 속성이 하나만 사용된경우에 상관이 없지만, 여러개의 속성이 사용된 경우 아래처럼

p { font-size: 1.5px; font-style: italic; color: gray; }

기재할 수 있지만, 사람의 가독성을 위해

p { 
    font-size: 1.5px;
    font-style: italic;
    color: gray;
}

위와 같은 코딩스타일을 쓴다.


CSS 여러가지 속성

속성(property) 값(value)
color CSS 색상명 또는 16진 색상값
font-size 값 단위 = px, em으로
text-align center, left, right로 텍스트 정렬선택
text-decoration none, underline, line-through, overline
background-color CSS 색상명 또는 16진 색상값
margin 1px 2px 3px 4px : 상 우 하 좌 순으로 값 지정
margin-top margin 상단 px값 설정
margin-bottom margin 하단 px값 설정
margin-left margin 왼쪽 px값 설정
margin-right margin 우측 px값 설정
width px 또는 %단위로 너비 설정
height px 또는 %단위로 높이 설정
border ex) 1px solid gray = 1px의 회색선을 생성
border-top 상단 border 값만 지정
border-bottom 하단 border 값만 지정
border-left 좌측 border 값만 지정
border-light 우측 border 값만 지정

3school:CSS

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 구글 플러스 공유하기
  • 카카오스토리 공유하기