□ 네이버웹툰 1/2

★ 작성코드

Git 링크.네이버 webtoon

1. 웹툰 상단

● 하나의 style.css에 여러 페이지의 디자인을 넣게되면 코드가 너무 길어짐 → 페이지에 귀속되는 별도의 css 파일을 만드는 것이 좋음

● 네이버 메인 페이지를 만들 때 작성한 css 코드(글자색 – 검정)로 인해서, h3에 글자색을 지정해도 검은색이 유지됨 → 웹툰의 a 태그에 css 설정을 새로 적용시켜야 함

[html]

<h3><a href="#">웹소설</a></h3>

[css]

a {
    text-decoration: none;
    color: #000000;
}

#webtoon-header .webtoon-header-top .webtoon-header-left h3 {
    margin-right: 30px;

    font-size: 16px;    
}

#webtoon-header .webtoon-header-top .webtoon-header-left h3 a {
    color: gray;

● 만화와 웹소설 사이에 막대바 만드는 방법

[html]

<em class="bar"></em>

[css]

#webtoon-header .webtoon-header-top .webtoon-header-left .bar {
    width: 1px;
    height: 13px;
    background-color: #d2d2d2;

    margin-left: 8px;
    margin-right: 10px;
}

● 메뉴들 중에 특정한 메뉴만 배경색을 주는 방법

• 배경색을 줄 메뉴의 li에 class명 지정하기
• css에서 a 태그에 배경색과 글자색을 설정하기

[html]

<li class="on"><a href="webtoon.html">홈</a></li>

[css]

#webtoon-header .webtoon-header-nav ul li.on a{
    background-color: #00d564;
}

● 결과 스크린샷

2. 웹툰 메인(중단)

● margin이나 padding에 속성값을 3개를 입력하면 top, left & right, bottom 값이 들어감

예시)

padding: 26px 0 10px;

● ul – li 목록 안에 새로운 목록이 필요한 경우, li 안에 새로운 ul – li를 사용하여 작성 가능함
→ 사용할 때는 구분이 가능하게 class를 사용해 명칭을 넣어서 구분될 수 있게 해야 함
예시)

<ul class="webtoon-content-col-3">
    <li class="webtoon-content-col-type-2">
        <ul>
            <li></li>
        </ul>
    </li>
<ul>

● 결과 스크린 샷

□ 어려웠던 점

아무래도 div 태그와 ul - li 의 반복 사용으로 인해, 코드가 너무 늘어나서 웹사이트가 정상적으로 작동하지 않을 경우에 수정하는 것이 어려웠습니다.

□ 해결방법

웹사이트의 검사 기능과 VS Code 내의 검색 기능을 사용하여 오류를 수정하였습니다.

□ 학습 소감

코드를 계속 작성하다보면 class 명칭에 대한 축약 정립이 필요하다고 느꼈습니다. css에서 class 명칭의 뜻을 전부 담으려다 보니 너무 가독성이 떨어진다는 점을 확실히 알 수 있었습니다.