[22주]-2장-HTML-전반부-기본문서-2023-09-11 중요 부분

2023. 9. 18. 23:29ㆍweb

HTML에 대해서
개요
Hyper Text Markup Language

    - Hyper : 그 밖의, Hyper Text : 연관된 문서, 순서에 관계없이 관련정보 제공

    – Markup language : 웹 브라우저에서 표시되는 요소들에 대한 형태를 지시(태그)하는 언어

웹 문서(페이지/하이퍼텍스트) 작성용 언어  

            - 웹 브라우져를 통해 볼 수 있는 하이퍼텍스트 문서를 만들때 사용하는 프로그래밍 언어

               . 인터넷 웹을 통해 접근하는 모든 웹 페이지는 HTML로 작성

            - 텍스트/하이퍼링크 작성, Web-browser 출력  (* 아래한글 : 편집, 출력)

              웹 브라우져는 타 컴퓨터 저장된 문서 접근, 출력

        * HTML 5 - 멀티미디어, 다양한 접속기기(모바일) 서비스

 

기능

     ☞ 정보의 등록 화면 및 검색 결과 출력 화면 생성

정보 표현

            - Text 데이터 : <H4> 크기, <body>

            - 멀티미디어 데이터 : 이미지, 음악, AV, 플래쉬

              <img>, <audio>, <video>

정보간 연결

    - 하이퍼링크 : <A>   / 문서내, 문서간 정보 연결

정보(문서)의 구조화

    - 문단 : <br>, <p>, <b>, …  

    - 목록  : <ol>, <ul>

    - 테이블 : <Table>, <tr>, <td> / 정보의 출력화면 사용

    - 프레임 : <div>, <iFrame>  /  화면의 분할

    - 시멘틱 태그 : <header>, <nav>, <section>, <article>

    - 폼 : <form>, <input>, <select>, <textarea>

            정보의 입력화면 사용, 통상 테이블 태그와 함께 사용

정리

¨HTML(Hyper Text Markup Language)은 웹 페이지를 기술하기 위한 마크업(markup) 언어
¨마크업 언어는 텍스트에 태그를 붙여서 텍스트가 문서의 어디에 해당하는지를 기술한 것

※ 하이퍼텍스트 : 문서 중간중간에 특정 키워드를 두고 문자나 그림을 상호 유기적으로 결합하여 연결시킴으로써 서로 다른 문서라 할지라도 하나의 문서인 것처럼 보이면서 참조하기 쉽도록 하는 방식을 의미

※ 확장자 : “htm” 또는 “html”

 

블록 태그와 인라인 태그

태그 : 블록 태그와 인라인 태그로 구분
블록 태그 사례 : <p>, <h1>, <div>, <ul>

    ☞ 블록태그 = 문단태그

인라인 태그 사례 : <strong>, <a>, <img>, <span>
 
블록 태그
¤항상 새 라인에서 시작하여 출력
¤양 옆에 다른 콘텐츠 배치하지 않고 한 라인 독점 사용
¤가장 많이 사용되는 블록 태그 : <div>

 

인라인 태그
¤블록 속에 삽입되어 블록의 일부로 출력

가장 많이 사용된 인라인 태그 : <span>

 

<DIV>

  - 배경 : Table 태그는 <Tr>, <td> 등에 의해 사용이 복잡, 자유로운 영역 지정 필요

  - 정의 : 화면의 영역을 분할하여 지정(사용), 블록을 정의 (Division)

  - 예) <DIV id = “Box” style = “position:absolute; top:10px; left:30px;

                   width:300px; height:300px; z-index:1; Visibility:hidden;

                   overflow:auto; auto; background:#E6E6E6”> 홍길동 </DIV>

♣ <SPAN>

  - 정의 : 문장 단위의 텍스트 영역을 지정

  - 사용 : 자체로는 역할이 없으며, 특정 구역에 CSS 스타일 지정시 사용

♣  공통점과 차이점  <DIV>나 <SPAN> 태그는 영역을 지정하나,  <DIV>는 사각형 박스 모양으로 문단 단위의 구역을 지정,

               <SPAN>은 한 문장내 단위 구역 지정

<img> 태그 : 이미지를 삽입할 때 쓰는 태그 

사용 예시 : <img border="0" src="seolak.jpg" alt="설악산" width="300" height="230">

src에 쓸 수 있는 파일들은 BMP, GIF, PNG, JPG 등이 있으며 src에 이미지 파일의 주소를 지정하면 되며 생략할 수 없다</img> 이런 닫는 태그는 사용하지 않는

alt는 이미지가 갑자기 없어지나 손상 되었을 때 출력되는 문자열이다

<ul>과 <ol> 태그 : 문자 앞에 글머리표나 순번을 붙여 줌 <ul> 혹은 <ol> 태그안에 <li> 태그를 함께 사용

 

<ul type =“블릿 종류”>

  <lh>목록의 제목
  <li>목록 1
  <li>목록 2
</ul>

사용 예제
ul과 ol의 차이점

<ol> 태그는 위의 라면 끓이는 순서처럼 순서가 나온다

반면에 <ul> 태그는 순서 없이 이런식으로 특수 문자가 붙어서 나열된

 <UL>
 <img src="bullet2.gif">쏘우<BR>
 <img src="bullet2.gif">므이<BR>
 <img src="bullet2.gif">극락도살인사건</UL>
 </UL>

위의 코드를 실행하면 밑에 글들처럼 변한다

이미지 같은 것들을 삽입하는 것도 가능하다

 

<table> 태그 : 웹 페이지를 구조적으로 표현 정보의 효과적 전달방법

 

 
표는 여러 행<tr>과 여러 셀<th>,<td>로 구성된다 그렇기에 
<thead>,<tbody>,<tfoot>은 여러 <tr>을 포함 가능하다
 
또한 rowspan, colspan을 통해 셀을 합치는게 가능하다

 

하이퍼링크

<a> 태그의 href 속성을 이용해 하이퍼링크 작성이 가능하다

이런식으로 html이나 사이트 주소를 넣는게 가능하다

<a href=“picturepage.html”>클릭하면 사진 페이지로 이동합니다.</a>

 

<a href=“http://www.naver.com”>네이버</a>

 

이런식으로 해서 서로으로 가기를 누르면 바로 chap1이 있는곳으로 이동하는것도 가능하다

<a href=“#chap1”>서론으로 가기</a>

...

...

<a id="chap1">1장 서론</a>

인라인 프레임 <iframe>

문서안에서 여러개의 문서를 분리해서 보여줄 때 사용한다 html안에 html을 삽입한다 iframe 태그에도 name 속성이 있어 target 속성과 함께 연결사용이 가능

 

<iframe src="iframe1.html" width="200" height="150">
	브라우저는 iframe 태그를 지원하지 않습니다.
</iframe>

 

 

'web' 카테고리의 다른 글

web 프로그래밍 중간고사 정리 4장  (1) 2023.10.12
web 프로그래밍 중간고사 정리 2장, 3장  (3) 2023.10.11
web 프로그래밍 중간고사 정리 1장  (0) 2023.10.04
[22주]-2장-HTML-전반부-기본문서-2023-09-11 번외  (3) 2023.09.18
[11-2주-11]-1장-웹프로그래밍-2023-09-05 중요 부분  (0) 2023.09.18

관련글

티스토리툴바