벌써 한 달이 지나갔다니 ...
코딩 독학 1년차, 혼자서 공부하는 것에 한계를 느낀 저는 함께 공부하는 환경이 필요하다고 느꼈습니다.
그래서 처음으로 부트캠프 학원에 지원하여 합격 통보를 받고 패스트 캠퍼스 FE 부트캠프 7기의 수강생이 되었습니다 !
11월 6일, 과정이 시작하여 현재까지 깃, 깃허브, HTML, CSS를 배웠고 JavaScript 학습 중에 있습니다.
독학한 1년의 시간은 그렇게 짧지 않은 기간이므로 대부분이 아는 내용이긴 했지만, 제가 혼자서 학습하는데 놓친 부분이 있을 수도 있다는 생각에 최대한 꼼꼼히 강의를 들었고, 블로그에 학습내용을 기록하기도 했습니다.
얼마전에는 HTML과 CSS를 사용한 웹사이트 클론 과제를 수행하고 발표회를 진행하였습니다.
라이브러리나 프레임워크없이 단순히 HTML과 CSS만을 사용하여 웹사이트 구조를 만드는 경험은 처음이었는데 이 기술만으로도 충분히 레이아웃 구조를 짤 수 있구나 하는 생각이 들었고, 구현하고 싶었던 토글 사이드바 메뉴 열기를 강의를 통해 아이디어를 얻어 구현해보았습니다. 혼자서 공부할 때는 여러 기술들을 적용하면서 웹사이트를 만들어 보았는데 그렇기 때문에 지식들의 공백이 마치 스펀지처럼 많았습니다. 하지만 부트캠프를 통해 기초부터 탄탄히 다시 공부하여 빈 공백들을 채워 넣어 단단한 벽돌처럼 만들고자 합니다. 이 번 한달이 그렇게 할 수 있다는 확신을 가지게 해준 한 달이라고 생각합니다.
발표회를 진행할 때 저는 제가 클론한 웹사이트에 대해 전부 알고 있었기 때문에 발표회를 딱히 준비하지 않아도 될 것이라 생각했습니다. 하지만 막상 발표를 하고나니 설명할 내용의 70% 정도밖에 설명하지 못했다는 것을 깨달았습니다. 그래서 발표회가 끝난 후 느낀점은 항상 자만하지 말고, 누군가에게 무언가를 설명해야할 때는 내가 그 내용을 100% 숙지하고 있어야한다는 것입니다. 앞으로도 프로젝트를 발표할 일이 많을 텐데 프로젝트의 리드미도 열심히 작성하며 그것을 바탕으로 발표준비도 철저히 할 것입니다.
아래는 저의 첫 번째 과제의 리드미를 공유하도록 하겠습니다.
💁♂️ CSS WINNER 클론 웹사이트 CSS MASTER
저는 실시간 강의때 학습한 flex와 grid를 활용하여 복습하기에 용이한 웹사이트를 찾던 도중
CSS WINNER라는 해외 웹사이트를 찾게 되었습니다.
웹사이트가 구조적으로 많이 복잡한 형태는 아니지만 사소한 디테일까지 클론하려면 학습적인 측면에서
꽤나 많은 도움이 될 것 같아 해당 웹사이트로 선정하게 되었습니다.
➕ 다 만들고 나니 웹사이트가 좀 밋밋한 감이 있어서 반응형 레이아웃 디자인과 JavaScript를 추가하여 검색 모션, 사이드바 메뉴 모션을 추가하였습니다.
😃 웹사이트 프리뷰
👉 헤더부분 약간의 디테일
헤더부분을 자세히 보시면 윗부분에 얇은 줄이 있는 것을 확인할 수 있습니다.
헤더는 스크롤을 이동했을 때 상단 고정을 위해 position: fixed를 사용하였습니다.
좌측의 네비게이션 메뉴들에 커서를 올려보면 하단에 white색상의 border가 적용되어있는 것을 확인할 수 있습니다.
👉 hover시 이미지
메인컨텐츠 가장 상단에 있는 이미지에 커서를 올렸을 때의 디자인 변화입니다.
커버가 씌워지고 이미지가 살짝 확대되며, 중앙에 이미지에 관한 정보와 날짜 정보가 나오게 됩니다.
메인컨텐츠의 상단 이미지를 제외한 나머지 이미지의 호버효과입니다.
마찬가지로 커버가 씌워지고, 우측 상단에 공유버튼이 보입니다.
👉 FOOTER
마지막으로 footer입니다.
footer의 위쪽부분에는 ABOUNT US, CONTACT US 등 링크로 연결되는 리스트들이 있는데 이 요소들 사이에는 •이 있습니다. 이 점들은 가상 요소 선택자 after를 사용했고 마지막 요소의 점은 가상 클래스 선택자인 last-child를 사용하여 display: none속성을 부여하여 화면에 출력되지 않도록 했습니다.
💡 참고용 코드
✨ 반응형 레이아웃 디자인
@media (max-width: 1550px) {
header .head__main .__right .submit {
width: 160px;
transition: 0.5s;
}
.award .info .__top .date {
width: 160px;
height: 160px;
transition: 0.5s;
}
.award .info .__top .like {
top: 160px;
width: 160px;
transition: 0.5s;
}
}
@media (max-width: 1350px) {
header .head__main .__left .nav .nav-item:first-child {
display: none;
}
.award .info .__top .date {
width: 120px;
height: 120px;
transition: 0.5s;
}
.award .info .__top .like {
top: 120px;
width: 120px;
transition: 0.5s;
}
}
@media (max-width: 1250px) {
.award .info .__top .date {
display: none;
}
.award .info .__top .like {
top: 10px;
width: 80px;
transition: 0.5s;
}
.award .info .__top .score .item div {
width: 60%;
transition: 0.5s;
}
.wrapper.__profiles .item:nth-child(4) {
display: none;
}
}
@media (max-width: 1180px) {
header .head__main {
width: 100%;
transition: 0.3s;
}
header .head__main .__left .nav .nav-item {
display: none;
}
header .head__main .__right .submit {
display: none;
}
header .head__main .__right .menubar {
display: block;
}
.award {
flex-direction: column;
transition: 0.5s;
}
.award .screen {
width: 100%;
}
.award .info {
width: 100%;
padding-left: 0;
margin: 0 auto;
}
.award .info .__top .date {
width: 200px;
height: 200px;
transition: 0.5s;
display: flex;
}
.award .info .__top .like {
top: 200px;
width: 200px;
transition: 0.5s;
}
.award .info .__top .score {
padding: 25px 20px 0 20px;
}
.award .info .__mid {
padding-left: 20px;
padding-right: 20px;
}
.award .info .__bottom {
padding-left: 20px;
padding-right: 20px;
}
.award .info .__top .score .item div {
width: 40%;
transition: 0.5s;
}
}
@media (max-width: 900px) {
.wrapper.__profiles .item:nth-child(3) {
display: none;
}
.wrapper {
flex-direction: column;
padding-top: 80px;
gap: 80px;
}
.wrapper.__profiles {
flex-direction: row;
gap: 10px;
}
.footer-top .nav ul li::after {
content: "•";
padding: 0 12px;
}
}
@media (max-width: 700px) {
.footer-top .nav ul li::after {
content: "•";
padding: 0 4px;
}
.footer-top .nav ul li {
font-size: 14px;
}
}
@media (max-width: 600px) {
header .head__main .__right .social a:last-child {
display: none;
}
.award .info .__top .date {
position: static;
width: 100%;
height: 120px;
}
.award .info .__top .like {
top: 120px;
width: 100%;
left: 0;
}
.award .info .__top .score {
margin-top: 60px;
}
.award .info .__top .score .item div {
width: 100%;
transition: 0.5s;
}
.award .info .__bottom {
display: block;
}
.award .info .__bottom img {
width: 100%;
}
.award .info .__bottom .credit {
padding-top: 20px;
text-align: center;
margin: 0 auto;
}
}
@media (max-width: 490px) {
header .head__main .__right .social {
display: none;
}
header .head__main .__right .search {
width: 60px;
height: 80px;
border: none;
}
}저는 가로너비에 따른 웹사이트의 레이아웃 구조에 변화를 주어보았습니다.
scss나 sass를 사용하지 않아 조금은 복잡한 구조입니다. 추후에 수정할 계획입니다.
미디어 쿼리를 사용하여 1550px, 1350px, 1250px, 1180px, 900px, 700px, 600px 490px 으로 각 가로너비 구간을 나누어 보았습니다.
(구간을 잘게 나눌 수록 여러 기기들의 사용에 효과적일 것이라 생각했습니다.)
1550px
1350px
1250px
1180px
900px
700px
600px
490px
💡 반응형 레이아웃 디자인 시 참고할만한 css코드
웹사이트에는 이미지가 많이 사용되는데 가로너비를 줄이거나 늘렸을 때 이미지의 가로너비를 100%로 설정했다면 가로너비는 화면의 가로너비에 맞추어 비율이 잘 조정됩니다. 하지만 세로너비는 비율이 조정되지 않기 때문에 곤란한 상황이 발생합니다.
다음의 코드를 사용하면 가로와 세로의 비율을 조절할 수 있습니다.
- html
<div class="image-wrapper">
<img class="image" />
</div>- css
.image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.26%;
overflow: hidden;
}
.image-wrapper .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}위와 같은 코드를 작성하면 이미지의 가로 세로 비율을 16:9로 맞출 수 있습니다.
2:1 ➡️ padding-top: 50%
1:2 ➡️ padding-top: 200%
4:3 ➡️ padding-top: 75%
16:9 ➡️ padding-top: 56.25%
✨ JavaScript
저는 검색버튼 클릭 시 웹사이트 상단에 검색 섹션이 생기는 것과 반응형 디자인으로 생긴 햄버거 아이콘 클릭 시 사이드 메뉴바가 나타나도록 구현하기 위해 JavaScript를 사용하였습니다.
🔍 검색 섹션
👀 사이드바 메뉴
📝 과제 회고록
flex와 grid를 많이 써보는 웹사이트를 선정했어야 했는데, 타 수강생분들의 결과물들을 보니 클론할 웹사이트의 선정이 조금은 잘못되지 않았나 하는 생각이 들었습니다. 하지만 처음으로 구현해보는 클릭 시 나오는 사이드 메뉴바나 검색 모션 기능은 학습에 많은 도움이 되었다고 생각합니다.
다음 과제때는 좀 더 복잡하고 많은 기능들을 담을 수 있는 프로젝트를 구성해서 멋지게 발표하고 싶습니다 😁
발표도 멋지게 잘하셨다고 생각했습니다! 앞으로도 화이팅!