6.HTML과CSS를 이용한 연습 여섯번째

7 minute read

1.유투브 반응형 웹사이트 만들기.

모바일 환경부터 만든다음 웹 페이지를 제작하는 방식으로 하겠다
웹사이트를 만들면서 느낀것은, 아직도 HTML의 layout을 어떻게 짜야할지 머리속에서 확 그려지지가 않는다는것이다.그것만 제대로 잡히면 어떻게든 구현할수 있는데, 어떤것을 재활용해서 써야할지 머리에 잡히지 않는다.
이미지를 넣는 방법은 내가 더 좋은 방법인것 같다. 이미지가 사이즈가 달라짐에 따라 발생하는 문제를 전문가는 해결하지 못하는 코드를 사용한것 같음.

2.코드비교

HTML 구성(1) : 전체적인 뼈대
- Expert code : 최대한 시멘틱 테그를 이용하는것이 중요하다. header , main , footer, section ,aside, article, nav
```
<body>
  <header></header>
  <section></section>
  <section></section>
  <section></section>
</body>
```
Yosup code : sectioning tag에 class를 붙이는것을 두려워 하지 말자.

<body>
  <header></header>
  <div></div>
  <div></div>
</body>

HTML 구성(1) : 머리 부분

Expert code :

<header>
  <div class="logo"><i class="fab fa-youtube"></i></div>
  <span class="title">Youtube</span>
  <div class="icons">
    <i class="fas fa-search"></i>
    <i class="fas fa-ellipsis-v"></i>
  </div>
</header>

Yosup code : 굳이 여기서 nav에 클래스를 입히지 않고, 또다른 div를 만들어서 class=”menu” 를 해줄 필요가 있었을까 싶다.

<header>
  <nav>
    <h1 class="rd-only">메뉴창</h1>
    <div class="l_nav">
      <div class="menu">
        <a href="#" class="index_anchor"><i class="fab fa-youtube"></i></a>
        <h2 class="main-title">Youtube</h2>
        <a href="#" class="search_anchor"><i class="fas fa-search"></i></a>
        <a href="#" class="option_anchor">
          <i class="fas fa-ellipsis-v"></i>
        </a>
      </div>
    </div>
  </nav>
</header>

HTML 구성(2) : 비디오 부분

Expert code :

<section class="player">
  <video controls src="/assets/images/practice/lecture/sujin2.mp4"></video>
</section>

Yosup code : 어차피 재활용도 안할껀데, div를 만들어서 그 안에 또 div를 만들 필요가 있을까 싶다. 또한 semantic한 테크를 사용하지 않은점..

<div class="l_video">
  <div class="video">
    <video controls class="video-iframe">
      <source
        src="/assets/images/practice/youtube/sujin2.opus"
        type="video/wav"
      />
      <!--wav 타입을 지원  -->
      <source
        src="/assets/images/practice/youtube/sujin2.ogg"
        type="video/ogg"
      />
      <!--ogg 타입을 지원  -->
      <source
        src="/assets/images/practice/youtube/sujin2.mp3"
        type="video/mpeg"
      />
      <!--mpeg 타입을 지원  -->
    </video>
  </div>
</div>

HTML 구성(3) : 비디오 정보부분

Expert code : section>div+div+div

<section class="info">
  <div class="metadata"></div>
  <div class="actions"></div>

  <!-- Channel Description -->
  <div class="channal">
    <div class="metadata"></div>
    <button type="button">subscribe</button>
  </div>
</section>

Yosup code : 나중에 웹화면에서 flex를 주기 위해 비디오정보부분과 채널 설명부분을 묶어서 표현하였다. 굳이 l_profile을 잡을 필요가 있었나 싶다. 또한 시멘틱 테그를 사용하지 않은점, 그리고 l_wrapper를 굳이 사용했어야했나? 의문이 든다.

<div class="l_main">
  <div class="main">
    <div class="l_wrapper">
      <div class="contents"></div>
    </div>
    <div class="l_wrapper">
      <div class="button_list"></div>
    </div>
    <div class="l_wrapper">
      <div class="l_profile"></div>
    </div>
  </div>
</div>

HTML 구성(4) : 비디오 정보상세부분

Expert code : metadata 안을 3가지의 div로 구성하였는데 해쉬테그 부분은 ul로 작성했다는게 특징이다.

