동적 사이트 만들기
아직까지 제대로 된 동적 사이트를 만들어 본 적이 없어서, 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
Author And Source
이 문제에 관하여(동적 사이트 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nunbobae/동적-사이트-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)