냐울당 햄버거 메뉴

목차

    반응형

    내비게이션 가로로 정렬하기

    안녕하세요. 개자이너 씸플레이입니다.

    오늘은 드디어 css를 진행합니다!


    1. 기본사항 살펴보기

    세로로 정렬이 기본

    ① 기본사항

     

    • 참고사항 : 리스트 데코레이션이나 <a>태그에 적용된 색들은 미리 빼두었습니다.
    • 기본적으로 <li>태그는 블록 태그이기 때문에 글씨가 옆으로 써지지 않고 아래로 써집니다.
    • 원하는 디자인 : 로고 옆으로 카테고리들이 가로로 나열되면 좋겠다.

     

    ② 블록 태그

     

    • 줄 노트를 상상해보세요. 그리고 한 줄이 한 블록이라고 상상해봅시다.
    • 한 줄을 혼자서 차지하는 태그가 블록 태그입니다.
    • <li>카테고리1</li> 라고 적으면 한 줄에 카테고리1이라는 글자만 써야 한다는 의미죠.

    2. 내비게이션을 오른쪽으로

    left / right

    ① 원하는 이미지 상상하기

     

    • 각자 원하는 내비게이션의 이미지가 있을 거예요. 처음은 어렵지 않게 제가 이미지를 보여드리겠습니다.
    • 원하는 이미지는 로고가 왼쪽, 내비게이션이 오른쪽에 있는 이미지예요.
    • 로고에는 왜 적용해야 하나요? - 로고는 <h1>태그인데 <h>태그도 블록 태그이기 때문에 로고에 적용해주지 않으면 로고 옆으로 가지 않습니다.

     

    float:left; / float:right;

    ② float

     

    • <h1> (로고)에는 float:left;<nav> (내비게이션 전체)에는 float:right;를 적용해주시면 됩니다.
    • 내비게이션 전체를 오른쪽으로 보내는 것이기 때문에 <nav>태그에 적용해줍니다.

     

    css화면

    
    h1{ float:left; }
    nav{ float:right; }
    
    

     

    ③ 코드로 보기

     

    • css 코드로 보면 이렇게 작성해주시면 됩니다.
    • 세미콜론도 꼭 잊지 말아 주세요!

     

    320x100

    3. 내비게이션 가로로 정렬

    카테고리-가로 정렬 / 하위-세로 정렬

     

    ① 이미지 상상하기

     

    • 다시 한번 이미지를 상상해봅시다. 카테고리들이 가로로 정렬된 모습을 상상해볼까요?
    • 아, 하지만 하위 카테고리는 세로로 정렬을 하고 싶습니다.
    • 모두 위의 이미지 같은 내비게이션을 상상하셨나요? 좋습니다.

     

    float:left;

    ② float

     

    • 카테고리에 float:left;를 적용해주시면 됩니다. 
    • 하위는 제외시키고요. 
    • 선택자를 어떻게 정하는 게 좋을까요? 고민해보셨나요?

     

    ul에 클래스 넣기

     

    ③ 클래스 넣기

     

    • 이럴 때를 위해 클래스가 있습니다. 카테고리 전체를 감싸고 있는 <ul>태그에 클래스를 넣어봅시다.
    • 보통 이런 내비게이션을 gnb라고 부릅니다. 글로벌(Global) 내비게이션의 약자로 홈페이지 전체 내비게이션의 클래스 이름으로 많이 사용합니다.
    • 클래스를 선택자로 이용해 <li> 태그를 잡으면 됩니다.

     

    하위가 같이 선택되지 않게 주의

    ④  >

     

    •  .gnb li  - 선택자를 이렇게 적으면 gnb라는 클래스 안에 <li>태그를 선택합니다.
    • 문제는 하위 카테고리 역시 gnb안의 <li>태그이기 때문에 같이 선택된다는 것입니다.
    • 우리가 상상한 이미지는 하위는 세로 정렬이었으니까 선택이 되면 안 되겠죠?
    • 그래서 사이 빈칸에 >를 넣어줍니다.  .gnb>li  이렇게요.
    • >는 바로 아래 태그만 선택됩니다. 즉, .gnb의 자식 태그 중 <li>만 선택됩니다.

     

    css 코드

    
    .gnb>li{ float:left; }
    
    

     

    ⑤ css 코드로 보기

     

    • css 코드를 복사해서 사용해보고 어떻게 적용되는지 살펴봅시다.
    • 이해가 안 된다면 지금은 넘어가고 나중에 다시 돌아와서 봐도 괜찮아요.

     

    오늘은 대략적인 정렬만 맞춰주었습니다. 드디어 다음에는 본격적인 꾸미기에 들어가 보겠습니다.

     

     

    [같이 보면 좋은 글]

    [coding/html + css] - [html] 내비게이션(gnb) 만들기 01 - 내비게이션 구조를 짜보자

    [coding/html + css] - [html] 내비게이션(gnb) 만들기 02 - 페이지 주소 팁


    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바