2021. 05. 12(수) TIL

39740 단어 TILhtmlTIL

HTML

HTML

  • HyperText Markup Language
    • 웹용 문서를 작성할 때 사용되는 언어
    • HyperText : 문서의 링크를 클릭하면 연결된 문서로 즉시 이동할 수 있는 기능
    • Markup : 문서에서 어느 부분이 제목인지, 본문인지, 링크인지, 그림인지 등을 표시할 때 마크업(태그)을 사용한다.
    • 마크업(태그)을 사용해서 작성된 문서이며, 링크를 클릭하면 연결된 다른 문서로 즉시 이동할 수 있는 문서를 작성할 때 사용되는 언어

https://w3schools.com >> HTML 튜토리얼 사이트

HTML의 구성요소

  • 태그
    • <와 >를 이용해서 만든다.
    • 예) <a>, <p>, <table>, <ul>, <input>, <img>, <h1>, <body>, <html>
    • 태그명은 소문자로 적는다.
    • 태그는 여는 태그, 닫는 태그가 있다.
      • 여는 태그 : <a> <table> <ul> <h1>
      • 닫는 태그 : </a> </table> </ul>
      • 태그를 작성할 때는 여는 태그와 닫는 태그를 짝을 맞춰서 정확히 입력해야 한다.
        • 올바른 예)
          <h1>html 수업</h1>
  <p>이번 시간에는 html의 주요 태그를 살펴봅시다.</p>
        • 올바르지 않은 예)
          <h1>html 수업
  <p>이번 시간에는 html의 주요 태그를 살펴봅시다.</p>
    • 태그들 사이에는 부모태그, 자식태그의 관계를 가지는 태그가 있다.
      • 자식태그는 부모태그 안에서만 사용할 수 있다.
      • 자식태그를 부모태그 안에 적을 때는 들여쓰기 한다.
        • 올바른 예)
          • 부모태그(ul)태그 안에 자식태그(li)를 적었다.
            <ul>
    <li>커피</li>
    <li>쥬스</li>
  </ul>
        • 올바르지 않은 예)
          • 부모태그 밖에 적었다.
            <ul></ul>
  <li>커피</li>
  <li>쥬스</li>
          • 부모태그 없이 적었다.
            <li>커피</li>
  <li>쥬스</li>
    • 태그는 속성과 함께 사용할 수 있다.
      • 속성은 태그와 관련된 부가적인 정보, 추가기능을 정의한다.
      • 형식 : <태그명 속성명="속성값" 속성명="속성값">
      • 속성명과 속성값은 붙여서 적고, 속성값은 ""사이에 적는다.
      • 동일한 속성명을 여러 번을 적을 수 없다.
      • 속성명을 적을 때는 특별한 순서가 없다.
        • 작성예) 
          <img src="images/logo.png" width="160" height="70">
  • 속성
    • 태그마다 고유한 속성을 가지고 있다.
    • 속성은 원래 사용목적에 맞게 사용해야 한다.
    • 어떤 속성은 속성값이 미리 정해진 것들도 있다.
      <input type="속성값">
  <!--
    속성값은 text, password, radio, checkbox, date, number, hidden, file, button, submit, reset ...
  -->
    • data-*로 시작하는 속성은 임의로 추가할 수 있다.
      <img src="images/logo.png" data-title="회사로고" data-creator="홍길동" data-pubdate="2019-10-31">

HTML 문서의 구조

<!doctype html>
<html lang="ko">
<head>
<!-- 웹브라우저가 html문서를 해석할 때 필요한 정보를 정의하는 곳 -->
</head>
<body>
<!-- 실제로 화면에 표시되는 내용이 정의되는 곳 -->
</body>
</html>
  • <!doctype html>
    • html 문서의 유형을 선언하는 선언문이다.
    • "이 문서는 html5 작성규칙을 준수하는 HTML 문서다"라는 의미를 나타냄
  • <html> ~ </html>
    • html 문서의 루트 태그
    • 모든 html문서는 루트 태그를 오직 하나만 가질 수 있다.
    • 모든 태그는 태그 안에 작성해야 한다.
    • 태그는 와 태그를 자식태그로 가진다.
    • 태그는 lang속성을 가진다.
    • lang 속성은 문서에서 사용되는 언어를 지정할 수 있다.
    • lang 속성에 지정된 언어와 브라우저의 기본언어가 다르면 번역옵션이 표시된다.
      • 한국어:ko
      • 영어:en
      • 일본어:ja
      • 중국어:zh
      • 프랑스어:fr
      • 독일어:de
  • <head> ~ </head>
    • 웹브라우져가 문서를 해석하는데 필요한 정보를 제공하는 태그
      • 문서의 제목 : <title>문서의 제목</title>
      • 문자 인코딩 방식 : <meta charset="utf-8">
      • 스타일시트 : <link rel="style" href="style.css">
      • 기타 : 자바스크립트소스
    • <head>태그에 정의된 태그는 화면에 표시되지 않는다.
  • <body> ~ </body>
    • 웹브라우저에 실제로 표시될 내용을 포함하는 태그
    • 앞으로 배우게 될 태그들은 대부분 <body> 태그 안에서 사용하게 될 태그

