“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
사이트 만들기1
오늘은 사이트 만들기를 했던 각각의 영역들을 합쳐서 하나의 사이트로 만들어보는 작업에 대해
정리해보겠습니다.
💜커피 사이트 만들기
커피에 대한 사이트를 만들었습니다.
이미지타입, 이미지 텍스트타입, 카드타입, 베너타입, 텍스트타입, 푸터타입 이렇게
나눠서 작업을 해줬었는데요
이제 이걸 한 페이지에 다 나오게 합쳐보는 작업을 했습니다.
우선 사이트 폴더를 따로 만들어준다음,
assets, css, ico, img, js파일을 각각 만들어줍니다.
css폴더에 각각의 css폴더도 만들어줍니다.
index파일을 만들어 여기로 하나로 합쳐주는 작업을 할겁니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 만들기1</title>
<!-- SEO -->
<meta name="author" content="진현미">
<meta name="descripton" content="진현미와 함께 만드는 사이트 튜토리얼">
<meta name="keyword" content="진현미, 사이트 , 사이트 만들기, 튜토리얼">
<meta name="robots" content="all">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/cake.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/cake.png"/>
<link rel="apple-touch-icon" href="assets/ico/cake.png"/>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>우선 head에 파비콘과 css파일을 만들어 연결시켜줍니다.
style.css
@import url("header.css");
@import url("slider.css");
@import url("image.css");
@import url("imgText.css");
@import url("card.css");
@import url("banner.css");
@import url("text.css");
@import url("footer.css");style.css에 각각의 영역 css파일을 연결시켜줍니다.
fonts.css
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 300;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 400;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 700;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.ttf') format("truetype");
font-display: swap;
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}폰트 css에는 폰트에 관련된 css를 넣어줍니다.
reset.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', 'Malgum 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;
}
/* 클리어픽스 */
.clerfix::before,
.clerfix::after {
content: '';
display: block;
line-height: 0;
}
.clerfix::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;
}리셋파일에는 이렇게 자주쓰는 같은 css들을 정리해둡니다.
commit.css
/* skip */
#skip {
position: relative;
z-index: 1000000;
}
#skip a {
background-color: #000;
color:#fff;
position: absolute;
left: -400px;
top: 0;
padding: 20px 40px;
}
#skip a:active,
#skip a:focus {
left: 0;
}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.1); */
}
/* bg */
.gray {
background-color: #f5f5f5;
}
/* section */
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-style: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* 미디어 쿼리 */
@media (max-width: 1200px){
.container {
width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 960px){
.section {
padding: 100px 0;
}
.section__h2 {
font-size: 40px;
margin-bottom: 10px;
}
.section__desc {
font-size: 18px;
margin-bottom: 40px;
}
}
@media (max-width: 600px){
.section {
padding: 80px 0;
}
.section__h2 {
font-size: 30px;
}
.section__desc {
font-size: 16px;
}
}common.css도 작업해줍니다.
미디어 쿼리도 넣어줬습니다.
body
<body>
<div id="skip">
<a href="#">헤더 영역 바로가기</a>
<a href="#">슬라이드 영역 바로가기</a>
<a href="#">이미지 영역 바로가기</a>
<a href="#">이미지/텍스트 영역 바로가기</a>
<a href="#">카드 영역 바로가기</a>
<a href="#">베너 영역 바로가기</a>
<a href="#">텍스트 영역 바로가기</a>
<a href="#">푸터 영역 바로가기</a>
</div>
<!-- //skip -->
<header id="headerType" style="display: none">
<h1 class="blind">사이트 로고</h1>
</header>
<!-- headerType -->
<main id="mainType">
<section id="sliderType" class="nexon hide">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">event</span>
<h3 class="title">커피와 함께하는 사이트</h3>
<p class="desc">커피에 관심 있는 사람들이 모여 정보를 공유하고 소통할 수 있는 커뮤니티 사이트입니다. 커피 추천, 맛집 추천, 추출 방법 등의 정보를 얻을 수 있습니다.</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">상담 신청</a>
</div>
</div>
<div class="silder__arrow">
<a href="#"><span class="blind">이전 이미지</span></a>
<a href="#"><span class="blind">다음 이미지</span></a>
</div>
<div class="silder__dot">
<a href="#" class="dot active"><span class="blind">첫번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">두번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">세번째 이미지</span></a>
<a href="#" class="play"><span class="blind">플레이</span></a>
<a href="#" class="stop"><span class="blind">정지</span></a>
</div>
</div>
<!-- <div class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
<!-- //sliderType -->
<section id="imageType" class="nexon section center">
<h2 class="blind">이미지 영역</h2>
<h2 class="section__h2">맛있는 커피를 찾아서</h2>
<p class="section__desc">여러 카페들을 가본 후 보기에도 예쁘고 맛있는 찐 커피맛집들을 찾아서</p>
<div class="image__inner container">
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_01.jpg" alt="커피란 무엇인가">
</figure>
<div class="image__body">
<h3 class="title">커피란 무엇인가</h3>
<p class="desc">일반적으로 커피 열매의 씨앗인 커피 콩, 혹은 그 씨앗을 로스팅해 갈아서 물에 우려내서 만드는 음료</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_02.jpg" alt="커피의 종류">
</figure>
<div class="image__body">
<h3 class="title">커피의 종류</h3>
<p class="desc">커피의 품종은 크게 3가지로 구별 아바리카, 로부스타, 리베리카</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</section>
<!-- //imageType -->
<section id="img-textType" class="nexon section gray">
<h2 class="blind">이미지/텍스트 영역</h2>
<div class="imgText__inner container">
<article class="text">
<span>NOTICE</span>
<h3>요즘 인기있는 커피 종류</h3>
<p>카페인테리어는 카페 내부의 디자인과 인테리어를 의미합니다.</p>
<ul>
<li><a href="#">에스프레소(Espresso)</a></li>
<li><a href="#">라떼 마키아또 (Latte Macchiato)</a></li>
<li><a href="#">롱 에스프레소 (Long Espresso)</a></li>
<li><a href="#">더치커피 (Dutch coffee)</a></li>
<li><a href="#">콜드브루 (Cold Brew)</a></li>
<li><a href="#">드립커피 (Drip Coffee)</a></li>
<li><a href="#">플랫화이트 (Flat White)</a></li>
<li><a href="#">라떼 마키아또 (Latte Macchiato)</a></li>
<li><a href="#">모카 (Mocha)</a></li>
<li><a href="#">바닐라 라떼 (Vanilla Latte)</a></li>
<li><a href="#">레몬 에스프레소 (Lemon Espresso)</a></li>
</ul>
</article>
<article class="img i1">
<a href="#">드립커피</a>
</article>
<article class="img i2">
<a href="#">에스프레소</a>
</article>
</div>
</section>
<!-- //img-textType -->
<section id="cardType" class="section nexon">
<h2 class="blind">카드 영역</h2>
<div class="container">
<h2 class="section__h2">커피에 대해 알아보자</h2>
<p class="section__desc">커피는 카페인이 포함된 차류 음료입니다. 커피는 주로 커피 콩에서 추출되며, 세계 각국에서 재배되고 있습니다. 일반적으로 커피는 커피빈, 원두, 분쇄된 커피 등 다양한 형태로 판매됩니다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="assets/img/cardType01_01.jpg" alt="커피의 좋은점">
</figure>
<div class="card__body">
<h3 class="title">커피의 좋은점</h3>
<p class="desc">커피는 일부 연구에서 많은 건강상의 이점이 있다는 것으로 나타났습니다. 커피는 당뇨병, 간암, 알츠하이머병 등의 발병 위험을 줄이는 데 도움이 될 수 있다는 것으로 알려져 있습니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/cardType01_02.jpg" alt="커피의 안좋은점">
</figure>
<div class="card__body">
<h3 class="title">커피의 안좋은점</h3>
<p class="desc">과도한 카페인 섭취는 심장 및 불면증 등의 건강상의 문제를 유발할 수 있으므로 적절한 양을 유지하는 것이 중요, 개인의 건강 상태 및 개인의 카페인 허용 한계를 고려하여 섭취해야 합니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<div class="card">
<figure class="card__header">
<img src="assets/img/cardType01_03.jpg" alt="커피의 좋은점">
</figure>
<div class="card__body">
<h3 class="title">커피의 재배</h3>
<p class="desc">에티오피아, 콜롬비아, 브라질, 인도네시아 등 세계 각국에서 재배되고 있습니다. 커피의 품질은 재배 지역, 고도, 일조량, 재배 방법 등 다양한 요인에 따라 결정됩니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</div>
</div>
</div>
</section>
<!-- //cardType -->
<section id="bannerType" class="nexon section">
<h2 class="blind">베너 영역</h2>
<div class="banner__inner">
<div class="banner">
<div class="banner__info section nexon center">
<h3>맛있는 커피와 함께 휴식</h3>
<p>맛있는 커피 한잔과 함께하는 시간은 최고의 휴식입니다.<br>
밥 먹고 난 후의 커피 한잔으로 여유를 찾아보세요.</p>
<daaress class="right"><a href="#">제일 좋았던 카페를 공유해주세요.</a></daaress>
</div>
</div>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="nexon section center">
<h2 class="blind">텍스트 영역</h2>
<span class="section__small">notice</span>
<h2 class="section__h2 mb70">커피 맛집 찾기</h2>
<div class="text__inner container">
<div class="text t1">
<h3 class="text__title">요즘 유행하는 커피</h3>
<p class="text__desc">콜드 브루 커피, 네이트로 커피, 핸드 드립 커피, 라떼 아트, 샷 브루 커피, 캡슐 커피 등 여러가지 커피가 있습니다. 요즘은 달달한 크림이 올라간 커피도 유행이고 쓴 에스프레소도 유행입니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">커피 맛있는 카페</h3>
<p class="text__desc">네이버 블로그나 인스타그램, 근처 카페 찾기 등과같은 검색 기능으로 카페를 찾을 수 있습니다. 전문적인 로스팅카페를 원한다면 로스팅하는카페를 검색해보면됩니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">1일 2카페</h3>
<p class="text__desc">맛있고 예쁜 카페를 하나 가면 근처에 또 좋은 카페 없나 둘러보게 됩니다. 그렇게 1일 2카페를 가서 둘다 성공하면 그날은 기분 UP! 바로 블로그나 인스타 포스팅을 해야겠죠?</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">분위기 좋은 카페</h3>
<p class="text__desc">카페를 갈때는 맛도 중요하지만 분위기도 많이 봅니다. 인테리어가 예쁜 카페는 일단 들어가보곤하는데요. 이런 예쁜 카페들이 맛도 좋은면 더 좋겠죠?</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">디저트 맛있는 카페</h3>
<p class="text__desc">요즘은 베이커리 카페가 정말 많아졌습니다. 커피도 커피지만 같이 먹을 디저트까지 맛있다면 정말 좋겠죠? 디저트 맛집이 있다면 알려줘~ 좋은 곳은 다같이 공유하자구요!~</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">편안한 카페</h3>
<p class="text__desc">카페를 놀러갈때 가기도 하지만 공부하러 가거나 작업하러 갈때는 편안하고 시끄럽지 않은 카페를 찾게됩니다. 이런 편안한 카페들도 따로 알아두면 좋겠죠?</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</section>
<!-- //textType -->
</main>
<!-- mainType -->
<footer id="footerType" class="nexon section gray center">
<h2 class="blind">푸터 영역</h2>
<div class="footer__inner container">
<div class="footer__menu">
<div>
<h3>모아보기</h3>
<ul>
<li><a href="#">전체글</a></li>
<li><a href="#">주간 best</a></li>
</ul>
</div>
<div>
<h3>커피 업체 정보</h3>
<ul>
<li><a href="#">원두납품 정보</a></li>
<li><a href="#">커피교육 정보</a></li>
<li><a href="#">커피 아카데미</a></li>
<li><a href="#">업체 이벤트 & 행사</a></li>
<li><a href="#">스페셜티 카페</a></li>
<li><a href="#">스페셜티 로스터</a></li>
<li><a href="#">커피관련 브랜드</a></li>
</ul>
</div>
<div>
<h3>매거진</h3>
<ul>
<li><a href="#">커피뉴스</a></li>
<li><a href="#">카페 투어</a></li>
<li><a href="#">컨텐츠 제보</a></li>
<li><a href="#">푸드&음료</a></li>
<li><a href="#">커피 라이브러리</a></li>
</ul>
</div>
<div>
<h3>중고마켓</h3>
<ul>
<li><a href="#">전체</a></li>
<li><a href="#">장비</a></li>
<li><a href="#">매장</a></li>
<li><a href="#">커피용품</a></li>
<li><a href="#">기타</a></li>
</ul>
</div>
<div>
<h3>SNS</h3>
<ul>
<li><a href="#">facebook</a></li>
<li><a href="#">instagram</a></li>
</ul>
</div>
<div>
<h3>공지사항</h3>
<ul>
<li><a href="#">이용문의</a></li>
<li><a href="#">쇼핑몰</a></li>
<li><a href="#">사이버몰 이용약관</a></li>
<li><a href="#">광고 상품 안내</a></li>
</ul>
</div>
</div>
<div>
<address class="footer_right">
2023 JINHYUNMI 커피 관련 사이트<br>Portfolio is Power All Rights Reserved
</address>
</div>
</div>
</footer>
<!-- footerType -->
</body>
</html>이제 바디 영역에서 각각만든 사이트를 병합해주는 작업을 합니다.
일단 section으로 영역을 설정해주고
그 영역에 맞는 코드들을 가져와 넣어줍니다.
style.css에 넣어줬던 각 영역의 css에 맞게 또 작업해줍니다.
card.css
/* card__type */
.card__wrap {
}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner .card {
width: 32.3333%;
background-color: #f8f8f8;
}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 15px;
}
.card__body .desc {
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
.card__body .btn {
padding-right: 40px;
background-image: url("data:image/svg+xml, %3Csvg width='32' height='8' viewBox='0 0 32 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5C0.723858 3.5 0.5 3.72386 0.5 4C0.5 4.27614 0.723858 4.5 1 4.5V3.5ZM31.3536 4.35355C31.5488 4.15829 31.5488 3.84171 31.3536 3.64645L28.1716 0.464466C27.9763 0.269204 27.6597 0.269204 27.4645 0.464466C27.2692 0.659728 27.2692 0.976311 27.4645 1.17157L30.2929 4L27.4645 6.82843C27.2692 7.02369 27.2692 7.34027 27.4645 7.53553C27.6597 7.7308 27.9763 7.7308 28.1716 7.53553L31.3536 4.35355ZM1 4.5H31V3.5H1V4.5Z' fill='black'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
@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;
}
}image.css
/* image__type */
.image__inner {
display: flex;
justify-content: space-between;
}
.image__inner .image {
width: 49%;
background-color: #ccc;
position: relative;
}
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image__body .btn {
color: #fff;
background-color: rgba(0,0,0,0.5);
padding: 10px 30px;
display: inline-block;
}
/* 미디어쿼리 */
@media (max-width: 960px){
.image__inner .desc {
display: none;
}
}
@media (max-width: 600px){
.image__inner {
flex-direction: column;
}
.image__inner .image {
width: 100%;
margin-bottom:3%;
}
.image__body title {
font-size: 22px;
margin-bottom: 10px;
}
.image__body .btn {
padding: 10px 20px;
font-size: 14px;
}
}다른 css들은 여기서 확인 할 수 있습니다! ✨
사이트 만들기 카드타입(cardType) 정리
사이트 만들기 카드타입(cardType) 정리 오늘은 수업시간에 해본 사이트 만들기 중 카트타입 정리를 해보려고 합니다. 우선 만들어본 사이트의 완성본입니다. 💜 카드 유형 코드 보기 / 완성 화면
mi-1119.tistory.com
사이트 만들기 이미지 유형
사이트 만들기 이미지 유형 오늘은 사이트 만들기 중에 이미지 유형에 대해 정리해보려고 합니다! 💜 이미지 유형 코드 보기 / 완성 화면 완성 화면입니다. 디자인은 피그마에서 작업해주었습
mi-1119.tistory.com
사이트 만들기 텍스트 유형
사이트 만들기 텍스트 유형 오늘은 사이트 만들기의 텍스트 유형을 정리해보겠습니다. 💜 텍스트 유형 코드 보기 완성 화면 피그마를 사용해 디자인 작업을 해주고 코딩으로 넘어갑니다. notice
mi-1119.tistory.com
사이트 만들기 푸터 유형
사이트 만들기 푸터 유형 코드 보기 완성 화면 사이트 만들기의 푸터 영역을 정리해보겠습니다. 피그마를 이용해 디자인 작업을 먼저 해주고 코딩으로 들어가겠습니다. 푸터 모아보기 전체글
mi-1119.tistory.com
카드타입 css는 카드css에
이미지타입 css는 이미지css에 넣어줍니다.
이미지는 사이트1에 있는 폴더를 가져와야 하므로
경로를 재설정해줍니다.
*사이트1 img폴더에 원래경로에 있던 파일들을 옮겨줍니다.
각각 css에서 @medai 미디어쿼리도 맞게 작업해줍니다.
🍰 flex-direction: column;
레이아웃을 사용하는 경우에 쓰고,
컨테이너 내부의 아이템들의 배치 방향이 아닌 세로 방향으로 아이템들이 배치됩니다.
🍰 justify-content: space-between;
레이아웃을 사용하는 경우에 쓰고,
컨테이너 내부의 아이템들을 주축을 따라 동일한 간격을 유지하면서 정렬됩니다.
🍰 position: absolute;
요소의 위치를 상대적으로 설정하는 것이 아니라, 문서의 초기 위치를 기준으로 정확한 위치를 설정하는데 사용합니다.
다른 요소들과 겹칠 수 있기 때문에, 주로 다른 요소들과 떨어져 있는 위치에 배치할 때 사용합니다.
🍰 style=display:none;
해당 요소를 화면에서 보이지 않도록 숨길 수 있습니다.
div 요소에 넣을 수 있습니다.
반응형