본문 바로가기
개발자 꿈나무/html & CSS

CSS 기초 - style 태그, 선택자

by ♥︎해이나♥︎ 2020. 5. 31.
반응형

Style 속성을 이용해서 CSS 사용하기

html의 문법 style=" ~속성(property)~ "

<h2 style="Background-color:coral; color:powderblue;">자바스크립트</h2>

 

 

Style 태그를 이용해서 CSS 사용하기

<div> : 어떤 의미도 기능도 없는 태그, css/자바스크립트 등으로 제어하고 싶을 때 감싸줌, 한줄 전체를 쓰는 태그이므로 자동으로 줄바꿈이 됨 → 줄바꿈이 되지 않는 태그가 필요하다면 <span>을 쓰자!

<span style="font-weight:bold;">해이나</span>는 공부를 하는 중이다.

<head>
  <style>
    .js{
      font-weight:bold;
      Color:red;
    }
  </style>
</head>

<span class="js">해이나</span>는 공부를 하는 중이다.

 

이 웹페이지에 있는 태그 이름이 js라면 폰트를 굵게, 색상을 빨간색으로 바꾼다.
 만약 이 글에서 해이나가 1억번 반복되더라도 상단의 선택자를 통해 한 번에 수정할 수 있다.

 

CSS 선택자

<head>
  <style>
    .js{
      font-weight:bold;
      color:red;
    }
    #first{
      color:green;
    }
    span{
      color:blue;
    }
  </style>
</head>

<span id="first" class="js">해이나</span>는 공부를 하는 중이다.

 클래스 앞에는 마침표(.)를 붙이고 아이디 앞에는 샾(#)을 붙인다. 아무것도 붙이지 않으면 이 웹페이지에 있는 해당 태그 모두를 의미한다.
 class는 무언가를 그룹핑한다는 의미, id는 한가지를 식별(타겟팅)한다는 의미이다. 같은 class명은 페이지 내에서 여러번 사용 가능, 같은 id값은 페이지 내에서 한 번 밖에 사용할 수 없다. (사용해도 동작은 하지만 규약 위반임)
  class 선택자가 id 선택자보다 더 포괄적이다. class 선택자를 이용해서 효과를 주고 싶은 태그들을 광범위하게 처리하고, 예외 처리 하고 싶은 태그들은 id 선택자를 이용하면 된다. (id의 우선순위가 class보다 높음)

※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다.

반응형

댓글0