CSS 프로그래밍 기본 | 웹 개발

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 탐구할 것입니다. 이 랩의 목적은 CSS 구문, 선택자 (selectors), 속성 (properties), 그리고 값 (values) 에 대한 확실한 이해를 돕는 것입니다. 이 랩을 완료함으로써 HTML 요소를 스타일링하고 시각적으로 매력적인 웹 페이지를 만들 수 있게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

햄버거 버튼 (Hamburger Button)

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

마우스를 올렸을 때 (hover) 십자 버튼으로 전환되는 햄버거 메뉴를 만들려면 다음 단계를 따르세요:

상단, 하단, 중간 막대를 포함하는 .hamburger-menu 컨테이너 div를 사용합니다.
컨테이너를 display: flex로 설정하고 flex-flow: column wrap을 사용합니다.
justify-content: space-between을 사용하여 막대 사이에 간격을 추가합니다.
transform: rotate()를 사용하여 상단 및 하단 막대를 45 도 회전시키고, 마우스를 올렸을 때 중간 막대를 opacity: 0으로 페이드 처리합니다.
막대가 왼쪽 지점을 중심으로 회전하도록 transform-origin: left를 사용합니다.

다음은 해당 HTML 코드입니다:

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

다음은 CSS 코드입니다:

.hamburger-menu {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu .bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover .top {
  transform: rotate(45deg);
}

.hamburger-menu:hover .middle {
  opacity: 0;
}

.hamburger-menu:hover .bottom {
  transform: rotate(-45deg);
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 햄버거 버튼 (Hamburger Button) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.

웹 스타일링을 위한 CSS 기본 사항

소개

햄버거 버튼 (Hamburger Button)

요약