Dev.note(web) 21.07.23

김태훈·2021년 7월 23일

대구AI스쿨

목록 보기

20/49

네이버 웹툰 예제 1일차

1일차 본문

전과 마찬가지로 유념할 부분만 정리한다.

체크포인트

길이 속성에 상대값과 절대값을 혼합

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right {
	float: right;
	width: calc(100% - 112px);
}

필요에 따라 상대값과 절대값을 더하거나 빼는 방식으로 혼합해서 쓸 수 있다. 컨텐츠가 글자일 경우 폭의 경우엔 상위 레이아웃이 지정되지 않아도 되나 높이의 경우엔 상위 레이아웃의 크기가 정해져야한다. 아마 자동적으로 글자 컨텐츠는 폭이 자동으로 100%, 높이가 컨텐츠만큼 정해지기 때문인 듯 하다.

(html)
<html>
  <body>
    <div class="webtoon-carousel-right">
     hello world
    </div>
  </body>
</html>
(css)
html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
.webtoon-carousel-right {
  background-color: yellow;
	float: right;
	width: calc(100% - 112px);
  height: calc(100% - 112px);
}

클래스 생략

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left {}
#webtoon-main .webtoon-main-left .webtoon-carousel-left h2 {}

클래스 명명을 상세하게 하다보면 길이가 길어진다. 이렇게 긴 클래스들이 쌓였을 때 모든 클래스를 쓰면 너무 길어지게 되는데, 중간의 클래스를 생략할 수 있다. 다만 중복된 이름의 클래스가 있을 경우엔 경로가 상세하지 않을 경우 속성이 잘못 부여될 수 있으므로 클래스 명명을 짧게 하는 게 더 좋을 수 있다.