4주차(css) | Notion

CSS

Emmet[에밋]을 사용하면 간편하게 css 사용 가능

ul>li*3>div

body 안이 아닌 head에 style을 지정하여 사용 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Week 03</title>
    <style>
        div {
            background-color: orange;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <div>Supernova</div>
    </li>
    <li>
        <div>클락션</div>
    </li>
    <li>
        <div>How Sweet</div>
    </li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Week 03</title>
    <style>
        div {
            background-color: orange;
        }
    </style>
</head>
<body>
<h1>멜론 차트</h1>
<ul>
    <li>
        <div>Supernova</div>
    </li>
    <li>
        <div>클락션</div>
    </li>
    <li>
        <div>How Sweet</div>
    </li>
</ul>
</body>
</html>

css 코드를 다른 파일로 만들어서 사용 가능

        div {
            background-color: #FD8A8A;
            margin: 16px;
            padding: 8px;
        }

다른 파일로 만들어서 html 파일에서 사용하기 위해서 코드 추가가 필요

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"/>
    <title>Week 03</title>
</head>
<body>
<h1>멜론 차트</h1>
<ul>
    <li>
        <div>Supernova</div>
    </li>
    <li>
        <div>클락션</div>
    </li>
    <li>
        <div>How Sweet</div>
    </li>
</ul>
</body>
</html>

리스트 아이템 점 제거

div {
    background-color: #FD8A8A;
    margin: 16px;
    padding: 8px;
}

li {
    list-style-type: none;
}

div 추가

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"/>
    <title>Week 03</title>
</head>
<body>
<h1>멜론 차트</h1>
<div>인기 순위</div>
<ul>
    <li>
        <div>Supernova</div>
    </li>
    <li>
        <div>클락션</div>
    </li>
    <li>
        <div>How Sweet</div>
    </li>
</ul>
</body>
</html>

순서 (뒤에 있는 것이 적용됨)

div {
    background-color: #FD8A8A;
    margin: 16px;
    padding: 8px;
}

div {
    background-color: #000;
}

li {
    list-style-type: none;
}

이러면 
div {
    background-color: #000;
} 이게 적용됨

더욱 구체적인 것 적용

ul 뒤에 한 칸을 띄우면 ul의 자손 중에서 div에 적용하라는 의미임