Whiteship's Note

CSS 공부 중



참초 : http://www.w3schools.com/css/css_syntax.asp
위 사이트에서 CSS 기본 문법을 공부 했습니다.

기본 구조는 다음과 같습니다.
selector {property: value}

selector는 HTML 태그나 엘리먼트(ex. body)가 오는 자리이고
property는 기본 속성을 바꾸고 싶은 어트리뷰트(ex. bgcolor)가 오는 자리입니다.
value는 속성에 대입할 값(ex. red)입니다.

property와 value 사이에는 :으로 구분을 합니다.
예)
body {color: black}

속성이 여러 단어로 된 경우 ""으로 묶어 줍니다.
예)
p {font-family: "sans serif"}

여러 속성을 지정할 경우 다음과 같이 ; 으로 구분 합니다.
예)
p {
text-align: center;
color: black;
font-family: arial
}

여러개의 태그에 공통으로 들어있는 속성을 변경하고 싶을 때 selector를 여러개 지정할 수 있습니다.
예)
h1,h2,h3,h4,h5,h6
{
color: green
}

같은 속성에 다른 값을 대입하는 여러 개의 class들을 만들 수 있습니다. 이 것을 적용하고 싶을 때는 태그에 class 속성에서 사용할 class를 지정해 주어야 합니다.
css class 예)
p.right {text-align: right}
p.center {text-align: center}
css 사용 예)
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

여러개의 class를 하나의 태그에 적용하고 싶을 때는 다음과 같이 스페이스로 공간을 띄고 계속 적어주면 됩니다.
예)
<p class="center bold">
This is a paragraph.
</p>

모든 태그들의 속성에 적용할 class를 정의할 때는 다음과 같이 합니다.
예)
.center {text-align: center}

id selector는 #로 시작합니다.
예)
#green {color: green}

id와 클래스와 사이의 차이점은 . 대신 #을 사용한다는 것이고 id선택자는 한 페이지에서 오직 하나의 엘리먼트와 일치해야 한다는 것입니다.

신고

'Spring > 주소록 만들기' 카테고리의 다른 글

Alt + Shift + X, R 주의  (2) 2006.12.25
Web Application Context 작성  (3) 2006.12.25
Spring MVC 구동을 위한 web.xml 작성  (0) 2006.12.25
이클립스에서 웹 프로젝트 생성하기  (0) 2006.12.25
Spring MVC 공부 중  (10) 2006.12.23
CSS 공부 중  (2) 2006.12.21
주소록 화면 완성  (3) 2006.12.19
중간점검  (0) 2006.12.17
HTML 공부 중 2탄  (2) 2006.12.14
Strict HTML 4.01 지침서  (6) 2006.12.14
HTML 공부 중  (2) 2006.12.13
top

TAG






티스토리 툴바