본문 바로가기

전체 글40

[html 기초] 5. 링크와 하이퍼링크 - 절대 경로와 상대 경로 이해하기 링크는 웹의 핵심 구성 요소 중 하나로, 사용자가 한 페이지에서 다른 페이지로, 또는 특정 웹사이트로 이동할 수 있게 해 줍니다. 링크를 올바르게 사용하려면 절대 경로와 상대 경로라는 두 가지 중요한 개념을 이해해야 합니다. 이번 포스팅에서는 절대 경로와 상대 경로의 차이점을 이해하고, HTML에서 하이퍼링크를 만드는 방법을 배워보도록 하겠습니다. 이론을 설명한 다음 즉각적인 실습을 통해 지식을 굳히는 시간을 가져봅시다. 이론: 링크와 하이퍼링크 1. 하이퍼링크 (Hyperlink) 하이퍼링크는 웹 페이지에서 텍스트나 이미지를 클릭하면 다른 페이지로 이동하는 링크를 말합니다. HTML에서는 (anchor) 태그를 사용하여 하이퍼링크를 생성합니다. 방문하기 위 코드에서 href 속성은 "h yperlink.. 2023. 12. 3.
[html 기초] 4. 목록 만들기 - 순서 있고 순서 없는 목록 목록은 웹 페이지에서 정보를 구조화하는 데 매우 중요한 요소입니다. 이번 포스팅에서는 HTML에서 순서 있는 목록(ordered list)과 순서 없는 목록(unordered list)을 만드는 방법에 대해 알아보겠습니다. 먼저 이론적인 부분을 살펴보고, 그 다음에 직접 코드를 작성해 실습해 보도록 하겠습니다. 이러한 목록들은 사용자가 정보를 손쉽게 읽고 이해할 수 있도록 도와줍니다. 이론: HTML 목록 HTML에서는 글머리 기호 목록과 순차 목록을 만들 때 별개의 태그를 사용합니다. 1. 순서 없는 목록 () (Unordered List) 요소는 글머리 기호로 항목을 나타내는 목록을 만드는 데 사용됩니다. 보통 점, 원형, 사각형 등의 기호로 목록의 각 항목()을 표시합니다. 순서가 중요하지 않은 목.. 2023. 12. 2.
[html 기초] 3. HTML 텍스트 요소 - 제목, 단락, 강조 표시 HTML의 텍스트 요소는 웹 페이지에서 정보를 구성하고 전달하는 데 필수적인 부분입니다. 이번 포스팅에서는 HTML에서 텍스트를 다루는 주요 요소인 제목(``~``), 단락(``), 강조(``, ``) 태그에 대해 배워보겠습니다. 각 요소의 목적과 사용 방법을 이론으로 공부한 후, 실제 예제를 통해 실습해 보겠습니다. 이론: HTML 텍스트 요소 웹 페이지에 텍스트를 올바르게 구성하면 사용자들은 내용을 쉽게 이해할 수 있습니다. 구조적인 측면에서 HTML 텍스트 요소는 웹 페이지의 읽기 편의성을 증진하고, 검색 엔진 최적화(SEO)에도 도움을 줍니다. 1. 제목 요소 (~) HTML에서 제목은 부터 까지 총 여섯 단계로 나뉩니다. 은 가장 중요한 제목을 표시하며, 은 가장 낮은 단계의 부제목을 나타냅니다.. 2023. 12. 2.
[html 기초] 2. HTML 기본 구조 이해하기 - DOCTYPE부터 <html>, <head>, <body> 태그까지 HTML의 기본 구조를 이해하는 것은 웹 페이지 구성의 기본입니다. 이 글에서는 HTML 문서의 기본 구성 요소인 DOCTYPE, ``, ` Welcome to HTML! 이 문단은 웹 페이지의 본문, 즉 body 태그 안에 있습니다. 2. 파일을 'basic-structure.html'로 저장합니다. 3. 저장한 파일을 웹 브라우저로 열어보세요. 코드 설명 : 선언은 이 문서가 최신 버전의 HTML, 즉 HTML5임을 의미합니다. : 루트 요소로서 문서 전체의 부모 요소입니다. lang 속성은 문서의 주된 언어가 영어임을 명시합니다. : 이 안에서는 문서의 문자 인코딩, 제목, 그리고 기타 메타 정보를 설정할 수 있습니다. : 문자 인코딩을 UTF-8로 설정하여 국제 문자를 올바르게 표시할 수 있게 합.. 2023. 12. 1.
[html 기초] 1. HTML이란 무엇인가? - 웹 페이지와 마크업 언어 소개 안녕하세요, 웹 개발을 시작하는 첫걸음, HTML에 대해 배워볼까요? 오늘은 웹 페이지의 백본이 되는 마크업 언어인 HTML에 대해 알아보고, 간단한 예제를 통해 실제로 적용해 보는 시간을 갖겠습니다. 자동목차 이론: HTML이란 무엇인가? HTML은 'HyperText Markup Language'의 약자로, 웹 페이지를 구성하는 가장 기본적인 빌딩 블록입니다. 이 마크업 언어를 통해 웹 개발자는 웹 문서의 구조를 정의하고, 웹 브라우저에 텍스트, 이미지, 링크 등을 어떻게 표시할지 지시할 수 있습니다. 1. HyperText란? HyperText는 단순한 텍스트 이상의 의미를 갖습니다. 이는 텍스트가 다른 문서로 연결될 수 있는 방식을 의미하는데, 웹에서는 이를 '하이퍼링크'라고 합니다. 여러분이 흔.. 2023. 12. 1.

티스토리툴바