코딩/복습

251013 picogram (top-bar, banner)

ponyo118 2025. 10. 13. 14:38

 

ul>li*6>a[href="#"]{메뉴$}

ul : 목록

li: 리스트

a: 링크

[href="#"]: html 속성, 값 젠코딩

{메뉴$}: 텍스트

>emm~

<ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
      <li><a href="#">메뉴5</a></li>
      <li><a href="#">메뉴6</a></li>
    </ul>

[목록과 리스트태그]

1.ul과 li 단독으로 사용할 수 없다.( 단독으로 사용시 웹표준에 어긋남.)

2. 순서없는 목록과 리스트에 사용한다

3. 보통은 특정 메뉴에 많이 사용한다. ( 사용자 메뉴, 홈페이지 메인메뉴 등..)

4. 너무 큰 구조에는 잘 사용하지 않는다. ( 마켓컬리 상품리스트처럼, 가독성이 떨어진다.)

5. ★ ul태그 자식으로는 li 태그만 사용할 수 있다. 

6. li태그 자식은 아무나 와도 된다. ul도 들어올 수 있다. 

 

.top-bar {
  background-color: rgba(255,255,255, 0);
  /* (투명도)속성값: 0 ~ 1 */
  /* opacity: 0.3; */
  /* 포지션 기본값: static = display 상태  */
  position: fixed;
  height: 100px;
  left: 0; right: 0;
  /* 0.5초로 부드럽게 표시 */
  transition: 0.5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar:hover {
  background-color: rgba(255, 255, 255, 1);
}
.logo-box {
  border: 1px solid red;
}
.logo-box> a {
  /* background-color: pink; */
  background-image: url(../image/logo_w.png);
  /* 빈공간 반복x */
  background-repeat: no-repeat;
  /* 가로 or 세로 먼저 닿는 부분 크기 맞춤 */
  background-size: contain;
  /* 중앙 정렬 */
  background-position: center;
  width: 143px; height: 34px;
  display: flex;
  font-size: 0;
  transition: 0.5s;
}
.top-bar:hover .logo-box>a {
  background-image: url(../image/logo\ 1.png);
}
.menu {
  border: 1px solid red;
}
.menu>ul {
  border: 1px solid orange;
  display: flex;
}
.menu>ul>li {
  border: 1px solid green;
  width: 135px;
  text-align: center;
}
.user-menu {
  border: 1px solid red;
}

※ 정리

  • ul ↔ li는 세트 (단독 사용 X)
  • 메뉴 가로 배치는 display: flex + align-items: center
  • 상단바 고정은 position: fixed
  • hover 효과는 :hover로, 전환은 transition
  • 로고 전환은 background-image 교체 + background-size: contain
  • 텍스트 안 보이게 하려면 font-size: 0 (이미지 로고만 보여줄 때)

1) 목록 구조 핵심 (ul > li > a)

젠코딩(Emmet) 단축: ul>li*6>a[href="#"]{메뉴$}

  • ul : 순서 없는 목록
  • li : 리스트 항목
  • a : 링크(앵커)
  • href="#" : 임시 링크
  • {메뉴$} : $는 자동 증가(메뉴1, 메뉴2…)

생성되는 HTML

<ul>
  <li><a href="#">메뉴1</a></li>
  <li><a href="#">메뉴2</a></li>
  <li><a href="#">메뉴3</a></li>
  <li><a href="#">메뉴4</a></li>
  <li><a href="#">메뉴5</a></li>
  <li><a href="#">메뉴6</a></li>
</ul>
 

규칙 요약

  • ul의 직계 자식은 li만 가능
  • li 안에는 텍스트/a/이미지/또 다른 ul 등 다양한 요소 가능
  • 복잡한 데이터 표현엔 부적합 → 그땐 table/grid 고려

2) 상단바(top-bar) 레이아웃

.top-bar {
  background-color: rgba(255,255,255,0); /* 투명 */
  position: fixed; /* 스크롤해도 상단 고정 */
  height: 100px;
  left: 0;
  right: 0;
  transition: 0.5s; /* 변화 부드럽게 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar:hover {
  background-color: rgba(255,255,255,1); /* hover 시 흰 배경 */
}
 
  • fixed는 화면에 고정 → 헤더·플로팅바에 적합
  • rgba()로 배경만 투명 제어 (요소 전체 투명은 opacity)

3) 로고 영역(hover 전환)

