HTML CSS 8일 완성하기 : 7일차 최종 프로젝트 (데스크탑 버전)

 

 

 

 

 

 

 

 

고지가 눈 앞! 7일차.

오늘은 데스크탑 버전 html css를 완성하는 데 까지 끝냈다.

html, css 코드가 점점 길어질수록 (심지어 영어라서) 눈이 빙빙 돌았다.

이상하게 집중이 안돼서 더 힘들었던 날 ㅠ_ㅠ 하지만 끝냈다!! 장하다 .. 나 .. 멋져 .. 넌 멋진 놈이야 ..

 

오늘은 프로젝트 예제(?)를 같이 만드는 날이었기 때문에 이론은 거의 없었다.

저저번처럼 새롭게 알게 된 것들을 기록하고 마치려고 한다.

 

그럼 시작 ~ 🤸🏻

 

 

 

 

---

 

 

 

HTML 

 

✔︎ 그때그때 가져오는 아이콘, 한 번에 가져오는 아이콘 팩

🧑‍💻 저번 섹션 때 했던 것 처럼 아이콘을 그때그때 가져오는(SVG) 방법도 있지만, script 로 아이콘팩을 한 번에 가져오는 방법도 있다. 

 

✨ 참고사이트

https://ionic.io/ionicons/

Ionicons: The premium icon pack for Ionic Framework

 

✔︎ figure

🧑‍💻 강의 중 이해가 잘 안돼서 MDN을 확인 👉 여기

✨ 일부 독립적인 콘텐츠를 나타내기 위해 사용한다. 예를들어 캡션이 있는 콘텐츠, 다이어그램, 사진, 코드목록 ... 

✔︎ 콘텐츠를 채워넣을 때 문구 제공이 되지 않았다면?

✨ 문구가 정해지지 않았다면 제작자가 최대한 메시지를 잘 전달할 수 있는 문구를 만든다. 이때 꼭 추가요금을 받는다.

🧑‍💻 추가요금을 꼭 받으라고 강조해서 놀라웠다. 받아야하는 일이었구나 이런 현업(?) 이야기 참 좋다. 오늘도 정보 습득 완료~! 

 

 

✔︎ aside 

 

✨ aside 요소는 중요한 정보가 아닌 추가 정보를 담는 곳이다.

 

 

✔︎ HTML 에는 이미지가 존재하지 않지만 CSS 상으로는 이미지가 존재할 때

🧑‍💻 현재 이 컨테이너 요소 안에는 실질적인 img 요소가 존재하지 않는다고 했을 때 그리고 그런 와중에 css 상에는 확실히 설정했다면 접근성 문제가 발생할 수 있다. html 요소를 알려주는 스크린리더가 img 콘텐츠가 존재하지 않는다고 파악하기 때문이다. 이럴 때는 어떻게 해야할까?

✨ 컨테이너 요소에 role 과 aria-label 속성을 부여한다.

role="img" 로 설정하면 img 역할을 부여한다는 뜻이 되고, img 요소에서 사용하는 alt 속성 대신 aria-label 속성을 통해 img 를 묘사할 수 있다. 

 

 

 

 

---

 

 

 

CSS 

 

✔︎ 이미지를 균일한 gray 로 만들기

🧑‍💻 로고 모음 같은 경우 웹사이트의 메인 컬러와 다르게 자기 혼자 튀는 경우, 각자 다른 색상 다른 명도 다른 채도를 가지고 있어서 그쪽으로 시선이 쏠리기 쉽다. 로고 모음으로 시선이 쏠리는 걸 보통은 원하지 않기 때문에. 균일한 회색으로 변경하는 방법을 사용한다.

🤔 filter 함수 중 grayscale()를 사용하면 손쉽게 그레이 컬러로 바꿔줄 수 있지만 다들 명도도 다르기 때문에 제각기 다른 명도의 그레이컬러가 되어버린다. 

✨ 그래서 사용하는 게 brightness() 함수! 와 opacity 속성!

grayscale() 처럼 filter 속성 함수이다. 기본값은 1로 숫자가 작아질수록 어두워진다. 0으로 설정하면 아예 #000 색상으로 변한다.

같은 명도의 #000 색상으로 만들었으니 opacity 속성을 이용해 불투명도를 낮춰 원하는 그레이컬러로 만든다. 그럼 명도까지 동일한 컬러로 변하는 걸 확인할 수 있다.

 

✔︎ hover 했더니 튀어나오는 듯한 효과

🧑‍💻 이미지나 카드 등 비슷한 콘텐츠가 여러개 군집해있을 때 사용하면 강조효과를 내주고 시선집중도 돼서 좋다고 생각한 효과. 

✨ transform: translate(x, y) / translateY(y) 를 이용한다.

.class:hover {
  transform: translateY(-1.2rem);
}

 

✔︎ hover 했더니 확대되는 효과

🧑‍💻 갤러리 형식의 군집되어 있는 이미지들(?)에 많이 사용되는 듯 하다. 

✨ transform: scale(숫자) 를 사용하자. 기본값은 1. 작아질수록 축소되고, 커질수록 확대된다. 

➕ 팁! 이미지를 담고 있는 컨테이너 요소에 overflow: hidden을 설정하면 이미지가 튀어나와서 다른 요소들을 가리거나 겹치는 상황을 방지할 수 있다!

 

✔︎ icon 색상

🧑‍💻 저번까지는 icon의 색상을 stroke 속성을 이용해 바꿨지만, 이번에는 stroke로 적용되지 않았다. 이럴 때는 어떻게 해야할까?

 

