[JS] Mark-Up!

3월 마지막 주!

자바스크립트 완주반 1주~2주차 강의는 마크업 실습이다. 가능하면 커리큘럼의 주차를 넘기지 않으려고 열심히 듣고 있다. 확실히 이론 강의를 듣는 것보다는 클론코딩을 하며 배치된 요소들이 어떻게 움직이는지 확인할 수 있어 큰 도움이 되었다.

일단 웹페이지라고 하면, 개발자 모드에서 보던 HTML/CSS 코드들은 너무 길고… 정리가 잘 되어 있지 않고. 말 그대로 언어라고도 할 수 없는 단순 디자인적 요소라고만 생각했다. 그간 전공 수업을 들으며 말 그대로 '프로그래밍 언어'를 다루는 것과 전혀 다른… 내 영역 바깥의 일이라고 여겼던 것 같기도 하다. 프론트엔드는 단순히 자바스크립트만 잘 다루는 직군이 아니라는 것! 마크업은 당연히 필수로 알아야 하고, 다만 퍼블리싱이 따로 있는지 없는지에 차이가 있는 것 같다.

공부를 시작하기에 앞서 아주 먼 길을 걸어온 것 같다는 생각을 했다.

구현 페이지

사진... 괄호로 예쁘게 어떻게 배치하지? 모르겠어서 하나만 첨부하기.

🔸 공부하면서 헷갈렸던 것들

ⓐ vertical-align: middle 과 align-items: center , justify-content: center , line-height 지정까지. 대체 언제 쓰는 거야? 무슨 차이가 있는거지.

1. vertical-align
   인라인 블록 등을 포함한 모든 인라인 요소의 수직 정렬을 위해 사용된다. 블록 레벨 요소의 수직 정렬에는 영향을 미치지 않는다. 보통 이미지 요소를 중간으로 배치하기 위해 많이 사용된다.
   그럼 블록 엘리먼트에는 어떻게 중앙 정렬을 적용하냐? 이럴 때 display: inline-block을 사용해 블록을 강제로 인라인 요소화 하여 vertical-align을 적용한다. 또한, 정렬 시키고자 하는 블록 엘리먼트에 직접 vertical-align을 적용하는 것이 아니고, 부모 블록 엘리먼트에 적용해야 타겟 엘리먼트의 세로 정렬이 이루어진다.

2. justify-content, align-items
   justify-content과 align-items 모두 flex 아이템이 라인 내에 배치되는 방식을 결정한다. 이 때, justify-content는 수평 방향의 정렬! 가로 축을 기준으로 좌우에 대한 정렬을 관장한다. align-items는 수직 방향의 정렬할 때 사용한다. 수직 방향으로 위, 중앙, 아래 위치를 정해줄 수 있으며 순서대로 flex-start, center, flex-end 로 지정한다.

3. line-height
   line-height는 글자가 한 줄에서 차지하는 높이 이다. line-height를 이용하면 폰트는 가운데 그대로 있고 리딩 영역이 위아래로 동일하게 늘어나게 되어 중앙 정렬이 된다.
   
   

ⓑ a href 태그를 사용할 때 inline-block 을 쓰라는데 왜?

1. a 태그는 inline 요소이다. inline 요소의 경우 width, height, margin, padding 등의 속성 지정이 불가하다. 실습 예제에서 <a href="#" class="tab" role="tab"><span class="txt">홈</span></a> 과 같이 a 태그 내 span 태그를 넣어 글자를 지정하는 형태로 쓰는 것을 많이 볼 수 있었는데, 저 span 텍스트의 위치를 지정하기 위해서는 inline-block 요소를 사용해야 한다.
2. 내용을 찾아보다 알았는데, span 태그 역시 inline 요소이므로 패딩이나 마진 값을 지정하고 싶다면 inline-block; 을 주어 요소를 블록화 해 사용해야 한다.

처음 강의를 들었을 때 inline과 block 요소에 대해 듣고 정리했었는데 역시 직접 해봐야 안다.

ⓒ display: -webkit-box; ?

1. 두 줄 이상의 ellipsis를 지정할 때 사용했었다. webkit이라는 새로운 용어가 보였는데, 속성 하나하나를 일일히 정리할 자신은 없고 (찾다보니까 진심 많다.) 접두어의 의미만 정리해 둔다.

2. -webkit- : 구글, 사파리 브라우저에 적용
   -moz- : 파이어폭스 브라우저에 적용
   -ms- : 익스플로러에 적용. 보통 생략한다.
   -o- : 오페라 브라우저에 적용
   
   

ⓓ 분명 무언가 스타일을 적용시켰는데 보이지 않는다.

1. position: relative !!!!!!!!!!!!!!!!!!
   뭐가 안 되면 다 얘 때문이다. 거의… 지금까지 경험한 바로는 대부분.
   자식 요소의 위치를 지정할 때 부모 요소에 relative 속성을 지정해줘야 자식 요소가 부모 요소를 기준으로 위치를 잡는다. 부모 요소에 relative 지정 안해주고 top: 0, right: 0 이런 속성 지정했다가 대체 어디 갔는지 화면에 안 보여서 한참 찾은 게 한두 번이 아니다.
   
   

🔸 다소 아쉬웠던 것들과~

강의는 전반적으로 만족스러웠다. 중간 중간 실무에서 이렇게 쓰면 좋아요~ 하는 부가 설명이 있었고, 디자인적으로 섬세하게 다뤄야 하는 영역이나 간단한 도형은 이미지 없이 css로 해결한다거나 하는 부분들이 크게 와 닿았다. 이해가 안 되는 부분은 이전 이론 강의에서 설명 되었던 부분을 확인해서 채워 넣으면 되어서 큰 문제는 없었으나 다소 아쉬웠던 건… padding이나 margin 넣는 것이나 가상 선택자를 사용하는 부분들을 실습 초반부에 한 번쯤은 더 상세하게 언급해도 괜찮지 않았나? 하는 생각이 든다 🤣

앞 수업 때 설명 다 듣기는 했지만 막상 SCSS로 빠르게 다루기 시작하니까 멈춰서 이게… 뭐꼬 하고 뒤적이는 일이 꽤나 있었다. 마크업에서 계속 반복되는 부분들을 후반부에 빠르게 치고 넘어간 부분은 좋았던 것 같다.

강의 중간 리액트나, 컴포넌트에 대해 계속 언급하시면서 직접 마크업을 하나씩 손으로 다루지는 않을 거라고 하셔서 그런지 아직 갈 길이 멀고 더 좋은 기술들도 배워야 하니까! 부담 없이 파트 하나를 종료할 수 있었다.

내일부터는 자바스크립트를 들을건데, 이건 프로그래밍이나 알고리즘 공부하면서 기초 강의를 듣기도 했어서 부족한 부분만 빠르게 채울 생각이다. 처음 공부 시작했을 때 무슨 파이썬하듯이 JS 코테 문풀부터 (ㅋㅋ) 했었다. 그러다보니 웹 구현이 너무 미숙한 것 같아서 강의를 결제했고 🤣🤣 힘냅시다 ^_^…