[Day2] HTML 2 - 여러가지 태그

[Day2] HTML 2 [11/3]

--복습--

1. html5 구조에 대해서 설명하세요.

1) 문서 유형 선언문 <!DOCTYPE html>

2) <html> 최상위 루트 요소

</html>

3) <body></body> 필수

4) <head>

</head> 선택

2) 웹 동작 원리에 대해서 설명하세요.

클라이언트 -> 요청(request) 서버

<- 응답(response)

전용 웹 브라우저 웹서버 + WAS

주소창 : url 아파치 톰캣 8.5.83

3. [요소(Element)]에 대해서 설명하세요.

<시작태그>내용</종료태그>

3-2. [속성(Attribute)]에 대해서 설명하세요.

- html 요소의 추가 정보를 제공

- 형식

<시작태그 속성명="속성값" ... >

4. 웹

웹 1.0 X

웹 2.0 : 누구나 컴퓨터 사용

웹 3.0 : 필요한 정보만 제공

에 대해서 설명하세요.

5. 웹 표준 기술

[ ㉠ html5 웹페이지구성 ] + [ ㉡ css3 스타일 적용 ] + [ ㉢ javascript 사용자 반응 처리 ]

* 탭,공백,엔터(개행) - 공백 1개 처리(기억)

* 공백처리

[html entity(엔티티==독립체)]

html의 예약문자(특수문자)는 문자 엔티티로 대체되어야 한다.

형식) &엔티티명; or &#엔티티_숫자;

   권&#160;&#160;&#160;&#160;&#160;재현<br />
   강&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;새암<br>
   원&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;성현<br>
   <!-- 경고 :  Unknown tag (안진형). -->
   &lt;안진형&gt;태그X&lt;/안진형&gt;<br>

     <   <   less than   <
     >     >   greater than  >
     &     &   ampersand
     "   "   double quotation mark
     '     '   single auatation mark
     ©   ©   copyright

     non-breaking space : nbsp

  개행   <br>  line [br]eak   종료태그 X

<시작태그>내용</종료태그>

<시작태그></종료태그> == <시작태그 />

<시작태그> -- 종료태그가 없는 이유? 내용 X

<h3>hn(1~6)  html 제목(Heading)</h3>
  
<hr width="100" color="red"  size="10">
  
<!-- 색깔 지정 - 표준 색상명 (140개) red/blue -->
<!-- 색깔 지정 - 16진수 색상    #rrggbb            0~255-->
<!-- css 색깔 지정 : rgb(0,0,255) -->
<hr width="100px" color="blue"  align="left">
<hr width="100px" color="#0000FF"  align="left">
<hr width="50%" align="right"> <!--  기준 : 부모요소의 너비를 기준  [반응형웹]-->

- [ 블럭모드] / 인라인모드

블럭모드 : 하나의 라인 무조건 차지

인라인모드 : width / height 속성, margin / padding 속성 적용 못함

h태그

- 제목 위/아래 여백(margin)이 자동으로 추가.

- 검색엔진이 제목(hn)을 사용하여 웹 페이지의 구조와 내용을 파악한다.

- 글자 진하게( bold )

hr태그

- 수평자(줄, 선)을 표현

- 블럭모드

- [h]orizontal [r]ule

- 종료태그 X

- px( 픽셀), %( 백분율)

- align 속성 : 정렬 속성 center(기본값), [justifyX], left, right

* html 속성의 단위를 생략하면 기본은 px이다.

<p> 
뉴스타파는 '이태원 참사' 당시 경찰 112센터에 접수된 신고 녹취록 11건을 입수했다. 오후 6시 34분 최초 신고부터 오후 10시쯤까지 시간순으로 신고된 내용들이다. 
</p>
<p> 
녹취록에 따르면, 오후 6시 34분 최초 신고자는 자신의 위치를 "해밀톤호텔 옆 골목 편의점"이라 말한다. 편의점은 이태원 참사가 발생한 바로 그 골목에 있었다. 신고를 접수한 경찰은 이 내용을 듣고 "해밀톤호텔 골목에 있는 편의점이요"라면서 다시 장소를 확인했다.
</p>
<p> 
오후 8시 9분 두 번째 신고에서도 신고자는 자신의 위치가 "이태원역 3번 출구 맞은편"으로 사고 발생 지점 부근이라고 설명했다. 다음 오후 8시 33분 신고도 마찬가지였다. 신고자의 위치는 참사가 발생한 골목에 있었다.
</p>
<p> 
4번째(오후 8시 53분)부터 11번째(오후 10시 11분)까지의 신고 내용도 모두 확인했지만, 신고자들은 모두 자신의 위치가 참사 발생 지점 주변이라고 설명했다. 확인 결과 신고자들은 대부분 참사 발생 지점 30m 이내에 있었다. 
</p> 
 
