CSS 1(생활코딩)

yoonjin·2022년 12월 5일

CSS(Cascading Style Sheet)

: 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어

html 에 스타일을 부여하는 방법

html 자체에 디자인 요소 부여할 경우

예시)

<!doctype html>
<html>
<head>
  <title>FIFA World Cup</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html"><font color="Green">FIFA World Cup</font></a></h1>
  <ol>
    <li><a href="1.html"><font color="Green">FIFA World Cup</font></a></li>
    <li><a href="2.html"><font color="Green">Format</font></a></li>
    <li><a href="3.html"><font color="Green">All-time table for champions</font></a></li> # 스타일을 추가하고 싶은 곳마다 스타일 속성을 부여
  </ol>
  <h2>FIFA World Cup</h2>
<a href="https://en.wikipedia.org/wiki/FIFA_World_Cup" target="_blank"> The <u>FIFA World Cup</u></a>, often simply called the World Cup, is an <strong>international association football competition contested</strong> by the senior men's national teams of the members of the Fédération Internationale de Football Association (FIFA, the International Federation of Association Football), the sport's global governing body. 중략
</body>
</html>

font 태그를 사용하여 html 자체에 디자인적 요소를 부여할 수 있으나 이는 정보 코드와는 근원이 다름

css 도입한 경우

<!doctype html>
<html>
<head>
  <title>FIFA World Cup</title>
  <meta charset="utf-8">
  <style>
    a {
      color:green;   
    }
    /*
    a 태그를 선택자(selector)로 이용
    */
  </style>
</head>
<body>
  <h1><a href="index.html">FIFA World Cup</a></h1>
  <ol>
    <li><a href="1.html">FIFA World Cup</a></li>
    <li><a href="2.html">Format</a></li>
    <li><a href="3.html">All-time table for champions</a></li>
  </ol>
  <!-->
  <h1><a href="index.html"><font color="Green">FIFA World Cup</font></a></h1>
  <ol>
    <li><a href="1.html"><font color="Green">FIFA World Cup</font></a></li>
    <li><a href="2.html"><font color="Green">Format</font></a></li>
    <li><a href="3.html"><font color="Green">All-time table for champions</font></a></li>
  </ol>
-->
  <h2>FIFA World Cup</h2>
<a href="https://en.wikipedia.org/wiki/FIFA_World_Cup" target="_blank"> The <u>FIFA World Cup</u></a>, often simply called the World Cup, is an <strong>international association football competition contested</strong> by the senior men's national teams of the members of the Fédération Internationale de Football Association (FIFA, the International Federation of Association Football), the sport's global governing body. 중략
</body>
</html>

html이 정보에 전념할 수 있도록 css를 도입하여 웹페이지의 유지/보수 및 가독성의 효율성을 높임.

웹페이지에 css 삽입하는 방법

1. style 태그 사용
html의 태그이면서 안의 내용을 css로 처리할 것을 의미

  <style>
    a {
      color:green;
      text-decoration: none;
    }
  </style>

선택자(Selector) : css 효과 적용 대상
효과/선언(Declaration) : 하나의 선택자에 여러개의 효과 지정 가능, 이 때 효과의 구분자로 세미콜론(;) 사용

style 속성(property)

color, text-align 등
property:value;

class 이용

<!doctype html>
<html>
<head>
  <title>FIFA World Cup</title>
  <meta charset="utf-8">
  <style>
    a {
      color:black;  
    }
    .saw {
      color:gray;
    }
    .active {
      color:red;
    }
    h1 {
      font-size:35px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">FIFA World Cup</a></h1>
  <ol>
    <li><a href="1.html" class="saw">FIFA World Cup</a></li>
    <li><a href="2.html" class="saw active">Format</a></li>
    <li><a href="3.html">All-time table for champions</a></li>
  </ol>

CSS 선택자

태그 선택자(Type Selector): a {}
클래스 선택자(Class Selector): .class {}
아이디 선택자(ID Selector): #id {}
전체 선택자(Universal Selector): * {}

class를 부여한 후 이를 선택자로 이용 -> 여러 개의 태그를 하나의 선택자로 공동으로 제어 가능
class는 두 개 이상의 속성을 가질 수 있고 보다 가까이에 있는 명령이 더 큰 영향력을 갖게 됨 -> #id 선택자 사용하여 우선순위 부여하는 게 효율적
우선순위 : #id 선택자 > .class 선택자 > 태그 선택자

id 값은 중복 불가, 즉 구체적인 것의 우선순위가 포괄적인 것보다 높음

<!doctype html>
<html>
<head>
  <title>FIFA World Cup</title>
  <meta charset="utf-8">
  <style>
    a {
      color:black;  
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    h1 {
      font-size:35px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">FIFA World Cup</a></h1>
  <ol>
    <li><a href="1.html" class="saw">FIFA World Cup</a></li>
    <li><a href="2.html" class="saw" id="active">Format</a></li>
    <li><a href="3.html">All-time table for champions</a></li>
  </ol>

yoonjin

이전 포스트

HTML (생활코딩)

다음 포스트