[데브코스 FE] 1주차 네번째 수업 2024/07/19

4번째 수업에서는 클론코딩으로 웹퍼블리싱해보는 수업위주였다.

 

사실 클론코딩으로 html css js 따라하기는 쉽고 기초적인거아니야? 했는데

 막상 따라해보니 디테일한 것을 살리더라도 전체 레이아웃에서 틀어지면 다 뜯어고쳐야했기 때문에

전체 레이아웃을 올바르게 짜는 것과, 효율적으로 코드를 활용하는 방법등을 많이 배웠던 것 같다.

 

이번에도 4번째 수업때 새로배운 내용들을 

따로 정리해보고자 한다.

 

---

학습내용

1. 홈페이지 기본 뼈대 구성 (with 풀무원투오 홈페이지)
2. 텍스트 수직 정중앙 시키기
3. 기타 꿀팁들(html,css,js)
4. 수업 때 질문들 Q&A

---

1. 홈페이지 기본 뼈대 구성 with 풀무원투오 홈페이지

https://2o.pulmuone.com/main/main.php

실습시간에 '풀무원투오' 라는 홈페이지를 하나 가지고와서(광고ㄴㄴ)

메인페이지를 클론코딩 해보는 실습을 진행하였다.

 

내가 지금까지 여러 홈페이지를 접속하고 클론코딩 해보면서(독학),

궁금함을 느꼈던 점이나 트러블슈팅이 몇가지가 있었다.

 

1. 이미지나 아이콘을 어떻게 첨부하는것이 일반적인가?

2. 루트 스타일은 어떻게 작성하는 것이 일반적인가?

 

오늘 수업에서 이 두가지 질문에 대한 해답을 얻었다.

 

1. 이미지나 아이콘을 어떻게 첨부하는것이 일반적인가?

 

이 예시를 보면,

소메뉴 오른쪽 위에 파란색 동그라미 아이콘이 붙어있다.

 

예전의 나라면, 이 아이콘을 위한 <div>나 <svg>를 따로 만들어서 html에 작성하고

css를 이용해서 position을 조정했을것이다.

 

하지만 이런 아이콘은 뼈대 구성(html)에는 도움이 되지 않는다.

즉, html코드로 작성해버리면 코드만 길어지고 영양가가 없다는 것이다.

결국 가독성 저하를 초래할 것이다.

 

이럴때 사용하는 것이 바로 가상요소이다!

css의 가상요소로 아이콘을 처리해주면,  기본 뼈대를 분석하거나 파악할때 훨씬 쉽고

유지보수도 용이할 것이다.

 

2. 루트 스타일은 어떻게 작성하는 것이 일반적인가?

 

루트스타일은 css 파일 상단에 명시해주는 것이 일반적이다.(가독성)

 

css를 작업하다보면, 자주쓰는 색깔이나 사이즈 등이 생기기 마련이다.

폰트사이즈가 16px인데 여러번 적용될때마다 각 태그에 여러번 적용했었던 과거의 나....

이렇게 적용하면 가독성도 떨어질뿐더러 유지보수도 힘들어지고 파일 크기가 늘어난다.

 

자주쓰이는 스타일은 루트에서 변수로 관리해준다!!

:root {
  font-size: 16px;
  /* 변수처럼 활용가능 */
  --gap1: 4px;
  --gap5: 64px;
  --p-color1: #50a4e5;
  --mw: 1400px;
}

 

추후, 필요할때 var(font-size) 처럼 값으로 대체할 수 있다.

 

또한, 헤더 영역처럼

일정 너비 이상 늘어나는 것을 원치 않을때는 max-width를 설정해준다.

그리고 각 영역(section)마다 양쪽에 최소한의 간격을 주고 싶다면

width 100% 에서 양쪽 마진값을 빼고

margin: auto를 적용하면 된다.

:root {
  --gap5: 64px;
  --mw: 1400px;
}

.mw {
  max-width: var(--mw);
  width: calc(100% - var(--gap5));
  margin: auto;
}

 

 

이렇게 양 옆 최소 간격을 설정할 수 있다.

 

2. 텍스트 수직 정중앙 시키기

텍스트 수직정렬은 align-items 를 사용해준다.

 

지금까지의 나는... 

텍스트를 박스 안에서 수직 정렬시킬때

줄간격을 담당하는 'line-height' 를 많이 애용했었다. 

박스 높이가 80px일때 line-height도 80px로 주면

수직 정렬된 것 처럼 보이기 때문이다.

 

하지만 line-height를 사용하여 텍스트 수직 정중앙 시키는 방법은 피하는 것이 좋다.

높이가 확정되면 가능한 방법이지만, 높이가 유동적일때 유지보수하기 힘들기 때문이다.

 

따라서 flex상태가 박스에 적용된 상태라면,

메인 축이 가로(rows)일때 수직 축인 세로(column) 정렬은

align-items 를 사용해준다!

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

 

3. 기타 꿀팁들(html,css,js)

transition이 적용이 안될때?

 

transition을 적용했는데 안될경우에는

다음의 상태에서 사용한 것은 아닌지 확인해보자.

 

• display : block ↔ none
• height: xx px ↔ auto

요소가 있다가 생기거나, 아니면 없다가 생기거나, 

변하는 너비나 높이에 auto가 포함될때

transition은 적용이 되지 않는다.

 

첨부한 비디오<video>의 autoplay가 적용되지 않을 때?

 

결론부터 얘기하자면

<video> 태그에 autoplay를 사용할때, 반드시 muted 와 함께써야한다.

 

보통 <video> 태그를 이용하여 비디오를 첨부해준다.

이때, autoplay라는 속성을 태그에 같이 작성해주면 자동재생이 된다.

 

여기까지만 읽으면 <video src="../.mp4"  autoplay > 처럼

autoplay만 추가하면 되는거아니야? 라고 생각하게 되고,

이렇게 작성하면 자동재생이 되지 않는다.(과거의 나)

 

muted를 꼭 명시해줘야 하는 이유는,

자동으로 재생되는 비디오는 사용자에게 예상치 못한 소음을 발생시킬 수 있기 때문이다.

따라서 브라우저 정책에 의해 

비디오 자동재생기능을 사용하려면 다음과 같이 사용한다.

<video src="../.mp4" autoplay muted>

 

4. 수업때 Q&A 

Q: png(jpg)나 svg를 각각 사용하는 특별한 경우가 있나요? 어느것을 더 많이 사용하나요?

A: 로고에 한해서, svg를 많이 사용합니다.(png나 jpg보다.) 깨짐 안정성이 svg가 더 우수하기 때문입니다.

Q: 높이가 변경되어도 가상요소 높이를 유지하는 법이 있나요?

A: 가운데로 위치시켜놓고(top:50%) , translateY로 세부 높이 조정합니다.

position: absolute;
top: 50%;
transform: translateY(-20px); /* 수직 비율 유지*/

---

지난 일주일이 정말 빠르게 지나갔다고 느낄만큼

프론트엔드 데브코스에서의 저번 1주일 수업들은 기본적인 것들이었지만 정말 유익했었다.

그만큼 내가 놓친 기본적인 부분들이 많았다고 해석이 된다.

앞으로도 강사님 말씀의 흐름을 최대한 따라가되 하나하나 놓치지 말고

잘 새겨듣고 내것으로 만들어야 겠다.

 

실제로 풀무원투오 홈페이지 클론코딩하면서

강사님이 말씀해주신 부분을 적용해서 해보니(조그만 아이콘 적용시 가상요소 활용 등)

내가 지금까지 겪었던 트러블들이 해결되는 것에 희열을 느꼈다.

 

그리고 같은 수업의 다른 학생분들의 수준높은 코드나 질문들을 보면서,

나도 자극이 되고 더 열심히 같은 수준을 향해 달려가야 겠다는 생각이 들었다.

확실히 같이 프론트엔드 개발자를 지망하는 사람들끼리 모여있다보니

같은 고민과 같은 부분에서 어려워하는 것에 해결책을 같이 도모하는게 즐겁게 느껴진다.