<hr>
 
<br> 
뉴스타파는 '이태원 참사' 당시 경찰 112센터에 접수된 신고 녹취록 11건을 입수했다. 오후 6시 34분 최초 신고부터 오후 10시쯤까지 시간순으로 신고된 내용들이다. 
<br><br>
녹취록에 따르면, 오후 6시 34분 최초 신고자는 자신의 위치를 "해밀톤호텔 옆 골목 편의점"이라 말한다. 편의점은 이태원 참사가 발생한 바로 그 골목에 있었다. 신고를 접수한 경찰은 이 내용을 듣고 "해밀톤호텔 골목에 있는 편의점이요"라면서 다시 장소를 확인했다.
<br><br>
오후 8시 9분 두 번째 신고에서도 신고자는 자신의 위치가 "이태원역 3번 출구 맞은편"으로 사고 발생 지점 부근이라고 설명했다. 다음 오후 8시 33분 신고도 마찬가지였다. 신고자의 위치는 참사가 발생한 골목에 있었다.
<br><br>
4번째(오후 8시 53분)부터 11번째(오후 10시 11분)까지의 신고 내용도 모두 확인했지만, 신고자들은 모두 자신의 위치가 참사 발생 지점 주변이라고 설명했다. 확인 결과 신고자들은 대부분 참사 발생 지점 30m 이내에 있었다. 
<br>

[p]aragraph == 문단, 단락

- 항상 새 줄에서 시작

- 일반적으로 텍스트 블록

- 윗, 아랫쪽 여백 자동 추가. -> br 태그는 사이 공간 선택됨, p 태그는 선택 안됨

[ CSS ]

Casacading Style Sheet (계단식 스타일 시트)

HTML 웹 페이지의 스타일을 지정할 때 사용하는 언어

현재 2013년에는 CSS3 버전을 사용중

[CSS] 적용하는 4가지 방법

<1> head 태그 안에 style 태그 를 사용해서 CSS 적용할 수 있다.

<title>SS17 2022. 11. 3. 오전 11:07:08</title>
<style type="text/css">

1. 스타일을지정할대상 == 선택자 == selector

2. 설정할 스타일 들~

형식

  선택자{
  속성명:속성값;
  속성명:속성값;
  속성명:속성값;
  }

선택자{ 속성명:속성값;속성명:속성값;속성명:속성값; }

/* css는 단위를 생략하면 css 적용되지 않는다. */

/* 모든 p 태그를 선택자로 사용하겠다 */

p {  
    color: gray;
    border:1px solid black ;      /* 경계 , 테두리*/
}

  p {
      border: 1px dotted gray;
  }
  span{
      color:red;
      background-color: yellow;
      /* 버튼 누르면 보이게, 사라지게 처리 : javascript */
      display: none;  /* 전시하다, 내보이다. */
  }

span 태그

- 인라인 모드

- 텍스트 컨테이너( 용기 )

 <p>
 오늘 예비군 훈련을 <span>권재현</span>, <span>강새암</span>, <span>원성현</span>씨가 갔습니다.
 </p>

* 사용자 반응(이벤트) 처리는 js 로 한다.

<button>Show</button>
<button>Hide</button>

텍스트를 span이라는 컨테이너에 담는 이유? 스타일 적용( css ) + js 하기 위해서!

pre 태그

- [pre]formatted text ( 미리 포맷된 텍스트 )

- 고정 너비 글꼴로 표시가 된다.

- 텍스트는 공백과 줄 바꿈 모두 유지한다.

- 텍스트는 html 소스 코드에 작성된 그대로 표시된다.

      <var>int a ; 정수</var> 
      <kbd>a = scanner.nextInt()  키보드로부터 입력을 받는다는 표시</kbd> 
      <samp> 
          computer 프로그램으로 부터 샘플 출력 정의하는 태그
      </samp>
      <code>
컴퓨터 코딩의 일부분 정의하는 태그 
ThreadWorker02 t = new ThreadWorker02();
t.start();
String inputData = JOptionPane.showInputDialog("아무값이나 입력하세요.");
System.out.println( inputData );
t.interrupt();   // interrupted 상태 false ->  true
System.out.println( t.isInterrupted() );   // true
System.out.println(  " main END ");
      </code>

Unknown tag (xmp)

- 더이상 추천되지 않음

- 태그 적용되지 않음!!! (pre의 경우 태그 적용 됨)

- HTML 태그들은 수행되지 않고 소스 문자열로 표현된다.

     <xmp>     
- 가나다라
- 마바사아
     </xmp>

기타 태그

