과제
(구)세이프홈즈 랜딩페이지 반응형 퍼블리싱 - css, js 작성
이번 과제는 Figma를 보고 랜딩페이지를 반응형으로 만들라는 요구사항이었다
한 페이지를 만드는데 하루를 꼬박 다 썼다
하루에 두개 세개 그 이상의 페이지를 매끄럽게 만들기 위해서는 내가 지금 어렵거나 시간을 많이 들였던 부분을 정리하면 좋을것 같다
사안과 코드
screen reader only
페이지를 각 섹션별로 나누고, h2태그로 해당 구역의 의미를 가지는 태그를 삽입했다
그러기 위해서는 스크린에서는 보이지 않는 요소가 반드시 생기고, 웹 접근성을 고려해서 해당 태그를 숨기는 기법을 사용했다
.sr-only {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}위의 클래스를 태그에 지정해주면 화면에서는 보이지않고, 스크린 리더는 읽을 수 있도록 코드작성이 가능하다
이상한 가로 스크롤 생김(여백 생김)
라이브 서버를 구동하면서 화면을 체크하다보니 가로여백이 생겼다
바디의 마진이나 패딩은 리셋을 통해 아니라는걸 알았고 원인을 알 수 없지만, 바디의 너비를 100%로 고정하고 x축으로 넘치는 걸 막으면 임시방편으로 해결할 수 있다고 생각해서 적용해 보았다
body {
width: 100%;
overflow-x: hidden;
}어느정도 문제는 해결했지만, 가끔씩 여백이 생기는 경우가 발생했는데 새로고침 연타를 통해 해결아닌 해결을 할 수 있었다
디자인시안 분석하기
"무작정 키보드에 손 올리지 마시고 작성 해보세요"
강사님의 당부가 떠올라, 랜딩 페이지의 디자인을 분석해서 나름대로 정리해보고 css작성을 해보고자 했다
처음에는 웹 페이지 기준 각 섹션별로 통일된 스타일이 있는지 분석했다
분석해보니, 크게 4가지 구성이 보였다
레이아웃(flex, container), 폰트(사이즈, 굵기, 줄간격, 자간격), 버튼 정도는 스타일을 지정해두고, 해당 선택자를 html에서 클래스만 지정해주면 되겠다고 생각했다(마치 부트스트랩처럼)
그 다음으로는 스크린의 너비에 따른 통일된 변경사항이 있는지 분석했다
예를 들어 .txt-lg는 웹에서는 어떤 스타일, 태블릿에서는 어떤 스타일, 모바일에서는 어떤 스타일 이런 식으로 분석했다
위의 흐름대로 분석을 했더니, 통일된 스타일을 찾을 수 있었고 가끔씩 생기는 특이사항은 선택자로 잡아와서 수정해주면 되었다
container
.container {
width: 976px;
margin-inline: auto;
}
.container-lg {
width: 1084px;
margin-inline: auto;
}
@media (max-width: 1024px) {
.container {
width: 634px;
}
.container-lg {
width: 712px;
}
...
}컨테이너의 너비를 지정해주고 margin-inline: auto;로 중앙정렬을 해준 뒤, break-point별로 크기를 조정해주면 반응형으로 대응이 가능하다
font(weight, color, size, line-height, letter-spacing)
/* text size */
.txt-4xl {
font-size: 48px;
line-height: 57.6px;
letter-spacing: -1.8px;
}
@media (max-width: 1024px) {
.txt-4xl {
font-size: 32px;
line-height: 1.2em;
letter-spacing: -0.9;
}
...
}픽셀별로 분석해보면, 16, 18, 21, 24, 32, 48, 60픽셀을 가진 폰트들이 있었고 많다라고 느꼈지만 처음 세팅시간이 오래걸리지만 페이지가 많았다면 효율적일것이라고 생각했다(그런데 만약, 다른페이지에서는 통일되게 변화를 하지 않는다면 그건 끔찍하다)
break-point별로 변동되는 스타일을 분석해서 위와 같이 코드로 작성하면 반응형으로 대응할 수 있었다
btn
버튼은 크게 두가지 관점으로 봤다
크기와 버튼 색상
/* 버튼 */
.btn-sm {
padding: 8px 24px;
border-radius: 4px;
}
.btn-lg {
padding: 23px 27px;
border-radius: 8px;
}
.btn-mid {
padding: 21px 25px;
border-radius: 8px;
}
.btn-blue {
background-color: var(--blue-color);
color: #fff;
}
.btn-white {
background-color: #fff;
color: var(--blue-color);
}flex
레이아웃 흐름잡기에서 빠질 수 없는 flex를 미리 지정해주었다
* flex */
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-reverse {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-col-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}img의 너비 높이에 관하여
이미지는 너비와 높이의 비율이 중요한 요소이다
하지만 사진이 필요한 곳들은 천차만별이고, '카드'라고 예를 들었을 때 비율이 다른 사진이더라도 같은 사이즈의 공간에 끼워넣어야 할 순간이 생긴다
이럴 땐, 사이즈를 지정하고 object-fit속성을 이용하여 컨트롤해준다
cover로 해주면 비율을 맞춰서 확대?자르기?를 통해 맞춰준다
.card .img-card {
width: 100%;
height: 233px;
object-fit: cover;
border-radius: 8px;
}클래스의 지정에 관한 고찰
이제껏 텍스트, 버튼, 레이아웃(flex, container)를 분석해서 일반화를 시켰다
그러나 모든 구역에서 어느정도의 통일성만 있지 완벽히 동일할 수 없다
가령, 어떤 구역에서는 xl의 사이즈를 가지지만 line-height만 다를 수 있다
이럴 때는 불가피하게 해당 태그를 선택자로 잡아와서 조정해야만 한다
그런데 이때 .불어와야할컨테이너 .불러와야할태그 .txt-xl 이런 식으로 잡아오는 것은 의미적으로 맞지 않다고 생각했다
그래서 해당 태그가 가지는 의미로 가져오고 싶었고, 아래처럼 바꾸어 보았다
.불어와야할컨테이너 .불러와야할태그 .태그가가지는의미적특성
여기서 보통 특성을 가져올 때, tit, desc 정도로 잡았는데 이게 맞는지 의문이 들었다
그러나뎊스를 타고 들어오면서 잡아야 한다는 암묵적인 룰이 있다면 이는 문제가 없을것으로 보였다
풀어서 설명하자면,
섹션첫번째의 카드의 사이즈가라지인 태그의
line-height를 바꾸겠다
가 아니라,
섹션첫번째의 카드의 타이틀의
line-height를 바꾸겠다
로 바꾸면 의미도 들어맞고, 모듈(야매모듈)로 작성한 스타일도 쓸 수 있다고 생각해서 적용해 보았다
결과
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
