크리스의 개발일기

[HTML] CSS 링크 거는법, # . 태그 이용법, class와 id 차이점 본문

HTML

[HTML] CSS 링크 거는법, # . 태그 이용법, class와 id 차이점

ChrisJang 2020. 11. 6. 17:53
반응형

 

- Tag에 링크 걸기 => Tag명만 입력

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1
      {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1>how to link at Object, h1 tag </h1>
      <p>p tag</p>
  </body>
</html>

: 특정 Tag에 css에서 link를 걸어주고 싶을때는 해당 tag명(h1)을 입력한다.

 

 

 

- Class에 링크 걸기 => " . " 사용

<!DOCTYPE html>
<html>
  <head>
    <style>
      .TagAtclass
      {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="TagAtclass">first</h1>
    <h1>second</h1>
    <h1 class="TagAtclasse">third</h1>
  </body>
</html>

: tag에 링크를 걸어서 css를 바꿔주면 중복이 생기기 때문에 특정 class명을 사용하여 구분해주어야 한다.

=> tag에 class명을 부여하여 css파일에서 .classname{ } 으로 접근한다

 

- ID에 링크 걸기 => "# " 사용

<!DOCTYPE html>
<html>
  <head>
    <style>
      #usingId
      {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <h1 id="usingId">first<h1>
    <h1>second</h1>
    <h1>third</h1>
  </body>
</html>

: ID는 거의 Class와 같은 기능입니다. 특정 태그를 선정한 후 디자인을 다루기 위해 사용합니다

=> tag에 id명을 부여하여 css파일에서 .idname{ } 으로 접근한다

 

 

- class 와 id의 차이점

: class의 경우 동일한 class명을 부여할 수 있지만 그에 반면 id는 중복을 허락하지 않습니다.

반응형
저작자표시

'HTML' 카테고리의 다른 글

[HTML] 쿠키와 세션의 특징과 공통점과 차이점  (0) 2020.11.06
'HTML' Related Articles more
Comments