1DAY
- 과제 실습 (위니브 로그인 modal창 구현) 하며, 느낀점-
(1)semantic structure
에 heading 작성하기 → blind 처리할 것(2) refactoring 작업 (re-naming) 필요하다. → 마크업 작성 하면서 고민하면서 작성해야 시간을 줄일 듯.
(3) figma 그대로 가져오기만 하는게..? 맞는지.. 의문.
(4) 가상요소 쓰는 방법을 확실히 알아야 함
(5) 처음 마크업 하는 사람들은.... 마크업을 할 줄 모른다!
effect는 다 알아듣지만, 어디에 효과를 줘야하는지를 모르는 거다.... ! !
-개행에 관련하여-
- 금지: 문장 끝나지 않았는데,
<br>남발 - 권장:
<p></p><small><br>: mobile 에서는display:none;으로 지정해줘서 없애줘야 함.
→ 개행은 이유가 있다. 때에 따라서 strong 등등 을 사용
1. Disney plus code review
-
flex 로 전부 구성
-
ul class naming 이 grid 야,,, ㅎㅎ
-
이런 감성 문구도 넣어두고
-
한국계 - 외국계 페이지 code review 재밌겠다
-
footer는 다
<br>로 개행⭐️ 입사하고싶은 회사의 페이지 코드 리뷰하면 좋을 듯
2. Font 적용법
2-1. 눈누 font 적용 및 :root
- 눈누 noonnu : https://noonnu.cc/
a. font copy
b. :root로 해두면 쓸 때마다 간편!
<style>
@font-face {
font-family: 'EliceDigitalBaeum_Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/EliceDigitalBaeum_Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
:root {
--main-font: EliceDigitalBaeum_Bold;
}
p {
font-family: var(--main-font);
}
</style>
</head>
<body>
<p>L폰트 바꿨는데 이거 이뿌다 그치요?.</p>
</body>2-2. google font 적용법
a. 꼭 한글로 쳐보고 변경되는지 Check !
b. font size (400, 300, 200) set로 가져오는게 용량을 줄일 수 있다!
2-3. download file에서 적용 (local font)
폰트 변화 사이트에서 다른 타입으로도 넣을 수 있음
format에는 trutype(인쇄글꼴과 화면 글꼴 같음), eot(embeddedopentype, 익스플로러 8이하), woff(익스플로러 9이상) 등이 있음
→ 1-2개의 문구에만 사용할 경우 이미지로 만들어서 사용
2-4. 번외 (JavaScript font 최적화)
: 말그대로 font를 최적화 시키는 것
- 관련내용 정리 된 velog
3. Flex Remind
3-1. display: flex;
height가 생기면 높이만큼 쭉 stretch 됨
3-2. justify-content: center; or space-between
** space-evenly 는 ms에서 지원안함, 사용 x
3-3. flex-basis : flex 에서 차지해야 하는 공간
flex-grow : 전체 중 차지하는 비율
*flex-shirnk : 줄어드는 비중을 양보하겠어
4. Modular
4-1. holy grail layout
*mobile / desk/
-px 단위 잘 사용하지 않아.
-rem/em 뭣을 쓰는게 좋을까? 에 대한 reading list
: https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15
4-2. The real menu bar_ Tips
1) 왼쪽 오른쪽 사이 두고 간격 벌리기
margin-right: auto; 
2) mobile toggle button
: mobile size가 되면, list를 hamberger button안에 다 넣어서 필요한 것만 click해서 보여지도록!
(우측 상단 icon)
** icon 은 font-size로 조절
** icon 사용시 CDN 사용에 대해 주의깊게 생각해 볼 필요가 있다.
CDN을 많이 사용하면, page loading이 느려지고 CDN server가 마비되면 끝이니까.. ㅎㅎ
3) use display:none; (sub-item list 보이지 않다가 click시 나오게)
*/ sub-item이 보여져있게 하고 싶을 때는 display: block; */
display: none;
}여기에서
이렇게
4) 강제로 위치 조정, use order
: mobile size가 되었을 때 icon이 하단으로 떨어지게 되는데, 이를 강제로 order:1; 을 줌으로써 우측 상단으로 올라온다.
** screen reader 는 order가 적용되었다 해도 markup 순서대로 읽는다!
@media screen and (max-width: 800px) {
.icon {
display: block;
order: 1;
line-height: 35px;
font-size: 25px;
}
.item {
width: 100%;
order: 2;
text-align: center;
}
}5) mini- modal 창 구현
-- modal: URL 주소 그대로 사용하며, 뒷배경이 투명또는 약간의 색을 넣어서 흐릿하게 보이게 하는 것
-- pop-up: 완전 새로운 창
♦️ modal 창은 99% contents의 맨 뒤에 위치한다! (script 바로 위)
** 100%는 부모의 100% , 100vw, 100vh는 화면의 100
** fixed를 사용하면 100vh, 100vw / 100% 둘다 사용해도 다른게 없다!
