Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned semantic tag 시멘틱(semantic) 태그 의미가 부여된 태그라는 뜻 입니다. 사용해야 하는 이유와 종류를 알아봅니다. 시맨틱 태그란? - HTML 태그에서 가장 기본적으로 쓰이는 태그는 태그 입니다. - HTML5 부터 등장 했습니다. 예를 들자면 같은 태그가 있습니다. 이 태그를 보면 직관적으로 태그라는 것을 알 수 있습니다. 시맨틱 태그를 사용해야 하는 이유 - HTML 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않고 태그를 활용하여도 무방합니다. 하지만 우리가 시멘틱 태그를 사용해야 하는 이유를 설명 드리겠습니다. 1. 가독성과 유지보수가 쉬워집니다. 모든 태그가 div라고 한다면 한눈에 파악하기 어렵고 태그 영역이 햇갈립니다. 2...

❤️‍🔥TIL : Today I Learned position CSS position에 대해 설명합니다. position ? - CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top , right , bottom , left 속성이 요소를 배치할 최종 위치를 결정합니다. 구문 - static : 기본값으로 요소들이 겹치지 않고 상 -> 하로 배치 됩니다. - relative : 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치합니다. - absolute : 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요소를 배치합니다. - fixed : 웹 브라우저 화면 전체를 기준으로 배치합니다. 스크롤을 하더라도 위치가 고정되는 특징이 있습니..

❤️‍🔥TIL : Today I Learned DOM DOM (Document Object Model )은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 1. 노드 - HTML요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 위와 같은 요소들의 집합으로 이뤄지며, 요소 간에는 중첩 관계에 의해 계층적인 부자(부모)관계가 형성 된다. 이러한 관계를 반영하여 모든 노드 객체들을 트리 자료구조로 구성하며 이것을 DOM 또는 DOM 트리라고 한다. 최상위의 부..

'너가 장사를 하려고 하는데, 공간이 필요하겠지? HTML은 인테리어가 아무 것도 안되어있고 시멘트만으로 구역을 나눈 하나의 건축물, 건물이라고 생각하면 되겠다' 저는 친구들에게 설명할 때 이렇게 말하곤 합니다. 사실 'HTML' 은 웹 브라우저에서 우리가 보는 가장 흔한 문서파일 입니다. 하지만 순수하게 HTML 파일이 가진 태그 만으로는 우리가 아는 멋진 웹페이지가 아닐겁니다. HTML 파일의 목적이 문서, 정보 전달이였기 때문이죠 HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며,..