<xmp>
  1. <b></b> - bold , 굵은 텍스트
  2. <strong></strong> - 중요한 텍스트
  3. <i></i> - italic 기울임꼴 텍스트
  4. <em></em> - emphasized  강조된 텍스트 == 기울임꼴 
  5. <mark></mark> - 표시된 텍스트, 노랑색 배경색
  6. <small></small> - 더 작은 텍스트
  7. <del></del> - deleted 삭제된 텍스트 
  8. <ins></ins> - inserted 삽입된 텍스트 , 밑줄
  9. <sub></sub> - 아래 첨자 텍스트
  10. <sup></sup> - 위 첨자 텍스트  
</xmp>

   <h3 id="subsample">물 = H<sub>2</sub>O</h3>
   <h3>누승 =    2^3= 2<sup>3</sup>=8</h3>

html 인용문 - q, blockquote

1) A short inline quotation : q 태그

- 짧은 인라인 인용문

- 인라인모드

- 쌍따옴표 안에 인용구가 들어감

  <q>누구나 그럴싸한 계획을 가지고 있다. 쳐 맞기 전까지는</q>

2) A long quotation : blockquote 태그

- 긴 인용문

- 자동으로 들여쓰기

- 블럭 모드

<blockquote cite="http://www.sist.or.kr/sample.html">
설명하지 마라.
친구라면 설명할 필요가 없고,
적이라면 어차피 너를 믿지 않을테니깐.
</blockquote>

[ abbr ] 태그

- abbreviation 약칭, 약어

- 브라우저, 번역 시스템 및 검색 예진에 유용한 정보를 제공할 수 있다.

- 마우스를 올리면 툴팁(== 풍선도움말)이 출력.

 <abbr title="HyperText Markup Language">html</abbr>

[ address] 태그

- 작성자/소유자 등의 주소

- 연락처 정보( 주소, 이메일, 전화번호, 소셜 미디어 등등 )

- 기울임꼴로 랜더링

 <address>
    서울특별시 강남구 테헤란로 131(역삼동) 한독빌딩 8층
 </address>

[ cite ] 태그

- 들다, 인용하다. 소환하다.

- 창작물(책, 시, 노래, 영화, 조각, 그림 등등)의 제목을 정의하는 태그

- 기울임꼴로 랜더링

<cite>The Scream</cite>

[bdo] 태그

- 현재 텍스트 [방향]을 재정의하는 태그

- Overrides default [b]i[d]irecti[o]nal display. For use with bidirectional languages.

재정하다 기본 양방향 표시

기본 양방향 표시를 재정의한다. 양방향 언어에 사용된다.

- 기본 : ltr 왼->오

dir="rtl"

<bdo>For use with bidirectional languages.</bdo>
<bdo dir="rtl">For use with bidirectional languages.</bdo>

[font] 태그

- 글꼴, 글크기( size 속성 1~7[3] ), 글색상 등등

<font size="1"  face=""  color="yellow">안녕하세요. 홍길동입니다</font><br>
<font size="2">안녕하세요. 홍길동입니다</font><br>
<font size="3">안녕하세요. 홍길동입니다</font><br>
<font>안녕하세요. 홍길동입니다</font><br>
<font size="4">안녕하세요. 홍길동입니다</font><br>
<font size="+1">안녕하세요. 홍길동입니다</font><br>
<font size="5">안녕하세요. 홍길동입니다</font><br>
<font size="6">안녕하세요. 홍길동입니다</font><br>
<font size="7" face="궁서체">안녕하세요.  <font color="red"><b>홍길동</b></font>입니다</font><br>
<font size="100">안녕하세요. 홍길동입니다</font><br>

html 링크(link)

- 페이지에서 페이지로 이동할 수 있다.

- 링크를 클릭하면 다른 문서로 이동할 수 있다.

- 링크에 마우스를 올리면 커서가 손 모양으로 바뀐다.

- 링크는 꼭 텍스트 일 필요는 없다. ( 이미지 또는 기타 html 요소가 될 수 있다.)

- a 태그

- href 속성은 가장 중요한 속성이다. (링크의 목적지를 나타내는 속성 URI)

- 방문한 링크 텍스트는 보라색 + 밑줄

- 방문하지 않은 링크 텍스는 파란색 + 밑줄

- Active(활성) 링크 텍스트는 빨간색 + 밑줄

<a href="http://www.naver.com"  target="_self"  title="네이버">naver - 링크 텍스트, 현재 윈도우(창)</a><br>
<a href="http://www.daum.net"  target="_blank">daum - 새 윈도우(창)</a><br>
<a href="http://www.sist.co.kr">sist</a><br>

* target : _self, _blank, ( 프레임 X -> _parent, _top , name 등등)

절대주소(URL, URI), 상대주소 *******

- URL : uniform resource locator 의 약어.

- 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약

- 웹 페이지를 찾기위한 주소

- 표현방법 ( RFC 1738에서 정의 )

[통신규약]

scheme://<user>:<password>@<host>:<port>/<url-path>

