동적 사이트 만들기

아직까지 제대로 된 동적 사이트를 만들어 본 적이 없어서, css 차원에서 페이지 크기에 따라 달라지는 웹사이트를 제작하려고 했다. 다시 쓰려면 검색해 볼 것 같은 부분만 가져왔다

em, vw, vh 등의 개념을 이해하지 못해서 일일히 수작업으로 맞추고, css도 class 하나하나에 적용하는게 아니라 전체를 재사용성 있게 작성하는 방법이 더 있을 것 같은데 구현에 급급했던 점이 아쉽다.

html{height: 100%;}
body{position: relative;width: 100%;height: 100%;}


//nav바가 content를 가려서, 내가 원하는 곳부터 content를 배치하려고 top, left, html height를 지정해 놨다.
.content{
  color: #53444F;
  font-family: 'NanumSquare';
  display:flex;
  flex-direction: column; 
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
}

/* write review, filter */
//리뷰 작성하기 칸과 정렬부분 사이에 크게 공백이 있었으면 좋겠어서 사용했다. flex-basis는 리뷰 작성하기 칸이 전체의
90%를 차지하도록 만들어 줌
.content-top > .write{
  flex-basis: 90%;
}

//정렬에 해당하는 select태그가 안예뻐서 수정하고자 했다. background속성을 넣어서 정렬 옆에 아래세모 이미지를 넣고자 했다.
-webkit-툴은 유용하게 select의 기본 설정을 적용하지 않도록 바꿔준다.
.content-top > .filter > select {
  width: 60px;
  padding: 0 .5em;
  border: none;
  background: url('/images/black-arrow.png');
  /* 위치가 static/css/images/로 잡힘. 수정해야함 */
  /* background: url('/images/black-arrow.png') no-repeat 95% 50%; */
  background-size: 20px;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  }

.content-top > .filterselect::-ms-expand {
  display: none;
  }

//이렇게 설정하면 유저의 프로필 이미지가 동그랗게 표시된다
.writers > .profileImg{
  border-radius: 70%;
  overflow: hidden;
  height: 40px;
  width: 40px;
  margin-right:2%;
}

//태그에 마우스를 가져다 댔을 경우  색깔이 변한다.
.summary-bottom > .like:hover{
  color:#F55C03;
}

//10번째 줄을 넘어가면 출력하지 않고 맨 마지막 줄 끝에 말줄임표를 넣는다.
글자 사이의 간격을 1.3으로 두고 높이를 약 10배줘서 10줄이 넘어가지 않게 했다.
-webkit-line-clamp는 10번째 줄 마지막 글자를 말줄임표로 바꿔준다.

.summary > .summary-cont{
  padding:5% 5% 0% 5%;
  line-height: 1.3;
  height:12.5em;
  overflow:hidden;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp : 10;
  -webkit-box-orient: vertical;

}


//정적 페이지를 생성하는 가장 쉬운 방법으로 미디어 쿼리를 이용했다. 최대 사이즈가 767을 넘지 않는다면 스마트폰 용으로
게시글이 한줄에 한개씩만 출력된다. 스마트폰, 타블릿, pc마다 권장되는 px사이즈가 있는 것 같다.
/* 스마트폰 */
@media(max-width:767px){
  .content-top{
    display: flex;
    margin-bottom: 20px;
    padding-left: 10%;
    font-size:15px;
  }

  .content-top > .write{
    flex-basis: 62%;
  }
}

/* 타블릿 */
@media(max-width:1023px) {
  .content-top{
    display: flex;
    margin-bottom: 20px;
    padding-left: 7%;
    font-size:15px;
  }
}

Viewport란?

<meta name="viewport" content="width=device-width,initial-scale=1">

html + tap으로 자동 html을 완성시킬 때 메타태그에 들어있는 viewport, 의미는 웹 페이지에서 사용자의 보이는 영역(visible area)를 말합니다. 따라서 이는 기기별로 달라지게 됩니다.

width = 뷰포트의 가로 크기 device-width라고 지정했으니, 기기의 스크린 너비에 맞추라는 뜻이 됩니다.
initial-scale = 페이지 처음 접속 시 보여질 배율 1로 정하면 CSS 픽셀과 화면에 보여질 픽셀이 1:1을 이룹니다. 달리 말해, 이 값이 1보다 작다면 페이지는 축소되어 보이고, 1보다 크다면 확대되어 보입니다
추가로 viewport의 user-scalable 속성으로 사용자가 축소/확대를 하지 못하도록 막을 수도 있습니다.

믹스인

미디어쿼리를 멋지게 쓰는 건 좋지만, 구문과 분기점을 항상 외우고 다닐 순 없죠.
그럴 땐 믹스인을 만들어 쓰면 좋습니다. 유지보수도 매우 편해져요!

미디어 쿼리를 관리하기 위한 scss 파일을 만들어 주세요.
분기점은 변수로 만들고, @content로 내용이 비워져있는 믹스인을 작성합니다.

// Break Point
$tablet: 768px;
$laptop: 1020px;
$desktop: 1400px;
 
// Mixins
@mixin tablet {
  @media (min-width: #{$tablet}) {
    @content;
  }
}
 
@mixin laptop {
  @media (min-width: #{$laptop}) {
    @content;
  }
}
 
@mixin desktop {
  @media (min-width: #{$desktop}) {
    @content;
  }
}
 
이제 @include로 불러와 사용합니다.


// SCSS
.logo {
  width: 20px;
 
  @include desktop {
    width: 40px;
  }
}
/* 컴파일된 CSS */
 
.logo {
  width: 20px;
}

@media (min-width: 1400px) {
  .logo {
    width: 40px;
  }
}
 

블로그가 굉장히 깔끔하고 친절하게 설명되어 있다. 참조해서 예시 보면서 공부하면 많이 도움이 될 것 같다.

참조 블로그
[반응형 웹 만들기] https://nykim.work/84