태그

  • 컨텐츠를 담는 그릇이다.
  • 컨텐츠는 다른 태그, 텍스트, 그림, 영상, 목록, 표, 링크 등이 컨텐츠다.
  • 컨텐츠의 종류에 따라서 적절한 태그를 사용해야 된다.

html 문서

  • html 태그를 사용해서 작성된 문서다.
  • 문서는 보통 제목, 소제목, 내용, 목록, 표, 그림 등을 포함하고 있다.
  • html문서의 각 요소를 구성하는 적절한 태그를 사용해서 html문서를 작성해야 한다.

제목을 담는 태그

  • heading 태그(제목 태그)
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그는 제목을 담는 태그를 만든다.
  • 숫자가 낮을 수록 더 큰 범주의 제목을 담는다.
  • 웹페이지에서 웹페이지의 제목, 기사의 제목, 영화의 제목, 책의 제목
  <h1>제목</h1>
  <h2>부제목</h2>
  <h3>소제목</h3>
  ...
  <h1>JSP 프로그래밍</h1>
  <h2>JSP로 쉽게 배우는 웹 프로그래밍</h2>
  
  <h3>JSP의 개요</h3>
  <h4>웹과 JSP 프로그래밍 이해하기</h4>

  <h3>스크립트 태그</h3>
  <h4>JSP 개발환경 구축하기</h4>

본문 내용을 담는 태그

  • paragraph 태그(단락 태그)
  • <p> 태그는 본문의 내용을 담는 태그를 만든다.
  • 웹페이지에서 기사의 내용, 영화의 줄거리, 책의 소개글, 게시글의 본문, 블로그의 내용, 상품의 상세정보 등을 담을 때 사용한다.
  • <p>태그와 <p>태그는 단락을 구분짓는 빈 줄이 추가된다.
  <p>웹 페이지는 크게 정적페이지와 동적페이지로 나눌 수 있다. 정적 웹 페이지는 컴퓨터에 저장된 텍스트 파일을 그대로 보는 것이고, 
    동적웹페이지는 저장된 내용을 다른 변수로 가공 처리하여 보는 것이다.</p>

목록을 담는 태그

  • Unordered List 태그(순서없는 목록 태그)
    • <ul> 태그는 순서없는 목록을 만든다.
    • list item 태그
      • <li> 태그는 목록의 컨텐츠를 담는 태그를 만든다.
    • <ul>태그는 자식태그인 <li>태그를 가진다.
    • <li>태그가 컨텐츠를 가진다.
    • 뉴스목록, 상점에서 파는 상품목록, 부서에 근무중인 사원목록, 취미 목록
  <h3>국내도서</h3>
  <ul>
    <li>소설</li> 
    <li>시</li> 
    <li>인문</li> 
    <li>국어/외국어/사전</li> 
    <li>학교교재</li> 
    <li>과학기술</li> 
  </ul>
  • Ordered List 태그(순서있는 목록 태그)
    • <ol> 태그는 순서있는 목록을 만든다.
    • list item 태그
      • <li> 태그는 목록의 컨텐츠를 담는 태그를 만든다.
    • <ol>태그는 자식태그인 <li>태그를 가진다.
    • <li>태그가 컨텐츠를 가진다.
    • 검색어 순위 목록, 음원사이트의 음원차트 목록, 요리의 레시피, 게임의 순위
  <h3>영화 얘매순위</h3>
  <ol>
    <li>도굴</li> 
    <li>삼진그룹 영어토익반</li> 
    <li>내가 죽던 날</li> 
    <li>애비규환</li> 
    <li>킹덤 오브 헤븐</li> 
    <li>노트북</li> 
  </ol>
  • Description List 태그(정의 목록 태그)
    • <dl> 태그는 정의목록을 만든다.
    • defined term 태그
      • <dt> 태그는 정의 목록의 항목을 담는 태그를 만든다.
    • describe term 태그
      • <dd> 태그는 정의 목록의 항목에 대한 데이터를 담는 태그를 만든다.
    • <dl>태그는 자식태그인 <dt>와 <dd>를 가진다.
    • <dt>와 <dd>가 한 쌍이다.
    • <dt>와 <dd>중에서는 <dt>를 먼저 적는다.
      <h3>도서정보</h3>
  <dl>
    <dt>제목</dt><dd>이것이 자바다</dd>
    <dt>저자</dt><dd>신용권</dd>
    <dt>출판사</dt><dd>한빛미디어</dd>
    <dt>쟝르</dt><dd>IT/모바일</dd>
    <dt>가격</dt><dd>35,000 원</dd>
    <dt>할인가격</dt><dd>32,000 원</dd>
  </dt>

