1. 학습내용

github 소스코드

list-style: deciaml;

초기화작업으로 지운 liststyle에 숫자를 다시 나오게 할때 사용

webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol {
	list-style: decimal;
}

whit-space, overflow, text-overflow

white-space: nowrap; -> 공간을 벗어나는 글자를 줄바꿈 주지않음

overflow: hidden; -> 범위를 넘어가는 것을 감춤

text-overflow: ellipsis; 벗어나는 글자에 대해 ...표시

클래스 응용

새로운 클래스를 추가하여 기존틀은 유지한 상태에서 새로운틀을 추가할 수 있다.(다른디자인적용)

html에서 사용되는 특이한 코드

저작권 © 만들기

공백

html은 공백 하나만 용되는데 여러개 용시키고싶을 때 강제적으로 공백을 만듬

Non-breaking space

대문자 표기로 바꾸는법

text-transform: uppercase;

lowercase : 소문자

capitalize : 첫글자만 대문자로

투명한 border

border-bottom: solid 2px transparent;

2. 어려운점

원래 하나의 코드에 하나의 클래스를 사용하는 방법을 사용했다면 이제는 코드 한개에 여러개의 클래스를 적용시켜 매우 빠르게 작업하는 법을 배웠다. 근데 이것이 익숙하지않아서 많이 헷갈린다

3. 해결방법

복습이나 copycat을 할 때 클래스를 여러개 사용하는 방법도 같이 복습하여 익숙해지도록 노력해야겠다.

4. 소감

얼마전까지 익숙해졌다고 생각했지만 갑자기 여러개의 클래스를 사용하기 시작하면서 복잡함을 느꼈다. 아직 많이 부족하다고 느끼고있고 더욱더 열심히 해야겠다.