코코아톡 클론 코딩 완강

HTML과 CSS는 이미 경력도 있고 여러차례 프로젝트를 진행해보며 나름 전문성이 있다고 생각했으나 B.E.M이라던지 root의 변수 등 최신 문법에 대해선 무지했다.

그 영향인지 전 직장에서 코드에 대해 한 번 지적을 받은 기억이 있어 계획엔 없었으나 최대한 빠르게 프로젝트를 끝냈다.

기간은 강좌와 클로닝 타임을 포함해 약 일주일 정도 걸렸으며 아니나다를까 제일 약한 부분이었던 flexbox나 animation에 대해 좀 더 심층적으로 공부할 수 있었다.

하단의 내용은 클론을 진행하며 메모해둔 TIL의 내용이다. 

추후에 한 번 더 MDN이나 구글링을 통해 예문을 확인해 보고 tistory에 메모할 생각이다.

 

하나는 이미 완성해두었으니 바닐라 JS 챌린지와 동시 진행이 가능하겠군.

 

[결과물] https://smthousand.github.io/2022_kka-clone

Welcome to Kokoa Clone

 

> 220527 FRI

1. HTML의 head 부분에 연속해서 CSS link를 다는 것은 옳지 못하다. 되도록 CSS 최상단에 @import 소스를 이용할 것 @import "reset.css";
2. :root를 이용하면 변수를 만들어 필요할 때마다 불러들일 수 있다 :root { --red: red; } 사용 시 .danger { color: var(--red); }
3. input의 type이 submit일 때 적용 #login-form input[type="submit"] { }
4. input의 type이 submit이 아닐 때 적용 #login-form input:not([type="submit"]) { }
5. 3, 4번의 방법은 특성 선택자(Attribute Selector)의 방식이지만 최근엔 B.E.M을 선호하기 때문에 되도록 클래스명을 붙여 작업해야 함
6. CSS의 분류에 대하여: components === 고정요소, screen === 화면
7. style.css는 body의 모든 screen에서 적용되는 내용만 적음 (font-family, color, line-height, letter-spcing, background-color 등)
8. form의 power: form에는 action과 method의 속성(attribute)가 있음
9. action is to which page are you going to sand this data <form action="friends.html">
10. method is can be two things one is POST other one is GET
11. POST는 백엔드 서버에 정보를 전송하는 방식, GET은 URL

> 220531 THE

1. component, screen 등 css의 재사용성에 대해 감탄할 것
2. flex-box 이용 시 justify-content: space-between 으로 해결되지 않는 줄바꿈이 필요하다면 각 block요소에 width 값을 주고, flex-flow: row wrap;  을 사용 (flex-flow = 같이 자주 쓰이는 flex-direction과 flex-wrap를 합친 것)
3. position: fixed 를 사용하면 viewport에 영향을 받으며 flexbox 와 같이 쓰이면 깨진다. 그럴 땐 width: 100% 값과 top, bottom, left, right 값을 부여한다
4. position: fixed 를 사용하고 body 에 padding 값을 줘 영역이 겹치지 않도록 한다
5. backdrop-filter: blur(50px); , -webkit-backdrop-filter: blur(50px); 는 배경이 자연스럽게 블러처리 되는 효과
6. text 요소를 가운데로 정렬하는 법

.alt-header__column:first-child {
    margin-right: auto;
}

.alt-header__column:nth-child(2) {
    text-align: center;
}

.alt-header__column:last-child {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

 

> 220601 WED

1. 선택자 + === 바로 밑
2. body { -ms-overflow-style: none; }, body::-webkit-scrollbar { display: none; }  스크롤 작용은 하고 싶지만 모양은 넣고 싶지 않을 때
3. animation: keyframeName time ease-in-out "forward"는 마지막 속성 값을 유지하는 것
4. element를 투명도로 없앤다하더라도 그대로 존재하기 때문에 브라우저가 그걸 무시하게 하는 코드는 visibility: hidden; js로 처리해야 함
5. focus-within에 대해 더 공부할 것