서론
한동안 BE 관련 공부만 했어서 HTML 이야 그렇다고 쳐도 css 는 상당히 어려웠던 것 같다. 사실 제대로 배운 적 도 없었다는 것... 그래서 그런가 확인 문제도 제대로 확인 안하고 풀어서 반토막으로 풀었다. ㅜ.ㅜ
본론
HTML 기본
먼저 HTML 기본 태그들을 배웠다.
Inline , block element 등 의 구분 , sementic tag 는 무엇인지 등등
기본적으로 HTML 은 TAG 라는 것으로 이루어진 HYPER TEXT MARKUP LANGUAGE 이다.
<html>
<body></body>
</html>위와 같이 Tag로 이루어져 있다.
Sementic Tag란
HTML5로 버전이 올라감에 따라 추가된 Tag들이 여러가지가 있다.
이는 사실
<div>위 태그와 다른 점이 없다. 그러나 개발자의 편의 등을 위해 한 눈에 구조를 파악 하기 위해서
<nav></nav>
<header></header>
<footer></footer>위와 같은 naming Tag 들이 만들어졌다. 사실 div 와 차이는 없다.
내 주적 CSS
CSS Casecading
사실 내가 Backend를 좋아하는 이유 중 하나가 아닐까? CSS 는 나에게 너무나 큰 벽이다.
Casecading 즉, 연쇄적으로 하위 트리에 영향을 줄 수 있는 스타일 형식이라 나에게 많은 어려움 이 있었다.
Android 또는 IOS 또는 하이브리드 Flutter 라던지 등은 Reclyerview 를 이용하는게 가장 커서 casecading 형식 보다는 재활용성에 더 초점을 두어서 그런 점이 없는 걸로 알아 더 배우기 쉬웠었는데...
그래서 그런지 다음과 같은 하위 셀렉터만 영향을 주는 셀렉터 , 후손 , attribute , 자식 셀렉터 등이 나누어지고 영향을 생각해야 하는 것이 가장 어려운 점이 아닌가 싶다.
아래는 하위 , 동위 셀렉터에 영향을 미치는 형식이다.
// 후손 셀렉터 header 내부 h1 태그에 영향을 줌
header h1 {}// header 바로아래 p 태그에만 영향을 줌
header > p { }// section tag 와 같은 부모를 바라보는 p 태그에 영향을 줌
section ~ p { }결론
사실 위 영향도 영향인데 Front는 알아야 할 CSS 사항이 너무 많다... BE 코스라서 간단하게 넘어가는 게 다행스럽... 디자인적 감각 뿐 만 아니라 상위 태그 CSS 영향 , 많은 CSS Option 요소들...
분명 백엔드를 상당히 많이 공부하고 여기 들어와서 안보지 않을 까 싶었는데 결국 다시 해버린 CSS 그래도 예전 보단 이해가 갔다... 그래도 나는 여기까지 ㅠㅠ 프론트 시러요.
그래서 그런지 토이프로젝트 할 때는 기존 Web publishing 이 된 사이트 라던가 Tailwind , BootStrap 을 많이 이용했던 것 같다. 이 정도면 충분히 Front와 협업 할 정도는 되지 않을 까 조심스레 말해 본다.
