css

tag를 이용하여 css style 적용

<style>
        a {
            color: red;
            text-decoration: none; 
        }
        h1 {
            font-size: 45px;
            text-align: center;
        }
    </style>

• a tag에 대하여 색상변경 및 밑줄제거
  a : Selector
  color : red : Declaration
  color : Property
  red : Property value
• h1 tag에 대해서 텍스트 사이즈 조절 및 가운데 정렬

html 내에서 속성값으로 색상변경 및 밑줄제거

<li><a href="2.html" style="color:red;text-decoration:underline;">css</a></li>

css 선택자

<style>
        a {
            color: black;
            text-decoration: none; 
        }
        .saw {
            color: gray;
        }
        .activate {
            color: red;
        }
        h1 {
            font-size: 45px;
            text-align: center;
        }
    </style>

<li><a href="1.html" class="saw">html</a></li>
<li><a href="2.html" class="saw activate">css</a></li>

• 한 번 클릭한 링크는 회색으로 표시, 현재 보고 있는 페이지에 대해서는 빨간색으로 표시
  -class를 이용하여 그룹화 가능
  - 클래스라는 속성은 여러 개의 값이 들어올 수 있으며 띄어쓰기로 구분이 가능
  - 하나의 태그에는 여러 개의 속성이 들어올 수 있으며 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어가능
  -. : class 선택자
  -# : id 선택자

선택자 우선순위

id > class > tag
클래스의 경우 나중에 작성된 클래스가 우선순위를 가짐