[html] html 태그(1) __개발공부 56일차
html
1.DOCTYPE 대소문자 구분X, 대문자 권장
2. html,title,meta,body,head 태그명은 대소문자 구분 X,소문자 권장.
3.
- 요소 내용(content)X
- 닫기(종료)태그 X->빈태그
- html속성(Attribute): 해당 요소의 추가 적인 정보를 제공 하기 위해서 사용된다.
예) charset = "UTF-8"
속성명 = "속성값"(기본 문법)
속성명 = '속성값'
속성명 = 속성값
속성명 [= "속성값"] 속성명과 속성값이 같은 경우에는
속성명 만 사용한다.
cf) 참고 ex02.html 이나 ex02.htm 이나 같은거다. 설명서 koxo.com
엔터치면 브라우저 랜더링 되어질 때 -> 공백(space) 1개로 처리
공백 10개 입력 -> 공백(space) 1개로 처리
탭 공백 5개처리 -> 공백(space) 1개로 처리
<!-- line [br]eak 줄바꿈 요소(태그) -->
<!--
html 예약문자(==특수 문자) ==>html 엔티티(Entity)로 대체된다.
공백
형식) &엔티티명;
또는
&엔티티_코드값;
공백
nbsp == [n]on-[b]reaking [sp]ace
양쪽 < >
< < [l]ess[t]han
> > greater than
hn요소
hn요소 h1~ h6 [h]eading : 머릿글의
[블럭 모드]==개행/인라인 모드
제목 위/아래에 여백(margine)이 자동으로 추가
검색엔진이 제목(hn태그)을 사용하여 웹 페이지의 구조와 내용을 파악(색인화)한다.
글자 진하게(bold)
hr 태그
1.수평줄(선)을 표현
2.블럭모드
3.종료태그 X
4. [h]orizontal [r]ule
선의 색깔을 빨강색 (140개 표준 색상명)으로 설정
#rrggbb rr(0 ~ 255)
color = "rgb(255,0,0)"
선의 길이 (너비) width 속성 : px, %(부모요소 기준)
--여기서는 body태그가 부모
p요소
html문단(단락) - p 요소
1. [p]aragraph
2. 아래/위 여백 자동 추가
3. 항상 새 줄에서 시작
4. p태그는 style 태그에서 속성을 줄 수 있다.
span 요소
1. 내용에 대해서 언어 또는 스타일을 정의하는데 사용할 수 있는 일반 컨테이너(용기)이다.
2.인라인 모드
*sapn요소를 사용하는 이유=> 언어(글자)에 스타일을 주기 위해서 이다.
style 요소를 사용하여 span 요소에 속성을 부여할 수 있다.
xmp/pre
xmp 요소
1.Unknown tag (xmp)
2. 수업 자려 정리하는데 용이
pre 요소
1.[pre]formatted text
2.공백,개행 유지한다.
3.블럭모드
4.고정 너비 글꼴로 표시
5.미리 형식이 지정된 텍스트를 정의
xmp pre 차이점
안에서 태그를 읽느냐 읽지 못하느냐 차이이다.
xmp는 태그 인식못하고 문자그대로 받는다.
html 텍스트 서식 요소
b(bold), strong, em, i
1. b -- 중요성 X, 굵은 텍스트
안녕하세요.<b>홍길동</b>입니다.<br>
2. strong - 중요성 강조 O, 굵은 텍스트
안녕하세요.<strong>홍길동</strong>입니다.<br>
3. em - 강조 O, 기울임꼴 텍스트
안녕하세요.<em>홍길동</em>입니다.<br>
strong과 bold의 차이는 설정을 안하면 굵은걸로 똑같이 보이지만
css에서 strong은 스타일을 설정해 줄 수 있다.
4. [i]talic 기울임꼴 텍스트
안녕하세요.<i>홍길동</i>입니다.<br>
5. mark 표시된 텍스트, 노란색 배경색
안녕하세요.<mark>홍길동</mark>입니다.
6. small 더 작은 텍스트
안녕하세요.<small>홍길동</small>입니다.<br>
7. [del]eted 문서에서 삭제된 텍스트 정의, 취소선(가운데줄)긋다.
안녕하세요.<del>홍길동</del>입니다.<br>
8. inserted text 문서에 새로 추가된(삽입된) 텍스트 정의, 밑줄(언더라인) 긋다.
안녕하세요.<ins>홍길동<ins>홍길동</ins>입니다.<br>
9. sub,sup 태그 설명
물 = H<sub>2</sub>O
html 인용 요소
1. blockquote
<blockquote cite="http://www.sist.or.kr/sample.html">
설명하지마라.
친구라면 설명할 필요가 없고,
적이라면 어차피 너를 믿지 않을테니깐.
</blockquote>
2. 짧은 이용을 위한 q 요소, 인라인모드
마이크 타이슨 명언 : <q>누구나 그럴싸한 계획을 가지고 있다. 쳐 맞기 전까지는</q>
3. [abbr]eviation ==약어
우리는 지금 <abbr title = "HyperText Markup Language">html</abbr>을 배웁니다.
4. 연락처 정보(이메일,실제 주소, 전화번호 등등),기울임꼴, 앞 뒤에 줄바꿈 일어남
<address>서울특별시 강남구 테헤란로 131(역삼동) 한독빌딩 8층</address>
5. citation, 기울임꼴
<cite>어떤 창작물(책,시,노래,영화,그림)의 제목 정의하는 태그, 사람이름x</cite><br>
6. bdo: 현재 텍스트 방향을 재정하는 태그 -- Overrides default [b]i[d]irecti[o]nal display.
<bdo dir="rtl">For use with bidirectional</bdo><br>
font 태그
font : 글꼴,글색,글크기 설정하는 태그
<font face="궁서체">안녕하세요. <font color="blue"><b>홍길동</b></font>입니다.</font><br>
<font color="blue">안녕하세요. 홍길동입니다.</font><br>
<font size='1'>안녕하세요. 홍길동입니다.</font><br>
<font size='2'>안녕하세요. 홍길동입니다.</font><br>
<font size='3'>안녕하세요. 홍길동입니다.</font><br>
<font size='4'>안녕하세요. 홍길동입니다.</font><br>
<font size='5'>안녕하세요. 홍길동입니다.</font><br>
<font size='6'>안녕하세요. 홍길동입니다.</font><br>
<font size='7'>안녕하세요. 홍길동입니다.</font><br>
<font face="궁서체" color="blue" size='100'>안녕하세요. 홍길동입니다.</font><br>
*사이즈가 7이상으로는 커지지 않는다.
html링크(link - a태그)
1.모든 웹 페이지에서 찾을 수 있다.
2.링크를 클릭하면 다른 문서로 이동할 수 있다.
3. 링크 위로 마우스를 이동하면 마우스 화살표가 작은 손 모양으로 바뀐다.
4. 링크는 텍스트,이미지 또는 기타 html요소가 될 수 있다.
5. html 링크는 하이퍼링크
6. 가장 중요한 속성 - href 속성(이동할 목적지 주소(url))
7. naver - 보라색 : 방문한 링크
daum - 파랑색 : 방문하지 않은 링크
빨강색 : 활성(active) 링크
8. target 속성 - 어디에서 링크된 문서를 열지를 결정하는 속성(대상)
_self(기본값) 자기자신창
_blank 새창
_parent 부모(상위) 프레임(frame)
_top 창의 전체 본문에 열겠다
타겟명
<!--
A link if the [href attribute] is present,
and the target for a link if the [name attribute] is present
-->
<a href="http://www.naver.com" target="_self">naver</a>
<a href="http://www.daum.net" target="_blank">daum</a>
<a href="http://www.sist.co.kr">sist</a>
_self 와 _blank의 차이
_self 는 링크를 클릭했을때 현재 탭에서 사이트가 이동되며
_blank는 새로운 탭에서 사이트가 이동된다.
절대주소 / 상대주소
1.URL(Uniform Resource Locators)<br>
2. 웹에서 문서의 주소를 지정하는데 사용<br>
3. 웹서버에 URL를 사용해서 요청한 자원(웹페이지)을 응답<br>
4. URL 구성
ㄱ. 통신규약(프로토콜) - 인터넷 서비스 유형
http://
https://
ftp://
file://
등등
ㄴ.
ipaddress
localhost
127.0.0.1
192.168.35.231
www.접두사
도메인명 naer.com
ㄷ. 포트(port)
http://기본 포트값 : 80 생략 되어져 있다.
ㄹ. /webPro
이클립스로 웹프로젝트를 생성하면 그 프로젝트명(webPro)이 구분하는 경로명-Context Root(path)
ㅁ.파일명(리소스명) ex11.html
ㅂ.QueryString(쿼리스트링)
외부에서 이렇게 주소를 치고 들어오면
http://localhost/webPro
내부적(내 컴퓨터에서는)으로는 아래 경로에서 찾는다.
물리적으로는 [context directory] /src/main/webapp 로 경로가 잡힌다.
그래서 웹상에서 사용되는 앞으로 만든 모든 폴더는 webapp폴더 안에 만들어야한다.
참고(중요!!)
*****
URL은 인코딩(ASCII 문자셋)을 사용하기 때문에
한글 문자 => %16진수값으로 변환해서 URL 사용된다.
공백 => +기호 또는 %20 변환
*****
웹상에서는 주소에 홍길동이 한글로 보이지만 원래는 다 아스키 코드로 이루어져서
안보여야한다.
그냥 웹상에서는 편의를 위해서 홍길도이 주소에 보이게 한거다.
홍길동 검색 [URL]
https://
www.
google.com
/search
쿼리스트링(query String)
?
q=%ED%99%8D%EA%B8%B8%EB%8F%99
&
oq=%ED%99%8D%EA%B8%B8%EB%8F%99
&
aqs=chrome..69i57j46i131i433i512l2j0i512l3j46i512j0i512j46i512j0i512.1031j0j15
&
sourceid=chrome
&
ie=UTF-8
절대경로
<a href = "http://localhost/webPro/html/days01/ex01.html">days01.ex01.html</a>
현재 페이지와 같은 폴더(경로)에 있는 ex01.html 파일
<a href = "http://localhost/webPro/html/days02/ex01.html">days02.ex01.html</a>
상대경로 : (기준)이 중요하다.
상대경로의 기준 http://localhost/webPro/html/days02 : 지금 현재 파일의 폴더까지
.. 의미 => 상위로 올라가자
..으로 상위로 올라간다음에 찾고자 하는 곳으로 찾아 내려가는거다.
( days01 적어서 다른 폴더로 다시 내려가는거다. )
<a href = "../days01/ex01.html"> days01.ex01.html</a>
<a href = "ex02.html">days02.ex01.html</a>
같은경로에 있는 ex02파일 찾아라 라는 소리이다
절대경로
<a href = "http://localhost/webPro/index.html">days02.ex01.html</a>
상대경로
<a href = "../../index.html">index.html</a>
무료도메인
<a href = "http://localhost/webPro">index.html</a>
<a href = "http://localhost>index.html</a>
버튼 / 경고창 / 책갈피
<h3 id="top">html 링크 - javascript 호출할 수 있다.</h3>
*a태그를 가지고도 자바 스크립트 문법이 사용가능하다*
<a href="javascript : 자바스크립트코딩을 하면된다.">javascript 처리</a>
<a href="javascript:window.alert('경고창 띄움!!!')">경고창띄우자</a>
=>글씨 누르면 경고창 발생
클릭 이벤트 발생 이벤트 처리
<button on이벤트명 ="javascript 코딩실행">경고창띄우자</button>
<button onclick="javascript:window.alert('경고창 띄움!!!')">경고창띄우자</button>
=> 버튼 누르면 경고창 발생
html 링크
1. 다른문서(웹페이지)로 이동
<a href="ex01.html">ex01.html</a><br>
버튼을 사용해서 그 버튼을 클릭하면 페이지 이동
<button onclick="document.location = 'ex01.html'">ex01.html</button>
*참고
BOM : 브라우저가 제공하는 기본객체 모델이라고 한다. window 내장객체이다.
BOM : document 내장객체이다.
2. 메일 보내기
<a href="mailto:메일계정">send mail(admin)</a><br>
<a href="mailto:admin@sist.co.kr">send mail(admin)</a><br>
3. 책갈피
<h3 id="bookmark">html 링크 - 책갈피 만들 수 있다.</h3>
<a href="#bookmark">책갈피</a><br>
<a href="#top">맨위로</a><br>
<a href="../days01/ex03.html#link">html링크에대한 설명</a><br>
html 이미지
html 이미지 - img 요소
이미지 태그는 인라인 모드이다.
html에서 단위 생략 : px
(주의하자) 이미지 로딩되는 동안 웹페이지가 깜박일 수 있다.
반드시 이미지의 너비와 높이는 지정을 하자.
<img alt=" 이탈리안 튤립" src="../images/pic_trulli.jpg">
<img alt=" 이탈리안 튤립" src="../images/pic_trulli.jpg" width="250px">
width만 설정하면 자동으로 높이도 줄어든다. 따로 설정하고 싶으면 설정을 해줘야한다.