← 강의 목록

웹디자인기능사 ( 2026년 작성 )

6편 - 22번 기능대학교 2편(完)

바로 다음으로 넘어가서 CSS 코드를 작성해 보도록 하겠습니다.

/* 기본 초기화를 위한 값입니다.  */
/* 전체 적용은 너무 과하게 하면 생각지도 못한 곳에서 버그가 생길 위험이 있으니 간략하게 하고, */
/* 각 태그를 지정해서 세부사항을 조정해 주겠습니다. */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 이미지는 비율에 맞춰 설정된 너비*높이 값을 채우기 위해 cover로 설정해 줍니다 */
img{
    object-fit: cover;
}

/* a 링크에는 기본적으로 밑줄과 파란색/보라색 글자색이 적용되어 있으니 밑줄을 제거하고 글자색을 가이드에 맞게 수정해둡니다. */
a{
    text-decoration: none;
    color: #333;
}

/* 바디 안쪽의 이미지슬라이드 부분이 화면 100%로 제시되어 있으니 바티도 width:100%를 주고 안쪽 컨텐츠에 1340px 로 너비를 따로 설정해줍니다. */
/* 또한 1340px인 컨텐츠들이 가운데 정렬이니 align-items:center로 정렬해줍니다. */
html,body{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 헤더는 메뉴가 영역을 넘어서 존재하므로 기준점을 위해 relative로 설정하고, 로고와 메뉴를 양 끝으로 보내기 위해 space-between을 사용해줍니다. */
.header{
    width: 1340px;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: #1b3b86;
}

/* 로고를 가운데 정렬하기 위해 감싸준 태그입니다. */
.logo{
    width: 190px;
    height: 100%;
    display: flex;
    align-items: center;
}

.logo>img{
    width: 190px;
    height: 45px;
}

/* 메뉴 항목 높이가 50px이고, 헤더를 100px로 설정했으므로 하단 고정을 위해 top:50px을 설정해줍니다. */
/* 메뉴 아래의 서브메뉴로 인해 높이가 계속 달라질 예정이니 height 값은 지정하지 않습니다. */
.nav{
    position: absolute;
    top: 50px;
    right: 0;
    width: 600px;
    display: flex;
}

/* 마찬가지로 높이는 지정하지 않으며, 이미지슬라이드 위에 메뉴를 보여주기 위해 z-index를 이미지슬라이드보다 높게 설정합니다. */
.menu{
    width: 150px;
    z-index: 999;
}

/* flex 를 이용해 메뉴 글씨들을 중앙 정렬해줍니다. */
/* 메뉴 항목들의 배경색을 어둡게 설정할 예정이므로 글자를 밝은 색으로 설정합니다. */
.menu a{
    display: inline-flex;
    width: 150px;
    height: 50px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #eee;
}

/* 메뉴마다 기본적으로 반투명 어두운 배경을 설정하고, 그중에 현재 호버중인 메뉴는 따로 추가해줘서 좀더 어둡게 만들어 줍니다. */
.menu a:hover,
.menu:hover{
    background-color: rgba(0, 0, 50, 0.5);
}

/* slideLink를 absolute로 설정할 예정이므로 부모 요소인 main에 기준점으로 relative를 설정합니다. */
.main{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 슬라이드 이미지를 absolute로 겹치기 위해 기준점을 잡아줍니다. */
.slide{
    width: 100%;
    height: 350px;
    position: relative;
    z-index: 99;
}

/* width:100%로 너비를 전체로 잡아줍니다. */
.slide>a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 350px;
}

/* 이미지는 a에 꽉 채워줍니다. */
.slide>a>img{
    width: 100%;
    height: 100%;
}

/* 슬라이드 링크의 높이를 임의로 100px로 설정했습니다. */
/* 이미지슬라이드가 350px이니 높이를 포함해서 350px을 맞추기 위해 top:250px로 간격을 설정해줍니다. */
/* 부모 요소에서 가운데 정렬이 되어있으니 left 값은 쓰지 않습니다. */
/* 이미지슬라이드 위에 보이기 위해 z-index를 이용해 위로 끌어올립니다. */
.slideLink{
    width: 1340px;
    height: 100px;
    position: absolute;
    top: 250px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

/* 크기는 화면에서 이상해 보이지 않을 정도로만 적당히 설정해 주시면 됩니다. */
.slideLink>a{
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
}
.slideLink>a>img{
    width: 80px;
    height: 60px;
}

/* 너비를 고정해 주기 위해 inline-block 값을 넣었습니다. */
.slideLink>a>span{
    display: inline-block;
    width: 120px;
    padding: 0 10px;
    color: #eee;
}

/* 배너는 계층을 주기 위해 메인 컬러에서 조금더 밝게 설정합니다 */
/* space-between을 사용했기 때문에 양쪽 벽에 어색하게 딱 붙지 않을 정도로 padding을 이용해 양쪽에 여백을 줍니다. */
.banner{
    width: 1340px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 20px;
    background-color: #c6d7ff;
}

.banner>img{
    width: 160px;
    height: 120px;
}
.bannerText{
    width: 1000px;
}
.bannerText>span:first-child{
    font-size: 20px;
}
/* text-align:end 를 이용해 글자를 오른쪽 정렬해줍니다. */
.bracket{
    width: 100px;
    font-size: 60px;
    text-align: end;
}

/* 컨텐츠 본문 영역은 메인 컬러 결에 맞게 약간 파란색이 섞인 흰색으로 설정했습니다. */
.contents{
    width: 1340px;
    height: 200px;
    display: flex;
    background-color: #eff4ff;
}

/* 역시 안쪽 여백으로 약간 띄워 어색하지 않게 만들어줍니다.*/
.contents>div{
    width: 100%;
    height: 100%;
    padding: 10px 20px;
}

/* 공지사항/갤러리 글자는 약간 키우고, 두께를 높여 계층 구조를 줍니다. */
.contents>div>span{
    font-size: 28px;
    font-weight: 600;
}

/* 위쪽에 span 영역의 높이가 있으므로 calc를 이용해 높이를 조금 줄여서 계산합니다. */
.notice-contents{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    padding: 0 20px;
    height: calc(100% - 30px );
}

/* 공지사항 글을 구분하기 위해 밑줄을 추가해줍니다. */
/* 글과 작성일자를 구분하기 위해 space-between으로 떨어트려 줍니다. */
.notice-contents>a{
    border-bottom: 1px solid rgb(200, 200, 200);
    display: flex;
    justify-content: space-between;
}

.gallery-contents{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.gallery-contents>a{
    display: flex;
    flex-direction: column;

    /* 영상에서는 작성했으나, 실제로 없었어도 무방한 코드입니다. */
    /* justify-content: end; */
    
    align-items: center;
}
.gallery-contents>a>img{
    width: 180px;
    height: 120px;
}
.gallery-contents>a>span{
    font-size: 12px;
}
.footer{
    width: 1340px;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(170, 170, 170);

    /* 푸터 오른쪽의 구분선이 끝까지 이어지지 않으므로 padding: 0 0 0 20px 로 왼쪽에만 간격을 주는 것이 조금 더 좋은 선택입니다. */
    padding:  0 20px;
}
.footer>span{
    width: 80%;
}

/* 왼쪽에 구분선을 추가해 영역을 구분해 줍니다 */
.footerRight{
    width: 20%;
    height: 100%;
    border-left: 1px solid rgb(200, 200, 200);
}

/* sns와 family 영역을 구분하기 위해 하단에 구분선을 넣어줍니다. */
.sns{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-evenly;

    /* 예시 이미지로 사용한 png 파일이 아래쪽에 여백이 더 많은 이미지여서 아래로 정렬했습니다. */
    /* 실제 시험에서는 정사각형 형태로 제공될테니 end 대신 center를 사용하면 됩니다. */
    align-items: end;

    border-bottom: 1px solid rgb(200, 200, 200);
}

/* 크기의 절반을 반경으로 주어 원형으로 만들어 줍니다. */
.sns>a>img{
    width: 48px;
    height: 48px;
    border-radius: 24px;
}

.family{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 팝업은 기본적으로 보이지 않게 display:none으로 설정해놓습니다. */
/* 중간 정렬을 위해 50%에서 각각 너비의 절반과 높이의 절반을 빼서 계산해 주도록 합니다. */
.popUp{
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 600px;
    height: 450px;
    background-color: #ffffff;
    padding: 20px;
    position: absolute;
    top: calc(50% - 225px);
    left: calc(50% - 300px);
    z-index: 99999;
}
.popUp>.text{
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 팝업 타이틀에 계층 구조를 위해 폰트를 키우고 두껍게 설정해줍니다. */
.popUp>.text>span:first-child{
    font-size: 32px;
    font-weight: 600;
}
.popUp>button{
    width: 100%;
    height: 10%;
    background-color: #888;
    color: #eee;

    /* 조금더 깔끔한 버튼 디자인을 위해 기본 적용되어있는 외곽선을 제거해 주는 것도 좋습니다. */
    border: none;
}

이렇게 CSS 코드가 완성되면 사이트가 거의 완성되었다는 느낌을 받으실 겁니다.

실제로 여기에 동작만 추가하면 문제 풀이가 완료됩니다.

jQuery 코드는 문법만 제대로 익히고 나면 분량 자체는 많지 않으니 빠르게 작성하고 완료하도록 하겠습니다.


// 페이지가 렌더링 되면 실행
$(document).ready(function(){

    // 기본값으로 서브메뉴를 말아올려놓고 시작
    $(".menuSub").stop().slideUp(0);

    // 호버( 함수1, 함수2)로 영역에 들어오면 함수1, 나가면 함수2를 실행
    $('.menu').hover(

        // 영역에 들어오면 0.3초동안 스르륵 서브메뉴를 내려줍니다
        function(){$(this).children('.menuSub').stop().slideDown(300)},

        // 영역에 나가면 0.3초동안 스르륵 서브메뉴를 올려줍니다
        function(){$(this).children('.menuSub').stop().slideUp(300)},
    );

    // setinterval(함수,시간) 으로 3초마다 이미지를 계속 바꿉니다.
    setInterval(() => {

        // 첫번째 이미지를 제외한 다른 이미지들을 사라지게 만들어 줍니다. 
        $('.slide>a:first-child').siblings().fadeOut(300);

        // 첫번째 이미지를 0.3초동안 사라지게 만든 이후에 사라진 이미지를 슬라이드 맨 뒤에 잘라서 붙여넣습니다.
        $('.slide>a:first-child').fadeOut(300,function(){$(this).appendTo('.slide')});

        // 두번째 이미지를 0.3초동안 나타나게 만들어 줍니다.
        $('.slide>a:nth-child(2)').fadeIn(300);

    }, 3000);

    // 공지사항 첫번째 콘텐츠를 클릭하면 none으로 설정되어 있는 display 값을 flex로 바꿔 나타나게 합니다.
    $('.notice-contents>a:first-child').click(function(){
        $('.popUp').css('display','flex');
    })

    // 팝업 닫기 버튼을 누르면 flex로 바꾼 값을 다시 none으로 만들어 닫아줍니다.
    $('.popUp>button').click(function(){
        $('.popUp').css('display','none');
    })


});

이렇게 사이트가 완성되었습니다.

이제 실전에서는 여러분들의 감각에 맞게 세부적인 폰트 크기, 배경색, 강조색, 등등

디자인 포인트들을 조정 하시면 문제 풀이가 완료됩니다.

저같은 경우 영상을 보니 이번 예제 완성에 55분정도 걸렸는데,

실제 시험에서는 1시간 반정도로 초안 완성을 목표로 하시길 바랍니다.

그정도로 목표를 잡아야 30분을 로고 제작 및 이미지 크기 조정으로 여유롭게 두시고,

추후 세부 수정 및 검토 과정을 1시간으로 여유롭게 가져가실 수 있기 때문입니다.

그럼 저는 이만 다음 강좌에서 다른 예제를 풀이하는 시간을 가져 보도록 하겠습니다.