사이트 만들기
지금까지 만든 사이트 조각들을 한 사이트에 모아서 제대로된 사이트 하나를 디자인 해보았습니다.
사이트를 합치면서 요소들의 속성들에 대해서 기본적인 세팅을 해주었고
미디어쿼리를 통해 반응형웹으로 디자인 하였습니다.
기본 CSS 세팅
/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, p, table, th, td, input,
figure, figcaption, blockquote {
margin: 0;
padding: 0;
}
/* 폰트 초기화 */
body, button, input, select, table, textarea {
font-family: 'NexonLv1Gothic', 'Malgun Gothic', '맑은 고딕', 'dotum', '돋움';
}
/* 링크 초기화 */
a {
text-decoration: none;
color: #000;
}
/* 목록 초기화 */
li, ol, ul {
list-style: none;
}
/* 제목 초기화 */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1rem;
}
/* 폰트 스타일 */
em, address {
font-style: normal;
}
/* 이미지 초기화 */
img {
width: 100%;
vertical-align: top;
}
/* 보더 초기화 */
img, fieldset, button {
border: 0;
}
/* 클리어픽스 */
.clearfix::before,
.clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
/* 블라인드 효과 */
.blind {
position: absolute;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
/* ir 효과 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* 간격설정 */
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* hide */
.hide {
display: none;
}
각 영역별 미디어쿼리
미디어쿼리는 @media 규칙을 사용하여, 특정 조건이 충족될 때 CSS를 적용하는 방식입니다.
이미지 영역
@media (max-width:960px){
.image__body .desc {
display: none;
}
}
@media (max-width:600px){
.image__inner {
flex-direction: column;
}
.image__inner .image {
width: 100%;
margin-bottom: 2%;
}
.image__body .title {
font-size: 22px;
margin-bottom: 10px;
}
.image__body .btn {
padding: 5px 20px;
font-size: 14px;
}
}위의 코드에서는 미디어쿼리를 사용하여 뷰포트의 크기가 960px 이하일 때와 600px 이하일 때 서로 다른 스타일을 적용하도록 설정하였습니다.
960px 이하일 때 .image__body 클래스의 하위 요소인 .desc 클래스의 display 속성을 none으로 변경하여 해당 요소를 숨기도록 설정하였습니다.
600px 이하일 때는 .image__inner 클래스의 flex-direction 속성을 column으로 변경하여 요소들을 세로로 배열하도록 설정하였으며, .image 클래스의 width 속성을 100%로 변경하여 이미지의 가로폭을 뷰포트에 맞추도록 설정하였습니다. .image__body 클래스의 .title 클래스와 .btn 클래스의 폰트 사이즈와 패딩 등의 속성도 변경하여 모바일 화면에서 더 적절한 스타일을 적용하도록 하였습니다.
이미지/텍스트 영역
@media (max-width: 960px){
.imgText__inner .text {
text-align: center;
}
.imgText__inner .text {
width: 100%;
}
.imgText__inner .img {
width: 49%;
}
.imgText__inner .text h3 {
font-size: 40px;
margin-bottom: 10px;
text-align: center;
}
.imgText__inner .text p {
font-size: 18px;
margin-bottom: 40px;
font-weight: 300;
text-align: center;
}
.imgText__inner .text ul {
display: none;
}
}
@media (max-width: 600px){
.imgText__inner .img {
width: 100%;
margin-bottom: 3%;
}
.imgText__inner .text h3 {
font-size: 30px;
text-align: center;
}
.imgText__inner .text p {
font-size: 16px;
text-align: center;
}
}960px 이하일 때는 .imgText__inner 클래스 내부에 있는 .text 클래스를 가진 요소들의 text-align 속성을 center로 변경하여 가운데 정렬을 하도록 하였습니다. 또한, .text 클래스 내부의 요소들의 width 속성을 100%로 설정하여 가로폭을 꽉 차게 하도록 하였습니다. .img 클래스를 가진 요소들의 width 속성을 49%로 설정하여 이미지와 텍스트가 옆으로 나란히 배치되도록 하였습니다. .text 클래스 내부의 h3 태그와 p 태그의 폰트 사이즈와 정렬을 변경하여 모바일 화면에서 더 적절한 스타일을 적용하도록 하였습니다. 또한, ul 태그를 가진 요소들의 display 속성을 none으로 변경하여 목록이 보이지 않도록 설정하였습니다.
600px 이하일 때는 .img 클래스를 가진 요소들의 width 속성을 100%로 변경하여 이미지의 가로폭을 뷰포트에 맞추도록 하였으며, margin-bottom 속성을 추가하여 이미지와 텍스트 사이의 간격을 조절하도록 하였습니다. .text 클래스 내부의 h3 태그와 p 태그의 폰트 사이즈와 정렬을 변경하여 모바일 화면에서 더 적절한 스타일을 적용하도록 하였습니다.
카드 영역
@media (max-width: 960px){
.card__inner .card {
width: 49%;
}
.card__inner .card:last-child {
display: none;
}
}
@media (max-width: 600px){
.card__inner {
flex-wrap: wrap;
}
.card__inner .card {
width: 100%;
margin-bottom: 3%;
}
.section__h2 {
text-align: center;
}
.section__desc {
text-align: center;
word-break: keep-all;
}
}960px 이하일 때는 .card__inner 클래스 내부에 있는 .card 클래스를 가진 요소들의 width 속성을 49%로 설정하여 가로폭을 줄이고, 마지막 카드는 last-child 선택자를 사용하여 display 속성을 none으로 변경하여 보이지 않도록 하였습니다.
600px 이하일 때는 .card__inner 클래스 내부의 요소들이 flex-wrap: wrap 속성을 갖도록 하여 요소들이 한 줄에 담기지 않고 여러 줄로 나누어지도록 하였습니다. .card 클래스를 가진 요소들의 width 속성을 100%로 변경하여 가로폭을 뷰포트에 맞추도록 하였으며, margin-bottom 속성을 추가하여 카드와 카드 사이의 간격을 조절하도록 하였습니다. section__h2 클래스와 section__desc 클래스 내부의 요소들의 정렬 방식을 변경하여 모바일 화면에서 더 적절한 스타일을 적용하도록 하였습니다.
word-break: keep-all;은 CSS 속성 중 하나로, 단어 단위로 줄 바꿈을 할 때, 단어를 분리하지 않고 라인 내에 그대로 표시하는 속성입니다. 기본적으로 텍스트가 너무 길어서 표시할 영역을 넘어갈 때 단어 단위로 줄바꿈을 하게 되는데, 이 때 word-break: keep-all;을 적용하면 단어의 일부가 다음 라인으로 넘어가지 않고, 한 라인 내에서도 더 길게 유지되도록 합니다.
배너 영역
@media (max-width: 960px){
.banner__inner h3 {
font-size: 40px;
}
}
@media (max-width: 600px){
.banner__inner h3 {
font-size: 30px;
}
.banner__inner p {
margin-bottom: 50px;
}
}960px 이하일 때는 .banner__inner 클래스 내부에 있는 h3 태그의 font-size 속성을 40px로 변경하여 글자 크기를 크게 조절하였습니다.
600px 이하일 때는 .banner__inner 클래스 내부에 있는 h3 태그의 font-size 속성을 30px로 변경하여 글자 크기를 더욱 작게 조절하였으며, margin-bottom 속성을 추가하여 제목과 부제 사이의 간격을 늘려주었습니다.
텍스트 영역
@media (max-width: 960px){
.text__inner .text {
width: 49%;
}
}
@media (max-width: 600px){
.text__inner .text {
width: 100%;
}
}960px 이하일 때는 .text__inner 클래스 내부에 있는 text 클래스의 width 속성을 49%로 변경하여, 화면 폭의 절반에 해당하는 크기로 조절하였습니다.
600px 이하일 때는 .text__inner 클래스 내부에 있는 text 클래스의 width 속성을 100%로 변경하여, 화면 폭 전체에 해당하는 크기로 레이아웃을 조절하였습니다. 이렇게 함으로써 모바일 기기에서도 텍스트가 화면에 꽉 차게 표시될 수 있도록 조정하였습니다.
푸터 영역
@media (max-width:960px){
.footer__menu {
flex-wrap: wrap;
}
.footer__menu > div {
width: 32.33333%;
margin-bottom: 6%;
text-align: center;
}
}
@media (max-width:600px){
.footer__menu > div {
width: 49%;
}
}
960px 이하일 때는 .footer__menu 클래스에 flex-wrap 속성을 wrap으로 지정하여, 아이템이 한 줄에 다 채워지지 않고 자동으로 줄바꿈되도록 조절하였습니다. 또한 .footer__menu > div 선택자를 사용하여, footer__menu 클래스의 직계 자식 요소인 div 요소에 스타일을 적용하였습니다. width 속성을 32.33333%로 지정하여, 3개의 아이템이 한 줄에 배치될 수 있도록 조절하였습니다. 각 아이템 사이에는 margin-bottom 속성을 사용하여 일정한 간격을 두었습니다. 마지막으로 text-align 속성을 사용하여 텍스트를 가운데 정렬하도록 지정하였습니다.
600px 이하일 때는 .footer__menu > div 선택자를 사용하여, width 속성을 49%로 변경하여 아이템이 한 줄에 두 개씩 배치되도록 조절하였습니다. 이렇게 함으로써 모바일 기기에서도 푸터 메뉴가 더욱 보기 좋게 표시될 수 있도록 조정하였습니다.