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

 

 

[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 사용 법

 

 

 

지구별에
css 2014. 3. 10. 11:29

댓글을 달아 주세요

  1. 2014.05.23 17:55  수정/삭제  댓글쓰기

    몇 가지 질문 좀 할게요 ㅠ

    1. p와 h1의 차이는 뭔가요?

    2. p.start로 p에만 스타일 넣는거 할때 h1 에서 클래스 안 넣고 텍스트 넣어도 상관 없지 않나요?
    왜 그렇게 하는지 이유를 잘 모르겠어요 ;;; <h1>환영 합니다</h1>

    • 지구별에 2014.05.23 22:16 신고  수정/삭제

      <p>태그는 문단을 나누는 태그이고 <h1>은 제목 태그 중 가장 큰 제목 태그입니다. 제 블로그 글 중에 두 태그에 대한 설명이 있으니 참조 해 주세요....
      두번째 질문에서 h1 class를 넣지 않아도 됩니다
      둘 다 같은 class 명인데 p.class에만 스타일이 적용되는 것을
      보여주기 위해 위 예문을 쓴 것입니다~

  2. aa 2015.09.11 19:21  수정/삭제  댓글쓰기

    그냥 클래스로 하면 이름 같은거 쓸수있는 장점뿐아닌가요
    id로 그냥 같은 이름 주고 해도 똑같은 결과인데 무슨 차이에요? 알고싶습니닷

    • 지구별에 2015.09.25 22:47 신고  수정/삭제

      id는 한 페이지에서 단 한 번 사용할 수 있고, class는 여러번 쓸 수 있느 차이가 있습니다. 그래도 보통 id는 레이아웃 이름에 사용되지요...

  3. SEVTEMBER 2015.12.02 00:43 신고  수정/삭제  댓글쓰기

    쓰기 시작해주셔서 감사합니다! 지금부터 정독할게요 ㅠㅠ

  4. 이민우 2016.12.27 10:30  수정/삭제  댓글쓰기

    참고잘하고 있습니다.^^ 감사합니다

Powerd by Tistory, designed by criuce