[HTML/CSS] 간단한 토이프로젝트

HTML/CSS를 이용해서 톡에 있는 요소만 배치를 하고 기능은 없다.

 

 

 

미디어쿼리

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다

 

#no-mobile {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  background-color: #fae100;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  font-size: 32px;
}
@media screen and (max-width: 645px) {
  #no-mobile {
    display: none;
  }
}

 

 

@media screen and (max-width: 645px) : width의 길이를 최대 645px까지 설정해서 그 안에서는 display:none으로 설정해서 하위 요소들이 보이게 했다.

z-index : 위치지정요소와, 그 자손 또는 하위 플렉스 아이템의 z축 순서를 지정한다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다. 그래서 645px넘어간 상태에선 모든 요소를 덮어서 하위 요소들이 보이지 않는다.

 

 

 

주소 설정

<a href="<해당>.html"> :주소를 작업폴더안에 각각의 html파일로 설정해서 페이지가 이동하는 것처럼 구현을 했다.

<nav>,</nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.

Font Awesome : 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나이다.(<i class = "해당 클래스>)

 

<nav id="common-bottom">
  <ul class="common-bottom__nav-item">
    <li>
      <a href="friends.html">
        <i class="fa-regular fa-user fa-2x"></i>
      </a>
    </li>
    <li class="move-circle">
      <a href="chats.html">
        <i class="fa-regular fa-comment fa-2x"></i>
        <span>1</span>
      </a>
    </li>
    <li>
      <a href="find.html">
        <i class="fa-solid fa-magnifying-glass fa-2x"></i>
      </a>
    </li>
    <li class="dotted">
      <a href="more.html">
        <i class="fa-solid fa-ellipsis fa-2x"></i>
      </a>
      <span class="dot"></span>
    </li>
  </ul>
</nav>