경고
해당 클론 코딩은 HTML , CSS 를 배운지 2주일 밖에 되지 않은 인간이
유튜브도 참조하지 않고 챗 지피티와 함께 싸워가며 독학한 자료입니다.
부정확한 정보 및 비효율적인 방법이 많을 수 있으니 주의 바랍니다.
카카오 홈페이지
항상 코딩 관련된 것을 배울 때 듣는 말이
저어어어얼대 책 보고 공부하지말고 HTML , CSS 태그 하나 하나 달달 외워가며 공부하지 말라는 말을 귀에 못이 박히도록 들어왔다.
그래서 클론 코딩 해봐야지 ... 해봐야지 .. 하였지만 뭘 알아야 클론 코딩을 하든지 말든지 할 거 아닌가
그래서 2주간 무료 강의 호다닥 들어본 후 바로 클론 코딩을 도전해봤다.
이번에 클론 코딩 도전한 홈페이지는
카카오 홈페이지이다.
레이아웃 나누기
누군가가 클론 코딩을 강의하는 영상을 30분 정도 본 적이 있는데 레이아웃을 나눠놓고 하라고 하더라
그래서 레이아웃을 대애애애충 나눠봤다.
header
header 영역은 하나의 큰 div 태그 안에 KaKao , 소개 ~ 약속과 책임 , 아이콘 세 개가 들어있는 형태로 존재하였다.
오케이 그러면 div 태그 안에 KaKao 글자 넣고 nav 태그 안에 ul , li 태그 이용해서 소개 ~ 약속과 책임 넣고 그 다음에 아이콘 넣으면 되겠다고 생각했다.
어떻게 쟤네들을 저렇게 배치하는지도 모른채로 챗 지피티 멱살 몇 번 쥐고 흔들면 될 것 같았다.
main > h3
그 다음 !
header 다음부터는 main 영역이다.
main 영역 이후에는 현재 날짜 애니메이션과 텍스트가 들어있었다.
나는 사실 이것도 div 태그로 안에 넣으면 되겠다고 생각했는데
카카오 홈페이지를 뒤져보니까 h3 태그 안에다가 넣어놨더라
어차피 div 태그나 h3 태그나 둘 다 block 레벨 요소이니까 안에다가 차곡 차곡 태그들을 담는 것은 가능할 것 같기도 하고 ..
밑에 내용들을 소개하는 거니까 h3 태그를 사용했겠지 .. ?
지피티도 좋다고 한다. 오케이 고고
main > article
그 다음 main 태그 안에 article 영역이 있고 이 곳에서 두 가지 영역으로 나뉘어 소식들을 담아놨다.
저 영역 안에 엄청 큰 div 태그를 넣어 놓고, 그 안에 중간 사이즈의 div 태그 들로 좌, 우 나누고, 또 그 안에서 컨텐츠에 맞게 div 태그들을 무지 막지하게 넣어두면 될 것 같았다.
만들어보자 😶🌫️
header 만들기
코드를 영역 마다 넣어두려고 했는데 그러니까 너무 안이쁘다
그래서 매 번 올릴 때 마다 전체 코드는 맨 마지막에 두고 중요한 부분만 올릴려고 한다.
레이아웃 나누기
<header>
<div id="Wrap-Header">
<a id="Home-Href" href="#">KaKao</a>
<nav id="Header-Nav">
<ul>
<li>소개</li>
<li>이야기</li>
<li>뉴스</li>
<li>기술과 서비스</li>
<li>약속과 책임</li>
</ul>
</nav>
<div id="Header-Icon">
<div id="Search-Icon"></div>
<div id="Global-Icon"></div>
<div id="Darkmode-icon"></div>
</div>
</div>
</header>맨 처음 카카오 홈페이지의 header , main 모두 페이지 전체를 쓰는 것이 아니라 일부 60% 정도만 쓰더라
그래서 header 태그 안에 모든 내용을 담을 div 태그의 width 를 60% 로 설정해줬다.
그리고 높이는 대충 눈도장으로 60px 정도 ..
header 의 내용이 담길 #Wrap-Header 안에 KaKao 글자는 본 홈페이지로 갈 수 있게 하이퍼링크 형태로 담아주었고, 앞에서 말했던 nav 태그는 ul , li 태그로 담아주었다.
그리고 아이콘 세개를 배치 할 때 아이콘 세 개 모두를 담을 수 있는 중간 사이즈의 Header-Icon div 태그 안에 아이콘들을 담을 수 있게 div 태그 들을 넣어주었다.
원래는
button으로 되어 있어서 누르면 검색도 하고 다크모드도 되고 그러는건데
거까지 하려고 하면 머리 아플 거 같아서 일단은 이렇게 ... 다음 클론 코딩 때 해봐야겠다.
#Wrap-Header 영역 안에 다른 태그들을 담을 때 새로 알게되었던 사실은
1. box-sizing : border-box
레이아웃을 나눌 때 내가 아무리 div 의 width , height 를 지정해도 맘처럼 안됐다.
그래서 시작한지 10분도 안돼서 때려치고 싶었지만
사이즈를 지정 할 때 box-sizing 기준을 border-box 로 하냐 content-box 로 하냐에 따라 달랐다.
박스의 크기 기준을 border-box 로 하니 테두리를 기준으로 width , hegith 를 지정 할 수 있어서 내가 원하는 데로 레이아웃을 구현하는데 도움이 되었다.
2. display : flex
display 속성을 flex 로 두게 되면 display : flex 로 설정된 부모 태그는 flex 컨테이너 가 되고 그 안에 담기는 부모 태그들을 flex 아이템 이 된다.
그래서 안에 담기는 자식 태그들을 유동적으로 위치를 조정 할 수 있었다.
display : flex 로 한 후 allign-items : center 를 이용해 안에 담긴 부모 태그들을 중앙으로 정렬 시켜 줄 수 있었고
justify-content : space-between 을 이용해서 안에 담긴 자식 태그들이 부모 태그의 시작과 끝 부분부터 적절~하게 배치되게 할 수 있었다.
아이콘 담기
/* 아이콘 이미지 지정 */
#Search-Icon {
background-image: url(asset/search_icon.png);
background-size: cover;
}
#Global-Icon {
background-image: url(asset/earth_icon.png);
background-size: cover;
}
#Darkmode-icon {
background-image: url(asset/darkmode_icon.png);
background-size: cover;
}그리고 버튼으로 안만들고 그냥 아이콘 이미지로 대체했다.
키킥
때마침 오늘 오전에 div 태그의 background-image 사용법을 배운 직후라 더 써보고 싶기도 했다.
폰트 설정
그런데 폰트가 안맞으니 아무리 해도 간지가 안살았다.
그래서 카카오 폰트를 호다닥 다운 받아서 설정해주었다.
@font-face {
font-family: 'KaKaoFont';
src: url(asset/KakaoOTFRegular.otf);
}
body {
font-family: 'KaKaoFont', sans-serif;
height: 4090px;
}다운 받은 카카오 폰트를 폴더에 담아준 후 @font-face 를 이용해서 모든 body 태그 안에 존재하는 폰트들에 폰트를 지정해주었다.
nav > ul , li 설정
#Wrap-Header #Header-Nav ul {
display: flex;
list-style: none;
margin: 10px;
}
#Wrap-Header #Header-Nav ul li {
margin: 0px 15px;
padding: 0px;
font-size: 15px;
font-weight: bold;
}헤더 부분 리스트 형태로 네비게이터가 존재하니 네비게이터를 만들어주었다.
사실 li 태그는 블록 레벨 요소이기 때문에 한 줄씩 줄 바꿈 되면서 쌓이게 되지만
li 태그의 부모태그인 ul 태그의 display : flex 로 해줘서 가로로 쌓일 수 있게 해주었다.
나중에 날 잡고 display 에 대해서 공부 해봐야지 ..
그 다음 list-style 을 none으로 해줘서 보기 싫은 땡땡이를 제거해주고
카카오 홈페이지랑 비슷하게 대충 마진, 패딩, 폰트 사이즈 등을 조절해주었다.
결과물
폰트만 바꿔도 느낌 나는 거 같다
킥
야호
H3 만들기 😶🌫️
만들려고 하는건 요녀석이다.
요런 느낌으로 레이아웃을 나누려고 했고, 실제로도 나뉘어져 있었다.
사실 이걸 만들 때는 처음이라서 카카오 홈페이지의 개발자 도구를 거의 베껴가면서 만들었다.
옆의 달력은 사실 img태그로 달력이 붙어있는게 아니라 span::before 이런걸 이용해서 했는데 고급 CSS 선택자는 아직 안배웠으니까 그냥 무식하게 img 붙여버리자
조금 특이하다고 느꼈던 것은
11월 28일에 전하는 과 카카오 소식입니다 가 한 줄의 span 태그가 아니라 따로 따로 개별적인 span 태그로 되어 있었다.
그건 아마도 날짜에 맞춰서 바뀔 수 있도록 뭔가를 하기 위함이였겠구나 싶다.
span태그는 인라인 레벨 요소이기 때문에 줄바꿈이 안되지만span태그의display요소를inline-block을 이용해서 마치 블록 레벨 요소처럼 차곡 차곡 쌓이게 만들었다.
html
<h3 class="Article-Title">
<img class = 'Date-Img' src="asset/date-icon.png" alt="" / >
<span class="Text">
<span class="Title-Date"
><strong>11월 28일에 전하는</strong></span
>
<span class="Title-Text"><strong>카카오 소식입니다</strong></span>
</span>
</h3>CSS
/* Article-Title */
.Article-Title {
border: 1px solid green;
display: flex;
position: relative;
height: 3%;
margin-bottom: 0px;
margin-top: 5%;
}
.Article-Title .Text {
border: 1px solid red;
font-weight: 700;
font-size: 35px;
line-height: 66px;
letter-spacing: -1;
margin-left: 1%;
flex: 1;
}
.Article-Title .Text span {
display: block;
}결과물
키킥 ...
나름 구색은 맞춘 것 같아요 ...
키키킥...
Main content 레이아웃 나누기😶🌫️
카카오 홈페이지를 보면 header 밑에 main-content 영역 안에 글들이 존재하고
그 안에 content-home 이라는 클래스로 div 태그가 존재한다.
그리고 그 안에는 wrap-item 이란 태그로 영역이 크게 나뉘어져 있고
그 안에는 item-card 라는 div 태그로 나뉘어져있다.
고대로 따라서 레이아웃을 나눠보자
html
<main class="Doc-Main">
<div class="Main-Content">
<article class="Content-Article">
<h3 class="Article-Title">
<img class = 'Date-Img' src="asset/date-icon.png" alt="" / >
<span class="Text">
<span class="Title-Date"
><strong>11월 28일에 전하는</strong></span
>
<span class="Title-Text"><strong>카카오 소식입니다</strong></span>
</span>
</h3>
<div class="Content-Home">
<div class="Section-Home_1">
<div id= 'Section1-Sub1'>
<div class="Inner-Item">카카오 이모티콘 어쩌구</div>
<div class="Inner-Item">카카오와 단골 어쩌구</div>
</div>
<div id= 'Section1-Sub2'>
<div class="Inner-Wrap">
<div class="Inner-Item">A</div>
<div class="Inner-Item">B</div>
<div class="Inner-Item">C</div>
<div class="Inner-Item">D</div>
<div class="Inner-Item">E</div>
<div class="Inner-Item">F</div>
</div>
</div>
</div>
<div id="Section-Wallpaper"></div>
<div id="Section-SNS"></div>
<div id="Section-Home_2"></div>
</article>
</div>
</main>슉슈슉
사실 나는 class 와 id 의 차이를 잘 못느끼겠어서 그냥 한 번 쓰일 거 같은놈은 id , 여러 번 쓰일거 같은 놈은 class 로 만들었다.
클론 코딩 하면서 괜히 실제 홈페이지와 똑같은 클래스명을 쓰는건 쓸데없이 자존심이 상해서 내 마음데로 바꿔서 만들었다.
css
/* Content Main */
.Content-Home {
width: 100%;
height: 95%;
margin-top: 5%;
border: 1px solid cyan;
background-color: cyan;
}
/* Section-Home_1 */
.Content-Home .Section-Home_1 {
width: 100%;
height: 30%;
padding: 0%;
box-sizing: border-box;
display: flex;
}
#Section1-Sub1,
#Section1-Sub2 {
width: 50%;
}
/* Section1-Sub1 */
#Section1-Sub1 {
background-color: red;
justify-content: space-between;
height: 100%;
}
#Section1-Sub1 .Inner-Item {
background-color: azure;
height: 45%;
width: 90%;
margin: 5%;
box-sizing: border-box;
align-items: center;
}
/* Section1-Sub2 */
#Section1-Sub2 {
background-color: purple;
justify-content: center;
align-items: center;
}
#Section1-Sub2 .Inner-Wrap {
height: 70%; /* 부모인 #Section1-Sub2에 높이를 70%로 설정 */
margin: 5% 5% 0% 0%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 1fr 1.5fr;
gap: 10px;
}
#Section1-Sub2 .Inner-Item {
width: 100%; /* Inner-Item이 부모인 .Inner-Wrap의 너비를 100% 차지하도록 설정 */
height: 100%; /* Inner-Item이 부모인 .Inner-Wrap의 높이를 100% 차지하도록 설정 */
background-color: azure;
box-sizing: border-box;
margin: 5%;
display: flex;
align-items: center;
justify-content: center;
}
/* Section-Wallpaper */
#Section-Wallpaper {
height: 15%;
background-color: darksalmon;
}
/* Section-SNS */
#Section-SNS {
height: 5%;
background-color: deeppink;
}
/* Section-Home_2 */
#Section-Home_2 {
height: 40%;
background-color: darkseagreen;
}결과물
Section1-Sub2 같은 경우엔 거의 챗 지피티 목 졸라서 알아낸 코드다.
크게 레이아웃만 div 태그를 이용해서 나눠주었다.
왼쪽 레이아웃 같은 경우엔 그냥 div 태그들만 나열하고 margin 만 설정해주면 대충 레이아웃은 나뉘어졌는데
오른쪽 레이아웃은 행과 열을 이용해서 레이아웃을 나눠야 했다.
그래서 챗 지피티 목 조르고 며칠 전 유튜브에서 슬쩍 봤던 grid 속성을 이용해서 나눠주었다.
grid , flex 부분은 다음 클론 코딩 전 공부해서 정리 한 후 포스트 해야겠다.
1일차 결과물
레이아웃만 나눠놓아도 거의 반절은 끝내놓은 듯한 착각이 든다.
사실 그냥 레이아웃만 나눠놓고 폰트만 바꿧을 뿐인데말이다.
카카오 홈페이지는 반응형이라서 확대하고, 축소하는 것에 따라서 레이아웃이 슉 슉 바뀌는데
내꺼는 고정되어서 무슨 구운 치즈 늘리는 것처럼 주우우욱 늘어난다.
이건 나중에 n번째 클론 코딩 때 반응형 웹을 배운 다음에 해봐야겠다.
첫 술에 배 부를 수는 없으니까 ~!~!~~!~!~!
