1.학습한 내용

(1) Chrome 브라우저 확장 프로그램

(웹 개발에 유용한 도구들)
Web developer chrome extension
https://wpastra.com/chrome-developer-extensions/
위 링크에서 28가지의 chrome extension tool이 나오는데, 쓸만한 개발도구는 다음과 같다.
(5가지)
2. whatfont : site의 글자들의 폰트에 대한 정보를 알 수 있다.
3. color zilla : site의 쓰여진 색상에 대한 정보를 알 수 있다.
7. css viewer : 개발자 도구를 열어보지 않고 css에 대한 정보를 알 수 있다.
8. Lorem Ipsum Generator : 임의의 문장을 만들어 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글을 생성한다.
11. Wappalyzer : site가 만들어지기 위해 사용된 기술 스펙들을 보여준다.

<Wappalyzer 예시>

△ 마켓 컬리 사이트가 어떤 기술들로 만들어진지 보여주고 있다.

위에 tool들을 활용하면, 웹 프로그래밍에 보조 수단으로 유용하게 사용할 수 있다.

(2) NAVER main 페이지 실습

△ 위와 같이 크게 실습에는 3단 영역의 설계 도면 작업이 진행되었다.

▽ 메일 카페 블로그 지식인 쇼핑 까지는 header 영역으로

검은색 광고배너판부터는 container 영역

▽ 스크린샷에는 다 나타나지 않았으나 오늘 읽을만한 글 경제 M은 4가지 파트로 구성이 되어 있다.

▽ 아래쪽 비디오 재생영역(신사임당)까지는 main-left 영역으로 오늘 작업한 마지막 부분이다.

(3) 학습한 내용

button은 태생적으로 border 값을 가지고 있다.
그래서 생성되어 있는 테두리를 없애려면 초기화를 진행하여야 한다.

전반적인 초기화 진행

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

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

img {
	vertical-align: middle;
}

**button {
	border: none;
}**

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

calc 함수 개념

#main-header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px 15px;
	/*background-color: yellow;*/

	font-size: 22px;
	border: none;
}

#main-header .search_wrap input:focus {
	outline: none;
}


#main-header .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}

width: calc(100%);

width: calc(100% - 52px);

위와 같이 calc 함수를 쓰게되면 연두색 검색 박스가 오른쪽 상단으로 붙게 되는데, inline 요소간에는 미세한 공백이 존재하는데, 공백까지 간격으로 인식하게 된다.

(이미지와 같은) 고정길이와 (영역과 같은) 가변길이의 계산값을 통해서 공백을 만들어주고자 할때, calc() 함수를 활용 할 수 있다.

width: calc(100% - 52px);
52px은 녹색 버튼의 width

flexbox.help site에서 다음과 같이 1번은 search-warp
2번은 검색버튼으로 설정하여
layout을 짜서 붙여주는데, default값은 제외하고 code를 붙여넣는다.

#main-header .search_wrap {
	display: flex;
	/*flex-direction: row;*/
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	/*align-content: stretch;*/

△ 위 코드에서 default값은 주석처리시킴

search_wrap 부분을 클릭했을때 생성되는 자동 테두리의 제거

검색창 부분을 클릭 하였을때 검윽색 테두리가 나타나는데, 일반 네이버처럼 없애려고 하면, 다음과 같은 문구를 css창에 입력하면 생성을 없앨 수 있다.

#main-header .search_wrap input:focus {
	outline: none;
}

▽ 결과

input, textarea {
	outline: none;
}

위와 같은 코드도 똑같은 역할을 수행하며, default값으로 많이 넣어준다.

box-shadow 효과

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

메일 카페 블로그 지식인 쇼핑 상하단의 box-shadow효과를 주면 그림자 퍼짐의 효과로 공간을 구별 할 수 있게 된다.

홈페이지 참조 : https://html-css-js.com/css/generator/box-shadow/

무료 icon 삽입

https://www.flaticon.com/kr/

검색창 옆에 돋보기 아이콘 같은 것들을 따로 포토샵같은 작업 없이 무료로 가져올 수 있는 사이트로 img를 삽입할때 사용할 수 있다.

border 없애기

main #news_wrap .news_lists .news_list:nth-child(6n),{
	border-right: none;
}

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소에 적용 시키는 방법으로 6n을 사용하면 일일이 6, 12, 18, 24번째의 테두리 border를 없애는 코드를 안넣어도 되고 오른쪽 끝 부분들이 자동으로 적용된다.

strong tag : font의 굵기를 굵게 만든다.

<div class="right_header">
					<span class="count"><strong>1,853</strong>개의 글</span>

1,853이 굵게 나타났다.

2. 실습

깃허브 소스코드:

naver-1 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/25

naver-2 실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/26

3. 어려웠던 내용 & 해결방법

이제 HTML, css 문법 하나하나의 기본적인 의미가 궁금한 것은 거의 없지만, 전반적으로 홈페이지의 구조 설계 단계에서의 나무 하나하나를 보는 능력보다는 숲을 보는 능력을 키워야 할 것 같다. 그리고 많이 사용하는 div tag를 닫을때 tag들 끼리 꼬여서 오류가 많이 났는데, 이 부분 또한 머릿속에 고정된 정형화된 틀을 만들어서 적용을 해야 실무에서 정확하고 빠르게 사용할 수 있을 것 같다.

4. 소감

실력이 늘고는 있지만, 코드도 복잡해지고 혼자서 네이버 페이지에서 개발자 도구를 열어 놓고 필요한 정보들만 따와서 적재적소에 카피하는 능력을 키워야 할 것 같다. 그리고 숲을 보는 능력을 키우기 위해서는 계속 이것저것 시도를 해보면서 정공법으로 나아가야 할 것 같다.