Syeonny의 블로그

html 본문

web

html

syeonny 2024. 12. 11. 14:00

 

241210, 11 

 

  • 웹 표준: 웹에서 표준적으로 사용되는 규칙
  • 마크업 언어: 웹에서 사용될 문서를 구조화하는 언어 ex) HTML XML ... 

 

  • 사용자 인터페이스: 사용자와 서비스 간의 상호작용 매개체 역할
  • HTML HyperText Markup Language: 웹 페이지 생성을 위한 표준 마크업 언어, 웹을 만들기 위한 언어

 

HTML 코드는 태그로 이루어져 있다. 

 

<h1> 제목입니다. </h1>

속성을 나타내는 시작 태그 / 사용자에게 보여줄 내용 / 끝을 알리는 종료 태그 

 

 

HTML 작성 규칙

 

  • 대소문자 구분 없음
    • but 소문자 권장
  • 주석 사용 <!-- 주석 --> 
  • 태그는 한 쌍으로 존재해야 함
    • but <img src="image.jpg"> <br> 이미지 및 줄바꿈은 종료 태그 없음 
  • 한 태그에 다른 태그가 들어간다면, 들여쓰기 필요 
  • 태그 속성은 " " 로 표시함
    • <input type="text" name="username" placeholder="이름을 입력하세요">

 

HTML 문서의 기본 구조

 

<!DOCTYPE html>

<html>

문서의 기본정보를 나타내는 메타데이터 

문서 내용

</html>

 

<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html lang="en"> <!-- 언어 설정 -->
<head>
    <meta charset="UTF-8"> <!-- 문자 인코딩 방식 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 동적 웹을 위한 설정 -->
    <title> 문서 제목 </title> <!-- 브라우저 탭에 표시될 제목 -->
</head>
<body>
    <!-- 문서의 구조와 내용에 대한 주석 --> 
    <h1> 문서 제목 </h1>
    <p> 문서 내용 </p>
</body>
</html>

 

 

메타데이터 정의로 검색 엔진에 걸림 

 

 

기본 태그

 

  • head : 문서의 헤더를 나타냄 - 주로 메타데이터를 포함
  • title: 문서의 제목을 정의, 브라우저 탭에 표시됨 
  • link: 외부 링크 연결
  • script: js 포함하거나 작성
  • body: 실제로 포함될 내용 
  • a href: 하이퍼링크 생성 태그 
  • img: 이미지 삽 태그 
  • audio: 오디오 태그 
  • video: 비디오 태그
  • source: 미디어 소스 태그 
  • embed: 객체 태그 
<head>
<title>문서 제목</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<a href="https://example.com">링크</a>
<img src="image.jpg" alt="이미지 설명">
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls>
    <source src="video.mp4" type="video/mp4">
</video>
<embed src="file.pdf" width="500" height="700">
</body>

 

 

공간

  • div: 공간 분할 block 형식인 태그 
  • span: 텍스트 일부 분할 inline 형식인 태그 
  • iframe: 문서 내에 또 다른 html 문서를 가져와야 할 때 사용하는 태그 
<div> 내용 </div>
<span style="color: red;"> 강조된 텍스트 </span>
<iframe src="https://example.com" width="600" height="400"></iframe>

 

 

 

순서

  • ol: 순서가 있는 목록을 나타냄 / type로 속성 지정
  • ul: 순서가 없는 목록을 나타냄 / style로 속성 지정 
  • dl: 항목을 정의하기 위한 목록 
    • dt: 각각의 항목
    • dd: 각 항목의 설명 

 

<ol>
    <li>항목 1</li>
    <li>항목 2</li>
</ol>
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>
<dl>
    <dt>HTML</dt>
    <dd>웹 페이지의 구조를 정의</dd>
</dl>

 

표 

  • table: 표 설정
  • th: 표의 이름, 제목 
  • tr: 표의 행  
  • td: 표의 열
  • thead: 테이블의 헤더   
  • tbody: 테이블의 본문
  • tfoot: 테이블의 바닥
<table>
    <tr>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
    <tr>
        <td>내용 1</td>
        <td>내용 2</td>
    </tr>
</table>

 

폼 

  • form: 폼의 시작과 끝 정의 
  • input: 사용자 입력 받음
  • textarea: 여러 줄의 사용자 입력을 받음  
  • label: input의 라벨로 나중에 사용할 수 있음
  • select: 드롭다운 선택 - 여러 선지 중 하나   
  • datalist: 드롭다운 선택 - 여러 선지 + 새로운 값 입력 가능 
  • option: 선택 가능한 옵션 정의 
  • button: 사용자가 선택할 수 있는 버튼

 

<h2> 폼 </h2>
<form action="/submit" method="post">
    <input type="text" name="username">
</form>

<h2> 이름 입력 </h2>
<label for="name"> 이름: </label>
<input type="text" id="name" name="name">
<input type="text" placeholder="김철수">

<h2> 내용 입력 </h2>
<textarea rows="4" cols="50"> 내용을 입력하세요. </textarea>

<h2> 옵션 선택 </h2>
<select>
    <option value="1"> 옵션 1 </option>
    <option value="2"> 옵션 2 </option>
</select>
<input list="browsers">
<datalist id="browsers">
    <option value="옵션 1">
    <option value="옵션 2">
</datalist>
<button type="submit"> 폼 제출 </button>

 

 

시맨틱 태그

 

시맨틱 태그: 태그 이름만 보고도 내용의 의미와 역할을 이해할 수 있도록 설계된 태그

 

구조 관련 태그 

  • header: 머리글 헤더 영역  
  • nav: 내비게이션 링크 그룹화 
  • main: 문서 주요 콘텐츠 영역 정의, 단 한 번만 사용 가능 
  • section: 주제 그룹화
  • article: 독립적으로 구분 가능한 콘텐츠 (뉴스, 신문기사)
  • aside: 부가적인 콘텐츠 (광고, 링크, 사이드바)
  • footer: 바닥글 영역 
<header>
    <h1>웹사이트 제목</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>
 
 <nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
    </ul>
</nav>

<main>
    <h2>주요 내용</h2>
    <p>주요 콘텐츠</p>
</main>

<section>
    <h2>소개</h2>
    <p>소개 내용</p>
</section>

<article>
    <h2>블로그 제목</h2>
    <p>독립적인 기사</p>
</article>

<aside>
    <h3>관련 링크</h3>
    <ul>
        <li><a href="#link1">링크 1</a></li>
    </ul>
</aside>

<footer>
    <p>&copy; 2024 My Website</p>
</footer>

 

 

콘텐츠 태그

  • figure: 이미지, 다이어그램, 코드 등 독립적 콘텐츠
  • figcaption: figure 태그에 포함된 콘텐츠의 설명
  • time: 시간
  • mark: 강조할 내용
  • address: 연락처(이메일) 정보
  • blockquote: 긴 인용문
  • cite: 제목, 책, 논문 등의 출처

 

<figure>
    <img src="image.jpg" alt="설명">
    <figcaption>이미지 설명</figcaption>
</figure>

<time datetime="2024-12-11">2024년 12월 11일</time>
<p>중요한 단어는 <mark>이것</mark> 입니다.</p>
<address>
    이메일: <a href="mailto:info@example.com">info@example.com</a>
</address>
<blockquote cite="https://example.com">
    "인용문"
</blockquote>
<cite>HTML5 가이드</cite>

 

 

저작자표시 비영리 변경금지

'web' 카테고리의 다른 글

css  (0) 2024.12.13
'web' Related Articles more