HTML / CSS 를 만지작거리다 보면 자꾸 헷갈리는 게 있는데, display 이 녀석이 가장 심하다. 특히 flex로 지정했을 때 내 마음대로 안 움직여주는 요소들을 보며... 이녀석 꼭 정리하리라 마음먹었다. 사실 HTML / CSS 정리도 얘때문에 나왔다.  This is span element.  결과:  작은 div 박스 안에 간단한 문장이 들어가있다. 현재 태그 뒤에 또 다른 태그를 입력하면 어떻게 될까?  This is span element. This is another span element. 결과: 첫 번째 span태그에 이어서 그대로 옆에 온다. 이렇게 줄바꿈이 존재하지 않고 같은 줄에 배치되는 요소(Element)를 인라인 요소(Inline element)라 한다. Inli..

구체적인 HTML / CSS 용어들을 정리하기 전에 큰 틀을 잡아놓고 가는 게 좋을 것 같아 작성해보는 DOM 이야기. HTML에 대해 찾아보면 다들 돔, 돔 하는데 이상하게 그 말이 와닿지 않았다. 지금까지 자바스크립트를 공부하며 이해한 건, '문서' 자체를 객체로 이해하면 된다는 사실이다. 천천히 살펴보자.  chatGPT에게 DOM이 뭔지 물어봤다.Document Object Model은 웹 문서를 위한 프로그래밍 인터페이스다. 문서의 구조는 트리 객체를 형성하고, 각 객체는 문서의 일부를 나타낸다.  무슨 말일까? 이를 알기 위해서는 웹 페이지(web page)와 웹 문서(web document)를 구분할 필요가 있다. 우선 웹 페이지는 웹 문서를 기반으로 만들어졌다. 현재 브라우저를 통해 보고 ..

추상화(abstraction)는 객체 지향 프로그래밍의 중요한 개념 중 하나로, 복잡한 시스템을 단순화하고, 불필요한 세부 사항을 숨기며, 시스템의 본질적인 부분만을 드러내는 것을 목표로 합니다.  추상화에 대한 chatGPT의 설명이다. 추상화라는 단어 답게 정의 또한 추상적이다. 좀 더 자세히 표현해보자면 나는 '구체적인 구현을 없애는 일'이라 생각한다. 어떠한 사물이 가지고 있는 구체적인 묘사를 하나씩 뺀다면 어떻게 될까? 사물이 기존에 가지고 있던 개성이 사라지며, 점점 기본적인 조형 요소만 남을 것이다. 몬드리안의 나무 연작에서 그 점이 잘 드러난다.  몬드리안은 미술의 흔들림 없는 절대적인 요소를 찾고자 했다. 몬드리안은 궁극적으로 모든 사물이 수평선과 수직선으로 그린 윤곽과 면을 칠한 색으로..

7월 말에 익산에 갔다와서 그런지 살짝 늦게 수강 완료.  를 읽으면서 동시에 수강했다. 둘 다 자료구조를 다루지만 근본적인 접근 방식과 서술이 다르다. 두 개가 의외로 상호보완적이라 학습하는데 시너지가 있었다. 차이는 다음과 같다.  (아래 비교에서 실무적, 이론적으로 이분했지만 실제로 둘 다 실용적이면서 이론적이다. 김영한의 실전 자바도 프로그래밍을 하며 만나는 어려움에 대해 '왜?'를 물으며 충분한 이유를 학습한다. 대신 구체적인 알고리즘과 자료구조의 구현 방식을 얼마나 다루느냐에 따른 학습의 내용 차이가 있을 뿐이다.) 김영한의 실전 자바쉽게 배우는 자료구조 with 자바접근 방식 실무적 관점으로 접근한다. 처음에 기본적인 구현으로 발생하는 문제점을 확인하고, 이를 해결하기 위한 추상적 방식을 도..