노마드 코더 코코아톡 클론코딩 6일차

노마드 코더 코코아톡 클론코딩 6일차

잡담

어제 추가적으로 소개되었던 배열 방법에 대해서 참고할만한 댓글을 찾았다.

status-bar__column 에 width를 33%로 적용하면 status-bar 전체 크기를 3등분한다. 나는 기존의 column 사이즈를 3 분의 1로 줄이는 것으로 이해를 했는데, 전체 status-bar의 width를 3 등분하는 거였다. status-bar는 status-bar column 3 개로 이루어져 있으니까 status-bar의 전체 width를 나눠가지고 있을 것이다. 그 비율을 33%로 지정한 것이다. 헷갈렸던 이유는 column이 가지는 width를 생각하지 않고 column 안에 content 의 width만을 생각했기 때문으로 보인다. column도 엄연히 박스기 때문에 그 자체로 width를 가지기 때문에 content의 width와는 별개로 이해해야 할 것 같다.

정리

클론 코딩

1. Sign Up Screen(02.png)
a. 리셋 css: 브라우저가 기본적으로 적용시키는 스타일을 없앤다. 다 초기화됨.
b. reset.css에 기본으로 적용하고 싶은 값 적을 수도 있다.


2. Log In Form
a. :not: 뭔가가 적용되는 걸 원하지 않을 때 사용
b.text-align: 텍스트 가운데 정렬
c. color:inherit 색을 부모로부터 상속받는다. default는 검은색.

아마 영상에선 a의 부모 login-form에 대한 색을 정해 놓지 않아서 default 값이 적용되는 것으로 보인다.

d. class와 id 중 어떤 방법을 사용하는 게 좋을 지는 스스로 판단.
e. 니코쌤은 style.css 파일에는 모든 스크린에 적용될 수 있는 스타일을 써놓음.
f. form의 중요한 두가지 속성
ㄱ. action: 어떤 페이지로 data를 보낼건지 지정할 수 있다.
ㄴ. method
@post: 백 엔드 서버에 정보를 전송하는 방법. 반드시 서버가 필요
@get: 보안에 취약, 페이지를 이동한다.

강의를 듣고 만든 최종 이미지다. 따라하면서 들었던 의문과 새로 알게 된 점을 정리했다.

1. flex-direction을 column으로 설정해서 열 정렬을 한 뒤, align-items:center 를 통해 가운데 정렬을 할 수 있었다. 강의에선 text-align을 활용했다.
   이후 강의에서도 display:flex를 사용하긴 했는데 text align과 같이 사용했다. text align은 워드에서 글씨를 가운데부터 나오게 하는 서식처럼 텍스트를 모아 주는 역할로 보인다. text align이 없으면 가운데 정렬은 되지만 텍스트가 가운데 서부터 나오진 않았다.
2. 텍스트 크기를 정해놓고 일정 길이를 넘어서면 다음 줄로 내려가게 하기 위해 width를 50프로로 했다. 이런 방식 또한 잡담에서 말했던 것처럼, welcome-header의 width의 50프로를 적용한 것이다.
3. 로그인 form 경계선을 없애고 밑줄을 추가하는 시도까지는 좋았지만 쓰는 문법이 잘못 되었다. 그냥 border-bottom:1px 만 적는 게 아니라, 1px solid rgba 와 같은 식으로 형식과 색까지 지정해줘야 한다.
4. rgba에서 a는 투명도를 의미한다.
5. 상기용 정리
placeholder에 css 지정하는 법 예시 #login-form input::placeholder
#login-form input:focus > input이 포커스 되었을 때
#login-form input: not([type="submit"]): [] 안에는 속성이 온다.  이건 강의가 끝난 후, 화면 마지막 링크 쪽이 마음에 안 들어서 수정한 결과다. 어려웠던 점은 이미 flexbox가 login-form 전체에 적용되고 있어서 링크만 따로 행 정렬로 바꾸기 힘들다는 점이었다. 그래서 링크 부분과 input 부분을 다른 태그로 묶고 id를 구분했다. 그 다음 정렬하는 방법은 상태 창을 만들 때와 동일하게 진행했다. 링크가 2 개 추가되었을 뿐인데 태그가 너무 늘어난 거 같아 코드가 지저분해 보인다는 아쉬움이 있다. 그리고 화면 창을 줄여서 2 줄이 될 경우 설정해놓은 게 깨진다. 이 부분은 반응형 디자인으로 화면이 줄면 글씨 크기가 줄게 하면서 한 줄을 유지하는 쪽으로 해결을 해야 할 것 같은데 아직은 잘 모르는 부분이므로 패스하겠다. 그리고 기억해야 할 부분은 #login-form__input과 #login-form input 이 가리키는 대상이 다르다는 것이다. 전자는 input 태그를 둘러싸고 있는 태그의 id고 후자는 login-form 속의 태그다. 내가 margin을 수정하고자 한다면 전체 틀의 margin을 수정하고자 하는지, 아니면 틀 안의 내용을 수정하고자 하는 지 잘 구분해야 할 듯하다.