1주차 : 크롬 개발자 도구를 통해 CSS, HTML(DOM), JS 영향 확인 및 디버깅

01. CSS Cascading의 의미 파악.

1:코드.png

<head>
    <link rel="stylesheet" href="./style.css">
    <title>Practice</title>
</head>

<body>
    <h1>Example</h1>
    <h2>Fruit</h2>
    <ul class="first-list-id" id="first-list-id">
        <li class="first-item-class" id="first-item-id">apple</li>
        <li class="second-item-class" id="second-item-id">banana</li>
    </ul>
</body>
//index.html

ul {
    margin-left: 0;
    color: rgb(255, 0, 0);
}

.first-item-class {
    color: rgb(0, 255, 0);
}

#first-item-id {
    color: rgb(4, 0, 255);
}

#second-item-id {
    color: rgb(230, 0, 255);
}
//style.css

2:실행화면.png

Cascading의 우선순위에 따라 색상이 적용된 것을 확인 할 수 있다.

02. Naver HTML, CSS 구조 파악

3:페이지 검사.png

Naver 웹 페이지에서 개발자 모드를 통해 html과 css를 살펴 보았다.

4:css 지워보기.png

head 태그 안에 선언되어있는 css 파일을 지웠을 때, 해당 화면과 같이 서식들이 깨진 것을 확인 할 수 있다.