학습내용

chrome 확장 프로그램 소개, 네이버 메인페이지 따라하기 1: header와 main-left
github소스코드

웹 개발에 유용한 chrome 확장프로그램

1. wapplayzer: 웹사이트에 사용된 기술스택 알아냊
2. CSSviewer: 웹사이트 요소에 사용된 css 속성 알려줌
3. whatfont : 어떤 폰트 사용되었는지 알려줌
4. lorem lpsum generator: 임의의 문장 만들 때 활용됨
5. colorzilla: 웹사이트에서 사용한 색상 알아내기

header

css 일관적으로 작성하기

css 속성들을 입력할 때도 속성의 순서를 일관적으로 유지하는 것이 유리하다고 한다. 강사님께서 사용하신 규칙은 다음과 같다.
1. html 태그의 성격을 결정짓는 속성들: position, display 등
2. 공간 만들 때 사용하는 속성: width, height, background-color, border 등
3. text 관련 속성: color, text-align 등

자주 사용하는 클래스 미리 만들기

이 페이지에서는 콘텐츠 대부분이 중앙정렬된 특정 공간 내부에 위치한다. header, main, footer 등 여러 영역의 요소들이 전부 동일한 넓이값을 공유하고 있으므로 크기 및 중앙정렬을 도와주는 container 클래스를 하나 만들어 사용했다.

.container {
    width: 1130px;
    margin: 0 auto;
}

html 태그의 특성

button 태그의 특성

• border, background-color 속성 가지고 있음
• type 입력 안하면 default로 button 속성 가지고 있음

input, textarea 태그의 특성

• focus(선택)되었을 때 기본 outline값 있음
• outline:none으로 초기화하면 focus 따로 선택안해도 테두리 없어짐

button {
    border: none;
    background-color: transparent;
}
input, textarea {
    outline: none;
}

inline 요소들 사이의 미세 공백

header의 input, button 요소들은 전부 inline-block속성을 가지고 있다. 이렇게 inline 요소들이 연달아서 올 경우 사이에 미세한 공백이 생기게 된다. 이런 공백 없이 inline요소들을 정렬하고 싶을 때는 flex를 사용한다. 이번 프로젝트에선 유독 flex를 자주 사용하였다.

calc()

하나의 영역 안 다른 형제 요소가 고정 넓이값을 가지고, 나머지 형제가 남은 영역을 가득 채우길 원할 때 어떻게 하면 좋을지 몰랐는데, calc()를 사용하면 괄호 안에서 계산된 값을 속성값으로 전달할 수 있어 활용성이 높았다.

#main-header .search-area .search-wrap input {
    width: calc(100% - 52px);
    height: 100%;
    padding: 13px 15px;
    border: none;
    font-size: 22px;
}
#main-header .search-area .search-wrap button {
    width: 52px;
    height: 100%;
    background-color: #19ce60;
}

box-shadow 적용하기

저번주 혼자 실습하면서 box-shadow를 사용한 적이 있었는데, 이번 영상에서는 그림자 적용을 도와주는 웹사이트를 소개해 주셨다.
box-shadow-generator

#main-header #navbar {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

표 모양으로 테두리 넣기

네이버 뉴스리스트의 border 방식은 좀 특이했다. 리스트 요소에 border를 적용한 게 아니라 별도 div를 만들고 i 태그로 줄을 넣은 것이다. 실습에서는 전체 ul에 border를 넣고 내부 리스트에 border-right, border-bottom을 넣어서 만들었다.

• 개체 넓이 6등급 하기 width: 16.66%
• 개체 안 placeholder로 이미지 자리를 잡아주었는데 이상하게 미세 공백이 있다. 처음에 * 로 모든 margin, padding 없애고 image에도 vertical-align:middle로 공백을 없애주었는데 어디서 나온 공백인지 결국 알아내지 못했다. 영상엔 공백이 없어보였는데 예시 코드를 확인해봐도 같은 공백이 있었다.
  

