https://ohdiki1314.tistory.com/80 (class와 id 어떻게 사용하는 것이 좋을까?)
1.학습한 내용
NAVER 웹툰 페이지의 메인 오른쪽 영역과 footer 영역에 대한 마무리와 웹툰 페이지의 전영역을 제작하였다.
(1) 페이지 실습
(2) 학습한 내용
ol tag의 사용
ul 태그와는 다르게 우선순위를 주는 list를 만들때 사용한다.
HTML
<ol>
<li>
<div class="rank-content">
<span class="rank">1</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
css
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol {
list-style: decimal;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
padding: 0 13px;
font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content a {
display: inline-block;
overflow: hidden;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content .rank {
margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 30px;
height: 12px;
top: -3px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status {
width: 12px;
height: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-stay {
background-color: black;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-up {
background-color: red;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-down {
background-color: blue;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .number {
}list-style: decimal; 앞에서 설정된 list-style값이 none으로 되어 있어서 ol로 tag를 걸어도 숫자가 나타나지 않는데, decimal을 넣어주면 숫자가 다시 나타나게 됨.
줄바꿈 현상 방지
css
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content a {
display: inline-block;
overflow: hidden;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;
}자세한 설명 : https://www.codingfactory.net/10597
한줄로 표현하게 하는 방법은 white-space: nowrap;으로 나타낸다.
140px 넘어가면 감춰지는것은 overflow: hidden;으로 나타내게 된다.
text-overflow: ellipsis; 는 넘어가는 영역에 (...)으로 나타내게 된다.
(이전에 학습하였던 부분)
HTML 특수문자
하단 영역에 NAVER CORP 좌측에 특수 문자 C가 있다.
이와같은 경우에는 google에서 html 특수문자를 검색하면 찾아볼수 있다.
HTML
<footer id="webtoon-footer">
<div class="webtoon-container">
<div class="webtoon-footer-wrap">
<div class="webtoon-footer-left">
<ul>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
</ul>
<span>© naver corp</span>
</div> 
를 사용하여 나타내었다.
이외에 많이 사용되는 것은 
로 강제적으로 공백을 만드는 특수문자로 우리가 sublime text에서 아무리 띄어쓰기를 해보아도 웹 페이지상에서는 띄워쓰기가 안되는데 이러한 기호를 이용하여 띄어쓰기를 나타낼 수가 있다.
css에서 대소문자 제어
ex>
#webtoon-footer .webtoon-footer-wrap span {
text-transform: uppercase;
}보통 대소문자를 HTML에 직접 써서 표기를 할수도 있지만, css에서
text-transform을 써서 제어할수 있다.
text-transform: uppercase; (일괄적으로 대문자로 적용)
text-transform: lowercase; (일괄적으로 소문자로 적용)
text-transform: capitalize; (첫글자만 대문자로 변경)
일직선 뻗치기
css
.webtoon-detail #webtoon-total-day .webtoon-day-lists {
display: flex;
flex-direction: row;
border-bottom: solid 1px #f4f4f4;
}
상단 그림과 같이 긴 쪽에 맞추어 선을 그어 내리기 위해서는
default값인 stretch값을 주어야 한다. (flex-start는 x)
2. 실습
깃허브 소스코드:
naver 웹툰 -2-final(메인오른쪽+footer+상세페이지) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/35
naver 웹툰 -2-final(메인오른쪽+footer+상세페이지) 실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/36
3. 어려웠던 내용 & 해결방법
오른쪽 상단 부분같이 복잡한 구조로 되어 있는 부분은 도면설계작업을 하는데 있어서 상당히 난해한 것 같다.
강의 양이 많아 겨우 2번 다 들었는데, 1번정도는 더 들어야 이해가 될 것 같고, 현재 스스로 도면 구상을 하여 실습을 해보아야 하는데 시간이 나지 않는다.
4.소감
시간을 조금씩 shift하여 더 쏟아 붓고 있어도 강의 양이 많으니, 일지쓰기도 힘들고 온전히 내것으로 만들기가 힘이 든다.
사실, 5~6개씩 새로운 문법들을 배우고 있지만, 현재 필요한 것은 설계도면을 구상을 하고 간단한 검색을 통해 내가 구상을 하고 문제가 생겼을때 트러블 슈팅도 혼자서 가능하여야 실무에서 쓸 수있고 취업시에 쓸만한 신입이 될텐데, 포탈 페이지를 혼자서 단시간에 못만들지라도 8월전까지 애초에 1차 목표로 하였던 걸그룹 팬페이지는 꼭 제작해야겠다는 강한다짐으로 자는 시간 외에 몸을 갈아서라도 해야겠다는 생각이 든다.
