📝 오늘 한 것

1. scss practice

2. prototype / hashtable

📚 배운 것

prototype과 hashtable은 TIL 작성 x

1. scss practice

1) besthorrorscenes

https://besthorrorscenes.com/ 클론 코딩

(1) HTML 시맨틱 태그

• main은 header와 footer를 직접적으로 가질 수 없다.
  (main 안의 section은 header와 footer를 가질 수 있다.)

• main은 section이나 article을 가질 수 있지만, main을 가질 수 있는 건 body 뿐이다.

• section 안에 article을 배치할 수도 있고, article 안에 section을 배치할 수도 있다.

• article은 반드시 제목(h1~h6)을 가져야 한다.

(2) link 스타일 지정 순서

a:link, a:visited, a:hover, a:active 순서로 작성해야 한다. (LVHA)

(3) header

index.html

<header>
  <h1>BEST HORROR SCENES</h1>
  <div class="intro">
    <p class="site-explain__main">
      <!-- 중략 -->
    </p>
    <p class="site-explain__details">
      <!-- 중략 -->
    </p>
  </div>
  <nav>
    <ul>
      <li><a href="#">Newsletter</a></li>
      <li><a href="#">Suggest a Scene</a></li>
      <li><a href="#">YouTube</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">RSS</a></li>
      <li><a href="#">Letterboxd</a></li>
    </ul>
  </nav>
  <p class="site-explain__additional">
    <!-- 중략 -->
  </p>
</header>

styles.scss

@import "_header";

body {
  display: flex;
}

_variables.scss

/* 폰트 */
$font-size-h1: 70px;
$font-size-h2: 40px;
$font-size-medium: 25px;
$font-size-regular: 15px;
$font-size-small: 11px;

/* 색상 */
$color-red: rgb(226, 14, 14);
$color-dark-grey: rgb(29, 29, 29);
$color-grey: rgb(99, 99, 99);
$color-light-grey: rgb(231, 231, 231);

_mixins.scss

@mixin siteExplain($size) {
  color: $color-red;
  font-size: $size;
  padding-bottom: 30px;
}

@mixin link($light-color, $dark-color) {
  a,
  a:visited {
    color: $light-color;
    font-weight: bold;
    &:hover,
    &:active {
      color: $dark-color;
    }
  }
}

_header.scss

@import "_mixins";
@import "_variables";

header {
  background-color: $color-light-grey;
  padding: 60px 40px;

  h1 {
    @include siteExplain($font-size-h1);
    padding-bottom: 60px;
  }

  .intro {
    .site-explain__main {
      @include siteExplain($font-size-medium);
    }
    .site-explain__details {
      @include siteExplain($font-size-regular);
    }
  }

  nav {
    padding-bottom: 30px;
    li {
      display: inline;
      font-size: $font-size-regular;
      text-decoration: underline;
      @include link($color-grey, $color-dark-grey);
    }
  }

  .site-explain__additional {
    font-size: $font-size-small;
  }
}

@extend와 @mixin 중 어떤 것을 사용해야 할지 고민했다.

@mixin은 서로 관련 없는 코드의 중복을 피하기 위해 사용되는 반면,
@extend는 서로 관련 있는 코드들을 한 곳에 묶기 위해 사용된다.

✨ 내일 할 것

1. scss practice