main #main-left #news-wrap .news-lists {
    overflow:hidden;
    border: 1px solid #dae1e6;
}
main #main-left #news-wrap .news-lists .news-list {
    position: relative;
    float: left;
    width: 16.66%;
    height: 65px;
    background-color: #ffffff;
    border-bottom: solid 1px #e4e8eb;
    border-right: solid 1px #e4e8eb;
    text-align: center;
}
main #main-left #news-wrap .news-lists .news-list:nth-child(6n) {
    border-right: none;
}
main #main-left #news-wrap .news-lists .news-list:nth-child(19),
main #main-left #news-wrap .news-lists .news-list:nth-child(20),
main #main-left #news-wrap .news-lists .news-list:nth-child(21),
main #main-left #news-wrap .news-lists .news-list:nth-child(22),
main #main-left #news-wrap .news-lists .news-list:nth-child(23),
main #main-left #news-wrap .news-lists .news-list:nth-child(24) {
    border-bottom: none;
}

y축 중앙정렬 공식

main #main-left #news-wrap .news-lists .news-list img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

main blog-wrap

strong 태그 활용

굵은 글씨가 필요할 경우 strong태그를 주로 사용하였다.

<div class="right-header">
    <span class="count"><strong>1,853</strong>개의 글</span>
    <span>관심주제 설정</span>
</div>

main #blog-wrap .blog-header .right-header span strong{
    color: black;
}

flex 활용하기

지금까지 flex는 주로 특정 공간에 간격을 두고 처음부터 끝까지 퍼뜨릴 때 사용했는데, 왼쪽 혹은 오른쪽 정렬 등이 필요할 때도 flex-start, flex-end 등을 사용해 쉽게 정렬할 수 있었다.

main #blog-wrap .blog-header .left-header {
    display: flex;
    justify-content: start;(default)
    align-items: center;
}
main #blog-wrap .blog-header .right-header {
    display: flex;
    justify-content: end;
    align-items: center;
}

blog 상단메뉴 만들기

• <ul>태그 overflow:hidden: 자식이 float로 3차원 속성 가지게 되었을 때 사용하면 자식의 높이값 사용할 수 있게 됨.
• <li>태그 width: 12.5%: 전체 헤더 8등분
• <li>태그 float:left: x축 정렬
• <li>태그의 크기를 정해주고 내부 <a>태그는 display:block, 크기 100%로 가득 채워 줌.
• border-right 주고 마지막 li에만 선택해서 테두리 없애 줌

main #blog-wrap .blog-nav ul {
    overflow: hidden;
    border: solid 1px #dae1e6;
}
main #blog-wrap .blog-nav ul li{
    float: left;
    width: 12.5%;
    height: 49px;

    border-right: solid 1px #dae1e6;
}
main #blog-wrap .blog-nav ul li:last-child {
    border-right: 0;
}
main #blog-wrap .blog-nav ul li a {
    display: block;
    width: 100%;
    height: 100%;

    line-height: 49px;
    text-align: center;
}

media-wrap 부분

여기도 공간의 전체 넓이를 3개 자식 태그들이 동일하게 차지하게 하고 싶었는데, 개체 사이 공백이 필요하기 때문에 width:33.3333%로 지정하지 않고 이미지의 넓이값을 그대로 사용했다.

어려웠던 내용

혼자 idus 메인페이지를 만들어볼 때도 비슷한 모양의 검색창이 있었는데, input과 나란히 붙어있는 button을 어떻게 만들지 잘 모르겠어서 일단 button을 패스했었다. 오늘 배운 내용을 가지고 적용시켜보아야겠다.

해결방법

소감

앞으로 네이버의 여러 html 페이지들을 만들어 보게 되는데, 처음엔 복잡하게만 보였던 것들이 작게 쪼개어보니 만들지 못할 것은 아니라는 생각이 들었다. 공간의 크기를 결정하는 여러 팁을 배운 것은 좋은데 몰랐을 때 만든 실습 페이지를 수정하면 레이아웃이 좀 뒤틀릴 것 같아서 걱정이다.
오늘 사정 상 원래 쓰던 노트북 말고 다른 컴퓨터에서 진행하고 있어서 덕분에 git 사용 연습을 했다...ㅋㅋ