<div class="metadata">
  <ul class="hashtags">
    <li>#DreamCoding</li>
    <li>#DreamCoders</li>
    <li>#Ellie</li>
  </ul>
  <div class="titleAndButton">
    <span class="title">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, amet
      molestias illo neque repellendus ipsa modi perspiciatis tempore, facilis
      possimus esse ab autem aliquid, cum quos magnam molestiae magni!
      Laudantium.
    </span>
    <button class="moreButn"><i class="fas fa-ellipsis-v"></i></button>
  </div>
  <span class="views">1N views 1 Month ago</span>
</div>

Yosup code : div의 양을 줄이겠다는 생각에 그 안에 div 대신 그냥 테그들을 넣어줬다. l_wrapper 레이아웃 이므로 꾸밀수 있는 contents를 만들었고, 나는 해쉬테그를 a태그로 만들었다. 굳이 l_wrapper를 만들필요가 있엇나 싶고, 어차피 꾸미는게 없는데 contents를 만들 필요가 있나 싶다..

<div class="l_wrapper">
  <div class="contents">
    <a href="#" class="contents_anchor">#DreamCoding #DreamCoders #Elies</a>
    <h2 class="contents_title">
      Clone Coding Youtube Mobile Website 유투브 모바일 웹사이트 따라 만들기
      프론트앤드 개발자 입문편 HTML, CSS,Javacript
    </h2>
    <dl class="contents_inform">
      <dt>조회수</dt>
      <dd>1,180회</dd>
      <dd aria-label="upload date">2020.2.20</dd>
    </dl>
  </div>
</div>

HTML 구성(4) : 버튼 부분

Expert code : 버튼을 ul>li로 감싸줬다는것이 특징이다. 그리고 버튼테그를 사용했다는것

<ul class="actions">
  <li>
    <button type="button"><i class="far fa-thumbs-up"></i></button>
  </li>
  <li>
    <button type="button"><i class="far fa-thumbs-down"></i></button>
  </li>
  <li>
    <button type="button"><i class="fas fa-share"></i></button>
  </li>
  <li>
    <button type="button"><i class="fas fa-plus"></i></button>
  </li>
  <li>
    <button type="button"><i class="far fa-flag"></i></button>
  </li>
</ul>

Yosup code : 버튼테그 없이 버튼을 만드려고 했다니.. 그리고 ul>li 대신 dl을 사용했는데 상관없으려나..??

<div class="l_wrapper">
  <div class="button_list">
    <label for="Selected" class="rd-only">Current Selected</label>
    <dl class="up_button column" id="Selected">
      <dt><i class="far fa-thumbs-up"></i></dt>
      <dd>77</dd>
    </dl>
    <dl class="down_button column" id="Selected">
      <dt><i class="far fa-thumbs-down"></i></dt>
      <dd>3</dd>
    </dl>
    <dl class="up_button column" id="Selected">
      <dt><i class="fas fa-share"></i></dt>
      <dd>share</dd>
    </dl>
    <dl class="plus_button column" id="Selected">
      <dt><i class="fas fa-plus"></i></dt>
      <dd>Plus</dd>
    </dl>
    <dl class="flag_button column" id="Selected">
      <dt><i class="far fa-flag"></i></dt>
      <dd>77</dd>
    </dl>
  </div>
</div>

HTML 구성(5) : 채널소개 부분

Expert code :

<div class="channal">
  <div class="metadata">
    <img src="/assets/images/yosup.jpg" alt="" />
    <div class="info">
      <span class="name">드림코딩 엘리</span>
      <span class="subscribers">1M subscribers</span>
    </div>
  </div>
  <button type="button">subscribe</button>
</div>

Yosup code : 굳이 이렇게 많은 div를 남용했어야 햇나..?l_profile 또는 profile중 하나를 없에도 될것 같은데

<div class="l_wrapper">
  <div class="l_profile">
    <div class="profile">
      <img src="/assets/images/yosup.jpg" alt="" class="profile-img" />
      <div class="profile-inform">
        <h2>드림코딩 by 엘리</h2>
        <dl>
          <dt>구독자</dt>
          <dd>2.02천명</dd>
        </dl>
      </div>
      <h2 class="profile-enter">구독중</h2>
    </div>
  </div>
</div>

