잠깐! 시작하기 전에
이 글은 wecode 사전 스터디에서 실제 공부하고, 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.
또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 원문의 포스팅들이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.
설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 조금은 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.
글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.
본문
안녕하십니까. 김동우입니다.
따배씨 이후 처음 적어보는 글인데, 어색하네요.
요즘 저는 wecode 23기 본수업에 들어가기 전, 사전 스터디를 시작하게 되었습니다.
1주차 커리큘럼은 HTML-CSS 관련 내용이라 다시 학습하고 있습니다.
분명 작년 11월 언저리에 했던 내용들인데, 이상하게 다시 구현하려니 막히는 부분들이 종종 있었습니다.
이번 글에서는 그러한 내용들을 조금 다뤄볼까 합니다.
1. HTML : anchor-id CSS : visibility로 modal 구현
anchor, a tag에 대해서 이전 프로젝트의 경우 크게 신경쓰지 않았던 것 같습니다.
적당히 원하는 주소로 연결해주는 도구정도로만 생각하고 있지 않았나 반성하게 되는 계기가 되었습니다.
또한, 이번 1주차에는 바닐라 없이 순수하게 HTML-CSS 만으로 페이지를 만들어볼 예정이었기에 modal을 구현하는 것이 쉽게 감이 오지 않았습니다.
이러한 제게 있어 anchor - id 조합은 새로운 방법이었습니다.
그럼 코드를 먼저 보여드리겠습니다.
- home.html
<div class="main-first__icon icon">
<a href="#modal1" class="icon__button">
<i class="fas fa-running"></i>
</a>
</div>
<div class="modal" id="modal1">
<a href="#close" class="modal__button">
<i class="fas fa-arrow-left"></i>
</a>
<div class="modal__title">
<span>시간이 남으면</span>
</div>
<div class="modal__desc">
<p>
대충 방에서 시간을 보내긴 합니다. <br />
아니면 그냥 등록만 해둔 헬스장 생각을 합니다.
<br />
운동은 당분간 멀리해야겠어요. <br />
재밌는 만화가 너무 많아요.
</p>
</div>
</div>- modal.css
.modal {
width: 45%;
height: 350px;
display: flex;
flex-direction: column;
position: absolute;
left: 50%;
top: 50%;
margin: -175px 0 0 -22.5%;
background-color: rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
border-radius: 20px;
z-index: 99;
visibility: hidden;
}
.modal__title {
font-size: 1.4rem;
width: 80%;
height: 50px;
margin-bottom: 25px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-radius: 10px;
}
.modal__desc {
width: 80%;
height: 150px;
line-height: 1.3rem;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-radius: 10px;
}
.modal__button {
background: none;
font-size: 2rem;
color: white;
border: none;
position: absolute;
z-index: 100;
top: 15px;
left: 15px;
}
#modal1:target {
visibility: visible;
}
이러한 방법으로 구현된 modal은 현재 아래 페이지에서 확인해보실 수 있습니다.
2. @import - link 둘의 차이
이전 11월에 HTML-CSS로 프로젝트 뼈대를 만들 때, 대부분 저는 main.css 파일에 모든 css file을 연결시켰습니다.
그런데 어김없이 구글을 돌아다니던 중, 대부분 @import 방식의 파일 링크는 성능저하의 결과를 낳는다는 의견이 있었습니다.
물론 코드의 양이 상당하고, 후에 동적으로 제어해야 할 요소들이 넘쳐나는 페이지에서 CSS 파일을 @import가 아닌 방식으로 관리하기는 쉽지 않을 것으로 생각됩니다.
당장 viewport 너비에 맞는 페이지의 css 파일들만 해도 4개 이상이 나오기 때문이죠. (phone, tablet, pc, etc.)
심지어 이번 프로젝트는 4K 모니터의 해상도인 2560px 의 너비까지 고려해서 만들었기 때문에 별거 없는 페이지에 CSS파일만 한가득이었습니다.
요소가 적고, 페이지 자체가 상당히 심플하다면 더욱 세밀하게 조정해야 하는 부분들이 생길 수 있다는 것을 깨닫게 해준 과제가 아니었나 싶습니다.
그럼에도 불구하고, 한 페이지에서 다루는 CSS 파일은 분명 한정되어 있습니다.
SPA-CSR 방식이더라도 CSS 파일이 HTML link tag로 연결되기 어려운 수준으로 많지 않으니까 이번에는 새로운 방법으로 CSS 파일을 추가해보기로 했습니다.
<head>
<link rel="shortcut icon" href="images/logo.png" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
<link
href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous"
/>
</head>head 부분에서는 문서 전체에 사용될 기본 서식, 외부 리소스 등에 해당하는 것들을 추가했습니다.
<body>
<link
rel="stylesheet"
href="css/components/header.css"
/>
<!-- header CSS load -->
<header>
</header>
<link rel="stylesheet" href="css/screen/screen.css" />
<!-- media query CSS load -->
<div class="mobile-container">
</div>
<link
rel="stylesheet"
href="css/components/modal.css"
/>
<!-- modal CSS load -->
<div class="container">
<link
rel="stylesheet"
href="css/components/intro.css"
/>
<!-- intro CSS load -->
<div class="side-block">
<div class="intro">
</div>
</div>
<div class="main-block">
<div class="main-items">
</div>
</div>
<div class="modal" id="modal1">
<a href="#close" class="modal__button">
<i class="fas fa-arrow-left"></i>
</a>
<div class="modal__title">
</div>
<div class="modal__desc">
</div>
</div>
</div>
<!-- container block end-->
</body>이런 식으로 HTML body 내부에서 해당 block의 CSS file을 로드할 수 있도록 추가했습니다.
이러한 방식은 head, body, 그 외 요소들이 병렬로 로딩되기 때문에 체감상 시간을 단축할 수 있습니다.
다만 이러한 방식의 경우 HTML 본문 유지보수에 상당히 불편할 수 있습니다.
또한 저는 실제 페이지 로딩 시간을 낮추는 데에 가장 중요한 것은 상대적으로 거대한 용량의 리소스의 최적화라고 생각합니다.
당장 자기소개 페이지에 사용된 이미지의 크기는 1.2mb에 해당하고, 이는 대한민국이 아닌 외국 인터넷 상황에 맞춰지지 않은 수준의 크기라고 볼 수 있습니다.
물론 모바일 화면에서는 전혀 다른 페이지를 볼 수 있도록 다시 설계해야 합니다.
그렇기 때문에 현재 자기소개 페이지의 경우 모바일 화면은 제공하지 않고 있습니다. (휴대폰 모델 대부분 제 소개를 볼 수 있는 화면은 나오지 않습니다.)
그럼에도 이번 프로젝트에서 이러한 방법을 시도한 것은 추후 있을 다양한 개발에서 사용할 수 있을법한 방법이 무엇이 있을지 고민해보는게 주요한 목표였기 때문입니다.
3. 마치며
물론 이외에도 복습과 검색을 통해 많은 것들을 다시금 떠올릴 수 있었습니다.
그러나 그 내용을 전부 포스팅하기에는 너무 기초적인 지식인데다, 지금 저의 자기소개 사이트의 코드나 파일 상태가 날것 그대로의 느낌을 뽐내고있어 작성해봐야 비웃음거리가 되겠네요. 😹😹
당연히 기본적인 내용에 대해 포스팅을 할 수 있으면 좋겠지만, 대부분의 HTML-CSS 지식은 MDN 등에 널려있는데다 국내에도 다양한 교육영상들이 많지 않은가 생각하고 있습니다.
오히려 기본지식의 경우 제가 작성하는 글보다 저의 선생님들의 영상이나 블로그 링크를 첨부하는 것이 가장 효율적이겠네요.
고로 이번 프로젝트에서 정말 새로 알게된 내용은 위 2가지가 전부라고 봐도 무방할 것 같습니다. 이전에도 했었는데 새롭게 느껴진 것을 제외하면요...🤘
앞으로 저의 고민거리는 어떻게 페이지를 더 최적화 할 수 있을 것인가에 쏠리지 않을까 생각합니다.
앞서 말했던 이미지의 최적화는 아마도 다음 포스팅이 되겠네요.
이번 글은 여기까지입니다. 감사합니다.
