오늘의 기분
첫 페어 프로그램!
HTML과 CSS를 사용하여 트위틀러를 만드는 실습이었다.
오븐이라는 툴을 사용하여 우선 와이어프레임를 만들고, 이를 바탕으로 CodeSandbox에 코드를 작성하여 목업을 만들었다.
CodeSandbox는 랜더링 문제가 많았고...너무 느렸고...다음에는 VScode에 복사해서 사용해야겠다고 생각했다.
첫 페어이기도 하고 어떻게 해야할지 모르겠어서 얼레벌레 시작했지만, 너무나 어색하면 어쩌지라고 걱정한 것과 달리 페어님과 편하게 대화를 나눴고 재밌었다! (페어님 저도 감사합니다💚)
나도 한 낯가림, 소심하는데 페어님이랑 큰 어색함 없이 으쌰으쌰 트위틀러를 완성했다.
정말 오랜만에 누군가와 대화하면서 코드를 짜본 것 같다.
(최근에 진행하던 프로젝트는 너무 분업화되어 있어서 커뮤니케이션이 많지 않은데 대화하면서 짜니까 의견을 나눌 수 있어서 더 좋았다.)
HTML, CSS는 과거에 배웠지만, CSS는 너무 싫다...
보통 피그마에서 변환된 CSS 코드를 가져오니까 오히려 공부를 안 하게 됐는데
오랜만에 다시 CSS를 공부하면서 기초를 다잡은 것 같아서 좋은 기회였다고 생각한다!
아직 백엔드 파트에 들어가지도 않았는데 가볍게 배우는 프론트도 꽤 양이 많은 것을 보아...
생각보다 더 촘촘하게 일정을 짜서 공부해야 겠다는 생각이 든다.
오늘의 개선할 점
1. 나의 생각을 명확하게, 당당하게, 깔끔한 문장으로 전달하자!
이번 페어 프로그램에서 나의 생각을 명확하게 전달했는지는 모르겠지만, 코드스테이츠를 진행하면서 문장을 제대로 끝맺기, 의견을 명확하게 전달하는 습관을 길러보자!
평상시에 내 의견을 명확하게 전달하는 게 부족하다고 느끼는데 여러 번의 페어 프로그래밍을 통해서 이 부분을 개선할 수 있었으면 좋겠다.
2. TIL/회고를 매일 작성하자!
나중으로 미루지 말고! 매일매일 꾸준하게 하는 습관을 기르자!
코드스테이츠에 온 이유도 여러 동기분들과 꾸준하게, 성실하게 기록하고 코딩하는 습관을 기르기 위해서인데...
자꾸 6시에 끝나면 퇴근한 것처럼 쉬고 싶어진다 스껄~
Pair 프로그램
수정할 점
1. 시맨틱 태그를 사용하자
트위틀러의 HTML을 크게 3개의 <div>로 나누어서 코드를 작성했는데 태웅님은 <header>, <main>, <footer>로 나누셨다.
태그만을 보고 그 코드 내용을 알 수 있도록 되도록이면 시맨틱 태그를 사용하자.
2. Universal Selector(*)를 우선적으로 작성하고 시작하자
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}3. CSS 작성 순서는 깔대기형!(넓은 범위 > 좁은 범위)
그림을 그릴 때, 배경 먼저 칠하고 디테일한 부분을 손보는 것처럼 CSS도 넓은 범위를 먼저, 좁은 범위를 나중에 작성하자.
CSS는 Cascading(폭포같은, 자식에게 상속되는)이므로 넓은 범위인 부모를 위에 작성해줘야 나중에 자식의 style을 설정할 때 편리하다!
기억할 점
Wrapper를 왜 사용할까?
Flexbox는 항상 부모 요소에게 말을 건다.
따라서 Wrapper에 display:flex를 설정하여, 자식 요소들이 flex-item이 될 수 있게 만든다.
position: relative/absolute
Flexbox만을 이용해서는 원하는 레이아웃을 만들지 못할 수도 있다.
이때 position: relative/absolute를 통해서 더 세부적으로 위치를 지정할 수 있다.
vw, vh
- 반응형 웹/앱을 만들 때는
vw와vh를 사용한다. px도 어떻게 보면 상대적 단위이지만(또 어떻게 보면 절대적 단위인), 반응형에는 적합하지 않다.%도 있지만, 반응형으로는 한계가 있다고 한다.(이유는 내일 찾아보고 추가로 작성해둘 것!)
Problem
1. icon tag가 적용되지 않음
<i> 태그가 작동하지 않았는데 아직 그 이유를 찾지 못했다.
분명 예전에는 잘 작동하였는데 CodeSandbox에는 적용이 안 되는 것인지, 빼먹은 부분이 있는지 다시 시도해봐야겠다.
2. hr 태그
<hr>의 부모가 display:flex 인 상태에서 width를 설정해주지 않았을 때 <hr>이 나타나지 않았다.
display:flex한 상태에서는 width를 필수적으로 설정해줘야 하는 것인지 검색해보고 이 문제도 내일까지 해결해보겠다.
마치며
곧 Java에 들어갈 텐데 기대도 되고, 1년 전에 배운 Java가 가물가물해서 걱정도 된다!
동기분들과 여러 스터디도 진행해보고, 모든 동기분들을 다 알 수는 없지만 많은 분들과 친해져서 힘든 6개월을 즐겁게 이겨냈으면 좋겠다!
