Dev.note(web) 21.07.23

2839 단어 대구AI스쿨대구AI스쿨

네이버 웹툰 예제 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 {}

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

학습 소감

아직도 코드를 받아쓰기만 하는 기분이 들어 혼자서 작성할 자신이 없다. 주말에 느긋하게 코드를 연습하거나 레이아웃을 연상학습할 필요가 있을 것 같다.

진행한 코드 링크

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

[Study-Next Step] 3장. 개발 환경 구축 및 웹 서버 실습 요구사항
11장. 심층 신경망 훈련하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage