2024-01-16(27일차) - HTML, CSS, 메뉴바 만들기

민짱·2024년 1월 16일
html

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

목록 보기
27/85

📅2024. 01. 16 27일차

🎨 HTML, CSS

시멘틱 태그 (Semantic Tag)란?

  • 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그이다.
  • 시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재한다.
  • 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것
  • 굳이 안쓰고 div만 써도된다.

노멀라이즈(normalize)

  • 브라우저 간 유저 에이전트 스타일의 오차를 줄이고 HTML 요소의 기본 스타일을 브라우저 별이 아닌 공통으로 일관되게 유지하도록 돕는 CSS 파일이다. 버그만 줄이는 방향으로 스타일을 재지정하는 것.
a {
color: inherit

ol, ul ?

  • ol 과 ul은 자식으로 무조건 li만 가질 수 있다.

📃문제) 메뉴바 3개 만들기

  • HTML
<nav class="menu_box_1">
  <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="menu_box_1 menu_1_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="menu_box_1 menu_1_3">
  <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>
  • CSS
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.menu_box_1 {
  text-align: center;
  padding-top: 40px;
}

.menu_box_1 > ul {
  background-color: #dfdfdf;
  display: inline-block;
  padding: 0 20px;
  border-radius: 5px;
}

.menu_box_1 > ul > li {
  display: inline-block;
}

.menu_box_1 > ul > li > a {
  display: block;
  padding: 15px;
}

.menu_box_1 > ul > li:hover > a {
  color: white;
  background-color: black;
}

.menu_1_2 {
  color: red;
}

.menu_1_3 {
  color: gold;
}

position

  • static
    • 사람 상태
  • absolute
    • 유령 상태
  • relative
    • 유령의 집
  • absolute가 absolute을 가둘 수 있다.

overflow

  • CSS의  overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정한다.

  • visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여진다.

  • hidden : 넘치는 부분은 잘려서 보여지지 않는다.

  • scroll : 스크롤바가 추가되어 스크롤할 수 있다.(가로, 세로 모두 추가 된다.)

  • auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정된다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있다.)

transition

  • 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

  • transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 액션에 의해 발동한다.

z-index

  • position 속성을 이용하면 요소를 겹치게 놓을 수 있다. 이때 요소들의 수직 위치를 z-index 속성으로 정한다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려간다.

transform

  • 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬 때 사용한다.

  • translate (이동)

    .box:hover {
	transform: translate(100px, 50px);
}

    각 각 y축과 x축으로 지정한 값만큼 이동한다.

  • scale (늘리거나 줄이거나)

    .box:hover {
	transform: scale(2, 1.5);
}

    scale은 요소의 크기를 변경하는 태그이며, (좌우, 상하)로 늘어난다.
    scale (X,Y)로 입력하며, 기존 사이즈의 배수로 늘어나며 width, height의 속성과 다르다.

  • rotate (회전)

    .box:hover {
	transform: rotate(30deg);
}

    rotate는 (괄호) 만큼 회전하게끔 만드는 태그이며, 각도를 나타내는 deg 단위를 쓴다.

  • skew (왜곡)

    .box:hover {
	transform: skew(30deg, 30deg);
}

    skew는 요소의 왜곡을 뜻하며, (X,Y)을 사용하며 deg을 사용해 정해진 각도만큼 왜곡시킨다.

  • translateX, translateY = 수평 수직 중앙 정렬 하려면 -50%, -50% 하면 고정값이 변해도 정렬된다.

white-space:

  • nowrap : 절대 줄바꿈 금지
  • pre : 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
  • pre-wrap : 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존, 텍스트 안에 긴 행이 있을 때 해당 행에서 자동으로 줄바꿈
  • pre-line : 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리

text-overflow

  • text-overflow는 white-space를 이용해 줄 바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 것인지를 처리하는 속성

  • clip : 넘치는 텍스트를 자름

  • ellipsis : 말 줄임표로 잘린 텍스트가 있다고 표시

📃문제) 풀다운 메뉴 만들기

  • HTML
<nav class="menu-box-1">
  <ul>
    <li>
      <a href="#">1차 메뉴 아이템 1</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 2</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 2</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 2</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 3</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 2</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 4</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 2</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}
a {
  color:inherit;
  text-decoration:none;
}

.menu-box-1 {
  text-align:center;
}

.menu-box-1 ul {
  background-color:#afafaf;
}
.menu-box-1 > ul {
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}

.menu-box-1 > ul > li {
  display:inline-block;
}
.menu-box-1 ul > li {
  position:relative;
}

.menu-box-1 ul > li > a {
  display:block;
  padding:10px;
  white-space:nowrap;
}

.menu-box-1 ul > li:hover > a {
  background-color:black;
  color:white;
}

.menu-box-1 > ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
}

.menu-box-1 > ul ul ul {
  left:100%;
  top:0;
}

.menu-box-1 ul > li:hover > ul {
  display:block;
}

.menu-box-1 > ul > li:last-child > ul ul {
  left:auto;
  right:100%;
}
profile
민짱
이전 포스트

2024-01-15(26일차) - HTML, CSS

다음 포스트

2024-01-17(28일차) - HTML, CSS, 메뉴 만들기

0개의 댓글