학습내용

네이버 쇼핑 footer, 네이버 웹툰 header, main-left의 상단 만들기
github소스코드

네이버 쇼핑 footer

• 세로선 만들기1: ::before을 사용해서 글자 사이 세로선을 만들려고 했는데, block 설정을 안 해주니 width값과 배경색을 줘도 보이지 않았다. ::before 사용 시 content가 없을 경우 display:inline-block을 해 줘야 공간을 차지할 수 있게 된다.
• nth-child()와 같은 선택자는 같은 부모 태그 안 종류 같은(혹은 클래스 같은) 태그들 사이에서 전부 사용가능하다.
• 강의엔 안나왔지만 상단에 NAVER 버튼을 만들어 홈으로 돌아가게 만들었다.

#shop-footer .policy-wrap span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background-color: #d7d7d7;
    vertical-align: -1px;
}
#shop-footer .policy-wrap span:first-child:before {
    content: initial;
}

/* 쇼핑 상단 메인페이지로 가는 로고*/
#shop-header #shop-header-top a {
    height: 100%;
    padding-left: 10px;

    font-size: 20px;
    color: #ffffff;
    font-weight: 900;
    line-height: 36px;
}

무료 이미지 사이트

• pixabay
• unsplash
• 회사명 + 로고 검색하기

네이버 웹툰

웹툰 홈과 웹툰 디테일 2개 페이지를 만드는데 header와 footer는 동일하고 main의 구성만 다르다.

header

header-top

• 지금까지와 같이 webtoon-container 클래스에 공간의 넓이 및 중앙정렬하는 코드 넣어주었다.
• 세로선 만들기2: <em class="bar">태그에 크기 및 배경색 지정해서 세로선 만들어주었다.
• <h3>에 글자색 적용했는데 자식인 <a> 태그에 속성 적용되지 않는 이유: css 초기화 시 직접적인 선택자인 a태그를 선택해 글자색 넣었기 때문이다.
• calc() 사용 시 기호 앞뒤로 반드시 띄어쓰기를 해야 값이 적용된다.
• inline요소도 margin, padding은 사용가능하다.

/* em 태그로 작대기 만들기 */
#webtoon-header .webtoon-header-top .webtoon-header-left .bar {
    width: 1px;
    height: 13px;
    background-color: #d2d2d2;
    margin: 0 10px 0 8px; 
}
#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;
}
/* calc 사용 시 마이너스 기호 앞뒤로 띄어쓰기 잘 해야 함 */
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input {
    width: calc(100% - 35px);
    height: 100%;
    border: none;
    padding: 0 10px;
    outline: none;
}

header-nav

• 크기: auto 내부 컨텐츠 크기 사용함을 표시한다.
• html에 class="on"등 클래스를 이용해서 css 속성 바뀌게 할 수 있다.
• <i>태그: 주로 아이콘 삽입 시 사용한다. inline 요소의 성격을 가지고 있어서 background-image 속성 사용하려면 block 속성으로 바꿔주어야 한다.

<ul>
  <li class="on"><a href="webtoon.html">홈</a></li>
  <li><a href="webtoon-detail.html">웹툰</a></li>
  <li><a href="#">베스트도전</a></li>
  <li><a href="#">도전만화</a></li>
  <li><a href="#">마이페이지</a></li>
</ul>

#webtoon-header .webtoon-header-nav nav ul li {
    width: auto;
    height: 40px;
}
#webtoon-header .webtoon-header-nav nav ul li.on a {
    background-color: #00d564;
    color: #ffffff;
}

/* 아이콘 */
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap .icon-ex-mark {
    display: inline-block;
    width: 16px;
    height: 14px;
    background-color: violet;
    vertical-align: middle;
}

main 공간 만들기

main 전체를 webtoon-container로 감싸준 후 왼쪽, 오른쪽으로 나누어 고정 넓이값을 주고 float으로 처리했다.

main-left 위쪽

• banner 아래쪽 양옆 이동 버튼과 리스트를 만들기 위해 부모 영역에 position:relative, 양 옆 버튼에 position:absolute를 주어 top ,left, right 등으로 위치를 조정했다.
• 버튼과 리스트가 겹치지 않고 부모 영역에 딱 맞게 들어가게끔 고정 넓이값을 주었다.
• 영상에서는 리스트 안에 border-left, border-right를 전부 사용하고 맨 처음과 마지막 개체의 border는 없애주었는데, 양옆 버튼이 있어 반드시 지우지 않아도 될 것 같다.
• 나는 리스트 테두리 중복을 피하기 위해 리스트 개체 안에 border-left만 사용하고 마지막 개체에만 border-right를 추가해주었다.
• 강의에선 구현하지 않았지만 리스트에 마우스를 올리면 하단에 검은색 테두리가 나타나도록 만들었다.

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li {
    width: 135px;
    height: 58px;
    border-left: solid 1px #ced2d7;
    border-bottom: solid 1px #ced2d7;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:last-child {
    border-right: solid 1px #ced2d7;
}

어려웠던 점

1. 쇼핑 페이지 상단 메인으로 가는 로고를 <a>태그로 만들 때 여러 영역으로 감쌌더니 미묘한 공백이 있어서 위아래 중앙정렬이 마음대로 되지 않았다.
2. 쇼핑 페이지에 placeholder가 아닌 이미지를 넣었더니 크기 지정이 안 되어 있어서 사진이 넘치면서 레이아웃이 뒤틀렸다.
3. 웹툰 메인 왼쪽 상단의 웹툰 리스트에 마우스를 올리면 하단 검은색 테두리가 생기는 기능을 구현할 때, 부모 태그인 carousel에도 테두리가 있어서 예쁘지 않았다.

해결방법

1. 로고지만 사실은 a태그로 만들어진 글자라는 것을 다시 생각했다. 부모 태그들의 높이를 100%로 맞추고 line-height에 영역 높이값을 넣어주어서 위아래 중앙정렬을 하였다. 왜 처음부터 이 방법을 생각해내지 못했을까.. 아마 로고를 이미지로 넣으면 다른 방법을 써야 할 것이다.
2. 사진을 감싸는 영역을 만들고 해당 영역의 크기를 지정했다. placeholder를 사용할 때의 단점을 느꼈다. 원하는 공간 크기를 쉽게 지정할 수 있다보니 보통 이미지는 크기가 다르다는 것을 까먹게 된다.
3. 부모 태그의 테두리를 없애고 리스트 객체마다 하단 테두리를 넣어주었다. hover 시 그냥 테두리만 바꾸니 box-sizing으로 인해 안쪽에 생기는게 별로여서 box-sizing도 초기화해주니 약간 바깥쪽으로 생겼다. 약간의 움직임 효과도 덩달아 얻었다.

소감

점점 실습의 내용이 많아지면서 개발일지 작성도 쉽지 않게 되었는데, 그래도 가끔 내가 작성한 것을 참고하게 되는 것을 보면 당일 배운 것을 자세히 기록하는 것이 맞는 것 같다.
오늘 앞으로의 강의 링크 및 일정이 업데이트가 되었는데, 자율학습에 포함된 내용까지 다 들으려면 좀 빡세게 해야될 것 같다. 8월 말까지 모든 과정을 할 수 있도록 일정을 단축시킬 예정이다.