1. 학습내용

github 소스코드

웹 개발시 도움되는 크롬 확장 프로그램

wappalyzer

특정 웹사이트에 접속해서 그 웹사이트가 어떤 기술스펙으로 만들어졌는지 확인가능

css viewer

검사보다 더 쉽고 편하게 코드를 볼 수 있다.

whatfont

사이트에서 어떤 font를 사용하고있는지 알려줌

Lorem Ipsum Generator

카피캣 할 때 텍스트 타이핑 쉽지않음 - 임의의 문장을 만들 때 활용

colorzilla

웹사이트에서 어떤색상을 사용했는지 확인할때

네이버 실습

calc

이 속성을 이용하면 유연하게 배치작업 가능

전체 100% 크기안에서 52px 만큼의 크기를 뺀 width값

틀어진 이유는 button에서 설명

#main-header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;

button

여기서는 아니지만 서버에 어떤 데이터를 보낼려면 form태그 사용해야하고 type을 button에서 submit으로 변경해야한다

inline-block 요소 두개를 연달아 기입시 미세한 공백이 생긴다 (위에 2번째 그림처럼 맞는 크기이나 미세한 공백으로 인해 줄바꿈 현상 일어남)

flex 사용하면 문제해결

<div class="search_area">
	<div class="search_wrap">
		<input type="text">
		<button type="button"><img src="https://img.icons8.com/material-rounded/24/000000/search.png"/></button>
	</div>
</div>

가상선택자 focus

입력칸을 클릭하게되면 자동으로 포커싱이됨 포커싱이 된 영역에 대해서 아웃라인을 적용하고 싶지않을 때 focus 사용

보통 default 값으로 넣어준다

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

box shadow

공간에 그림자효과 여부

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

boxshadow 사이트

https://www.cssmatic.com/box-shadow

아이콘 무료 배포 사이트

https://icons8.com/icons

상기할 내용

자식이 float 사용시 부모가 overflow-hidden을 가지고 있으면 자식이 부모 높이에 영향을 줄 수 있다.

y축 중앙정렬 공식

top: 50%;
	transform: translateY(-50%);

span - strong 태그 특정글자강조

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

높이 값이 있는경우 lineheight로 동일한 값을 넣으면 y축중앙정렬효과

main #blog-wrap .blog-nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #eae1e6;
	
	text-align: center;
}

main #blog-wrap .blog-nav ul li a {
	
	width: 100%;
	height: 100%;

	line-height: 49px;
}

2. 어려운점

kidsago 보다 난이도가 높은 사이트를 한번에 작성 해보았는데 선생님이 가르쳐주신 방식말고도 여러가지 방식이 많아 헷갈리는 부분이 있었다.

3. 해결방법

선생님이 말씀하시길 자기 방식만 옳은 것이 아니고 여러가지 방식이 있으니 써보라고 하셨고 각종 다양한 방식으로 문제를 해결해보았다. 예를 들어 중앙정렬 부분이나 text align 사용 여부 등 내가 생각하는 방식이 맞는가 확인하고 구글링 해가며 해결.

4. 소감

이전까지는 블로그를 복습형 방식으로 쓰겠다고 코드를 장황하게 늘어놓고 전부다 설명을 적어놓았다.

그 방식이 아무것도 모르고 기억하지 못할 때는 굉장히 유용했으나 내가 가끔 기억나지 않는 걸 찾아볼 땐 굉장히 비효율이라는 사실을 느꼈다.

블로그에는 내가 배운 새로운 사실, 그리고 다시 상기하면 좋은 점등을 기록하고 참고 사이트 정도를 기입할 예정

복습은 오히려 코드를 보면서 다시 적어보는게 훨씬 도움이 많이 되는 것 같다.