CSS 정의

HTML 돌아보기

  1. 태그로 이루어져 있음. <h1> 이런 것.
  2. 태그에 이름을 붙일 일이 있다면..
    • ID를 이용 : id 이름 앞에 #을 씀 (ex : id 이름이 name일 때, #name)
    • class를 이용 : class 이름 앞에 .을 씀. (ex : 이름이 name일 때, .name)
  3. 태그 안에 태그가 들어가면? 상속 관계라 표현.

CSS 정의

selector {
  attribute : style;
}
  • 선택자 : 태그, ID, class 이름 등을 가짐. 해당 태그들을 일괄적으로 선택한다는 의미.
  • 속성 : 선택된 태그에 줄 속성.
  • 스타일 : 특정 속성의 값.

직접 예시 보기!

  1. 다음 중 h1 태그의 글자 색만 빨간색으로 만들어라.

    <h1> Hello World! </h1>
<h2> Hello World!! </h2>

    h1 { color : red; }

  2. 다음 중 <div> 안에 있는 h1의 글자 색만 초록색으로 만들어라

    <div>
   <h1> A La Volonté Du Peuple! </h1>
</div>
<h1> 영어는 넘나 어렵다. </h1>

    div > h1 { color : green; }

    특정 태그 안의 것만 정하려면, 태그명 > 선택할 태그를 이용하라.

  3. id가 name인 태그는 빨간색, class가 name인 태그는 파란색 글자로 바꾸어라.

    <h1 id="name">Hello ID!</h1>
<h1> Hello World! </h1>
<h1 class="name"> Hello Class! </h1>

    #name { color : red; }
.name { color : blue; }
  4. <h1>, <h2> 모두 핑크색으로 글자를 바꾸어라.
    <h1> This is h1 tag. </h1>
<h2> This is h2 tag. </h2>

    h1, h2 { color : hotpink; }

    여러개를 한번에 지정하고 싶으면 쉼표를 이용하라.

CSS 사용하기

  1. <style> 사용하기.
    <head>
 <style>
   tag { 
     attr : style;
   }
 </style>
</head>
  2. <link> 사용하기.
    <head>
   <link type="text/css" rel="stylesheet" href="locations/file.css">
</head>

results matching ""

    No results matching ""