[데브코스 10일차] HTML / CSS 그리고 DOM

🤔 생각해볼 것

1. 시멘틱 태그가 무엇인가요?

2. 웹 접근성이 무엇인가요?

3. CSS를 html 파일에 적용하는 방법 3가지를 알고 있나요?

4. CSS에서 id와 class의 차이점은 무엇인가요?

5. html에서 같은 id값을 가진 태그가 여러 개 있다면 어떻게 처리될까요?

6. CSS 선택자 종류에는 무엇이 있을까요?

7. 브라우저 렌더링 과정을 설명할 수 있나요?

8. document.createDomcumentFragment는 무엇이고, 하는 일은 무엇일까요?

HTML / CSS

('html은 프로그래밍 언어가 아니에요' 라는 유명한 짤이 생각나는...) html은 그저 마크업 정적문서이다. 그리고 CSS는 그 문서를 꾸민다. CSS도 발전을 거치면서 단순히 색을 입히는 것 이상의 역할을 하게 되었다. 또 js는 그런 정적 문서를 동적으로 만들기 위해 등장했다. (자바스크립트의 등장 이유) 따라서 초기 자바스크립트는 브라우저에서만 동작했다. nodeJS가 등장하며 브라우저가 아닌 곳에서도 동작할 수 있게 됐고 자바스크립트는 전 세계에서 가장 인기있는 언어가 되었다. 웹이 점차 발전해나가면서 HTML, CSS, JS는 웹의 기본요소가 되었고, 각자의 역할에 맞춰서 발전하고, 없어지면 더 좋을 것 같은 것은 없어지고 있다. 그래서 각자의 역할에 충실하도록 3부분으로 나눠서 구성하는 것이 좋다. (SPA나 프레임워크에 따라서 철학이 다르므로 좀 달라질 수도 있음)

HTML도 HTML5로 발전하면서 시멘틱 태그가 등장하고, 태그에 구조적인 요소, 의미적인 태그가 추가되었다.

태그는 저마다 고유한 스타일을 가지고 있고, 브라우저마다 미묘하게 기본 스타일이 다르다. 이것과 관련한 라이브러리에는 reset-css(모든 스타일을 리셋), Normarlize.css(브라우저 간 css방식을 통일) 등이 있다.

css를 html 파일에 적용하는 대표적인 3가지 방법

1. <style> 태그 이용하기

2. 태그 자체에 style attribute 추가하기

3. 외부 css파일을 import

HTML, CSS는 어떻게 공부하면 좋을까?

html, css를 잘 하기 위해서는 결국 외워야 한다. 많은 태그와 css 속성을 알면 도움이 될 수 있다. 또 다른 개발자 분들이말씀하시는 것으로는 클론 코딩이 있다. 주의해야할 점은 절대 코드를 클론하는 것이 아니라, 그냥 화면만 보고 똑같이 만들어보는 것이다. (코드가 아닌 View만을 클론하는 것)

---

 

 

DOM

추상화된 html의 태그가 실체화가 된 것이 DOM이라고 할 수 있다. DOM은 트리 형태로 구성되어 있다. 그리고 각 노드는 확실하게 프로토타입 객체로 정의되어있다. (HTML Element를 타입스크립트에서 타입으로 정의할 수 있던 것도 이 이유 때문인 것 같다.) DOM Tree는 트리이고, 전위순회로 노드를 찾는다. (따라서 처음 등장한 노드부터 출력된다.)

DOM은 왜 탄생했을까?

1. 자바스크립트가 탄생하면서 같이 등장했다.

    - HTML 문서와 상호작용이 가능하게 되었다.

    - 초창기엔 접근 가능한 태그가 많지 않았다.

2. 표준안은 1998년에 등장했고 대다수의 브라우저에 적용되기까지 시간이 오래 걸렸다.

3. 점차 발전하여 HTML 문서를 직접 수정까지도 가능하게 되었다.

Virtual DOM에 관하여

리액트 핵심 개발자의 말에 따르면, "직접 DOM을 조작하는 것은 성능면에서 느리다" 는 것은 미신이라고 한다. 다만 직접 DOM을 조작하지 않고 Virtual DOM 방식을 채택하는 것이 가독성, 코드 유지보수 측면에서 더 낫고, 속도도 느리지 않기 때문이라고 말했다.

---

🔗 참고 자료

https://snusang.tistory.com/4

[HTML5 기초]시멘틱 구조 태그란?

http://www.wa.or.kr/m1/sub1.asp

웹접근성이란? > WA : 한국웹접근성인증평가원

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

반드시 기억해야 하는 CSS 선택자 30개

https://wit.nts-corp.com/2019/02/14/5522

DOM은 정확히 무엇일까? | WIT블로그

https://7942yongdae.tistory.com/70

Javascript - DocumentFragment를 사용해보자 [성능 최적화]

---

💡 오늘의 회고

앞으로 어떻게 될지는 모르겠지만, TIL에 관해서는 조금 힘을 빼보려고 한다... 원래 글을 쓰면서 공부하는 스타일도 아니고, 인터넷 강의를 보면서도 사실 어딘가에 옮겨 적지는 않는다. (그 대신 한 강의를 여러번 본다) 또 글을 적다보면 글을 더 잘 적고 싶은 마음에... 디자인같은 부분에 시간을 너무 많이 뺏겨버리기도 하는 것 같다. 자바스크립트에 대해서 더 공부하면서도 내가 이해한 내용, 더 깊게 공부한 내용에 대해서 조금씩 정리를 해놨다가 한번에 모든 개념을 모아서 글을 쓰고는 했었는데, 글을 너무 자주 쓰려다보니 스스로 영양가가 없어지는 것 같고... 또 글을 쓰려는 것에 대해서 강박이 생기는 것 같다. 강박이 생기는 것이 가장 두렵다. 남들이 모두 쓰니까 글을 쓰고 있는 것은 아닌지 다시 한번 점검해봐야 할 것 같다. 그렇지만 [데브코스 n일차] 포스팅들을 이젠 멈출 수도 없다^^ but 나의 일기라는 마음으로 가볍게, 조금 내려놓는 것도 좋을 것 같다. 더 중요한 것들을 위해.