본 내용은 해당 강의 토대로 작성
Git and Github
- Git: 파일의 변경 내역을 관리할 수 있다.
- Github : Git의 사항을 조회할 수 있다.
- Github Desktop : Github과 데스크톱을 연동한다.
- .gitignore : git으로 추적하고 싶지 않은 파일을 적어놓으면, 해당 파일을 무시된다.
Cloning time
1. Introduction
- 카카오톡을 HTML과 CSS만으로 구현한다.
- 로딩 화면
- 회원 가입 페이지
- 친구 목록 페이지
- 대화 목록 페이지
- 검색 페이지
- 더보기 페이지
- 설정 페이지
- 채팅방
- 백엔드는 적용하지 않는다.
2. index.html
- 기본적으로, 대부분의 웹 서버는 index.html을 먼저 읽어 낸다.
- HTML과 CSS로 위 페이지를 Cloning 한다.
기본 구성
- VSC 환경에서, !를 입력하면 HTML 기본 서식을 바로 입력할 수 있다.
- 클래스 명을 지을 때, 일반적인 이름보다는 다른 요소들과 구분을 짓기 위해서 아래처럼 특징적인 이름을 짓는다.
<div class="status-bar">
<div class="status-bar__column">
</div>
</div>- BEM(Blcok Element Modifier)
- 클래스 속성만 사용한다.
- Element : .block__element
- Modifier : .block block--color--red
아이콘 삽입
svg 형식으로 아이콘을 추가한다.
좌표로 되어있고 늘이고 줄이기가 자유롭다.
heroicons, Font Awesome 에서 무료 아이콘을 받아 사용할 수 있다.
Font Awsome 사용방법
- 회원가입을 하여 이메일 인증을 한다.
- Font Awsome에서 제공되는 script태그를 복사한다.
- 적용할 페이지의 body태그 하단에 붙여넣기 한다.
- 삽입할 곳에 아이콘의 html태그를 붙여 넣는다.
<body>
<div class="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<i class="fas fa-wifi"></i>
<!-- Wifi Icon -->
</div>
<div class="status-bar__column">
<span>12:00</span>
</div>
<div class="status-bar__column">
<span>100%</span>
<i class="fas fa-battery-full"></i>
<!-- Battery Icon -->
</div>
</div>
<script src="https://kit.fontawesome.com/7ae4be9b50.js" crossorigin="anonymous"></script>
<!-- fontawesome 스크립트 -->
</body>폼 만들기
- 배운 HTML을 토대로 회원가입 폼 만들기
<form id= "login-form">
<input type="text" placeholder="Email or phone number" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log In" />
<input type="submit" value="Sign Up" />
<a href="#">Find kokoa Account or Password</a>
</form>- fom에 id를 지정한다.
상태바 CSS
CSS link
- index.html head상단에 CSS파일을 link한다.
<link rel="stylesheet" href="css/styles.css">이제, styles.css에서 CSS를 작성한다.
body font 설정하기
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}- font-family 을 추가한다.
- Google Fonts에서 다양한 폰트를 가져올 수 있다.
- 원하는 폰트를 선택한다.
- 폰트의 url을 복사해서 CSS 파일 상단에 @import 해준다.
- font-family를 복사해서 적용할 곳에 붙여넣기 한다.
- 많이 추가하면 웹 사이트가 무거워진다.
CSS hack
- 콘텐츠의 글자나 이미지때문에 가운데 정렬이 안될 때 사용할 수 있다.
- 이상하지만, 작동한다.
- 적용 순서
- 상위 박스 :
- justify-content: center;
- 내부 박스 :
- width: 33%;
- 중앙에 위치할 박스 :
- display: felx; justify-content: center;
- 오른쪽에 위치할 박스 :
- display: flex; justify-content: flex-end; align-items: center;
CSS 파일 분리하기
- stauts의 CSS를 다 설정했으면, 별도의 파일로 분리한다.
- 모든 페이지에 공통적으로 status bar가 포함되므로 분리 후 링크를 하는 것이 더 편하기 때문이다.
Reset CSS
- 브라우저에서 제공하는 body의 기본 margin 설정을 없앤다.
- 검색 후 파일을 복사한 뒤 @import 한다.
- 전체 웹 페이지의 기본 설정 CSS파일로 지정
- input의 border를 전부 지워 줄 것이므로 마지막에 아래의 코드를 추가
input:focus {
outline: none;
}Header CSS
- index.html 의 header태그를 설정한다.
.welcome-header {
margin: 90px 0px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.welcome-header__title {
margin-bottom: 20px;
font-size: 25px;
}
.welcome-header__text {
width: 60%;
opacity: 0.7;
}- 지정한 클래스 명을 사용해서 세부 사항들을 설정한다.
- Chrome의 확장 프로그램 page ruler redox를 사용해서 샘플 이미지의 치수를 측정
- .welcom-header__text의 폰트 색상이 회색일 때, opacity를 설정하는 방법도 있다.
- .welcom-header 의 자식 요소가 세로로 있어야 하므로 flex-direction: column을 설정한다.
- text-align : center : 텍스트 태그들을 가운데 정렬한다.
Login form CSS
- index.html의 Login form을 설정한다.
#login-form {
display: flex;
flex-direction: column;
margin: 0px 30px;
}
#login-form input {
border: none;
padding: 15px 0px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 25px;
transition: border-color 0.3s ease-in-out;
}
#login-form input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
#login-form input:focus {
border-color: var(--yellow);
}- 로그인 폼은 요소들이 위 아래로 나란히 있으므로 login-form에 flex-direction : colomn을 설정한다.
- margin, padding 값들을 설정한다.
- font-size, color를 설정한다.
- 색상은 Chrome의 확장 프로그램 colorzilla를 사용하여 추출한다.
- login-form input::placeholder로 placeholder의 색상 지정
- form이 focus 되었을 때 색상 변화와 transition 설정
- 색상 변수를 선언하기 위해, 별도의 변수 파일을 생성한다.
:root {
--yellow: #fae100;
}- @import 후, #login-form input:focus에 var(--yellow)변수 선언한 색상을 적용한다.
- 부모 요소인 #login-form input에 transition 설정한다.
not
- 적용하고 싶지 않은 요소를 not으로 제외할 수 있다.
#login-form input:not([type="submit"]) {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
transition: border-color 0.3s ease-in-out;
}- type="submit"은 아래의 속성을 적용하지 않게 된다.
Submit CSS
#login-form input[type="submit"] {
background-color: var(--yellow);
cursor: pointer;
padding: 20px 0px;
border-radius: 5px;
}
#login-form a {
text-align: center;
text-decoration: none;
color: inherit;
font-size: 13px;
}- cursor: pointer는 커서를 submit 버튼에 올렸을 때 모양을 설정한다.
- color: inherit은 부모 요소로부터 속성을 상속받는다는 듯이다.
CSS 코드 정리하기
- index.html의 CSS코드를 별도의 파일로 분리한다.
- status-bar.css는 components 폴더에 정리
- login.css는 screens 폴더에 정리
- styles.css에는 전 페이지 공통으로 가지는 설정을 한다.
- 전체 페이지의 배경 색, 기본 폰트 등등
Form action, method
- action은 어떤 페이지로 data를 보낼 것인지 지정한다.
<form action="friends.html" method="get" id= "login-form">- 다음에 만들 페이지인 friends.html과 연결되었다.
- method는 2가지 방식 중 하나를 사용한다.
- post : 백엔드 서버에 정보를 전송한다. 이 프로젝트에서는 할 수 없다.
- get : 보안에 취약하다. URL에 포함되어도 상관없는 정보들을 이 방식으로 전송한다.
완성된 페이지
느낀점
나는 개인적으로 BEM방식이 편한 것 같다. 하지만, 공부할 때는 id를 사용하는 방식도 좋은 것 같다.
근데, placeholder는 왜 ::를 써야하는지, :를 쓰는 것들과 ::를 쓰는 것들의 차이가 혼동스러웠는데, 모질라에서 알아냈다.
placeholder는 의사 요소(가상 요소)이다. 가상 요소는 선택자에 추가하는 키워드로 요소의 일부분에만 스타일을 입힌다.
의사클래스 또한 선택자에 추가하는 키워드인데, 선택한 요소가 특별한 상태여야 만족할 수 있다. 가령, :hover 같은 것이 있다. 이것들을 스타일을 적용할 때, 구분하기 위해서 ::, : 를 각각 쓰는 것이다. 그러나, 최신 브라우저에서는 딱히 구분하지 않고 적용한다고 한다.
뭔가 알것 같으면서 헷갈리는 개념이다… 의사 요소에 selection은 텍스트를 드래그 했을 때의 효과인데 이것도 특별한 상태가 아닌가…?
Source Code
'programming study > Clone coding' 카테고리의 다른 글
| [노마드코더]코코아톡 클론코딩 (7)(2021.1.8) (0) | 2021.01.08 |
|---|---|
| [노마드코더]코코아톡 클론코딩 (6)(2021.1.7 ~ 8) (0) | 2021.01.08 |
| [노마드코더]코코아톡 클론코딩 (4)(2021.1.6) (0) | 2021.01.06 |
| [노마드코더]코코아톡 클론코딩 (3)(2021.1.5) (0) | 2021.01.05 |
| [노마드코더]코코아톡 클론코딩 (2)(2021.1.4) (0) | 2021.01.04 |