✨ 당황하지 말고 color 등 여러가지 속성으로 도전해보자. 첨언하자면 색상 뿐만 아니라 크기도 font-size를 써야할 때도 있고 여러가지의 상황이 있다고 한다. 포기하지 말고 이 속성 저 속성 실험해보자.

 

✔︎ 무조건 1fr이 아니어도 된다

🧑‍💻 grid 템플릿을 설정할 때 가장 많이 사용하는 건 역시 1fr이다. 하지만 4:6 3:7 5.5:4.5 이런식으로 비율을 정하고 싶다면 어떻게 해야할까?

✨ 무조건 1fr 2fr ... 식으로 쓰지 않아도 된다. 예를들어 5.5 : 4.5 의 비율로 만들고 싶다면 총 너비를 100으로 생각하고 55fr 45fr 로 설정해도 된다. 너무 얽매여 있지 말자.

 

✔︎ 1px ? 정도 되어 보이는 아주 작은 여백들의 정체

🧑‍💻 가끔 아주 가늘거나 작은 px의 여백이 생기고는 한다. 인라인 혹은 인라인 블록 요소이기 때문!

✨ 해결책은 간단하다. display 속성을 사용해 block 요소로 바꿔준다.

 

 

✔︎ css에서 img 경로 찾기

🧑‍💻 html 에서 하던 것처럼 img의 경로를 찾아 설정하면 적용되지 않는다. 

✨경로를 찾을 때 가장 주의할 점은 이 파일이 경로 찾기의 기준이 된다는 점이라는 걸 잊지 말자. 

 

✔︎ 박스가 작아서 잘린 사진, 어느 부분을 중심으로 보여줄까?

🧑‍💻 이미지를 담고 있는 컨테이너가 작아서 이미지가 잘리는 경험은 어디에든 있을 것이다. 이럴 때는 어떻게 해야할까?

 

✨ background-position 속성을 사용한다. 속성에서 정한 값대로 먼저 보여지는 곳이 달라진다. 예를들어 center로 설정했다면 이미지의 중심부가 기준이 되어 보인다!

 

✔︎ outline: none 이 만들어내는 접근성 문제

🧑‍💻 input 창을 클릭했을 때 생기는 파란색 줄. 너무너무 못생겼다. 나또한 그게 너무 싫어서 할 때마다 아예 없애버리곤 했는데 이 행동이 접근성 문제를 발생시킨다고 한다. 만약 키보드만 사용하는 혹은 사용해야 하는 사용자가 있다면 그 사용자에게는 치명적인 문제가 되어버린다. 하지만 너무 못생겼는걸 ... 어떻게 해야할까?

✨ box-shadow 응용하기

  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(0,0,0 0.5);

 

✔︎ 전역 font-family 속성을 무시하는 form 요소

🧑‍💻 body에 font-family 속성을 전역으로 적용시킨지 오래. 그런데 이게 웬걸 form 요소와 그 안의 아이템들은 이를 깡그리 무시한다. 할 수 없지 하나하나 font-family 이름을 다시 적어줄 수 밖에 ... 라고 생각했는가!

✨inherit 은 말그대로 계승(상속)받는다는 말이다. font-family: 폰트 이름 ... 어쩌구저쩌구 하나하나 적지 말고, 그냥 font-family: inherit으로 설정하자!

 

✔︎ .클래스이름:not()

✨ 이러한 클래스를 제외한 모든 동일 클래스에 적용하겠다! 할 때 사용할 수 있다.

예를들어,

.grid {
  display: grid;
  row-gap: 9.6rem;
  column-gap: 6.4rem;
  margin-bottom: 9.6rem;
}

.grid:last-child {
  margin-bottom: 0;
}

이러한 코드가 있다고 해보자. grid인 요소 중 가장 마지막 요소에만 margin-bottom: 0 이라는 속성을 부여한다는 뜻이다.

이걸 반대로 생각해보면 마지막 요소가 "아닌 요소"에는 9.6rem을 부여하고 있다고 할 수 있다.

.grid:not(:last-child) {
  margin-bottom: 9.6rem;
}

 margin-bottom 속성을 빼서 이렇게 바꿀 수도 있는 것! 응용만 잘한다면 아주 유용할 것 같다. 아직 응용하라고 하면 끙끙 앓을 것 같긴 하지만 😇 ... 잘 알아두자!

 

 

 

 

---

 

 

 

 

🍔 7일차 후기

웹페이지 개발은 내 생각보다 더더더더더더더더더!! 더! 섬세한 작업이라는 걸 깨달았다. 

색상 선택부터 (아주 작은 차이이지만 명도대비의 접근성문제가 생길 수 있으므로 테스트의 테스트를 거쳐야한다.) 위에 적었던 보이지 않는 하지만 확실히 존재하는 콘텐츠가 있을 때 어떻게 해야하는가 등 ... margin 하나도 허투루 주면 안되고 통일성이 존재해야 한다. 사실 하다가 머리가 아프기도 했다 눈도 빙빙 돌고 ... 그러다가 만들어진 걸 봤는데 또 이렇게 뿌듯할 수가 없었다. 신기했다.

 

내멋대로 8일 계획을 짜서 듣기 시작한지 7일차. 

내일이면 마지막 일차다. 이렇게 기록까지 하면서 강의를 들은 적은 없기 때문에 뿌듯하기도 하고 신기하기도 하고 ... 

더 얘기하고 싶지만 ? 마지막 날을 위해 남겨두겠다. 그럼 내일도!! 파이팅. 아듀 ~ 🤸🏻