✔ TODAY

오늘부터 네이버 웹툰메인이 카피겟을 시작한다. 앞의 내용물 보다 여려워 보이지만 차근차근히 코드를 작성하자!!

✔ 학습내용

header

• 아이콘관련해서는 i태그를 사용하는데, 이는 inline요소를 가지고있다.
  - 이 부분에 배경 이미지를 넣기 위해서는 display : block 또는 inline-block을 사용해 공간을 넣을 수 있게 해야된다.

Tip

• css 작성시 선택자를 미리 작성하는 것이 편하다.

wedtoon-header-top

▶ 해당영역의 border가 화면 양 끝까지 나오기 떄문에, 안에 넣을 오버젝트는 wedtoon-container 안에 넣는다.

• 그 안의 내용물은 wedtoon-container의 영향권이라 중앙에 정렬이 된다.

▶ h3 칼러를 직접적으로 입력을 해도 색상이 변하지 않는다. 즉, 그대로 검정색으로 출력이 된다.

• h3안의 a테그에 색상을 넣어야 해결이 된다.

▶ 작대기 넣기

• 전에는 가상선택자 before를 사용했따면 이번에는 em사용한다.

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

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

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

▶ 서치영역만들기

#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 315px;
	height: 37px;

	border: solid 1px #e5e5e5;}

#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap input{
	width: calc(100% - 35px);
	height: 100%;
	border: none;
	background-color: yellow;

	padding: 0 10px;}

#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap input:focus {
	outline: none;}

#webtoon-header .wedtoon-header-top .wedtoon-header-input-wrap .btn-search{
	width: 35px;
	height: 100%;
	background-color: #00d564;}

공부하기 📚
반드시 사전 메인사이트의 서치도 알아보기
그리고 구글링을 통해서 다른 코드도 알아보기!!

▶ wedtoon-header-link-wrap 안에 i와 a태그가 존재한다.
이 때, i태그를 inline를 inline-block로 변환하면 inline요소인 a가 뒤 이여 있기 때문에 사이에 태생적인 공간이 나온다.

(인라인이 연달아 나오면 태생적인 공간이 나온다)

• a태그에 vertical-align: middle를 사용해 정렬을 정리한다.

#webtoon-header .wedtoon-header-nav .wedtoon-header-link-wrap a{
	vertical-align: middle;
	font-size: 12px;
	color: #606060;
}

▶ 같은 줄에 있는 형제관계는 띄어쓰기를 넣지 않는다.

webtoon-main-left

▶ webtoon-caroursel부분에서 오른쪽과 왼쪽을 양분을 할 때, flot를 사용한다.

▶ webtoon-caroursel-right 의 밑 버튼들을 작성할려면, 포지션의 개념을 완벽하게 이해을 해야 한다.

webtoon-content

<ul>베스트도전
	<li>에피소브별
		<ul>
			<li>
			</li>
		</ul>
	</li>
</ul>

▶ li속에 小ul를 넣을 수 있다.

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

width: calc(100% - 'X'px) 부분이 제대로 출력이 되지 않아서 고민이 많았다. 실제 input과 button의 디자인과 공간을 신경 써야 될 것 같다.

• 서치영역의 추가적인 학습이 필요한 것같다.
  
  li속에 또 다른 ul를 넣는다는 개념을 이해하기 조금 힘들었다.ㅜ

✔ 해결방법작성

언제나... 구글링과 실제로 하나 하나 코드를 수정해 보면서 출력값을 확인 해 보는 것...

✔ 학습소감

태그안에 또 다른 태그를 넣어 구조를 짤 수 있다는 것은 전부터 알 고 있었지만, 이렇게 또 다르게 활용할 수 있는지는...! 앞으로도 다양한 시도를 해보자!!