기분따라 코딩
  • 태그
  • 방명록
  • HTML
  • CSS
  • Javascript
  • React.js
  • Node.js
    • 분류 전체보기 (77)
      • HTML (8)
      • CSS (16)
      • Javascript (14)
      • React.js (11)
      • Node.js (7)
      • Python (4)
      • Database (2)
      • DevOps (1)
      • Log (2)
      • Info (6)
      • 정보처리기사 (6)
  • 메뉴 닫기
가로 검색 결과
1 개의 검색 결과가 있습니다.
CSS

[CSS 레이아웃] display: table을 이용하여 메뉴 레이아웃 만들기

메뉴 레이아웃 만들기의 쟁점 메뉴 레이아웃을 만드는 것은 두 개의 과정을 거칩니다. 우선, 메뉴 요소들을 감싸는 부모 요소의 크기와 위치를 잡기입니다. 다음으로는, 각 메뉴 항목에 해당하는 자식 요소들을 일자로 정렬해줍니다. 디자인에 따라서 지그재그로 정렬할 수도 있지만, 이번 포스팅에서는 가장 기본이 되는 일자 정렬을 다룰 것입니다. 사실 지그재그 정렬도 일자 정렬을 할 줄 알아야 구현 가능합니다. 지그재그 정렬의 원리는 일자 정렬 이후 각 자식 요소에 자식 요소를 또 추가하여, 위, 아래 혹은 왼쪽, 오른쪽 정렬만 다르게 해 주면 구현되기 때문입니다. 일자 정렬에는 또 두가지 종류가 있습니다. 수평 방향으로 정렬과 수직 방향으로 정렬입니다. 이 두 가지 정렬을 구현하는 데에는 사실 무수히 많은 방법이..

2021. 5. 31. 08:00
  • «
  • 1
  • »

전체 카테고리

  • 분류 전체보기 (77)
    • HTML (8)
    • CSS (16)
    • Javascript (14)
    • React.js (11)
    • Node.js (7)
    • Python (4)
    • Database (2)
    • DevOps (1)
    • Log (2)
    • Info (6)
    • 정보처리기사 (6)

방문자

오늘
어제
전체
  • 최근 글
  • 최근 댓글

최근 글

최근댓글

태그

  • #CSS
  • #redux toolkit
  • #핵심
  • #socket.io
  • #Express
  • #웹개발
  • #채팅 웹 만들기
  • #Table
  • #form
  • #react testing library
  • #javascript
  • #정보처리기사
  • #프로미스
  • #개정판
  • #필기
  • #로버트 C. 마틴
  • #html
  • #자바스크립트
  • #레이아웃
  • #layout
  • #만들기
  • #웹소켓
  • #기초
  • #react
  • #모듈
  • #태그
  • #기출문제
  • #Node.js
  • #selector
  • #요약 정리
더보기+

블로그 인기글

Powered by Privatenote/라이프코리아 Copyright © 기분따라 코딩 All rights reserved. TistoryWhaleSkin3.4

티스토리툴바