.logo-box > a {
  background-image: url(../image/logo_w.png);
  background-repeat: no-repeat;
  background-size: contain;   /* 비율 유지 */
  background-position: center;
  width: 143px;
  height: 34px;
  display: flex;
  font-size: 0;               /* 텍스트 숨김 */
  transition: 0.5s;
}
.top-bar:hover .logo-box > a {
  background-image: url(../image/logo_1.png); /* hover 시 교체 */
}
  • background-size: contain : 로고 찌그러짐 방지
  • 로고가 링크라면 a에 백그라운드 이미지로 배치 깔끔
  • 텍스트 숨김은 font-size: 0 또는 text-indent: -9999px 대안

4) 메뉴 가로 배치(Flex)

 
.menu > ul {
  display: flex;          /* 가로 나열 */
}
.menu > ul > li {
  width: 135px;
  text-align: center;     /* 텍스트 중앙 */
}
  • 기본 가로 정렬: display: flex
  • 아이템 간 간격은 gap: 24px;처럼 주면 관리 쉬움
  • 모바일 대응은 @media로 폰트/간격/정렬 조절

 

A) HTML 골격

 
<header>
  <div class="top-bar">
    <div class="logo-box">
      <a href="#"></a>
    </div>

    <nav class="menu">
      <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
        <li><a href="#">메뉴4</a></li>
        <li><a href="#">메뉴5</a></li>
        <li><a href="#">메뉴6</a></li>
      </ul>
    </nav>

    <div class="user-menu"><!-- 로그인/장바구니/검색 등 --></div>
  </div>
</header>

B) CSS 기본

 

/* 상단바 */
.top-bar {
  background-color: rgba(255,255,255,0);
  position: fixed;
  left: 0; right: 0; height: 100px;
  display: flex; justify-content: space-between; align-items: center;
  transition: 0.5s;
}
.top-bar:hover { background-color: rgba(255,255,255,1); }

/* 로고 */
.logo-box > a {
  display: flex; width: 143px; height: 34px; font-size: 0;
  background: center / contain no-repeat url(../image/logo_w.png);
  transition: 0.5s;
}
.top-bar:hover .logo-box > a {
  background-image: url(../image/logo_1.png);
}

/* 메뉴 */
.menu > ul { display: flex; gap: 24px; }
.menu > ul > li { width: 135px; text-align: center; }
.menu a { display: inline-block; padding: 8px 0; }

/* 유저 메뉴(아이콘 자리) */
.user-menu { display: flex; align-items: center; gap: 12px; }

/* 접근성(키보드 포커스 표시) */
.menu a:focus { outline: 2px solid #444; outline-offset: 2px; }

 

🧩 흔한 실수 & 해결 팁

  • ul만 쓰거나 li만 쓰는 경우 → 웹표준 위반, 반드시 함께!
  • 로고 찌그러짐 → background-size: contain 또는 <img style="object-fit: contain">
  • hover 전환이 뚝 끊김 → transition 추가
  • 메뉴가 세로로 떨어짐 → display: flex 누락 확인
  • fixed 헤더 때문에 내용 가려짐 → main { padding-top: 100px; }로 보정
  • 링크 밑줄/보라색 → CSS 리셋에서 a { text-decoration: none; color: inherit; } 처리

초간단 암기 구문

  • “울리(a)” — ul-li-a 순서로 생각하면 구조가 잘 잡힘
  • “픽스-플렉스-호버-트랜지션” — 헤더 상호작용 4단계
  • “컨테인으로 찌그러짐 방지” — 로고·썸네일 이미지

z-index 요약

  • z-index는 포지션이 있는 요소(static 제외)에 주로 의미가 있음.
  • 스태킹 컨텍스트를 만드는 요인들(position+z-index, opacity<1, transform, filter, isolation: isolate 등)이 다르면, 서로 간 우선순위가 바뀔 수 있어요.
  • 간단 규칙: “겹치면 더 큰 z-index + 같은 컨텍스트 안에서만 비교”라고 기억.

헷갈리는 포인트 정리

  • absolute 기준: 가장 가까운 “position된” 조상(보통 relative를 부모에 줘서 확정).
  • fixed 기준: 원칙적으로 뷰포트. 단, 일부 환경에서 transform 걸린 조상 영향 받을 수 있음.
  • relative 이동: 공간은 유지, 화면에서만 살짝 이동.
  • static: 아무 오프셋 안 먹힘(기본값).

 

'코딩 > 복습' 카테고리의 다른 글

251027 picogram (top-bar)  (0) 2025.10.27
251017 SPC 모작  (0) 2025.10.17
251002 picogram (banner)  (0) 2025.10.02
251001 Market kurly (list)  (0) 2025.10.01
250927 라이나 생명 박스 만들기  (0) 2025.09.27

'코딩/복습'의 다른글

  • 현재글251013 picogram (top-bar, banner)

관련글

티스토리툴바