
07. HTML-Typing the contents(Image)
[toc] 4. 웹 문서에 내용 입력하기 4-4. 이미지 삽입하기 이번 학습에서는 웹 문서에 이미지를 삽입하는 방법을 중심으로 <img> 태그의 구조와 필수 속성, 그리고 이미지 크기 조절 방식에 대해 정리하였다. 1. <img> 태그 이미지를 웹 문서에 삽입하려면 반드시 <img> 태그를 사용해야 한다. ...
[toc] 4. 웹 문서에 내용 입력하기 4-4. 이미지 삽입하기 이번 학습에서는 웹 문서에 이미지를 삽입하는 방법을 중심으로 <img> 태그의 구조와 필수 속성, 그리고 이미지 크기 조절 방식에 대해 정리하였다. 1. <img> 태그 이미지를 웹 문서에 삽입하려면 반드시 <img> 태그를 사용해야 한다. ...
4. 웹 문서에 내용 입력하기 [toc] 4-3. 표 만들기 이번 학습에서는 HTML에서 테이블을 만드는 다양한 태그들을 정리하였다. 표는 정보를 구조적으로 표현할 수 있는 중요한 구성 요소로, 콘텐츠를 행(row)과 열(column)로 구분하여 표시할 수 있게 해준다. 1. 표의 기본 구성 요소 HTML 표는 행(row), 열(co...
4. 웹 문서에 내용 입력하기 [toc] 4-2. 목록 만들기 이번 시간에는 HTML 문서에서 항목들을 나열할 수 있는 목록(list) 태그를 학습하였다. 목록 태그는 정보 구조를 명확하게 하고, 사용자에게 직관적인 콘텐츠 탐색 경험을 제공한다. 대표적인 목록 형태는 세 가지로 나뉜다: 순서 있는 목록 <ol>, 순서 없는 목록 <...
4. 웹 문서에 텍스트 입력하기 [toc] 이번 학습에서는 HTML 문서에 실제 텍스트 콘텐츠를 입력하기 위한 여러 태그들을 정리해보았다. 제목, 문단, 줄바꿈, 인용문 등 웹 페이지에서 기본적으로 사용되는 텍스트 관련 태그들의 사용법과 차이점을 중심으로 실습하였다. 4-1. 텍스트 입력 기본 태그 1. <hn> 태그 (제목 태그...
3. 웹 문서 구조를 만드는 시맨틱 태그 [toc] 1. 시맨틱 태그란? 시맨틱이란 ‘의미론적인’, ‘의미가 통하는’이라는 뜻의 영단어입니다. 즉, 태그의 이름만 봐도 어떤 역할을 하는지 직관적으로 알 수 있습니다. 예시: <p>, <a>, <nav> 등 2. 시맨틱 태그는 왜 필요할까? 웹...
HTML 구조 파악하기 [toc] HTML 기본 구조 살펴보기 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML 기본 구조 살펴보기</title> </head> <body>...
1. HTML 시작하기 [toc] 소스 코드는 cmd(ctrl)+ /로 확인할 수 있습니다. HTML이란? 다양한 인터넷 정보를 웹 브라우저에 보여줄 때 사용하는 언어 (웹 문서를 만드는 언어) HTML = HyperText Markup Language의 줄임말 HyperText: 문서를 서로 연결해주는 링크를 의미...
마크다운 문법 [toc] 소스 코드는 cmd(ctrl)+ /로 확인할 수 있습니다. 목차 설정방법 [toc]을 사용하면 위에 보이는 목차처럼 목차가 생성됩니다. 새로운 항목을 추가할 때마다 목차가 갱신되어 실시간으로 확인할 수 있습니다. 블럭 요소 헤더 헤더는 1-6단계의 크기가 있습니다. #, ##, ### 등을 사용합니다. # Th...