노마드 코더 - 코코아톡 클론코딩 연습(2)

CLONING TIME

 

5. Status Bar CSS

HTML에 CSS를 작성하고 싶을 때, "link:css"라 하고 엔터를 치면 자동 완성된다.

후에 CSS를 link 해준다.

<link rel="stylesheet" href="css/styles.css" />

 

font-family를 이용하여 서체를 변경할 수 있다.

https://fonts.google.com/ 에서 원하는 폰트를 가져다 쓰면 된다. (web font)

link 보다 import를 추천한다.

import는 style.css 제일 상단에 추가한다.

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");

 

body에 font-family를 추가한다. 이때 사용할사용할 폰트만 추가한다. 모든 폰트를 추가하면 웹사이트 무거워지기 때문이다.

body {
  color: #2e363e;
  font-family: "Open Sans", sans-serif;
}

 

 

CSS hack (justify-content 대신 사용 가능)

CSS hack(기술) → 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동한다.
 

 1) 상위 박스 : justify-content: center; →중앙으로 몰림
 2) 내부 박스 범위 : width: 33%; →왼쪽으로 몰려서 범위 벌어짐, 왼쪽 위치할 박스는 왼쪽에 붙어서 정렬됨
 3) 중앙에 위치할 박스 : display: flex; justify-content: center; →중앙에 위치할 박스만 중앙에 위치함
 4) 오른쪽에 정렬할 박스 : display: flex; justify-content: flex-end; align-items: center; →오른쪽에 붙어서 정렬됨, 아이콘들 가운데로 정렬

.status-bar {
  position: fixed;
  top: 0%;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 5px 3px;
  box-sizing: border-box;
}
.status-bar__column {
  width: 33%;
}
.status-bar__column:first-child span {
  margin-right: 5px;
}
.status-bar__column:nth-child(2) {
  display: flex;
  justify-content: center;
}
.status-bar__column:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

 

아이콘의 크기를 키워주려면 HTML에서 아이콘 이름에 2x or lg 등을 붙여준다. (fontawesome에서 아이콘 가져올 때 사이즈 옵션도 나와있어 원하는 사이즈 참고해서 하면 된다.)

 

 

6. Sign Up Screen part Three

기본적으로 브라우저가 가지고 있는 스타일을 없애는 방법→reset.css

reset.css는 css파일로 대부분의 태그에 margin: 0, padding: 0, border: 0등을 가진 파일이다.

 

  1) 밑의 파일을 css폴더에 reset.css파일을 만들고, 붙여 넣는다.

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

input:focus {
  outline: none;
}

a {
  color: inherit;
  text-decoration: none;
}

 

2) reset.css파일을 styles.css파일에 import로 추가해준다.

@import "reset.css";

 

css를 분할 후 합치는 방법으로 styles.css를 사용한다. (styles.css에 각각의 css파일들을 import)

 

 

7. Log In Form part One

variables.css 사용할 때는 css폴더에 variables.css파일을 만들고, style.css 에서 꼭! import 하기!

 

변수를 지정해줄 때

:root {
  --yellow: #fae100;

 

변수를 사용할 때

#login-form input:focus {
  border-color: var(--yellow);
}

#login-form input[type="submit"] {
  background-color: var(--yellow);
}

 

+) 구글 확장 프로그램 colorzilla 활용해서 색을 추출할 수 있다.

 

 

8. Log In Form part Two

#login-form input {
  border: none;
  padding: 15px 0px;
  font-size: 18px;
  margin-bottom: 25px;
  transition: border-color 0.3s ease-in-out;
}

#login-form input:not([type="submit"]) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  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 input[type="submit"] {
  background-color: var(--yellow);
  cursor: pointer;
  padding: 20px 0px;
  border-radius: 5px;

:not() → 뭔가가 적용되는 걸 원하지 않을 때 사용하며, () 사이에 쓰인 것들은 특성 선택자(attribute selector)이다.

not은 "이것을 제외한 나머지에 적용하고 싶어요"라는 말이라서, #login-form input 에도 똑같이 쓰면 중복 적용되기 때문에 not 쪽에만 써야 한다.

cursor: pointer; 로 버튼 위의 커서를 변경할 수 있다.

color: inherit;는 부모로부터 색을 상속받는 것이다.

 

추가로 css의 cascading에 의하여, #login-form input: not([type="submit"])에 transition이 들어갔기 때문에,

#login-form input: focus 보다 위에 있어야 focus에 들어간 border-color의 변화값이 나타난다.

항상 cascading에 주의!

 

 

9. Recap and Forms

• bem 방식이 코드가 이해하기 쉬워 아무래도 더 좋은 방법이다.
• CSS 파일에서 주석처리는 /* */로 감싸주면 된다.
• styles.css 파일에는 font-family (or 모든 스크린의 background-color)와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는다. 이는 하나의 방식이고, 자신만의 편한 방식을 택하면 된다.
• form은 중요한 2가지 속성(attribute)을 가지고 있다.
  하나는 action이고, 다른 하나는 method이다.
  1) action
  action은 어떤 페이지로 data를 보낼 건지 지정할 수 있다.
  action에 적어 놓은 URL에 해당하는 파일이 반드시 존재해야 한다.
  2) method
  method는 2가지 방식 중 하나를 쓸 수 있다. 하나는 POST이고, 다른 하나는 GET이다.
  POST는 백엔드 서버에 정보를 전송하는 방식이라 이번 강의에서는 사용할 수 없다.
  GET 방식은 보안에 취약하기 때문에 username이랑 password를 GET 방식으로 보내선 안된다. URL에 포함되어도 상관없는 정보들을 GET 방식으로 보내는 것이다.
• Components는 상태 표시줄과 같이 반복되는 요소를 저장한다.

---

아직까지 크게 어려운 부분은 없었다. 세부적인 부분을 계속 배우다 보니 내용이 점점 많아져 헷갈릴 것 같다는 게 걱정이지만......, 그래도 파일이나 코드들을 더욱 깔끔하게, 알아보기 쉽게 정리할 때마다 약간의 희열이 느껴진다.ㅎㅎ