📝
프론트엔드 스쿨 교안(1기)/
📝
CSS/
📝
007 기본 CSS
📝

007 기본 CSS

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <style>
    h1{
        color: blue;    
    }
    </style>
</head>
<body>
    <!-- css 들어가기 전 https://caniuse.com 사이트 언급 -->
    <!-- color에 대한 개념, 16진수 함께 설명 -->
    <h1>hello</h1>
    <h2 style="color: red;">hello</h2>
    <!-- 외부 CSS가 모두 끝나면 CSS reset 설명 -->
</body>
</html>
h1{color: red;}
a.css 파일
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <style>
    #one{
        color: red;    
    }
    
    #two{
        color: blue;
    }
    
    #three{
        color: green;
    }
    </style>
</head>
<body>
    <a href="#one">one으로 가라</a>
    <a href="#two">two으로 가라</a>
    <a href="#three">three으로 가라</a>
    <h1 id="one">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="two">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="three">hello</h1>
</body>
</html>
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <style>
    .one{
        color: red;    
    }
    
    .two{
        font-size: 20px;
    }
    
    .three{
        color: green;
    }
    </style>
</head>
<body>
    <!-- 이 이상의 선택자에 대해서는 요약강좌에서 하지 않음 -->
    <h1 class="one two">hello</h1>
    <h1 class="two">hello</h1>
    <h1 class="three">hello</h1>
    <!-- 
        1. 추가 공부할 선택자 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
        2. 추가 공부할 속성 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/Reference
    -->
</body>
</html>