오늘의 공부 일기 시작

지난주에 하겠다고 분명 다짐했는데 또 안했다..
작심삼일 무엇?..😅

그래도 다시 오늘 시작했다..
그냥 전부 다 기록하는 중이다 이해가 안되더라도 기록하고
그러고 있다.
고등학교 때 수학했던거 생각하면서 하는 중이다.
나는 고등학교 때 수학을 진짜 못했다. (TMI 맞음..)
그러다가 고1 때 충격적인 점수를 받고 학원을 옮기고 그 다음 시험에
전교권 안에 들었었다.
그 때 느낀게 뭔지 아시나요..?
바로 내가 공부를 안했구나 였다. 이해가 안되면 그냥 아 안해 하고 안풀었다.
그 때는 그냥 답지를 외우겠다 라는 마인드로 계속해서 풀었다.
그러다보니까 언젠가 문제가 이해가 되더라?..
코딩도 비슷하지 않을까? 결국 수학의 논리를 활용하는 구조는 변하지 않으니까

그래서 무작정 기록을 남기는 중이다.

오늘의 공부1. 클론코딩

노마드코더와 함께 카카오톡 클론 코딩을 진행하는 중이다.
하루에 두페이지 정도 완성할 수 있도록 수업을 따라가고 있다.
어떤 식으로 해야하는지는 정확히 모르겠지만..

오늘 수업에서 배운 것들을 정리해볼려고 한다..

1. 코딩을 할 때 Span 요소를 잘 활용하자.
   < MDN[(https://developer.mozilla.org/ko/docs/Web/HTML/Element/span)]>

   Span은 인라인 요소이다.
   여기서 인라인이란?
   

이 구조를 통해 바로 확인할 수 있다.
내가 이해한 바로는 인라인 요소는 모든 요소들이 일렬로?
된다. div와 같은 block 요소는 각 요소가 출력되고 그 다음줄에 출력된다.

다시 간단히 말해서
인라인은 가로 나열 블락은 세로 나열이다
이 특징에서 알 수 있는 점!
요소와 요소사이의 공간이 없다. 요소의 크기를 CSS로 지정해도
먹지 않는다.

2. 작은 부분들로 나누어서 코딩하는 것이 좋다.

예전에 했던 프론트엔드 코딩들은 전부 style.css 하나를 만들어서 무지성으로 했었다.
초반에는 괜찮았었는데 양이 많아 질 수록 확인하기 힘들고 수정이 힘들었었다.
그래서 어떻게 코딩을 하는게 좋을까 라는 고민을 계속 하고 있었는데
작게작게 나누어서 코딩을 하는 방식이 좋은 것 같다.
메인 CSS에는 모든 페이지에 적용되는 핵심 스타일들만 적용하고
각 페이지별로 스타일을 적용하고 화면과 요소들로 나누어서 스타일을 작성하고 있다.
그리고 내 마음대로 스타일을 적용하기 위해
reset.css 를 활용한다.

3. 부모 자식 관계를 이용해서 스타일을 적용시킬 수 있다.

div style:last child
를 활용해서 스타일을 먹이는 것들이 많았는데 이렇게 할 경우
내가 원치않는 곳에도 스타일이 들어가는 경우가 있었다.

이 경우에는

<div class="user-component__column">
                        <div>
                            <span>2</span>
                        <i class="fas fa-chevron-right fa-xs"></i>
                        </div>

한 번더 div로 감싸서 상속 관계를 바꿔주면 된다!