CSS 정리

css 정리

CSS 정리

.header {
  background-color: $red;
  margin-bottom: 50px;
  .header__wrapper {
    padding: 5px 0px;//위,오,아,왼 순인데, 두 개 있으므로, (위 아래):5 (왼,오):5 라는 뜻이다.
    width: 100%;
    margin: 0 auto;	//0은 위아래 여백이 없다는 뜻. auto 는 가로 중앙에 배치한다는 뜻 즉, 위아래 여백없이 가로 중앙에 배치된다는 말이다.
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); //3등분하는데 각각을 1fr(1fraction)
    align-items: center;
    .header__column {
      i { //youtube
        color: white;
        font-size: 40px;
      }
      &:nth-child(2) {
        width: 100%;
        justify-self: center;
      }
      &:last-child {
        justify-self: end;
      }
      ul {
        display: flex;
        color: white;
        font-weight: 600;
        text-transform: uppercase;
        li:not(:last-child) {
          margin-right: 15px;
        }
      }
      form {
        width: 100%;
        input {
          padding: 7px 10px;
          width: 100%;
          border-radius: 5px;
          font-size: 14px;
          color: $black;
          font-weight: 600;
          &::placeholder {
            font-weight: 300;
            color: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }
  }
}

header.header
  .header__wrapper
        .header__column
            a(href=routes.home)
                i.fab.fa-youtube
        .header__column
            form(action=routes.search, method="get")
                input(type="text", placeholder="Search by term...", name="term")
        .header__column
            ul
                if !user.isAuthenticated
                    li
                        a(href=routes.join) Join
                    li
                        a(href=routes.login) Log In
                else
                    li
                        a(href=`/videos${routes.upload}`) Upload
                    li
                        a(href=routes.userDetail(user.id)) Profile
                    li
                        a(href=routes.logout) Log Out

display:grid 정리

https://www.vobour.com/-%EB%94%94%EC%9E%90%EC%9D%B8-5%EB%B6%84-%EC%95%88%EC%97%90-css-grid-%EB%B0%B0%EC%9A%B0%EA%B8%B0

display속성

요소를 어떻게 보여줄지를 결정한다.

none : 보이지 않음.
block : 블록 박스 항상 다음 줄에 렌더링된다.(자동으로 다음줄로 넘어감.)
inline : 인라인 박스

block 과 달리 줄바꿈이 되지 않고, width 와 height를 지정할 수 없다.

word 같은 문서에서 글자나 문장에 효과를 주기위해 존재하는 단위라고 볼 수 있다.
inline-block : block 과 inline 의 중간 형태.

줄바꿈이 되지는 않지만, 크기를 지정할 수 있다.
flex : 레이아웃을 구성할 때 콘텐츠를 감싸는 부모요소에 이 속성을 지정한다.

flex-direction

플렉스 컨테이너 내의 아이템을 배치할 때, 사용할 주축 및 방향(정방향,역방향)을 지정합니다.

row
column

플렉스 컨테이너의 주축이 블록 축과 동일합니다.

flex-wrap

항목이 여러 행에 나열되도록 하려면, flex-wrap 속성의 값을 wrap 으로 지정합니다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치됩니다.

초기 설정인 flex-wrap 속성값을 nowrap 으로 지정하고,

미디어 쿼리 사용하기

미디어 쿼리는 단말기의 유형과, 어떤 특성이나 수치에 따라 웹사이트나 앱의 스타일을 수정할 때 유용하다.

미디어 쿼리는 대소문자를 구분하지 않는다.

Sass/SCSS 의 변수와 믹스인

+++

_variables.scss

// _variables.scss  -> 파일명 앞에 _를 붙여서 작성해야 파일단위로 분리되어 컴파일 되지 않는다.
// 이 파일은 변수만 따로 저장해놓을 파일이기에 별도의 CSS파일로 컴파일될 필요가 없다.
// breakpoints
$breakpoint-mobile: 335px;
$breakpoint-tablet: 758px;
$breakpoint-desktop: 1024px;

_mixin.scss

_mixin.scss

@import "./variables";

@mixin mobile {
  @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$breakpoint-desktop}) {
    @content;
  }
}

main.scss

@import "../../Styles/mixins";

@include mobile {
  .img-card {
    width: 100px;
  }
}

@include tablet {
  .img-card {
    width: 200px;
  }
}

@include desktop {
  .img-card {
    width: 300px;
  }
}