이제 2편에서 만든 html 코드를 CSS로 꾸며보도록 하겠습니다.

먼저 CSS의 태그 선택자부터 한번 짚고 넘어가겠습니다.

html, body,div ....         /* html의 기본 태그들을 선택하는 선택자.  */

.logo , .copyright  ....   /* html 태그의 class를 선택하는 선택자. 이걸 제일 많이 쓰게 됩니다. */

#example ...                /* html 태그의 ID를 선택하는 선택자. 웹디기 시험에서는 잘 쓰이지 않습니다. */

:hover, :focus              /* 다른 태그 뒤에 붙이며, 태그에 특정 동작을 할 때 작동합니다. */

다음으로 기본적으로 많이 쓰이는 CSS 속성들을 한번 정리하고 가겠습니다.

속성들을 다 아시는 분들은 건너뛰어도 무방합니다.

선택자 {
    width: 100%;              /* 좌우 넓이를 지정 */

    height: 100%;             /* 상하 높이를 지정 */  

    margin: 0;                /* 밖으로 띄울 여백을 설정 */

    padding: 0;               /* 안으로 띄울 여백을 설정 */

    color: white;           /* 글자의 색을 설정 */

    background-color: #eee; /* 배경색을 설정 */

    font-size: 1rem;          /* 글자의 크기를 설정 */

    font-weight: 500;         /* 글자의 두께를 설정 */

    position: relative;       /* 위치를 지정하는 방식 설정 */

    border: 1px solid black;/* 외곽선의 두께와 형태, 색을 설정 */

    display: flex;            /* 표시할 방식을 선택 */

    flex-direction: column;   /* display : flex 의 경우에 정렬 방향을 지정. row : 가로 , column : 세로 */

    justify-content: center;  /* display : flex 의 경우에 좌우 정렬 지정 */

    align-items: center;      /* display : flex 의 경우에 상하 정렬 지정 */

    filter: blur(2px);        /* 흐림 처리.  알아두면 언젠가 쓸데가 생김 */

    box-shadow: 0 0 10px 0 gray; /* 그림자 방향 강도 색 지정 */
}

그리고 자주 쓰일 코드들에 대해 먼저 설명하고 넘어가겠습니다.

display : flex ;
flex-direction :  " " ;
justify-content :  " " ; 
align-items : " " ;

이 코드 덩어리는 자주 등장하게 될 예정입니다. 정렬을 위해 쓰이며, 아래와 같은 값들로 내부 요소의 정렬을 위해 쓰입니다.

    /* 정렬 방향을 가로로 설정 */
    flex-direction: row;

    /* 정렬 방향을 세로로 설정 */
    flex-direction: column;

    /* 가로를 기준으로 좌우 정렬을 왼쪽으로 설정 */
    justify-content: baseline;

    /* 가로를 기준으로 좌우 정렬을 가운데로 설정 */
    justify-content: center;

    /* 가로를 기준으로 좌우 정렬을 오른쪽으로 설정 */
    justify-content: end;

    /* 가로를 기준으로 요소들의 좌우 여백을 동일하게 분배 */
    justify-content: space-around;

    /* 가로를 기준으로 요소들을 좌우 같은 간격으로 분배 */
    justify-content: space-evenly;

    /* 가로를 기준으로 요소들을 좌우 양 끝으로 분배 */
    justify-content: space-between;

    /* 가로를 기준으로 상하 정렬을 위로 설정 */
    align-items: start;

    /* 가로를 기준으로 상하 정렬을 가운데로 설정 */
    align-items: center;
    
    /* 가로를 기준으로 상하 정렬을 아래로 설정 */
    align-items: end;

이제 본격적으로 이전 강좌에서 만든 HTML 코드의 CSS를 작성해 보도록 합시다.

가장 먼저 해줘야 할건 CSS 파일을 index.html 파일에 연결시켜주는 작업입니다.

아래와 같이 html의 head 태그 안에 style.css 파일을 링크시켜주면 연동은 완료됩니다.

<head>
    <link rel="stylesheet" href="style.css">
</head>

다음으로 styles.css에서 코드를 작성해 보도록 합시다.

먼저 해야 할 작업은, 기본적으로 css에 지정되어있는 속성들을 초기화 시켜주는 작업입니다. 보통 reset css 라고 불리며, 저는 필요한 만큼만 초기화 해 두도록 하겠습니다.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    color: inherit;       /* inherit은 부모 요소의 속성을 물려받는다는 뜻입니다. */
    list-style: none;
    text-decoration: none;
}

' * ' 태그는 전체 선택을 의미합니다.

다음으로, 최상위 태그들부터 작성해서 큰 틀을 잡아줍니다.

html {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #ffffff;           /* 시험에서 제시된 기본 배경색 */
    color: #333333;                           /* 시험에서 제시된 기본 글자색 */
}

