콩벌레 개발자의 개발 공부 노트
close
프로필 배경
프로필 로고

콩벌레 개발자의 개발 공부 노트

    • 분류 전체보기 (233)
      • 일상 (7)
        • 일상 이야기 (4)
      • Web (17)
        • Spring Boot (6)
        • CSS (3)
        • HTML (2)
        • JSP (0)
      • R (4)
      • Algorithm (88)
        • 백준 (67)
        • 프로그래머스 (19)
      • ICT COG Academy (8)
        • AI 기본 (8)
      • 계산이론 (6)
      • 데이터 베이스 (1)
      • IOT 네트워크 (1)
      • iOS (63)
        • RxSwift (2)
        • swift (15)
        • 앱 개발 (31)
        • 보안 (1)
        • UIKit (10)
        • SwiftUI (3)
      • 클린 아키텍처 (7)
      • 클린 코드 (3)
      • 컴퓨터 구조 (14)
      • 네트워크 (10)
      • 자료구조 (0)
      • 운영체제 (2)
      • 안드로이드 (0)
      • 개발 (0)
  • mode_edit_outline글작성
  • settings환경설정
  • 홈
  • 태그
  • 방명록
Header 메뉴바 구조

Header 메뉴바 구조

위 메뉴바를 살펴보자. 메뉴바를 보면 로고, 검색창, 로그인 등 여러가지 영역으로 나뉘어져 있다. 메뉴바를 제작할때 div로 영역을 나눠서 제작을 하는데 이때 영역을 나눠보면 이런 식으로 나눌수 있다. (동일한 색은 서로 대등한 관계) 처음에는 메뉴가 들어갈 헤더.(빨간색) 두번째로는 메뉴바가 가운데에 있으므로 메뉴를 가운데에다가 정렬할 수 있게 container를 만들고,(갈색) 세번째로는 메뉴가 왼쪽과 오른쪽으로 나누어져 있는 것을 볼 수 있다. (초록색) 네번째로는 로고와 메뉴로 나뉜다.(하늘색) 마지막으로 각각의 메뉴 요소로 나뉜다.(보라색) 왼쪽 메뉴만 코드로 구현하면 WhyGitHub? Team Enterprise Explore Marketplace Pricina 위와 같이 구현 할 수 있다...

  • format_list_bulleted Web/HTML
  • · 2020. 7. 31.
  • textsms
  • 1
공지사항
카테고리
  • 분류 전체보기 (233)
    • 일상 (7)
      • 일상 이야기 (4)
    • Web (17)
      • Spring Boot (6)
      • CSS (3)
      • HTML (2)
      • JSP (0)
    • R (4)
    • Algorithm (88)
      • 백준 (67)
      • 프로그래머스 (19)
    • ICT COG Academy (8)
      • AI 기본 (8)
    • 계산이론 (6)
    • 데이터 베이스 (1)
    • IOT 네트워크 (1)
    • iOS (63)
      • RxSwift (2)
      • swift (15)
      • 앱 개발 (31)
      • 보안 (1)
      • UIKit (10)
      • SwiftUI (3)
    • 클린 아키텍처 (7)
    • 클린 코드 (3)
    • 컴퓨터 구조 (14)
    • 네트워크 (10)
    • 자료구조 (0)
    • 운영체제 (2)
    • 안드로이드 (0)
    • 개발 (0)
최근 글
인기 글
최근 댓글
태그
  • #uikit
  • #앱개발
  • #변경된 점
  • #부트캠프
  • #2023
  • #swift
  • #edwith
  • #IOS
  • #8기
  • #스탠포드 강의
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바