바로 다음으로 넘어가서 CSS 코드를 작성해 보도록 하겠습니다.
CSS 역시 추가로 알아야 하거나 중요한 포인트 들에만 주석을 첨부했습니다.
/* 기본 세팅 삼총사 */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
img{
object-fit: cover;
}
a{
text-decoration: none;
color: #333;
}
/* html과 body는 화면 전체로 잡고 세부사항은 .main과 .footer 안에 잡을 예정 */
html,body{
width: 100%;
height: 100%;
background-color: #ffffff;
}
/* 높이는 푸터 높이만큼 빼서 계산해줍니다. */
.main{
width: 100%;
height: calc(100% - 120px);
display: flex;
position: relative;
}
.nav{
width: 200px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
background-color: rgb(197, 139, 118);
}
/* 로고 이미지 영역 가운데로 정렬 */
.logo{
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
/* 가이드라인으로 제시된 로고 사이즈 */
.logo>a>img{
width: 190px;
height: 45px;
}
/* 서브메뉴를 옆으로 띄울 예정이므로 기준점 잡기 */
.menu{
position: relative;
}
/* 메인메뉴 옆으로 띄워야 하니 메뉴 폭인 200px 띄우기 */
.subMenu{
position: absolute;
top: 0;
left: 200px;
}
/* 각 메뉴 항목은 200px * 50px 로 설정, 안쪽 글자 중앙정렬 */
.menu a{
width: 200px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #eee;
font-size: 20px;
}
/* 메뉴 호버시 어두운 색으로 구분 */
.menu:hover>a,
.menu:hover>.subMenu,
.menu a:hover{
background-color: rgba(50, 0, 0, 0.7);
}
.contents{
width: 400px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.banner{
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
background-color: rgba(0, 0, 0, 0.2);
}
.banner>img{
width: 80px;
height: 60px;
}
.bannerText{
display: flex;
flex-direction: column;
padding:0 10px;
width: 300px;
}
.bannerText span:first-child{
font-size: 14px;
}
.bannerText span:last-child{
font-size: 12px;
}
.bracket{
display: flex;
align-items: center;
width: 20px;
height: 100%;
font-size: 40px;
}
.notice,.gallery{
display: flex;
flex-direction: column;
padding: 10px 20px;
}
.notice>span,
.gallery>span{
font-size: 20px;
font-weight: 600;
}
.noticeContents{
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
padding: 10px;
}
.noticeContents>a{
display: flex;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid rgb(200, 200, 200);
}
.galleryContents{
width: 100%;
height: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.galleryContents>a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.galleryContents>a>img{
width: 160px;
height: 120px;
}
.links{
width: 100%;
height: 150px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.links>a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80px;
}
.links>a>img{
width: 80px;
height: 60px;
}
/* relative로 기준점 잡기, overflow hidden으로 영역 밖으로 넘어가는 부분은 가리기 */
.imgSlide{
width: calc(100% - 600px);
height: 100%;
position: relative;
overflow: hidden;
}
/* 이미지 세개로 슬라이드 하므로 너비 300%로 잡기 */
.slideWrap{
display: flex;
width: 300%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* 각 이미지의 글을 가운데 겹쳐 띄우기 위해 여기도 기준점을 잡아줍니다. */
.slideWrap>a{
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.slideWrap>a>img{
width: 100%;
height: 100%;
}
/* 이미지에 글자가 묻히지 않게 안쪽에 여백을 두고 반투명 배경색으로 가독성 높이기 */
.slideWrap>a>span{
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
padding: 20px 40px;
font-size: 32px;
}
.footer{
width: 100%;
height: 120px;
display: flex;
align-items: center;
background-color: #aaa;
}
.footer>.logo{
filter: grayscale(1);
border-right: 1px solid rgb(200, 200, 200);
}
.footerContents{
width: 80%;
height: 100%;
}
.footerContents>div{
width: 100%;
height: 50%;
padding: 0 20px;
display: flex;
align-items: center;
}
.footerMenu{
display: flex;
gap: 20px;
border-bottom: 1px solid rgb(200, 200, 200);
}
.footerMenu>a{
padding-right: 20px;
border-right: 1px solid rgb(200, 200, 200);
}
.family{
width: 20%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-left: 1px solid rgb(200, 200, 200);
}
/* 높이&너비에 맞게 top/left 계산해주기 */
.popUp{
width: 600px;
height: 450px;
position: absolute;
top: calc(50% - 225px);
left: calc(50% - 300px);
background-color: white;
/* 기본값으로 안보이게 설정, jQuery로 flex를 줄 예정이니 flex 기준 direction/justify 값만 미리 세팅 */
display: none;
flex-direction: column;
justify-content: space-between;
/* 안쪽으로 padding을 줘야 예쁘게 나옴 */
padding: 20px;
}
.popUpText{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.popUpText>span:first-child{
font-size: 32px;
font-weight: 600;
margin-bottom: 20px;
}
.popUp>button{
border: none;
padding: 10px 0;
font-size: 24px;
}
마지막으로 jQuery를 작성해서 동작을 추가해줍니다.
// 코드 로딩이 완료되면 실행
// 이걸 까먹으면 다른 코드 진행 자체가 어려우니 꼭 숙지하시기 바랍니다.
$(document).ready(function(){
// 서브메뉴 0초동안 사라지게 만들기 ( 기본값 )
$('.subMenu').stop().fadeOut(0);
// 메뉴 호버시 실행, 여기서는 slideDown/slideUp을 사용하면 조금 통일감이 없고 산만한 느낌이라 페이드 효과를 사용했습니다.
$('.menu').hover(
function(){
$(this).children('.subMenu').stop().fadeIn(300);
},
function(){
$(this).children('.subMenu').stop().fadeOut(300);
}
);
// 첫번째 공지사항 클릭시 지워놨던 팝업 display flex로 다시 띄워주기
$('.noticeContents>a:first-child').click(function(){
$('.popUp').css('display','flex');
});
// 닫기버튼시 다시 none 값으로 지워주기
$('.popUp>button').click(function(){
$('.popUp').css('display','none');
});
// 3초마다 슬라이드
// 0.6초동안 슬라이드 왼쪽으로 100%만큼 이동
// 이동 후 왼쪽으로 사라진 이미지 다시 슬라이드 제일 오른쪽에 옮겨주기
// 오른쪽으로 옮기면 바뀐 이미지가 left 0 위치이므로 같이 바꿔줍니다.
setInterval(() => {
$('.slideWrap').animate({left:"-100%"},600,function(){
$('.slideWrap>a:first-child').appendTo('.slideWrap');
$('.slideWrap').css('left','0');
})
}, 3000);
});
이렇게 두번째 실습 예제로 선택된 20번 철길 마을도 완료되었습니다.
세로 배열과 가로 배열의 차이를 익히기에 좋은 예제로, 여기서 추가로 2 ~ 4 편에서 다룬
탭으로 갤러리/공지사항 스왑 기능 정도까지만 알고 계시면 어떤 예제가 나와도 무리없이 사이트 구성이 가능합니다.
다음 예제부터는 주석 없이 완성본 코드 & 사진 & 코드 풀버전 영상 셋만 올라갈 예정이니
먼저 코드를 작성해 보시고 막히는 부분이 있거나 완성하고 비교해 보는 용도로 이용하시기를 추천드립니다.
Deplux