css 리스트 제어 프로퍼티로 카페 메뉴 만들기

네 안녕하세요, 이번 포스팅에서는 리스트 제어 프로퍼티를 이용하여 직접 메뉴판을 만들어보도록 하겠습니다.

직접 해보지 않으면 몸이 받아들이는 속도가 다소 느릴 수 있기 때문에 직접 만드는 것을

보여드리고자 이 포스팅을 쓰게 되었습니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 메뉴 만들기 : ul태그 이용

제일 처음 할 일은 리스트를 만드는 것입니다.

그래서 해당 리스트는 ul 태그를 이용해서 만들도록 하겠습니다.

이런 식으로 만들어봤습니다.

<!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>리스트로 메뉴 만들기</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Espresso</a></li>
            <li><a href="#">Cappuccino</a></li>
            <li><a href="#">Cafe Latte</a></li>
            <li><a href="#">F.A.Q</a></li>
        </ul>
    </nav>
</body>
</html>

일단 html의 기본 뼈대를 만들었습니다.

이런 식으로 제작을 했으며,

이제 뼈대가 생겼으니, 본격적으로 꾸며보도록 하겠습니다.

2. 셀렉터 만들기

이번에는 셀렉터를 만들어보도록 하겠습니다.

셀렉터는 id로 만들어도 되고, 클래스로 만들어도 됩니다.

저는 id로 만들어보도록 하겠습니다.

이름은 menubar라고 하겠습니다.

스타일 태그 내의 내용은 아래와 같습니다.

    <style>
    #menubar {
        background : olive;
    }
    #menubar ul { /* 여백과 패딩 모두 0 */
        margin : 0;
        padding : 0;
        width : 567px; /* 모든 아이템(<li>)을 한 줄에 품을 수 있는 폭 */
    }
    #menubar ul li {
        display : inline-block; /* 새 줄로 넘어가지 않게 */
        list-style-type : none; /* 마커 삭제 */
        padding : 0px 15px; /* top=bottom=0, left=right=15px */ 
    }
    #menubar ul li a {
        color : white;
          text-decoration : none; /* 링크 보이지 않게 */
    }
    #menubar ul li a:hover {
         color : violet;  /* 마우스 올라 갈 때 색 */
    }
    </style>

각각은 메뉴의 전체 틀인 ul 태그,

그 속에 들어있는 리스트인 li 태그,

리스트 내에 삽입이 된 링크인 a 태그,

a 태그가 있는 위치에 마우스 커서를 올렸을 때 색깔을 바꾸도록 이벤트를 설정했습니다.

이제 이들을 합쳐서 작성하면 아래와 같습니다.

<!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>리스트로 메뉴 만들기</title>
    <style>
    #menubar {
        background : olive;
    }
    #menubar ul { /* 여백과 패딩 모두 0 */
        margin : 0;
        padding : 0;
        width : 567px; /* 모든 아이템(<li>)을 한 줄에 품을 수 있는 폭 */
    }
    #menubar ul li {
        display : inline-block; /* 새 줄로 넘어가지 않게 */
        list-style-type : none; /* 마커 삭제 */
        padding : 0px 15px; /* top=bottom=0, left=right=15px */ 
    }
    #menubar ul li a {
        color : white;
          text-decoration : none; /* 링크 보이지 않게 */
    }
    #menubar ul li a:hover {
         color : violet;  /* 마우스 올라 갈 때 색 */
    }
    </style>
    </head>
    <body>
    <nav id="menubar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Espresso</a></li>
            <li><a href="#">Cappuccino</a></li>
            <li><a href="#">Cafe Latte</a></li>
            <li><a href="#">F.A.Q</a></li>
        </ul>
    </nav>
</body>
</html>

이제 결과 화면을 보도록 하겠습니다.

각각은 마우스 커서를 올리지 않았을 때와 올렸을 때인데,

마우스 커서를 올리면 색깔이 바뀌는 것을 확인하실 수 있습니다.

여기까지 리스트 단축 프로퍼티를 이용하여 카페 메뉴판을 만드는 시간을 가져봤습니다.

다음 포스팅에서는 표를 꾸미는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css border 프로퍼티로 표 테두리 제어하기 (0)	2023.05.01
css 표 꾸미기 프로퍼티에 대하여 알아보기 (0)	2023.04.24
css list-style 단축 프로퍼티에 대하여 알아보기 (0)	2023.04.24
css list-style-image 프로퍼티로 이미지 마커 만들기 (0)	2023.04.24
css list-style-type 프로퍼티 이용하여 마커의 종류 지정하기 (0)	2023.04.24

개발러 L의 뻔fun한 코딩

css 리스트 제어 프로퍼티로 카페 메뉴 만들기