본문 바로가기
css

[HTML, CSS 기초] class, id 선택자

by 지구별에 2014. 3. 10.

 

 

[HTML, CSS 기초]  class, id 선택자

 

 

사실 지난 주부터, CSS 카테고리에 글을 올려야겠다고 맘을 먹긴 했는데

 

글 쓰기가 정말로 쉽지 않네요. 머릿속으로는 대충 알고 있어도,  이론적으로 풀어내려니

 

또 빠짐 없이 다루어야 한다는 부담감 때문에  글 하나 만들어내기가 어렵게 느껴지네요^^

 

이러다간 점점 글 쓸 자신이 없어질까 봐 이제부터 그냥 맘 편하게 쓰려고 해요...

 

 

 

 

지난 시간에 HTML과 CSS 차이에 대해 알아 보고 작성법도 간단히 알아 봤습니다.

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

HTML 작성은 이렇게 하고

 

<태그 속성="속성값">내용 </태그>

예: <p align="center">내용 </p>

 

 

CSS 작성법은  이렇게

 

선택자 {속성:속성값; 속성: 속성값;}

예: p {

text-aglign:center; color: red;

}

 

 

 

[ID와 CLASS]

 

오늘 알아볼 선택자는 id와 class 입니다.

 

 

id스타일을 지정할 때 한 가지만 지정해서 쓰는 이름이고(표기방식은 #이름)

     하나의 문서에 고유한 id 하나밖에 쓸 수 없습니다.

 

class 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름이에요. (표기방식은 .이름)

 

ID, CLASS 이름은 자유롭게 지으면 되지만 숫자로 시작해선 안 됩니다.

               

 

#8palign=> X

 

 

 

 

 [ID]

 

 

스타일을 주는 방식은, 3 가지 방식이 있다고 했는데요

(inline,internal,external )

CSS란? (HTML과 CSS의 차이, CSS 작성법) 참조

 

1. inline은 아래 예제에서 굳이 id를 사용할 필요성이 없어 생략했습니다.

 

2. internal

<html>

 <head>
<style>
#pcolor
{
color:red; text-align:center;
}

#h1color

{

color:blue

}
</style>
</head>

<body>
<p id="pcolor">지구별 홈피에 오신 것을</p>
<h1 id="h1color">환영 합니다</p>
</body>
</html>


 

많은 페이지에 동일한 스타일을 적용하려면 3번 external을 사용하는 게 제일 편리합니다.


3. external

 

㉠확장자  .css로 저장 (예:test.css)

 


    #pcolor {

color:red;

text-align:center;

}

  #h1color {

color:blue;

}

 

 

㉡확장자 .htm으로 저장(예:main.htm)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 </head>
<body>
<p id="pcolor">지구별 홈피에 오신 것을</p>
<h1 id="h1color">환영 합니다</p>
</body>
</html>

 

 

 

ID 실행화면 입니다.

[지구별 홈피에 오신 것을]은, 빨간색 중앙 정렬

[환영 합니다]는, 파란색으로 스타일이 지정되었습니다.

 

 

 

 

 [CLASS]

 

(external)

 

㉠확장자  .css로 저장 (예:test.css)

 


    .start {

color:red;

text-align:center;

}

 

 

㉡확장자 .htm으로 저장(예:main.htm)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 </head>
<body>
<p class="start">지구별 홈피에 오신 것을</p>
<h1 class="start">환영 합니다</h1>
</body>
</html>

 

 

 

 

class 실행 화면입니다.

태그 p와 h1을 그룹으로 묶어 같은 속성을 주었습니다.

(빨간색 글씨와, 중앙 정렬)

 

 

위에서는  p와 h1에 같은 속성(빨간색 글씨, 중앙 정렬)을 주었는데

이번엔 p에만 속성을 주겠습니다.

차이점이라면 .start를 => p.start로 고칠 것!

 

㉠확장자  .css로 저장 (예:test.css)

 


    p.start {

color: red;

text-align:center;

}

 

 

㉡확장자 .htm으로 저장(예:main.htm)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 </head>
<body>
<p class="start">지구별 홈피에 오신 것을</p>
<h1 class="start">환영 합니다</h1>
</body>
</html>

 

 

실행하면 p 부분만 스타일이 적용된 것을 확인할 수 있습니다.

 

 

 

[html/css기초] span, div 사용 법

 

 

 

반응형

댓글