body {
    width: 1200px;                           /* 시험에서 제시된 와이어프레임 크기 */
    height: 700px;                           /* 시험에서 제시된 와이어프레임 크기 */
}

이처럼 가장 큰 틀을 잡아준 후, 위에서부터 차례대로 세부 요소들의 크기, 위치, 색 등을 조정해줍니다.

먼저 header 영역의 CSS 코드를 작성해보겠습니다.


header {
    display: flex;
    justify-content: space-between;     /* 로고와 메뉴를 좌우 양 끝으로 보내줍니다. */
    width: 100%;
    height: 100px;
    background-color: #04724D;        /* 원하는 색으로 설정하면 됩니다. */

    /* 헤더 내부에서 position:absolute 로 위치를 설정할 때 
    위치의 기준을 여기로 설정하기 위해 지정해 주는 속성입니다. */
    position: relative;

    z-index: 9999;                      /* 헤더를 가장 위로 올려줍니다.*/
}

/* 로고가 들어올 영역을 설정합니다 */
.logo { 
    display: flex;                      
    align-items: center;                
    width: 200px;
    height: 100%;
}

 /* 로고의 크기는 문제에서 제시된 바와 같이 200 × 40 크기로 지정합니다. */
.logo img {  
    width: 200px;
    height: 40px;
}

/* 메뉴의 너비를 잡아줍니다. 적당히 본인 기준에 맞게 정해주시면 됩니다. */
.menu {     
    width: 600px;

    /* 헤더가 100픽셀이고 아래에서 메뉴 버튼 높이를 50픽셀로 
    설정해서 헤더 아래에 정렬하기 위에 위쪽을 50픽셀 띄워줍니다. */
    margin-top: 50px;   

    /* 메인 컬러 ( 여기선 #04724D ) 가 짙은 색이므로 글자 색을 밝게 변경해줍니다. */
    color: #eee;
}

/* 메인메뉴의 버튼들을 좌우로 정렬해줍니다. */
.menu-main ul {     
    display: flex;
    justify-content: space-around;
}

/* 버튼이 4개씩 이므로 각각 150픽셀로 너비를 지정해주고, 버튼 안의 글자를 가운데 정렬해줍니다. */
.menu-main ul li,
.menu-sub ul li {  
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 버튼에 마우스를 올렸을 때 어떤 버튼에 올렸는지 알 수 있게 반투명한 검정색으로 보여줍니다.*/
nav ul li:hover {    
    background-color: rgba(0, 0, 0, 0.4);
}

.menu-sub {         /* 서브 메뉴의 틀을 설정하는 부분입니다*/
    display: flex;
    justify-content: space-around;
    width: 600px;
    position: absolute;                         /* 이미지슬라이드를 아래로 밀어내지 않고 위에 겹쳐 띄우기 위해 사용하는 속성입니다.*/
    right: 0;                                   /* position absolute와 함께 쓰입니다. 오른쪽을 기준으로 0픽셀 띄운다는 뜻입니다. */
    top: 100px;                                 /* 마찬가지로 absolute와 함께 쓰입니다. 위쪽을 기준으로 100픽셀 띄운다는 뜻입니다. */
    background-color: rgba(0, 0, 0, 0.5);     /* 이미지슬라이드 위에 글자만 뜨면 가독성이 좋지 않으니 반투명하게 검정색 배경을 넣었습니다.*/
}

이제 헤더의 로고, 네비게이션 바 디자인이 완료되었습니다.

다음으로 메인에서 이미지슬라이드가 위치할 영역의 CSS 코드를 작성하겠습니다.

main {
    width: 100%;
    height: 500px;
}

.slide {
    width: 100%;
    height: 300px;
    position: relative;     /* 헤더에서과 같이 absolute 속성을 쓰기 위한 사전 작업입니다.*/
    overflow: hidden;       /* 영역(1200 × 300) 을 넘어가는 이미지, 글 등 요소들을 보이지 않게 잘라냅니다. */
}

/* 이미지를 슬라이드해서 이동시킬 영역입니다. */
.slide-wrap {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

/* 슬라이드할 각 이미지 + 글 영역입니다. 글을 중앙정렬 하기 위해 center로 조정합니다. */
.slide-wrap > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;              /* 이미지슬라이드 영역이 300픽셀이므로 맞춰서 지정해줍니다. */
    position: relative;
}

.slide-wrap > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 이미지가 찌그러지지 않게 비율을 유지한 채 채우는 속성입니다.*/
}

.slide-wrap > a > span {
    position: absolute;         /* 글을 이미지 위에 띄우기 위해 속성을 지정합니다.*/
    font-size: 2rem;
    padding: 1rem 2rem;         /* 글자 주변에 안쪽 여백을 둬서 가독성을 높입니다.*/
    background-color: rgba(0, 100, 0, 0.5);
    color: #eee;
}

