본문 바로가기
코딩/HTML+CSS

HTML-2

by rosemarie 2022. 9. 28.
반응형

<예제1> 텍스트 꾸미기

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <hr>
    <p>
      <b>진하게</b><br>
      <strong>중요한</strong><br>
      <em>강조</em><br>
      <i>이탤릭으로 강조</i><br>
      <b><i>진하게 이탤릭으로 강조</i></b>
      보통문자<small>한 단계 작은 문자</small><br>
      <del>삭제</del><br>
      <ins>추가</ins><br>
      보통 문자의 <sup>윗첨자</sup><br>
      보통 문자의 <sub>아랫첨자</sub><br>
      <mark>하이라이팅</mark><br>
    </p>
  </body>
  </html>

<블록 태그와 인라인 태그>

태그: 블록 태그와 인라인 태그가 있음

 블록태그:

항상 새 라인에서 시작하여 출력

양 옆에 다른 콘텐트를 배치하지 않고 한 라인 독점 사용

<div> <p> <h1> <ul>

인라인 태그:

블록 속에 삽입되어 블록의 일부로 출력

<span> <strong> <a> <img>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <hr>
    <div style="background-color:skyblue;padding:20px;">
      내가 사람의 방언과 천사의 말을 할지라도
      <span style="color:red">사랑</span>이 없으면
      소리 나는 구리와 울리는 꽹가리가 되고,
      <span style="color:red">사랑</span>이 없으면 아무 것도 아니라.
    </div>
  </body>

<메타데이터 삽입>

html 페이지에 대한 메타 데이터를 담기 위한 태그들

<base> <link> <script> <style> <title> <meta>

메타 태그들은 <head> 태그 안에 작성

<head>
    <base href="http://www.mysite.com/score/">
</head>

<script>는 <body> 내에서도 작성 가능

 

<base> 태그

- 웹 페이지들의 기본 url과 페이지가 출력될 윈도우 지정

<head>
    <base href="http://www.mysite.com/score/">
</head>
<a href="math.html">수학</a>
<a href="science.html">과학</a>

<link> 태그와 <meta> xorm 

- <link> 태그는 외부 자원과 연결에 사용

ex> mystyle.css에 저장된 스타일 시트를 불러오도록 지시

<head>
    <link type = "text/css" rel="stylesheet" href="mystyle.css"
  </head>

-<meta> 태그는 다양한 메타 데이터 표현

-웹 페이지의 저작자가 "황기태"임을 표기

<meta name="author" content="황기태">

-웹 페이지의 내용 설명

-charset 속성으로 웹페이지에 사용하는 문자코드 지정

<meta charset="utf-8">

<이미지 삽입>

<img> 태그의 src 속성에 이미지 파일의 주소 지정

- src에 지정할 수 있는 이미지 종류: BMP, GIF, JPG, PNG, animated-GIF

<img src = "이미지 파일의 url, 필수속성"
    alt="이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열, 필수속성"
    width="이미지 너비, 생략 시 원본 이미지의 폭. 픽셀 수"
    height="이미지 높이, 생략 시 원본 이미지의 폭. 픽셀 수">

<예제> 이미지 삽입

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <img src = "media/Elvis.jpg"alt="Elvis"
    width="150"
    height="200">
    <img src="media/kitae.jpg" alt="황기태 사진없음" width="80"
    height="100">
  </body>
</html>

<리스트 만들기>

3가지 종류의 리스트

- 순서 있는 리스트 <ol></ol>

- 순서 없는 리스트 <ul></ul>

- 정의 리스트 <dl></dl>

리스트 아이템

-<li></li>

-</li> 생략 가능

 

<예제> <ol>로 라면 끓이는 순서 나열

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <hr>
    <ol type="A">
      <li>물을 끓인다.</li>
      <li>라면과 스프를 넣는다.</li>
      <li>파를 썰어 넣는다.</li>
      <li>5분 후 먹는다.</li>
    </ol>
  </body>
</html>

<예제> <ul>태그

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <hr>
    <ul>
      <li>감자탕</li>
      <li>스파게티</li>
      <li>올레국수</li>
    </ul>
  </body>
</html>

<예제> 중첩 리스트 만들기

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <hr>
    <ul>
      <li>내가 좋아하는 음식</li>
      <ul>
        <li>감자탕</li>
        <li>스파게티</li>
        <li>올레 국수</li>
      </ul>
      <li>라면 먹기</li>
        <ol type="1">
          <li>물 끓이기</li>
          <li>라면과 스프 넣기</li>
          <li>파 썰기</li>
          <li>한 입에 다먹기</li>
        </ol>
    </ul>
  </body>
</html>

<예제> 정의 리스트 만들기

<dl>: 용어

<dd>: 설명

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <dl>
      <dt><strong>인터넷</strong></dt>
      <dd>마이크로소프트에서 만든 므라우저</dd>
    </dl>
  </body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'코딩 > HTML+CSS' 카테고리의 다른 글

[CSS] padding  (0) 2023.08.08
HTML 태그 종류  (0) 2023.03.31
웹, URL&URI, HTTP, 웹 1.0, 브라우저  (0) 2023.03.31
HTML-3  (0) 2022.09.28
HTML-1  (1) 2022.09.21

관련글

티스토리툴바