링크를 담는 태그

  • <a> 태그는 링크를 생성하는 태그다.
  • 형식
  <a href="주소" target="어디에서 오픈할 것인지" title="풍선도움말">화면에 표시될 텍스트</a>
  • href는 필수 속성입니다.
  • target, title은 생략가능합니다.
  • <a>태그의 주요 속성
    • href : 연결될 문서의 주소를 정의한다.
      • 외부사이트 주소 
        <a href="http://www.daum.net">다음</a>
      • 내부문서 주소
        <a href="/course/best.html">베스트셀러</a>
      • 같은 문서내 특정 위치
        <a href="#top">문서의 처음으로 이동</a>
    • target : 연결된 문서를 어디에서 오픈할 것인지를 정의한다.
      • target="_blank" : 링크된 페이지를 새 창이나 새 탭에서 연다.
      • target="_self" : 링크된 페이지를 현재 창이나 탭에서 연다.(기본값)
    • title : 풍선도움말에 표시할 내용을 정의한다.

표를 담는 태그

  • <table> 태그
    • 표를 생성하는 태그
  • <thead> 태그
    • 표의 헤더부를 생성하는 태그
  • <tbody> 태그
    • 표의 바디부를 생성하는 ㅐ그
  • <tfoot> 태그
    • 표의 푸터부를 생성하는 태그
  • <tr> 태그
    • 표에 새로운 행을 추가하는 태그
  • <th> 태그, <td> 태그
    • 표의 헤더칸, 표의 데이터칸을 행에 추가하는 태그
  • <table> 태그는 <thead>, <tbody>, <tfoot> 태그를 자식태그로 가진다.
  • <table> 태그는 <tr> 태그를 자식태그로 가진다.
  • <thead>, <tbody>, <tfoot> 태그는 <tr> 태그를 자식태그로 가진다.
  • <tr> 태그는 <th>, <td>태그를 자식태그로 가진다.
  <h3>도서 주문정보</h3>
  <table>
    <thead>
      <tr>
        <th>순번</th>
        <th>제목</th>
        <th>가격</th>
        <th>구매수량</th>
        <th>구매금액</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>이것이 자바다</td>
        <td>35,000 원</td>
        <td>1 권</td>
        <td>35,000 원</td>
      <tr><tr>
        <td>2</td>
        <td>스프링 인 액션</td>
        <td>28,000원</td>
        <td>2 권</td>
        <td>56,000 원</td>
      <tr>
      <tr>
        <td>3</td>
        <td>정규표현식 핸드북</td>
        <td>10,000 원</td>
        <td>1 권</td>
        <td>10,000 원</td>
      <tr>
    </tbody>
  </table>

이미지를 담는 태그

  • <img 태그> 태그는 이미지를 표시하는 태그다.
  • 이미지를 표현할 때 사용합니다.
  • 컨텐츠를 가지지 않는 태그다.
  <img src="images/logo.png" alt="로고이미지" width="64px" height="64px">
  • 주요 속성
    • src : 표시할 이미지파일의 경로와 파일명을 정의한다.
    • alt : 이미지에 대한 설명을 적는다. (웹 접근성)
    • width : 이미지의 너비
    • height : 이미지의 높이

포맷팅된 텍스트를 담는 태그

  • <strong> 태그
    • 중요한 텍스트는 <strong>태그에 담는다.
    • <b&t; 태그를 대신해서 사용된다.
  • <em> 태그
    • 강조하고 싶은 텍스트는 <em>태그에 담는다.
    • <i> 태그를 대신해서 사용된다.
  • <del> 태그
    • 삭제된 내용은 <del>태그에 담는다.
  • <small> 태그
    • 작게 표현할 태그는 <small>태그에 담는다.
  • <mark> 태그
    • 하이라이트시킬 내용은 <mark>태그에 담는다.

position: sticky, fixed
JAVA - 13 : I/O

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage