210723_[20]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_5_NAVER_webtoon_1_상단+메인왼쪽영역
1.학습한 내용
NAVER 웹툰 페이지의 상단영역과 메인 왼쪽 영역에 대한 작업을 진행하였다.
(1) 페이지 실습
추가로 상단에서 웹툰을 클릭하면 페이지 전환이 일어나도록 설정을 하였다.
(2) 학습한 내용
상단 부분
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="webtoon-header">
<div class="webtoon-header-top">
<div class="webtoon-container">
<div class="webtoon-header-left">
<h2><a href="#">만화</a></h2>
<em class="bar"></em>
<h3><a href="#">웹소설</a></h3>
<div class="webtoon-header-input-wrap">
<input type="text">
<button type="button" class="btn-search"></button>
</div>
</div>
<div class="webtoon-header-right">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>
<div class="webtoon-header-nav">
<div class="webtoon-container">
<nav>
<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>
</ul>
</nav>
<div class="webtoon-header-link-wrap">
<i class="icon-ex-mark"></i>
<a href="#">온천마을 판타지 로멘스 <모락모락 왕세자님></a>
</div>
</div>
</div>
</header>
상단 부분은 다음과 같이 HTML을 짰는데, 전체 webtoon-header 영역에서 컨테이너 영역으로 webtoon-header-left와 right영역으로 감싸고 webtoon-header-nav로 그 아래 navigation 영역을 만들었다.
버튼을 눌렀을때 색상이 변하면서 눌렀다는 것을 표현하기 위해서
<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>class로 on을 지정하여서 페이지가 뜰수 있도록 하였고,또다른 html의 파일(webtoon-detail.html)에서는
<li><a href="webtoon.html">홈</a></li>
<li class="on"><a href="webtoon-detail.html">웹툰</a></li>
<li><a href="#">베스트 도전</a></li>
<li><a href="#">도전 만화</a></li>이러한 식으로 class를 달리 설정하여서 a tag로 설정을 하였다.
i tag
i tag를 통하여 상단 오른쪽 부분에 icon을 임시 적으로 나타내어 주었는데,
i tag는 inline 요소의 성격을 가지고 있다.
나중에 icon 이미지를 위 그림과 같이 background 이미지로 삽입 할때는 i tag의 display:block 혹은 inline:block으로 공간을 만들 수 있는 HTML의 성격으로 변경을 해주어야 한다.
<i tag와 관련된 자세한 정보>
https://codingbroker.tistory.com/68
a tag 상속 효과
△ 상단 영역에서 웹 소설이 검은색으로 나타나 있는데, css에서
#webtoon-header .webtoon-header-top .webtoon-header-left h3 {
margin-right: 30px;
font-size: 16px;
color: grey;
}h3에 grey값을 적용해주어도 변경이 되지 않았다.
이유는 원래 h3에 color grey 값이 있었는데 예전 작업에서 a tag에 color를 black으로 넣어 주었기 때문에 부모가 가지고 있는 grey보다 black으로 유지가 되는 것이었다.
해결을 해주기 위해서,
#webtoon-header .webtoon-header-top .webtoon-header-left h3 a {
color: grey;
}
다음과 같은 추가 code를 넣어 주었다.
▽ 결과
em을 통한 세로 작대기 만들어보기
만화와 웹소설 사이에 세로 작대기로 구획을 만들었는데, em tag를 통하여 제작하였다.
HTML
<h2><a href="#">만화</a></h2>
<em class="bar"></em>
<h3><a href="#">웹소설</a></h3>CSS
#webtoon-header .webtoon-header-top .webtoon-header-left .bar {
width: 1px;
height: 13px;
background-color: #d2d2d2;
margin-left: 8px;
margin-right: 10px;
}이렇게 bar를 생성하여 margin left와 right값을 두어서 간격을 벌리어 생성할 수 있었다.
이전에 7월 22일에는 다른 방식으로 세로 작대기를 형성하였었는데,
#shop-footer .policy-wrap span:first-child:before {
content: initial;
}
#shop-footer .policy-wrap span:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #d7d7d7;
vertical-align: -1;
}두가지 방식 모두 숙지하여 적재적소에 써먹을수 있도록 해야겠다.
<추가 em과 i tag 요소에 관한 설명>
https://developer.mozilla.org/ko/docs/Web/HTML/Element/em
검색창에 클릭했을때에 생기는 outline 제거
css
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input:focus {
outline: none;
}
마우스 올렸을때 underline 생기게 하기
css
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a:hover {
text-decoration: underline;
}
hover 반응에 따른 속성을 변경 시키는 것 마우스의 반응에 따른 속성을 설정할 수 있다. text-decoration: underline;을 주면 마우스를 가져다 놓았을때 밑줄이 생기는 것을 볼수 있다.
높이값 인식 시키기
css
#webtoon-main .webtoon-container {
overflow: hidden;
}
#webtoon-main .webtoon-main-left {
float: left;
width: 694px;
/*height: 2000px;*/
/*background-color: yellow;*/
}
#webtoon-main .webtoon-main-right {
float: right;
width: 240px;
height: 2000px;
background-color: blue;
}
중간 nav 영역에서 float: left;와 float: right;를 성정하였는데, 높이값을 인식시켜주기 위해서 container에 overflow: hidden;을 설정하였다.
화살표 만들기
HTML
<a href="#" class="btn btn-prev"></a>
<a href="#" class="btn btn-next"></a>class안에 btn과 btn-prev class 2개를 만들어서 btn은 공간에 대한 크기를 설정하고, border값을 넣을때 사용되는 것이고, btn-prev + btn-next는 화살표의 방향을 변경할 때에 사용하는 것으로 설정한다.
css
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-prev{
left: 0;
top: 0;
background-color: pink;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-next{
right: 0;
top: 0;
background-color: blue;
}padding 값 3개 일때
padding: 26px 0 10px;
}
/*padding 3 글씨는 상 /좌우/ 하 로 잡힌다. */
font-size 유전
#webtoon-main .webtoon-main-left .webtoon-content-col-3 .webtoon-content-col-type-1 {
width: 210px;
height: 196px;
font-size: 12px;
}
/* 자식들에게 font-size 유전자가 전달이 된다. */
#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 img {
margin-bottom: 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info h4 {
margin-bottom: 5px;
}
#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info p {
margin-bottom: 5px;
}
#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info span {
color: grey;
}.webtoon-content-col-type-1 아래에 font-size가 유전된다.
li tag안에 또다른 ul-li tag 넣기
쿠팡 사이트 좌측을 보면 카테고리 안 초중고참고서를 클릭하면 초등학생,중학생,고등학생과 같이 리스트안에 또 다른 list들이 있다.
위와 같이 또 ul-li tag를 넣어서 제작하면 된다.
2. 실습
깃허브 소스코드:
naver 웹툰 -1(상단+메인왼쪽) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/33
naver 쇼핑 -1(상단+메인왼쪽) css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/34
3. 어려웠던 내용 & 해결방법
어려웠던 점은 div tag끼리 꼬여서 찾는점이 힘들었다.
해결하기 위해서 다시 강의를 듣고 코드를 짰으며 div끼리 꼬이지 않게 하기 위해서 x축으로 array하여 두번째로 할땐 꼬이지 않게 하였다.
4. 소감
난이도가 계속 상승하고 있는데 (특히, 상단 tag영역 ) 지금 강의만 따라가기도 벅차지만, 강의를 3번정도 반복하니까 follow-up이 되고 있다. 주말에도 시간을 할애해야 내것으로 되고 있다고 느끼고 있으며, 추가적인 tip으로 배우는 것은 꼼꼼하게 정리하도록 할 예정이다.
em같은 tag들도 HTML의 내용이지만, 추가적으로 배우는 내용이니만큼 아페 정리했던 velog에 내용을 추가하여 보완해야겠다.
주말에 하려던 javascipt학습과 git에 관련된 내용은 공부를 하지 못하였지만, 일단은 현재진행징도까지 따라온 것에 만족하며 앞으로 남은 기간동안에는 am 8시 ~ pm 10시까지 계획을 세워서 학습량을 늘릴예정이고 주말에도 반나절 정도만 쉬고 하루는 온전히 평일계획처럼 나갈 예정이다.
무조건 java script까지의 진도를 대구 AI스쿨 커리큘럼 끝날때까지 다 완성하고 80% 이상 내 것으로 필히 만들 예정이다.
모니터 하나로 작업하며 작은 화면을 억지로 분할하여 작업하며 목과 어깨 통증이 심해지면서 편두통까지 발생해서 수업에 집중이 힘들었지만, 높낮이 거치대와 태블릿을 활용하여 듀얼모니터 환경으로 작업을 하니 쾌적하게 학습을 진행 할 수 있게 되어서 좋은 것 같다.
