6월29일31일차 - 웹 코딩 가이드, 직접 웹 코딩3(건설)

전체 페이지를 구현하는데 slick에서 문제가 많이 생겼습니다.

화면 크기가 변하더라도 어느 정도 선에서 비슷하게 보이도록 구현하는데 완전 실패했습니다.

가운데로 이동한 슬라이드의 크기를 transform으로 크게 만들면 다음 슬라이드로 넘어갈 때 transition이 적용 안됩니다.

이를 해결하는 방법이 있는데, @keyframes나 js로 다음 슬라이드로 넘어가기 전에 일부러 크기를 원래대로 되돌리는 방법입니다.

하지만 이를 적용시키면 scale 된 객체에 화질저하가 발생합니다. 수를 쓴다면 "어느 정도" 개선은 가능하지만 근본적인 해결은 어려울 것 같습니다.

 

[220628 직접 시안을 짜고 시안에 따라 코딩해보기]  [ 220628 직접시안 html / css / js ]

---

main 배경으로 동영상을 넣었다면 동영상을 100vh로 다 보여주도록 해야합니다.

strong 강조하는 의미도 있으나, 굳이 넣는 이유를 말하자면 작업할 때 선택하기 편하도록 넣습니다.

 

h1 오직 하나만 존재합니다. 책의 제목입니다. h1 안에는 box를 넣지 않습니다.
h2 section의 제목입니다.
h3,h4,h5,h6 section안에서 생기는 소제목, 안의 소제목, 안의 소제목, 안의 소제목입니다.

 

footer 안에는 보통 section을 넣지 않습니다. footer 자체가 하나의 section입니다.
header 도 그 자체가 하나의 section입니다.

scrollbar 가 x축으로 생겼다면 wrap이나 body에 max-width를 주고 overflow hidden으로 보이지 않도록 하여 없앱니다.

input은 form에 넣습니다.

section의 공간이 화면에 꽉 차서 버튼이 너무 아래로 내려가 있다면 UX가 떨어집니다.

 

font 한글은 폰트가 작으면 뭉쳐 보여서 가독성이 떨어집니다.

border를 animation으로 없앨 때 박스 크기 변화로 흔들리는 효과가 생기기도 합니다. 이 흔들림을 없애기 위해서는 border를 없애는 것이 아니라, 색을 보이지 않도록 하면 됩니다.

iframe 동영상을 넣을 때는 동영상의 설명을 rabel 형태로 덧붙이는 것은 좋은 방법입니다.

font 사이즈가 너무 크지 않도록 합니다. 정해 놓은 폰트 사이즈를 준수합니다.

wrap에 1900px을 주어 브라우저 크기를 줄였을 때 scroll bar가 생기지 않도록 할 수 있습니다.

section이나 content에 번호를 전부 다 붙이는 것은 좋지 않습니다. 나중에 순서가 바뀔 것을 고려한다면 성질로 분류하여 이름을 정해줍니다.

design 처음부터 브라우저 크기를 줄였을 때 보이는 균형까지 신경써서 코딩하면 화면 크기에 따라서 어느 정도 시각적인 안정감을 확보할 수 있고, 반응형으로 만들기 유리합니다.

 

padding 간격은 보통 가장 바깥 box에 (100px)주는 것으로 사용하고, 그 안에서 간격을 주는 것은 margin-bottom으로만 조절합니다.

auto로 사이즈를 주어 코딩하는 습관을 들어야 곧바로 반응형으로도 만들 수 있습니다.

 

한글 font letter-space를 많이 하는 것은 좋지 않습니다. 그냥 모아서 쓰는게 이쁩니다. 영어는 상관 없습니다.