네이버 뉴스5
엔터 뉴스 오른쪽
높이값이 없으면 line-height의 값이 무의미하다.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}말줄임
#ent-section-11 .bottom .btn-wrap .btn{
width: 24px;
height: 24px;
border: solid 1px #f2f2f2;
}선택자를 제대로 다루기 .
버튼은 기본적으로 인라인하이픈 블럭의 요소를 가지고 있어서 연달아 사용할 경우 태생적인 공간으로 서로 떨어져 있다.
그래서 플랙스 - 스타트와 결합해서 공백을 제거한 상태로 좌우배치를 수월하게 할 수 가 있다.
어디에서는 마진바텁 / 탑 으로 작업했지만 가능하면 일관성 있게 작업하는 것이 좋음
#ent-section-13 ul li a{
display:block ;}a태그의 범위를 길게 넓혀야 되서 블랙으로 처리를 한다.
ent-left와 right사이에 선을 넣고 싶은데 기존 방법대로 그냥 둥중 하나에 볼더를 넣으면 ent-main에서 적용한 padding-top:24px때문에 중간에 뜨게 된다. 그래서 기존 배운 방법으로는 main에 padding-top값을 없애고
ent-left/right에 각각 padding-top를 넣고 left에 볼더는 넣는 방법
실제 네이버서에 사용하는 방법은
.home .ct_wrp:after {
display: table;
clear: both;
content: '';
}방법으로 after를 사용한건데 어는 부분에서 작용한 건지 잘 이해가 되지 않는다. 게대가 실제 네이버내 display:table를 많이 사용하지만, 배우지 않는 게념ㅁ ㅜㅜㅜㅜㅜㅜ 구글링으로는 표를 작성하는 속성이래고만 이해가 되고 있다. 해당 속성으로 엃게 사용이 가능한지 파악하자
- 네이버의 경우 body-ct_wrp 인데 이걸 적용하면
main-container:after에 적용한 것과 비슷(네이버의 경우 컨테이녀안에 div ct_wrp 넣었기 때문
역시 네이버 역시 main역확하는 곳에 padding/margin등을 넣지 않았음. left와 right에 해당되는 것오 padding top/ right or left를 넣었음
이제 display-table의 효력만 확실히 알면됨
동일하게 적용했으나 main의 padding-top이 제대로 사라지지않았는데 이유가 css초기 main자체에
main {
overflow: hidden;
padding-top: 20px;
}주었기 때문 선택자 우선선택(케스케이팅)을 이용해서
ent-main자체에 paddig-top:0를 넣어서 해결
header의 하단선의 경우
border-botton을 넣은 것이 아니라
span태그를 활용하여
.bg_header {
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
}적용