이제 메인 영역중 이미지슬라이드 부분의 사전 작업이 완료됐습니다.

다음으로 메인 영역의 컨텐츠 부분의 CSS를 작성하겠습니다.

.contents {
    display: flex;
    width: 100%;
    height: 200px;
}

.tab {
    width: 40%;
    height: 100%;
    display: flex;
    position: relative;
}

.banner, .direct {
    width: 30%;
    height: 100%;
}

.tab button {
    width: 100px;
    height: 40px;
    font-size: 1.25rem;
    cursor: pointer;        /* 마우스를 가져다 댈 때 포인터로 커서를 바꾸도록 설정합니다.*/
}

.tab button:hover{
    background-color: rgba(0, 100, 0, 0.5); 
}

/* 탭의 각 내용 영역들의 기본값입니다. */
.tab-notice-contents,
.tab-gallery-contents {
    display: none; 
    width: 100%;
    height: calc(100% - 40px);    /* 버튼 높이를 위에서 40픽셀로 설정했으므로 그만큼 내용 영역 높이를 눌여줍니다. */
    background-color: #ffffff;  /* 배경색을 넣지 않으면 공지와 갤러리 컨텐츠가 겹쳐 보입니다.*/
    position: absolute;           
    left: 0;
    top: 40px;                     /* 마찬가지로 버튼 높이만큼 위에서 띄워 줘야 합니다.*/
}

/* 클래스에 active가 붙은 컨텐츠만 보이게 설정해줍니다. */
.active .tab-notice-contents {display: flex;}
.active .tab-gallery-contents {display: flex;}


.tab-notice-contents {
    flex-direction: column;         /* 공지사항은 세로로 정렬해줍니다.*/
    justify-content: space-evenly;  
    padding: 0 1rem;                
}

.tab-notice-contents > li {
    width: 100%;
    border-bottom: 1px solid #aaa;      /* 각 공지사항을 구분하기 위해 밑줄을 추가해줍니다. */
    cursor: pointer;
}

.tab-gallery-contents {
    justify-content: space-evenly;      
    align-items: center;
}

.tab-gallery-contents > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 100px;
    overflow: hidden;       /* 갤러리 이미지도 영역 밖으로 넘치지 않게 설정해줍니다 */
}

.tab-gallery-contents > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 글자를 가운데 정렬하기 위한 속성들입니다. */
.banner > a,
.direct > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.banner > a > img,
.direct > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 역시 가독성을 위해 여백과 반투명 배경색을 주었습니다. */
.banner > a > span,
.direct > a > span {
    position: absolute;
    padding: 0.5rem 1rem;           
    background-color: rgba(0, 50, 0, 0.5);
    color: #eee;
    font-size: 2rem;
}

여기까지 따라오셨다면 여러분도 느끼시겠지만 웹디자인 개발 기능사 자격증에서

css는 기본적인 것들만 쓰이고, 대부분 비슷한 속성들을 조립하는 과정에 가깝습니다.

그러니 빠르게 바로 다음으로 넘어가 푸터와 팝업창 CSS 코드를 작성하고 마치겠습니다.

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100px;
    background-color: #555;
    color: #aaa;
    padding: 0 1rem;
}

footer > .logo {
    /* 문제에서 푸터의 로고는 무채색으로 변경하라고 지시하고 있으므로
    grayscale 필터를 이용해 변경해 줍니다. */
    filter: grayscale(1);      
}

.sns > a > img {
    display: inline-flex;       /* flex와 같은 속성을 쓸 수 있지만 인라인 속성을 가져 줄바꿈 없이 가로로 정렬됩니다. */
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;        /* 너비&높이의 절반 이상을 외곽 반경으로 설정하면 원을 만들 수 있습니다. */
}

.pop-up {
    display: none;              /*기본적으로 안보이게 설정해 둡니다.*/
    position: fixed;
    width: 600px;
    height: 450px;
    border-radius: 1rem;        /* 약간 둥근 사각형입니다.  1rem은 최상위 태그의 폰트의 크기입니다.*/
    background-color: #1a1a1a;

    /* ( 웹사이트 높이 절반 - 팝업 높이 절반 ) 을 계산해 줘야 정확한 중앙 정렬이 됩니다.*/
    top: calc(50% - 225px);     
    left: calc(50% - 300px);

    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    color: #eee;
    z-index: 99999;
}

/* :nth-child(숫자) 를 붙이면 요소들중 해당 숫자번째 요소만 선택됩니다. 
이 경우에는 팝업의 첫번째 span인 제목의 폰트 크기와 굵기를 늘리는 역할을 합니다. */
.pop-up > span:nth-child(1) {
    font-size: 1.5rem;
    font-weight: 600;
}


.pop-up > button {
    background-color: #333;
    padding: 0.5rem 0;
    border-radius: 1rem;
    cursor: pointer;
}

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

3편 - CSS로 사이트 디자인 다듬기