http:// <host>:<port>/ <path> ?<searchpart>

http://www.naver.com[:80]/webPro/html/days02/ex09.html

scheme <host> <path> ?searchpart 쿼리스트링(queryString)

https://search.naver.com/search.naver?where=nexearch&sm=top_sug.pre&fbm=1&acr=2&acq=kenik&qdt=0&ie=utf8&query=kenik

* 주소 맨 마지막에 샾(#)이 있으면 URI

URL / URI 구분

URI가 URL의 상위 개념이고

URI = scheme ":" hier-part [ "?" query ] / [ "#" fragment ] URL 포함X

URL은 ASCII 문자셋만 사용가능. ( 인코딩 ASCII )

한글 문자 -> 변환 %16진수값 변환되어져서 URL 사용.

공백 -> + 기호 또는 %16진수값 변환 ( %20 ) a1 2한글x

<!-- ex09_02.html -->
<!-- URI : 절대 주소 -->
<a href="http://localhost/webPro/html/days01/ex01.html">http://localhost/webPro/html/days01/ex01.html</a>

<!-- 상대주소 -->
<!-- 기준주소 : http://localhost/webPro/html/days02/ex09_02.html -->
<!-- http://localhost/webPro/html/days02/ex01.html -->
<a href="ex01.html">ex01.html</a>

<!-- http://localhost/ex01.html -->
<a href="/ex01.html">/ex01.html</a>

<!-- http://localhost/ -->
<a href="/webPro/html/days01/ex01.html">ex01.html</a>

<!-- http://localhost/webPro/html/days02/ -->
<!-- http://localhost/webPro/html/ex01.html -->
<a href="../ex01.html">ex01.html</a>

<!-- http://localhost/webPro/ex01.html --> 
<a href="../../ex01.html">ex01.html</a>

<!-- 현재디렉토리  .
       상위디렉토리 .. -->

<!-- http://localhost/webPro/html/days02/ex01.html -->       
<a href="./ex01.html">ex01.html</a>

context root : webPro

content directory : src/main/webapp

아래 코드 다 똑같은 것!

<a href="../../index.html">index.html</a><br>
<a href="/webPro/index.html">index.html</a><br>
<a href="http://localhost/webPro/index.html">index.html</a><br>

왜 ? 요청한 파일명이 없는데도 왜 index.html 파일 찾아서 응답을 했을까요 ?

-> dd파일 == web.xml

-> 요청파일 없으 web.xml 에서 파일 순서대로 찾아서 가지고옴!

-> 서버 클릭 - modules - path - edit - 그냥 / - ok -localhost로 호출됨 (메인페이지 html) -> 이걸 다른 도메인으로 바꾸면 해당 도메인 메인페이지가 뜸

<a href="/webPro">index.html</a><br>
<!-- <a href="http://localhost>index.html</a><br> -->

링크 태그 설명

1) 다른 문서(페이지)로 이동 href="URI"

<a href="http://www.naver.com">naver</a><br>

2) 자바스크립트를 호출

- 요소(태그)에서 click 이벤트 발생 -> 처리 방법 ( on이벤트명속성 )

- BOM : 최상위 객체 window

<button onclick='window.alert("경고창 띄움!!!");'>버튼을 클릭하면 경고창 띄우기</button><br>
<a href='javascript:window.alert("경고창 띄움!!!");'>js 경고창 띄우기</a>

3) 메일 보내기

<a href="mailto:admin@sist.co.kr">관리자</a><br>

4) 책갈피 : 링크를 클릭하면 책갈피가 있는 위치로 이동(스크롤)

<h3 id="top">링크 태그 설명</h3>

<!-- http://localhost/webPro/html/days02/ex11.html#top -->
<a href="#top">맨 위로</a><br>
<!-- http://localhost/webPro/html/days02/ex06.html#subsample -->
<a href="ex06.html#subsample">html 서식</a><br>

p*3

<!-- p*3>{.} -->
<p>.</p>
<p>.</p>
<p>.</p>

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day6] HTML 6 - div 페이지, 반응형웹, form, canvas,svg, 멀티미디어, youtube (0)	2022.11.10
[Day5] HTML 5 - 홈메뉴, button, div float, media, iframe, head tag, 반응형 웹, 이모티콘, 시맨틱 태그, 규칙, form, select, option, get, post (0)	2022.11.08
[Day4] HTML 4 - ul,li, div, jquery, emmet (0)	2022.11.07
[Day3] HTML 3 - 이미지, 이미지맵, picture, favicon,table (0)	2022.11.07
[Day1] HTML 1 - 개요, HTML 요소, 속성 (태그) (0)	2022.11.03

[Day2] HTML 2 - 여러가지 태그

[Day2] HTML 2 [11/3]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day2] HTML 2 [11/3]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바