HTML 구성(6) : 채널리스트 부분

Expert code :

<section class="UpNext">
  <span class="title">Up next</span>
  <ul>
    <li class="item">
      <img src="/assets/images/yosup.jpg" alt="" />
      <div class="info">
        <span class="title">
          HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요 | 프론트앤드
          개발자 입문편 : HTML, CSS, Javasript
        </span>
        <span class="name">드림코딩 by 엘리</span>
        <span class="views">82K views</span>
      </div>
      <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
    </li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</section>

Yosup code : 허허.. div테그를 너무 남발..굳이 l_wrapper를 사용할 필요가 있었나.? 그리고 l_Wrapper를 건들지 않기 위해 또다른 div인 section을 만들고.. 도대체 박스를 몇개나 쓴겨..

<div class="aside">
  <div class="l_wrapper">
    <div class="section">
      <ul class="l_col">
        <li class="l_row">
          <div class="section-box">
            <div class="box">
              <a href="#">
                <img src="/assets/images/yosup.jpg" alt="" class="box_img" />
              </a>
            </div>
            <div class="box_title">
              <h1>
                프론트앤드 습득, 프론트앤드 개발자가 되고 싶은 입문자들을 위한
                강좌를 시작합니다.
              </h1>
              <h2>HTML,CSS,Javascript 일반프로젝트</h2>
              <h3>드림코딩 엘리</h3>
              <h4>2019-12-11</h4>
            </div>
          </div>
        </li>
        <li class="l_row">
          <div class="section-box">
            <div class="box">
              <a href="#">
                <img src="/assets/images/yosup.jpg" alt="" class="box_img" />
              </a>
            </div>
            <div class="box_title">
              <h1>
                프론트앤드 습득, 프론트앤드 개발자가 되고 싶은 입문자들을 위한
                강좌를 시작합니다.
              </h1>
              <h2>HTML,CSS,Javascript 일반프로젝트</h2>
              <h3>드림코딩 엘리</h3>
              <h4>2019-12-11</h4>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

결론 : 재활용에 너무 집착하지 말아야겠다는 생각을 했다. 단순하게 생각하면 될것을 너무 재활용해야지 말아야지 하면서 l_wrapper 라던지 l_row라던지 이런것들을 너무 남발하는것 같다라는생각이 든다. 재활용할거는 재활용하겠다는 확신을 가지면서 사용하고, 그렇지 않을거면 과감하게 놓아야한다. 모든것을 재활용하려고 하지마..

CSS 구성(1) : CSS의 변수선언

Expert code : 자주 사용하는 padding이나 , 색상 , 폰트사이즈 들은 변수로 만들어 사용한다.

:root {
  /* Color : 디자인 책에서 정의하길 너무 흰색과 검은색은 사용자에게 좋지 못하므로 톤다운된것을 사용한다. 그래서 일일이 찾아서 사용하는것이 아닌 자주사용하는 색을 변수로 만들어서 사용한다.
  이런 변수를 사용할때는 사용하고자 하는 선택자에다가
  속성 : var(변수명)으로사용한다.*/

  --white-color: #fff;
  --black-color: #140a00;
  --blue-color: #045fd4;
  --red-color: #ff0000;
  --grey-dark-color: #909090;
  --grey-light-color: #e0e0e0;
  /* Size */

  --side-padding: 12px;
  --avatar-size: 36px;

  /* Font Size */
  --font-large: 18px;
  --font-medium: 14px;
  --font-small: 12px;
  --font-micro: 10px;
}

header {
  display: flex;
  justify-content: space-between;
  padding: var(--side-padding);
  background-color: var(--black-color);
  color: var(--white-color);
}

Yosup code : 전문가처럼 변수로 쓰는 방법 처음봤다아…신세계

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  background-color: black;
  padding: 10px;
}

CSS 구성(2) : 비디오 부분

Expert code : 고정하기 위해 sticky를 사용하였다. 그렇다면 fixed를 사용해도 되지 않을까? No.. fixed는 stick와 다르게 viewport를 기준점으로 삼기 때문에 메뉴위에 비디오가 자리잡게 된다.

