[React][개발기] 2. 우선 기초적인 것들부터 학습(HTML, CSS)

깃허브 주소 ▼

GitHub - NOGUEN/dilemma_cafe_web

 

개요

---

이전 글 참고 ▼

[React][개발기] React! 근데 React를 왜 써?

 본격적으로 앱으로 만들어져있던 기본 서비스를 웹 버전으로 만들려고 했으나, 문제가 있었으니... 바로 필자가 웹 개발을 한 번도 안해봤다는 것이다. 이전 글은 웹 개발을 공부하기 위한 시작에 불과한 것이고, 필자는 HTML, CSS, JS를 심도있게 다뤄본 적이 없다. 다뤄봤다고 하면 HTML은 마크다운으로 글 쓸 때랑 블로그 글에서 HTML 수정이 필요할 때, CSS는 필자의 블로그 테마에 세세한 조절이 필요할 때와 이전에 노션 블로그를 운영할 때 테마 조절을 위해 다룰 때, JS는 몇몇 괴랄한 문법을 보고 한 두번 써보고 더 써보지 않았다...! ▼

진짜 독하긴 함... 이악물고 안함...

 

그래서 기초부터 다질 필요가 있기에 아래의 사이트에서 HTML과 CSS를 학습했다.

웹 프로그래밍 튜토리얼 | PoiemaWeb

 

 

HTML과 CSS

---

HTML 학습

 html은 마크업 언어이기에 학습하는데에 큰 어려움이 없었다. 조금 더 자유로운 마크다운 정도의 느낌이라서 전체를 학습하는데에는 하루도 안걸렸던거 같다. 물론 다 외웠다는 이야기는 아니고, 어떻게 동작하고, 어떻게 표기하고, 어떻게 활용할 수 있는지를 익혔다. 태그는 처음부터 다 외우고 들어가려고 안해도 될거라고 판단했다. 어차피 개발하면서 저절로 다 외우게 되어있으니 효율적으로 배우기 위해 암기는 건너 뛰었다. ▼

정리가 너무 잘 되어있어 좋았다.

 

CSS 학습

 CSS 역시도 학습 자체에는 큰 어려움이 없었다. 선언형 UI의 방식이기에 Flutter를 오래 했던 입장에서 전혀 문제될 게 없었다. iOS 개발을 공부했을 당시 배웠던 명령형보다 100배는 쉽게 느껴졌다. 셀렉터로 어떤 태그를 스타일링할 지 정해주고, 내부에서 이 태그를 어떻게 스타일링 할 지 프로퍼티에 값만 넣어주면 된다. ▼

 

 처음에는 Flutter와 굉장히 유사하니까 프로퍼티의 적용과 우선도 정도를 학습하면 될 것이라고 생각했는데, 생각보다 배워야할 게 많았다. HTML, CSS로 예제를 따라하며 정적 웹페이지를 만들었는데, 생각하는대로 잘 만들어지지 않아 조금 당황했다. 이렇게 잘 하던 도중 아래의 부분에서 막혔다. ▼

 

 페이지 요소들이 뒤죽박죽 꼬여있길래 왜 이런 문제가 발생하나 쭉 확인해보니,`aside`의 `float` 프로퍼티를 `fixed`로 해놨다. `position` 프로퍼티를 `fixed`로 해놓아야하는데 `float`를 이렇게 해두어 문제가 생겼다. ▼

 

이를 고치니 잘 나온다. ▼

 

 이렇게 어이없는 실수를 하기도 하고, 반응형 웹 페이지를 만들 때에도 일일히 픽셀에 따라 지정해주며 만드는 부분에서 엄청난 지루함을 느끼기도 했다. 너비를 지정해서 데스크톱, 태블릿, 모바일 이렇게 3기기에 맞게 대응을 하는 것을 따라해봤는데 더 효율적으로는 안될까? 하는 생각이 자꾸 들었다. 아마 지금까지 학습한 정도로는 어렵지만 FlexBox를 잘 응용하면 되지 않을까싶다.

 

 우선은 어떤 것들이 있는지를 봤으니 예제를 따라해보고 내가 만들고자 하는 사이트를 간단하게 구현해보는 것 까지 해봐야겠다.

 

마치며

---

현재까지 한 이해를 요약하면 이렇다. (만약 잘못 이해한 부분이 있다면 댓글로 알려주면 감사...)

• Html5에는 다양한 태그가 있다.
• 태그는 프로그래밍 언어의 예약어 혹은 프로토콜과 비슷한 느낌으로 하나의 표기 체계다.
  <button></button>은 모든 브라우저가 버튼임을 알며, 이를 표시해준다.
  모두가 지키기로 한 하나의 약속이기 때문이다.
• Html의 핵심 역할은 정보와 구조화다.
• 웹 UI를 짠다는 것은 html이라는 규칙 위에서 css로 스타일링을 한다는 것이다.
• CSS의 핵심 역할은 스타일링의 정의다.
• JS는 이들이 어떤 역할을 하고 어떤 행동을 하는지 정해준다.
• JS의 핵심 역할은 행동의 정의다.
• CSS에는 정말 많은 프로퍼티가 있다.... <- 핵심

배워야할 게 많기에 효율적으로 배분해서 학습해야겠다.