CSS 기초

    <style>
        a {
            color: red;

            text-decoration: underline;
        }
    </style>

또는 <li><a href="2.html" style="color: red; text-decoration: underline">CSS</a></li> 이렇게 style 속성과 함께 씀

 

a -> selector

{} -> declaration

color(property)

red(value)

 

        h1 {
            font-size: 55px;
            text-align: center;
        }

-> 폰트 사이즈와 가운데 정렬

 

우선순위

id 선택자(#) > class 선택자(.) > 태그 선택자

동등한 우선순위일 경우 가장 마지막의 코드가 적용됨

 

박스 모델

h1{

    border: 5px solid red;

    padding: 20px;

    margin: 20px;

    display: block;

    width: 100px;

}

 

 

 

grid

<div></div>(무색무취) : 그룹핑해서 grid를 사용하여 레이아웃을 하거나 아이디값 부여할때 주로 사용(줄바꿈)

<span></span> : <div>와 똑같으나 줄바꿈하지 않음

 

        #grid {
            display: grid;
            grid-template-columns: 150px 1fr;
        }

 

<div id="grid">
        <ol>
            <li><a href="1.html" >HTML</a></li>
            <li><a href="2.html" style="color: red;text-decoration: underline">CSS</a></li>
            <li><a href="3.html" >Javascript</a></li>
        </ol>
    <div id="article">
        <h2>CSS</h2>    
    </div>
</div>

 

미디어 쿼리(CSS의 if문)

min(~부터), max(~까지)로 범위에 따라 효과지정 가능

@media(max-width:800px)

@media(min-width:800px)

 

css 코드 재사용

중복을 제거해서 재사용성을 높이고 네트워크 트래픽(캐싱) 감소

style.css 코드 따로 만들고

<link rel="stylesheet" href="style.css"> html 헤드에 적용