.player {
  /* 으잉 ? position sticky 잘 안쓴다고 햇는디.. 
  그 이유는 E11조차 전혀 지원이 안되는 것을 보면 우리나라에서는 그냥 없다고 생각하는게 편할 수도 있겠습니다만 모바일에서는 자주 사용한다.*/
  position: sticky;
  top: 0;
  text-align: center;
  background-color: var(--black-color);
}

/* sticky 와 fixed의 차이점은 stick는 relative처럼 자기의 원래자리에서 고정된다면, fixed는 viweport를 기준점으로 잡는다는것이다. 그리고 stick는 반듯이 top left 같은 지정값이 있어줘야하며 스크롤이 될떄까지는 relative와 같은 역할을 한다.*/

.player video {
  width: 100%;
  height: 300px;
  max-width: 1000px;
}

Yosup code : 비디오의 16:9 사이즈를 유지하기위해 padding-top을 주었고 그곳에다가 비디오를 자리잡게 했다.

.video {
  position: relative;
  padding-top: 56.25%;
  background-color: blue;
}
.video-iframe {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

의문점? 전문가처럼할시 video의 사이즈에 따라 너무 많은 높이를 차지할수 있지 않을까?

CSS 구성(3) : 마지막 Section 부분에서 박스 구성

Expert code : flex를 활용하여서 item들의 위치를 지정해줌

.UpNext .item .img {
  flex: 1 1 35%;
}

.UpNext .item .info {
  display: flex;
  flex: 1 1 60%;
  flex-direction: column;
}

.UpNext .item .moreBtn {
  flex: 1 1 5%;
}

Yosup code : 마찬가지로 flex를 사용함

.box {
  position: relative;
  width: 100px;
  height: 70px;
  background-color: blue;
  flex: 0 1 30%;
}

.box_title {
  flex: 0 1 70%;
  padding-left: 10px;
  font-size: 0.5rem;
}

꿀팁~

1.sticky vs fixed

stick는 relative처럼 자기의 원래자리에서 고정된다면, fixed는 viweport를 기준점으로 잡는다는것이다. 그리고 stick는 반드시 top left 같은 지정값이 있어줘야하며 스크롤이 될떄까지는 relative와 같은 역할을 한다.

2.CSS의 변수선언

자주 사용하는 padding이나 , 색상 , 폰트사이즈 들은 변수로 만들어 사용한다.

:root {
  --white-color: #fff;
  --black-color: #140a00;
  --blue-color: #045fd4;
  --red-color: #ff0000;
  --grey-dark-color: #909090;
  --grey-light-color: #e0e0e0;
  /* Size */
  --side-padding: 12px;
  --avatar-size: 36px;

  /* Font Size */
  --font-large: 18px;
  --font-medium: 14px;
  --font-small: 12px;
  --font-micro: 10px;
}

3.콘텐츠를 지정한 줄수만큼 정해주는방법

블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다. (2줄이 넘어가면 …표시도 알아서 되네)

.info .metadata .titleAndButton .title {
  font-size: var(--font-medium);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* -webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다. 
display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작합니다.
-webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 overflow 속성 또한 hidden으로 설정해야 합니다.
앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.*/

4.calc() 함수 —> 이것을 쓰면 계산이 가능하다.

.actions button i {
  margin-bottom: calc(var(--side-padding) / 2);

  /* 변수 --side-padiing이 16px이면 그것의 반은 8px이 들어가게끔 하기위해 calc을 썻다. */
}

5.속성의 overriding : 한 선택자에서 앞에 나온속성과 뒤에나온 속성이 겹칠경우 뒤에나온 속성으로 overriding 된다.

.actions button i {
  margin: 0 auto;
  margin-bottom: calc(var(--side-padding) / 2);
  /* 위에 margin 0 을 쓰면 margin-top:  과 margin-bottom: 이 0 아닌가? 
  노노 뒤에 나온 margin-bottom: 이 오버라이딩 하기 때문에 0이 아니게 된다.; */
}

Share on

Twitter Facebook LinkedIn

정요섭

6.HTML과CSS를 이용한 연습 여섯번째

1.유투브 반응형 웹사이트 만들기.

2.코드비교

꿀팁~

Share on

Leave a comment

You may also enjoy

외부IP, 내부IP 그리고 포트넘버

클래스형 컴포넌트 vs 함수형 컴포넌트

React Hook의 최적화

일반 웹의 동작방식 vs React의 동작방식 vs Next의 동작방식(중요)