0. 들어가며
드디어 css를 처음으로 실습을 해보는 클론코딩을 진행하게 되었다.
클론코딩을 알려주는 강의를 따라갈까 하다가 개발바닥 유튜브의 멈춰!클론코딩 를 본 뒤로 맨 땅에 헤딩으로 클론코딩을 시작해야겠다 마음 먹게 되었다.
🚀 클론코딩의 목표
html 구조를 어떻게 짤 것이며, css의 효과는 어떻게 줄 것인지는 우선 배제하고,
내가 원하는 것을 원하는 곳에 배치할 수 있도록 스킬업하자!
🚀 아임웹?
아임웹이라는 서비스를 이전에 창업했을 때 사용해본 경험이 있어서 흥미를 갖고 있었고, 이번 클론코딩 프로젝트의 목적에 맞게 웹페이지 내 다양한 레이아웃을 가진 섹션들이 많았기 때문에 해당 페이지를 선택하게 되었다. 아래는 아임웹의 웹페이지 메인 섹션 예시
1. 세팅하기
1-1) reset css 적용
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"/>- reset css는 CDN의 파일을 이용했음
1-2) 파비콘 파일 적용
- 파비콘은 파비콘 제너레이터를 이용해서 기존의 이미지를 통해 작성했음.
- 파비콘의 파일이름은 favicon.ico로 작성하는 것을 추천하고, 루트 경로에 파비콘을 저장해놔야 브라우저가 인식하기 용이함.
1-3) google fonts 적용
<link rel="preconnect" href="https://fonts.google.com/share?selection.family=Nanum%20Gothic:wght@400;700"/> font-family: 'Nanum Gothic', sans-serif;- google fonts사이트에 들어가서 원하는 폰트 검색후 링크 복사 후 html에 적용하기
- css에서는 body 태그에 font-family 적용하기
2. 헤더 구성하기
🚀 기존 아임웹 웹페이지
🚀 내가 클로닝한 웹페이지
2-1) HTML 마크업
<header>
<div class="inner">
<ul class="menu">
<li>
<a href="/">
<div class="logo">
<img src="./images/newblue_imweb_og_logo.png" alt="imweb"/>
</div>
</a>
</li>
<li>
<span>주요기능</span>
<span class="material-icons-outlined">expand_more</span>
</li>
<li>템플릿</li>
<li>
고객사례
<span class="material-icons-outlined">expand_more</span>
</li>
<li>요금</li>
<li>디자이너찾기</li>
<li>
고객지원
<span class="material-icons-outlined">expand_more</span>
</li>
</ul>
<ul class="sub">
<li>
<span class="material-icons-outlined">public</span>
<span class="material-icons-outlined">expand_more</span>
</li>
<li>내 사이트</li>
<li>
<div class="box">로그인</div>
</li>
<li>
<div class="box">무료시작하기</div>
</li>
</ul>
</div>
</header>🚀 HTML 마크업
- inner class안에 menu,sub이라는 ul class 두 가지를 만들어서 flex를 이용해 space-around를 적용하면 되겠다고 생각했다.
🚀 개선이 필요한 사항
- 클래스명 수정
보통 상단바는 navbar로 클래스명을 짓는다. 내 html 마크업은 코드만 보면 무엇을 나타내는지 전혀 알 수가 없다.. navbar center와 navbar right 이런식으로 마크업 구조를 짜면 더 좋을듯!
- 텍스트에 span 태그 입히기
리스트에 따로 span 태그를 입히지 않고 텍스트를 작성했다. 현재는 정적인 사이트였지만, 여러 메뉴들이 존재하는 상단바를 만들 경우에는 클래스명을 지어줘야만 효과를 씌울 수 있기 때문에 이를 고려해야함
2-2) css스타일 적용
header {
background-color: #1a6dff;
width: 100%;
}
.inner {
display: flex;
justify-content: space-around;
width: 100%;
color: white;
position: relative;
}
.inner .logo img {
height: 75px;
}
.inner .menu {
display: flex;
align-items: center;
}
.inner .menu :nth-child(2) {
display: flex;
}
.inner .menu :nth-child(4) {
display: flex;
}
.inner .menu :nth-child(7) {
display: flex;
}
.inner .menu li {
padding:5px;
margin:5px;
}
.inner .sub {
display: flex;
height: auto;
width: auto;
align-items: center;
}
.inner .sub :nth-child(1) {
display: flex;
}
.inner .sub li{
padding: 5px;
margin: 5px;
}
.sub li:nth-child(3){
border: 1px solid white;
line-height: 10px;
}
.sub li:nth-child(4){
border: 1px solid white;
color: black;
background-color: white;
line-height: 10px;
}
.sub li .box {
padding: 2px 2px;
margin : 8px 8px;
height: 10px;
}🚀 selector
- 처음 하다보니 내가 고르고 싶은 걸 어떻게 고르지..ㅇㅅㅇ부터 막혔다. 난 분명 배웠는데 왜 선택이 안되는 것인가..하고 머리를 쥐어뜯고 있을 때
- 친절하신 매니저님께서 우선 css Diner를 먼저 해보라고 하셨다.
- 추가적으로 nth:child 개념을 처음 적용해봤다. 부모요소:nth-child(n)을 하면 n번째에 있는 요소를 선택하게 된다.
🚀 flex, justify-content, align-items 활용
- flex를 어떻게 사용할지 감이 안잡혀서 flexbox froggy의 도움을 받았다. 이 프로그램 덕분에 각 요소들을 내가 원하는 구성으로 배치하는 방법을 알게 되었다.
- 몇 번 적용하다보니, 생각보다 flex로 내가 원하는 구조를 만드는 것이 용이했다.
🚀 블록요소 안에 있는 인라인 요소(텍스트) 중앙정렬하기
- 위 처럼 블록요소 li안에 텍스트 인라인요소가 중앙정렬이 계속 안되어서 분명 부모요소에 align-items를 줘서 다른 자식요소들은 다 중앙정렬 되었는데 저것만 계속 아래에 있는 거다. nth-child로 선택해서 text-align으로도 해보고, height auto값을 주기도 해봤었는데..
- 알고보니 span에 height 값을 계속 마진,패딩 값보다 작게 주고 있어서 계속 아래에 있었다. 해당 높이와 똑같이 line-height를 주니까 중앙정렬이 되었다.
- 그런데 여기서 의문..아니 근데 블록요소 안에 있는 인라인 요소는 height값이 적용이 안되는 것이 맞지 않은가..? 심지어 패딩,마진 값도 적용이 되는데 왜 그러는지 아직 잘 모르겠다. 부모요소인 블록요소가 플렉스가 되면서 안에 있는 인라인 박스가 인라인-블록요소로 전환이 되는것인가..?(아무리 찾아봐도 나오지 않음)
3. Section_main_headline
🚀 기존 아임웹 웹페이지
🚀 내가 클로닝한 웹페이지
3-1) HTML 마크업
<div class="main1">
<div class="line1"></div>
<div class="descript">
<h2>
쉽지만 완벽하게,<br>
쇼핑몰은 아임웹
</h2>
<h5>온라인 비즈니스를 위한 모든 것 </h5>
</div>
<div class="line2"></div>
<div class="player">
<img src="./images/play_circle_FILL0_wght400_GRAD0_opsz48.png" alt="유튜브버튼"/>
</div>
</div>클래스명 설정
- 역시 클래스명은 잘못됐다. 특히 main 1,2,3 이런식으로 숫자로 나누는 것은 다시는 하지 말아야할 행동!..(처음이니까...하하..)
텍스트 띄어쓰기
- css로 텍스트에 공백을 주는 방법을 몰라서 html에서 로 띄어쓰기를 하면서 크기를 맞췄는데 딱 맞아서 사용했지만, 현실에서는 왠지 안 그럴 것 같다..
- 그래서 css로 텍스트 공백을 주는 방법을 찾아봤는데 띄어쓰기만 하는 것은 없는 것 같고 글자 간 공백 조정(letter-spacing), 단어 간 공백 조정(word-spacing), html 공백 표현 방식(white-space) 속성들이 있다.
비어있는 div 태그를 활용한 요소 위치잡기
- 반응형 페이지 느낌을 어떻게 낼 수 있을지 고민을 하다가 비어있는 div 태그를 만들어 공백을 유지했다. media query의 존재를 몰랐기에 고안한 방법이다.
3-2) CSS
.main1 {
width: 100%;
height: 800px;
background-color: #1a6dff;
background-image: url(https://vendor-cdn.imweb.me/images/main/newblue_main_top_bak.png?v1);
background-repeat: no-repeat;
background-position: center;
position: relative;
display: flex;
}
.main1 .descript {
color: white;
text-align: center;
margin-top:300px;
}
.main1 .descript h2{
font-size: 40px;
}
.main1 .descript h5{
font-size: 20px;
}
.main1 .line1 {
box-sizing: border-box;
width: 70%;
height: 800px;
}
.main1 .line2 {
width: 1%;
height: 800px;
}
.main1 .player{
position: absolute;
top:40%;
left:50%;
}
🚀 background
- background 컬러가 이미지 컬러와 같아서 배경 이미지가 작아도 커버가 되었는데, 만약 아닌 경우에는 어떻게 배경을 채울 수 있을지 모르겠다.
🚀 비어있는 블록요소로 요소 위치잡기
- margin, padding을 이용해 요소의 위치를 잡는 것을 지양하고자 비어있는 블록요소를 만들어서 flex를 통해 배치를 했는데, 이 부분에 대해서 피드백이 필요한데 자료를 서치해도 나오지 않는다. 이는 역시 media query를 통해서 해결하면 되는 건가.. 흠..
4. 나머지 main 페이지
4-1) Section_main_intro
🚀 기존 아임웹 웹페이지
🚀 내가 클로닝한 웹페이지
4-2) Section_main_desc
🚀 기존 아임웹 웹페이지
🚀 내가 클로닝한 웹페이지
4-3) Section_main_feature
🚀 기존 아임웹 웹페이지
🚀 내가 클로닝한 웹페이지
4-4) Section_main_feature
🚀 기존 아임웹 웹페이지
🚀 내가 클로닝한 웹페이지
5. 마무리하며
- 자세하게 리뷰를 하다가 이번 클론코딩이 사실 css 위치 잡는 것을 중심으로 했기 때문에.. 자세히 리뷰할 게 거의 없어서 작성하다가 지쳐 그만 작성하게 되었다.
- 다음 번 클론 코딩은 자바스크립트를 포함한 조금은 동적인 요소들을 추가하고, html 마크업과 css 사용법도 더 익힌 상태로 진행해야겠다
🚀 다음에 더 공부해올 것!
- HTML 시멘틱마크업 공부해오기
- CSS gird, media query 등 심화개념 공부해서 적용하기
- 자바스크립트 querySelector 활용을 통한 세부/로그인페이지 등 구성
프로그래밍으로 지속가능한 세상을 꿈꾸며