비전공자 개발자로 취업하기

개발/개발일지

html/css 코딩애플과제 - 어려웠던 것들 (1)

pizzaYami 2023. 6. 27.

코딩애플 최종과제를 하면서 생각보다 많은 부분에서 어려움을 느껴서 정리해본다.

내가 헤맸던 부분을 위주로 정리를 해본다.

 

PC사이즈와 모바일 사이즈

 

처음에는 Bootstrap을 사용하려고 했는데 기본설정때문에 내가 원하는대로 만들어지지 않아서 scss만을 이용해서 만들어보았다.

PC사이즈부터 만들고 모바일을 만들어보자.

 

기본설정

 

우선 기본설정을 해주었다.

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
  outline: 0;
}

 

header전체

 

그다음에 header 전체 부분을 <header> 태그를 이용해서 설정해주었다.

header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0px;
  display: flex;
  align-items: center;
  padding: 10px 50px 10px 50px;
  box-shadow: 2px 2px 2px 2px rgb(215, 215, 215);
}

header는 position : fixed 를 반드시 설정하여 상단에 고정해주어야한다.

 

Seach 부분

 

form 태그를 통해서 감싸주었다.

<form class="header-search">
	<input type="text" placeholder="Search" />
	<button><img src="img/search.svg" alt="search" /></button>
</form>

1. button부분이 위치가 생각대로 조정이 안되었다.

postion: relative와 postion: absolute를 통해서 해결하였다.

relative를 기준으로 absolute를 통해 x, y값을 조정하였다.

 

2. 테두리가 삐져나옴

테두리는 z-index를 사용하려했는데 적용이 안되서 overflow:hidden을 사용하여 테두리를 깔끔하게 정리하였다

 

3. :focus 가상클래스가 적용안됨

input 부분을 누르면 .header-search의 width값이 늘어나도록 설정하려했다.

.header-search:focus를 사용했더니 적용이 안되서 찾아보니

 :focus-within 이라는걸 사용해야했다.

이건 css 가상클래스 중하나로 부모, 선조 중에서 포커스가 있는 자식이 하나라도 있으면 적용되는 것 이라고한다.

(그냥 부모요소를 변경시켜주는 가상클래스인듯)

.header-search {
  position: relative;
  width: 300px;
  height: 100%;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
  input {
    height: 100%;
    width: 100%;
    padding-left: 10px;
    border: none;
    outline: none;
  }
  button {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0px;
  }
}
.header-search:focus-within {
  width: 500px;
}

Alert 부분

 

 

<!-- html -->
<div class="header-alerts">
	<div class="header-alert">
		<img src="img/bell.svg" alt="bell" class="alert-img" />
		<p class="alert">5</p>
	</div>
	<div class="header-alert">
		<img src="img/message.svg" alt="bell" class="alert-img" />
		<p class="alert">5</p>
	</div>
	<p class="header-name">Yongju Cho</p>
</div>

1. 빨간 알람부분

이 부분도 처음에는 감을 못 잡았었는데 position: relatived와 absolute를 이용해서 해결하였다.

 

/* SCSS */

.header-alerts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.header-alert {
  position: relative;
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  img {
    width: 25px;
    height: 25px;
  }
  .alert {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    text-align: center;
    padding: 2px;
    top: 0px;
    right: 0px;
  }
}

.header-name {
  color: gray;
}

 

메뉴

화면이 작아지면 search와 alert부분이 안보이고 menu만 보여야한다.

<!--HTML-->
<div class="header-menu-container">
	<div class="header-menu"><img src="img/list.svg" alt="list" /></div>
</div>

1. 우측정렬

flex를 이용해서 정렬을 하긴 했는데 항상 정렬 방법이 달라지는 것 같아서 다음에 프로젝트를 진행하게된다면 정렬방법을 통일해보자.

/*CSS*/
.header-menu-container {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.header-menu {
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 5px;
  img {
    width: 30px;
  }
  cursor: pointer;
}

header 미디어쿼리

 

1. 범위설정

처음에는 max-width: 1024px과 max-width: 768로 했었는데 제대로 적용이 안되었다.

768px을 기준으로 min과 max로 나뉘어서 적용하였다.

2. 범위에 따라서 안보이게 하는 것

visibility: hidden 과 display:none이 헤갈렸었는데

hidden은 자리는 차지하는데 안보이는 것이고 none은 자리조차 차이 안하는 것이다.

 

@media screen and (min-width: 768px) {
  .header-menu-container {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .header-search {
    display: none;
  }
  .header-alerts {
    display: none;
  }
}

 

전체코드

 

<!--HTML-->
  <body>
    <header class="header">
      <form class="header-search">
        <input type="text" placeholder="Search" />
        <button><img src="img/search.svg" alt="search" /></button>
      </form>
      <div class="header-alerts">
        <div class="header-alert">
          <img src="img/bell.svg" alt="bell" class="alert-img" />
          <p class="alert">5</p>
        </div>
        <div class="header-alert">
          <img src="img/message.svg" alt="bell" class="alert-img" />
          <p class="alert">5</p>
        </div>
        <p class="header-name">Yongju Cho</p>
      </div>
      <div class="header-menu-container">
        <div class="header-menu"><img src="img/list.svg" alt="list" /></div>
      </div>
    </header>
  </body>
/*CSS*/
* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
  outline: 0;
}

header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0px;
  display: flex;
  align-items: center;
  padding: 10px 50px 10px 50px;
  box-shadow: 2px 2px 2px 2px rgb(215, 215, 215);
}

.header-search {
  position: relative;
  width: 300px;
  height: 100%;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
  input {
    height: 100%;
    width: 100%;
    padding-left: 10px;
    border: none;
    outline: none;
  }
  button {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0px;
  }
}
.header-search:focus-within {
  width: 500px;
}

.header-alerts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.header-alert {
  position: relative;
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  img {
    width: 25px;
    height: 25px;
  }
  .alert {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    text-align: center;
    padding: 2px;
    top: 0px;
    right: 0px;
  }
}

.header-name {
  color: gray;
}

.header-menu-container {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.header-menu {
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 5px;
  img {
    width: 30px;
  }
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .header-menu-container {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .header-search {
    display: none;
  }
  .header-alerts {
    display: none;
  }
}

'개발 > 개발일지' 카테고리의 다른 글

랜덤 명언 만들기  (0) 2023.07.15
시계 만들기  (0) 2023.07.15
html/css 코딩애플과제 - 어려웠던 것들(2)  (0) 2023.06.28
[프로젝트] 아이디어  (0) 2023.05.10
[프로젝트] 메인 프로젝트의 시작  (0) 2023.05.10

댓글

티스토리툴바