css-comment.html

css-comment.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- style 태그를 사용해서 스타일을 준다 -->
    <!--내부 스타일 css-->
    <style>
        h2{
            /* h2태그는 글자 크기를 20px로 적용 */
            /* h2태그는 글자 색을 오렌지색으로 적용 */
            font-size:20px;
            color: orange;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>
    <h2>웹 문서의 디자인과 내용을 분리합니다.</h2>
    <p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
    <p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>
</html>

20230314133726.png

style.css

style.css

h2{
    /* 글자색 */
    color:blue;

}
p{
    /* 글자크기 */
    /* 글자 크기에서 em은 대문자 M기준이 1 */
    font-size: 0.9em;
    /* 줄간격 */
    /* 숫자가 커질수록 줄사이 간격이 넓어진다 */
    line-height: 2.0; 

}

external.html

external.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 외부 스타일 시트 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h2>Who am I</h2>
    <p>프런트엔드 웹 기술에 관심이 많습니다<br>
        현재 제주의 한 시골 마을에서 코딩 중입니다
    </p>

</body>
</html>

20230314133831.png

inline.html

inline.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> 블루베리와 향산화 효능</h1>
    <p>블루베리는 향산화제인 안토시아닌과 폴리페늄을 다량 포함하고 있습니다.</p>
    <!-- 인라인 스타일:특정 영역 지정해서 스타일 적용 -->
    <p style="color:lightblue">블루베리는 향산화제인 안토시아닌과 폴리페늄을 다량 포함하고 있습니다.</p>
    <p>블루베리는 향산화제인 안토시아닌과 폴리페늄을 다량 포함하고 있습니다.</p>
</body>
</body>
</body>
</html>

20230314133911.png

tag-selector.html