2024-01-16 (27일차) - 풀다운 메뉴 구현을 위한 요소들

린·2024년 1월 16일

[산대특] 프롬프트AI & OpenAPI & 공공데이터를 활용한 웹앱개발자 양성과정

목록 보기

33/86

📅 2024-01-16, 27일차

TODO

젠코딩으로 기본꼴 만들기 연습
position 개념 보기
강사님의 풀다운 메뉴 구현 코드
풀다운 메뉴 구현 영상

[WiseSaying]

CRUD 혼자 구현 할 수 있을 때 까지 연습하기
[프론트엔드)
- 젠코딩 연습
- z-index
- 풀다운메뉴 구현에 필요한 요소들 복습

Un-ordered List

순서가 필요없어서, 점으로 리스트 마크다운

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Ordered List

순서대로 리스트 마크다운, 숫자로

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

외워놓기

<!--
nav.menu-box-2[tab 키]
nav.menu-box-2>ul[tab 키]
nav.menu-box-2>ul>li*4[tab 키]
nav.menu-box-2>ul>li*4>a[href="#"][tab 키]
nav.menu-box-2>ul>li*4>a[href="#"]{메뉴 아이템 $}[tab 키]
-->
<nav class="menu-box-2">
  <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>
  </ul>
</nav>

별명 활용하기

<nav class="menu1">
  <ul>
    <li><a href="#">메뉴아이템1</a></li>
    <li><a href="#">메뉴아이템2</a></li>
    <li><a href="#">메뉴아이템3</a></li>
    <li><a href="#">메뉴아이템3</a></li>
  </ul>
</nav>

<br>
<nav class="menu1 menu12">
  <ul>
    <li><a href="#">메뉴아이템1</a></li>
    <li><a href="#">메뉴아이템2</a></li>
    <li><a href="#">메뉴아이템3</a></li>
    <li><a href="#">메뉴아이템3</a></li>
  </ul>
</nav>
<br>
<nav class="menu1 menu13">
  <ul>
    <li><a href="#">메뉴아이템1</a></li>
    <li><a href="#">메뉴아이템2</a></li>
    <li><a href="#">메뉴아이템3</a></li>
    <li><a href="#">메뉴아이템3</a></li>
  </ul>
</nav>

ul, li {
  margin:0;
  padding:0;
  list-style:none;
}
a {
  color:inherit;
  text-decoration:none;
}
.menu1 {
  text-align:center;
  margin-top: 20px;
}
.menu1 > ul {
  background-color:#dfdfdf;
  display:inline-block;
  padding:0 10px;
  border-radius:5px;
}
.menu1 > ul > li {
  display:inline-block;
  width:200px;
}
.menu1 > ul > li > a {
  padding:10px;
  display:block;
}
.menu1 > ul > li:hover > a {
  color:white;
  background-color:black;
}

.menu12 {
  color:red;
}

.menu13 {
  color: gold;
}

position

static : 절대 겹치지 않는 상태 (사람) -> border밖을 못 뚫고 나감
absolute: 겹칠 수 있는 상태 (유령상태) -> border밖을 뚫고 다님
- top 0 : 화면 맨 꼭데기
- bottom 0 : 화면 맨 바닥
absolute의 활동범위를 제한하는 방법:
- absolute의 부모한테 position: relative를 주면 된다 (유령의 집! 유령가두기!)
- relative처럼, absolute도 absolute를 가둘 수 있다!
display : none은 안보이게함
z-index 값이 클 수록 우리눈에 가까움