개발/HTML
HTML 문서의 기본 구조 설명 (2) ✔️
안녕하세요. 휘입니다. 지난 글에서는 HTML 문서의 대략적인 기본 구조에 대해 살펴봤는데요. 이번 글에서는 HTML 페이지 작성에 공통적으로 활용되는 추가적인 태그 요소들에 대해 알아보도록 하겠습니다. 이 글은 MDN, Document and website structure를 참고하여 작성되었습니다. HTML 문서의 기본 구성 HTML 문서의 구성은 작성자에 따라 크게 달라질 수 있지만 몇 가지 기본적인 공통 사항들이 존재합니다. 헤더, 네비게이션 바, 메인 콘텐츠, 사이드바, 푸터가 이에 해당하는데요. 이들의 주된 역할은 다음과 같이 정리할 수 있습니다. 헤더(header): 헤더는 상단의 큰 문구, 로고, 태그 라인 등으로 구성되며 대부분의 웹페이지에서 활용됩니다. 네비게이션 바(navigation..
의미론적 HTML 뜻과 구성 방법 설명 ✔️
HTML을 공부하다보면 의미론적(semantic) HTML이라는 표현을 접하게 됩니다. 의미론적이라.. 대체 어떤 뜻일까요? 다음은 의미론에 대한 위키백과의 정의입니다. '의미론이란 의미를 연구하는 것인데 의미의 뜻이 정확하지 않으니.. 의미란 무엇인지에 대한 논의부터 시작해보자..'가 의미론에 대한 철학적 접근입니다. 그러나 다행히도 HTML에서 의미론은 이처럼 심오한 개념은 아닙니다. 의미론적 HTML이란 'HTML의 태그들을 의미에 맞게 사용해 문서를 구성하자'는 것입니다. 예를 들어보겠습니다. 우리는 다음과 같이 HTML 문서를 작성할 수 있습니다. Is this a top level heading? 이렇게 하면 글자는 기본 폰트보다 커지고 마치 태그를 사용한 효과를 낼 것입니다. 그러나 여기에는..
HTML 문서의 기본 구조 설명 (1) ✔️
HTML 문서는 개별적인 여러 요소들이 모여 완성됩니다. 이는 하나의 콘텐츠가 제목, 내용, 이미지 등의 요소를 통해 완성되는 것과 같은 이치입니다. 이 글은 MDN 를 참고 및 정리한 것입니다. This is my page 위의 HTML 문서를 통해 HTML 문서의 기본적인 구조를 살펴보도록 하겠습니다. 먼저, 입니다. 이는 HTML 문서의 가장 처음에 선언해주는데요. 그 이유는 바로 HTML에는 다양한 버전이 있기 때문입니다. 따라서 이를 문서의 처음에 선언하여 브라우저가 해당 문서를 알맞게 해석할 수 있도록 합니다. 은 해당 HTML 문서가 HTML5 형식을 따라 작성되었음을 의미합니다. 다음으로 태그입니다. 이는 페이지의 콘텐츠 요소를 모두 감싸는 태그로 루트 요소라고 합니다. 태그는 HTML 페..
HTML meta chartset UTF-8 인코딩 설명 ✔️
UTF-8는 문자 인코딩에 가장 많이 사용되는 방법입니다. 이는 유니코드 시스템 코드 테이블을 사용하여, 현존하는 모든 문자들을 표시할 수 있습니다. 이 때문에, 인터넷에서 사용되는 대부분의 문자 세트에는 UTF-8 방식이 가장 많이 사용되고 있습니다. 컴퓨터는 글자, 숫자, 기호를 표시하기 위해 특정한 문자를 필요로 합니다. 이러한 일련의 문자는 특정한 순서를 따라 정렬되어 있습니다. 이를 문자 집합(character set)이라고 하는데요. 컴퓨터는 문자를 올바르게 파악하기 위해, 문자 인코딩이라 하는 비트(bits)의 패턴을 사용합니다. 문자 집합은 특정한 순서를 따라 이미 명시되어 있기 때문에, 문자 인코딩을 위해서는 해당 비트 패턴이 문자에 할당되어야 합니다. 만약, 선언된 문자 인코딩이 실제로..
HTML에서 언어(lang)를 지정해주는 이유는 무엇일까요?
HTML 페이지 소스 코드에서 언어를 설정하는 이유는 다양합니다. 무엇보다도 이는 사용자에게 웹 페이지의 텍스트 콘텐츠를 정확하게 표시하기 위함입니다. 또한, HTML 코드에 명시된 언어는 검색 엔진이 다양한 국가의 사용자에게 올바른 결과를 보여줄 수 있도록 도와줍니다. 만약, HTML 코드에 언어가 지정되어 있지 않다면, 검색 엔진은 다른 방법으로 이를 분석할 것이고, 이에 문제가 발생할 수도 있습니다. 이 글은 Declaring language in HTML을 번역 및 요약한 것입니다. 언어를 분석하는 데 사용되는 요소들 HTML 코드에 언어가 지정되지 않은 경우, 검색 엔진은 몇 가지 방법으로 웹 페이지의 언어를 판단합니다. 예를 들어, 구글과 같은 현대 검색 엔진은 간단한 텍스트 분석을 통해 콘텐..
DOM이란 무엇일까요?
DOM(Document Object Model)은 문서를 노드 및 객체로 표현한 것입니다. DOM은 웹을 다루는 데 사용되는 일종의 API입니다. DOM 모델을 사용하여 문서를 객체화하여 구조, 스타일, 콘텐츠를 변경할 수 있습니다. DOM은 웹 문서를 트리 구조를 따라 웹 문서를 계층적으로 표현합니다. 다음 그림을 참고해보세요. 이는 기본적인 HTML 문서를 노드 트리를 따라 구조적으로 표현한 DOM의 예시입니다. DOM과 자바스크립트 앞서 DOM이란 웹 문서를 다루는 데 사용되는 인터페이스라 정리했는데요. 대부분의 경우 자바스크립트를 통해 DOM을 제어할 수 있습니다. 다음 예시는 문서의 모든 태그를 선택하고 원하는 문단의 내용을 변경합니다. const paragraphs = document.quer..
<div>와 <span> 태그 차이 설명
와 은 스타일링을 목적으로 존재하는 HTML 코드입니다. 이는 콘텐츠를 태그로 둘러싸면 하나의 문단임을 의미하는 것과는 다르게, 어떠한 의미론적 의미(semantic meaning)을 갖지 않는 스타일 코드입니다. 이러한 와 은 콘텐츠 일부에 특별한 스타일 효과를 적용할 수 있는 유용한 코드입니다. 태그 설명 태그는 블록 레벨 요소로 보통 긴 콘텐츠를 그룹핑하는 데 사용합니다. 이를 통해 웹페이지의 레이아웃을 구성할 수 있습니다. 태그 설명 태그는 인라인 레벨 요소로 보다 보통 블록 레벨 요소 내 적은 콘텐츠 텍스트를 그룹화하는 데 사용합니다. , 활용 방법 와 은 보통 스타일링을 목적으로 class 와 id 속성과 함께 사용됩니다. 즉, 각 태그에 class 와 id 를 부여하고 각 클라스와 아이디 별..
블록 요소와 인라인 요소의 차이와 태그 설명 ✔️
HTML 태그에는 블록 요소와 인라인 요소가 존재합니다. 블록 레벨 요소는 새로운 줄에서 시작하며, 차지할 수 있는 모든 가로 길이(width)를 차지합니다. 반면, 인라인 요소는 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 만큼의 길이를 차지합니다. 블록 요소를 사용하는 태그들 블록 레벨 요소는 새로운 줄에서 시작하며, 화면의 왼쪽에서 오른쪽 끝까지의 길이를 차지합니다. 다음은 블록 요소를 사용하는 일반적인 태그들입니다. Headings , , , , , Paragraphs ... 인라인 요소만 내부에 포함할 수 있음 Divs ... 보통 하나의 문단보다 긴 영역을 포괄 인라인 요소를 사용하는 태그들 인라인 요소들은 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 길이만큼의 공간을 차지합니다. 다음은 ..
