회고록 블로그
HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (6)_더보기 화면 완성 본문
이번에는 '더보기 화면'을 만들려고 한다.
큰 FLEX BOX 하나로 레이아웃을 만들고 그 안에 flex box를 또 하나 만들려고 한다.
그리고 위쪽에 있는 내 프로필은 <table> 태그 혹은 flex box로 구성해보려고 하는데, <table> 태그를 이런 경우에 써도 되는건가..?
일단 잘못된 구성의 코드일지라도 만든 후 생각해야겠다.
※ 멘토없이 초보자가 혼자 만드는 코드이므로, 효율적인 코드가 아닐 수 있음
(마치 float나 flex를 놔두고 <table>로 레이아웃을 만드는 것과 같은 비효율적인 코드일 수 있음 주의)
도구: Visual Studio Code
언어: HTML, CSS
서버: 없음 (클라이언트 사용)
그 외: 없음
네번째 페이지. 더보기 화면 (more_menu.html)
HTML 만들기 : <head> 영역
# 이제 html 문서는 뚝딱뚝딱 #
1. 다른 html 문서의 <head>와 유사한 내용들
<!DOCTYPE html>
<!-- Description: Kakao PC ver. Clone -->
<html lang="ko" data-dark="false">
<head>
<meta charset="utf-=8">
<title>KaKao Talk Menu (More)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="description" content="Kakao Talk Clone Menu (To see more details)">
<meta name="keywords" content="KakaoTalk, Clone, Menu">
<meta name="robotos" content="noindex, nofollow">
<link rel="stylesheet" href="CSS/main-layout.css">
<link rel="stylesheet" href="CSS/more_menu.css">
<link rel="stylesheet" href="CSS/general.css">
<link rel="stylesheet" href="fontello/css/animation.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
</head>
HTML 만들기 : <body> 영역
# 미리 생각해두었던 구상으로 만들자 #
1. 상단바, 사이드바, 하단 광고영역은 다른 html 문서와 동일하게 만들기
2. 프로필 영역 만들기
* <table> 태그로 만들어보려고 했지만 생각해보니 <table> 태그의 사용 목적은 "표" 형태로 정보를 분류? 보기 좋게 하는 것인데
이 상황에서의 사용은 적절하지 않은 것 같다. 그 이유는 아래와 같이 판단했기 때문이다.
* 결론적으로 <table> 태그가 아닌 <p> 와 <div>, <span> 태그를 이용하고 CSS에서 flex box를 사용하기로 했다.
※ 카카오톡 PC버전의 더보기 > 프로필 영역을 보면 이렇게 생겼다.
만약 테이블(표)로 구성을 한다면 한 셀에 '이름'과 '이메일 주소'가 함께 들어가게 될 것이다.
또한 뒤에 방패? 모양 아이콘도 '데이터'로 들어가게 될 것이다.
내가 알기로 '표'는 보통 서로 관련이 있는 데이터들을 어떤 기준으로 나누어서 보기 좋게 표현하거나 필터 등을 할 때 많이 쓰는 것으로 알고 있다.
e.g.) □□대학교 컴퓨터공학과 명단
| 이름 | 소속 | 학번 |
| 홍길동 | 컴퓨터공학 | 11000001 |
| 김철수 | 컴퓨터공학 | 11000002 |
그러나 위의 사진에 있는 '이름'+'이메일주소', 아이콘 등의 데이터는 '표에 들어갈 데이터'로 적절하지 않은 것 같다.
만약 <table> 태그를 굳이 써야한다면 그건 <table> 태그로 레이아웃을 만들기 위해 쓰는 목적이 더 클 것 같다.
하지만 개인적인 추측인데, HTML 문법에 <table> 태그가 있는데 굳이 굳이...
flex box나 grid를 만들어 놓은 이유는 <table> 태그를 이용해 레이아웃 구성하는 것을 지양하라는 의미라고 생각된다.
결론적으로 위의 부분은 <table> 태그가 아닌 flex box를 이용해서 만들기로 했다.
<div class="my-profile">
<p>김간장</p>
<p>test@test.com</p>
<p><i class="icon-shield"></i></p>
</div>
<div class="wallet">
<p>안전하고 간편한 지갑을 만들어 보세요.</p>
<p><i class="icon-plus"></i></p>
</div>
<div class="menu_icons">
<!-- 아이콘 나열 -->
<!-- 중략 -->
</div>
<div class="notice">
<p>Tips</p>
<p>광고창인 듯, 광고창 아닌, 광고창 같은 영역</p>
</div>위와 같이 div로 하나씩 나눠주고 그 안에 요소들을 넣었다.
CSS 만들기
# flex와 flex를 연속해서 만들어야 한다 #
1. 나의 프로필 영역 아래와 같이 위치 정리하기
* float를 이용해서 방패 모양을 right로 옮겨주려고 했는데 자꾸 실패했다.
내가 계획한 것은 위의 이름, 이메일 주소와 방패 모양이 서로 어울림+오른쪽 정렬 되는 것이었는데 오른쪽으로만 정렬이 되었다.
* 혹시 방패 모양이 font로 인식이 되어서 문제인 것인지 img를 가져와서 해봤는데 동일한 문제가 있었다.
아래 블로그에서는 잘 되는데 왜 나는 안되는지.. 그렇게 몇시간을 지지고 볶았다.
jun.hansung.ac.kr/CWP/css/CSS%20Float.html
CSS 위치잡기(Positioning)
CSS 배치 - float 와 clear CSS float는 다른 요소가 주위에 배치 할 수 있도록 주어진 요소를 왼쪽 또는 오른쪽으로 밀어 놓는 것을 말합니다. CSS float는 주로 이미지에 자주 사용되지만 레이아웃 작업
jun.hansung.ac.kr
* html 문서에서 '이름, 이메일주소' 보다 '방패 모양 아이콘'을 더 위로 올려주었다. 그랬더니 문제가 해결되었다.
* float: left, right 등으로 사진과 글을 어울리게 하려면 img를 먼저 적어야 하는구나..를 깨달았다.. (바보)
2. 나의 프로필 영역 : 수직 가운데 정렬 하기
* flex box의 속성 중 align-items를 이용하면 되지만 이 방법을 사용하지 않고 수직 가운데 정렬을 하기로 했다.
(언젠간 flex box를 사용하지 못하는 상황을 대비해서 연습 하기 위함)
* 아래 능력자님들의 글을 참고했다.
- position: absolute를 이용하면 '1'에서 이용한 float: right가 풀리는 것 같다. 그래서 absolute는 사용하지 않기로 했다.
- margin 값을 적절하게 주어서 정리하기로 했다..
컨텐츠 요소를 가운데 오게 하는 방법
반응형 사이트를 만들 때 제일 많이 쓰는 기법이 컨텐츠 요소를 정 가운데 오게 하는 방법입니다. 이 방법에는 여러가지 방법이 있으며 각각의 장단점이 있습니다. 컨텐츠 요소를 가운데 오게
coderap.tistory.com
HTML/CSS div 수직 가운데 정렬 (Vertical Align)
HTML에서 div 안에 div를 수직으로 가운데 정렬하는 방법에 대해서 알아볼까 해요. 수직 정렬은 까다로워서 거의 억지로 하는 것 같아요. 아래 html 태그는 실험 대상이에요. 이해를 돕기 위해 기본
gofnrk.tistory.com
완성했다.
3. 아이콘들 스타일 지정하기
* 카카오톡 PC버전에는 아래와 같은 아이콘이 있다.
* flex box로 레이아웃을 잡아서 만들고 있는데 문제가 생겼다.
구성이 정확하게 일치하지 않는다. 아래의 그림처럼 아이콘 간 일정 공간을 만들어서 비슷한 형태로는 만들수 있지만
카카오톡 PC버전처럼 마지막 아이콘을 거의 끝에 배치해놓는 건 불가능..
- flex box가 아닌 다른 것을 고민해봐야겠다.
- 시도해봤던 코드는 아래와 같다.
<!-- HTML -->
...
<div class="menu_icons">
<i class="icon-mail">메일</i>
<i class="icon-calendar-empty">캘린더</i>
<i class="icon-box">서랍</i>
<i class="icon-smile">이모티콘</i>
<i class="icon-television">카카오TV</i>
<i class="icon-gift">선물하기</i>
<i class="icon-book">스토리</i>
<i class="icon-equalizer">실험실</i>
<i class="icon-info-circled">정보</i>
<i class="icon-bullhorn">공지사항</i>
<i class="icon-help-circled">도움말</i>
<!-- i 태그는 fontello.css에 정의되어 있음 -->
</div>
.../* CSS */
.menu_icons{
/* flex box 하나 생성 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.menu_icons > *{
flex-basis: 25%;
/* 전체 공간을 기준으로 25%(1/4)씩 공간을 만들어줘서 한 줄에 4개 요소가 들어가도록 구성 */
flex-shrink: 0;
/* flex-basis보다 작아질 수 없도록 설정 */
}2021-03-26 1:32 현재 결과
아이콘들의 위치를 카카오톡 PC버전과 동일하게 만들지 못하는 문제를 해결하는 중인데, 이게 최선인 것 같다.
/* CSS */
.menu_icons{
/* flex box 하나 생성 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.menu_icons > *{
flex-basis: 25%;
/* 전체 공간을 기준으로 25%(1/4)씩 공간을 만들어줘서 한 줄에 4개 요소가 들어가도록 구성 */
flex-shrink: 0; /* flex-basis보다 작아질 수 없도록 설정 */
flex-grow: 1;
width: 70px; /* 임의로 요소의 너비값을 지정해줌 */
}
.menu_icons > span:nth-of-type(4n+4){
flex-basis: auto;
flex-grow: 0;
}※ 아이콘들의 기본 공간을 25%로 설정하고 flex-shrink를 통해 고정되도록 했다.
flex-grow를 이용해서 아이콘들 간의 일정 간격을 만들어 주었다.
단, 4n+4(즉 4번째, 8번째 아이콘을 의미함)의 아이콘만 flex-basis를 auto로 처리해서
요소(element)의 너비(width)값에 자동으로 맞춰지도록 했고
flex-grow를 0으로 지정해서 뒤에 남아있는 공간을 자동으로 채우지 못하도록 하였다.
그 결과는 이러하다.
"메일 아이콘 ~ 이모티콘 아이콘" , "카카오TV 아이콘 ~ 실험실 아이콘" 까지는 좋았다.
카카오톡 PC버전이랑 동일하게 만들었다.
문제는 그 밑에 4개가 되지 못한 아이콘들(정보, 공지사항, 도움말 아이콘)이다.
flex-grow: 1로 설정을 해버려서 이 아이콘들이 남아있는 공간을 1:1:1로 채우려고 위치를 알아서 조정해버린다. ㅠ
마지막 줄에 있는 이 아이콘들만 flex-grow: 0로 설정해주면 되는데
HTML 문서를 수정할지언정 CSS 파일만 수정해서는 해결 할 수가 없다.
나름대로 생각한 해결방법은 두가지 이다.
첫번째.
자바스크립트 같은 언어를 이용해서
아이콘의 개수(length)를 체크하고 -> 개수를 4로 나눴을 때 나머지(remainder)가 0이 안된다면 (=아이콘의 개수가 4n개로 딱 떨어지지 않는다면) -> 나눴을 때 나온 "몫(quotient) * 4"의 개수만큼은 flex-grow: 1로 지정하고 -> 나머지는 다른 스타일을 지정
두번째.
HTML 문서에서 아이콘과 아이콘 이름을 <div> 태그로 묶어주고 -> 4개의 아이콘을 한줄로 해서 <div> 태그로 또 묶어주고 -> 각각의 div 태그에 CSS를 적용해주는 방법
=> 하지만 나중에 많은 아이콘을 추가하려고 하면 HTML 파일과 CSS 파일을 많이 수정해줘야 한다
(HTML 문서에서는 아이콘을 4개씩 나눠서 <div> 태그로 묶어줘야 하고 CSS 파일에는 선택자를 추가해주는 등 작업 필요)
내가 원하는 방법은 많은 아이콘을 추가해야할 때, HTML 문서에 아이콘만 추가해주면 알아서 적절한 CSS가 적용되어 레이아웃이 그대로 유지되도록 하고 싶었다.
하지만 그렇게 만들려면 HTML+CSS 문법만으로는 안될 것 같다.
우선은 임시방편으로 위치를 고정시켜 주었다.
2021-03-26 현재 결과
결국 아래와 같이 설정하였다.
<!-- HTML 코드 -->
<div class="menu_icons">
<div>
<span><i class="icon-mail"></i></span>
<span>메일</span>
</div>
<div>
<!-- 아이콘과 아이콘 이름 코드 중략 -->
</div>
<div>
<!-- 아이콘과 아이콘 이름 코드 중략 -->
</div>
<div>
<!-- 아이콘과 아이콘 이름 코드 중략 -->
</div>
<!-- div 태그들 중략 -->
</div>
.../* CSS 코드 */
/* 아이콘들 스타일 지정 */
.menu_icons{
/* 작은 flex box 하나 생성 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.menu_icons > div{
flex-basis: 25%;
flex-shrink: 1;
flex-grow: 1;
}
.menu_icons > div:nth-of-type(4n+4){
/* 4번째, 8번째 아이콘은 크기를 좀 더 작게하고 flex-grow를 0으로 설정 */
flex-basis: 15%;
flex-grow: 0;
}
.menu_icons > div:last-of-type{
/* 마지막 아이콘은 혼자만 더 넓은 공간 차지하도록 설정 */
flex-basis: 40%;
}기본 아이콘 : flex-basis를 25%로 설정 (한 줄에 4개 아이콘 넣기 위함)
+ flex-grow를 1로 설정 (1: 1: 1: 1 비율로 일정한 공간을 차지하도록 하기 위함)
4번째, 8번째 아이콘 : flex-basis를 15%로 설정
+ flex-grow를 0으로 설정 (빈 공간을 차지하지 않도록 해서 오른쪽 테두리쪽에 붙이기 위함)
마지막 아이콘 : flex-basis를 40%(기본 크기 25% + 4/8번째 아이콘 크기 15%)로 설정
+ flex-grow를 1로 설정
-> 만약 나중에 아이콘을 추가하게 된다면 flex-basis를 계산해서 CSS 파일을 수정해줘야한다.
21:59 : IE에서는 grid 지원을 하지 않아서 grid를 사용하지 않으려고 했지만.. 그냥 grid를 이용하기로 했다.. ㅠㅠ
(깔끔하게 나오지 않기 때문에)
4. 아이콘들 스타일 수정 및 margin/padding 수정
* 아이콘들은 grid로 레이아웃을 잡아서 했다. 이게 가장 깔끔해서이다.. ㅎ
* 문제는 IE에서는 지원하지 않기 때문에 깨진다.
5. 아래 광고인듯 공지인듯한 문장 영역 수정
긴 고민 끝에 드디어 완성했다.
일단 스크롤 압박 때문에 여기에서 글을 마무리하고 다음 글에서 전체적으로 수정할 부분들을 좀 수정하고
채팅 화면을 만들어야겠다 (채팅목록 화면 아님)
'2. 프로그래밍 언어 공부 > 무엇이든 만들어보기' 카테고리의 다른 글
| HTML과 CSS 공부: 혼자 힘으로 배달의민족 앱 클론하기 (1)_홈화면 일부 제작완료 (0) | 2021.04.18 |
|---|---|
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (7)_채팅방 화면 완성 (10) | 2021.03.27 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (5)_채팅목록 완성 (0) | 2021.03.23 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (4)_친구리스트 완성(추후 기능 수정) (0) | 2021.03.16 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (3) (0) | 2021.03.15 |
