국비지원학원/HTML,JavaScript,jQ

66일자-HTML Tag

초코맛 2019. 1. 25. 01:46
반응형
*HTML 구조

<!DOCTYPE html>  --DTD정의 --4.01은 다양한 DTD를 지원
<html>           --<html><head><title><body> ~ => 사용한 Tag가 정의되어있는 File이 DTD이다.
<head>
<meta charset="UTF-8">
<title>탭에 들어갈 내용</title>
</head>
<body>
    사용자에게 제공할 내용 --여러가지 Tag를 사용하여 구현
</body>
</html>

-저장하면 .html/.htm파일이 되는데, 웹서버(:HTML을 요청한 web browser(web client)에 응답하는 일을 할 수 있는 프로그램.)에 올려 불러올 수?실행시킬 수 있게 된다.
-Apache Tomcat은 web container로 웹서버의 기능을 가지고 있을 뿐이지 하는일은 좀 다르다
-html_prj/WebContent/배포|폴더생성/배포 
     =>HDD에 있어, 배포를 위해 인식시켜야 하는데 Tomcat의 server.xml이 그 폴더가 웹서비스가 되게한다.
-요청하려면 url이 필요한데 팀버너스리가 만들었고, 프로토콜://도메인:포트/context path<<서블릿 패스라고 하기도>>/요청한html명

                                               http://domain:80/context path/html명=>(요청한 html경로)

<<어제 책108p까지 한것!>>


-문자태그
  • 속성(태그에 개발자가 값을 입력하여 다양한 형태로 사용할 때) 이 있는 태그
    • <태그명^속성명=값^속성명=값 . .>내용</태그명>
    • <<특정과 공용 2가지가 있다.>>
      • 속성명=값  일때 
        • 속성="값"을 권장한다. 장점: 값의 공백 허용

          <<(나중 서블릿과 JSP에서는 "가 자바와 충돌나기때문에 /"나 '를 사용하지만 HTML만 이기 때문에 "권장)>>

        • 속성='값'                      값의 공백 허용
        • 속성=값                        값이 공백을 가질 수 없다.
    • <font size="크기" color="색깔" face="글꼴">내용</font>    
      • <<CSS에서 다 바꿀수 있지만 하도 많이 사용하여 warnning은 안보여주지만 HTML5에서 지원하지 않고 보여지기도 하기는 한다.
      • 크기 : 1~10  (일반은 3정도의 size를 가짐)
      • 색 : 영어(대소문자 구분ㄴㄴ) or RGB(16진수 #000000~FFFFFF) <<자바에서 16진수는0x (영엑스)>>
      • 글꼴 : 서버에 설치된 모든 글꼴을 사용할 수 있다.
        • 설치한 웹폰트가 아닌이상 서버에만 글꼴이 존재하면 접속자 브라우저의 기본 글꼴로 보여진다.

-h 태그
  • 목차를 만들때/제목(heading)을 표현 할 때   

    <<실제목차로 사용하지 않아? 의미적으로 많이 퇴색되었다...>>

  • <h1>  큰글씨 
  •    ~
  • <h6>  작은글씨
    • 자동 줄 변경이 된다.
-링크(hyper text)
  • 다른 HTML File과 연결할 때 사용
  • url이나 상대경로가 들어가게 된다. (절대 경로는 절대 사용하면 안됨!)
    • <a href="연결할 페이지의 경로" target="HTML을 보여줄 위치(링크눌렀을때 새창)">클릭할 내용</a>
      •  url : http://localhost:8080/html_prj/day1024/a.html        <<포트부터 경로까지 다?>>
        • =>장점 : link를 가진 HTML File이 이동을 하더라도 코드수정없이 연결이 가능하다

          =>단점 : 코드가 길~어 진다.

        • <<요즘엔 url을 대부분 사용한다>>
      • 상대경로/절대경로(C:/dev/~~니까 절대 사용하면 안됨! server의 경로가 client한테 있을리가 없음)
        • ../ : 현재파일이 서비스되는 위치에서 경로하나 올라갈 때
        • /:최상위 이동
        • =>서비스 되는 파일의 위치가 중요! (경로표현이 짧아진다/파일을 옮기면 주소를 바꾸어야할 수 있다)
    • http://localhost:8080/html_prj/day0124/a/b/text.html       

      <<b폴더에 있는것>><<밑줄은 실제 HDD에 있을 수도 가짜일수도 있다>>

    • text.html에 <a href="../test1.html"         

      <<a폴더에 올라가게 되고 있으면 열리고 없으면 404>>

    • ../../test1.html    =>day0124에 이 파일이 있을거라는 얘기
    • ../C/test1.html   =>a폴더 안에 c안에 test1.html을 부르겠다. 
  • 현재페이지에서 위치를 이동할 때에도 사용.
    • 이동할 위치 선정
    • <a name="식별할 이름"></a>    <<HTML5에서 name 지원ㄴㄴ?>><<a 는 내용이 없어도 안에 비워놓으면 된다?>>
  • 클릭해서 이동?  <<한페이지에서 이동할 때>>
    • <a href="#이름">클릭할 내용</a>  <<#이름을 주면 위에서 name 부분을 찾아 보여준다>>
    • <a href="#위치명" name="top">위치명</a><br/>
    • a href 가 클릭할 수 있게 만들어 주고  name 이 그부분을 북마크해 href가 찾아올 수 있게 해준다. 

-선 긋기 태그
  • <hr> : 자동줄 변경
  • <hr width="넓이" size="높이" color="선색"/>

    <hr/> : 전체를 채우는 한줄 

    • 넓이
      • 300 =>픽셀,고정길이
      • 50%=>가변길이(브라우저의 넓이에 따라 가변적으로 변경된다)     <<(늘어도 줄어도 50%차지)>>
    • <<브라우저마다 그려지는게 약간 다르다>>
-이미지 태그
  • <img src="이미지 경로(url|상대경로)" width="넓이" height="높이" alt="엑박떳을때 보여줄 메세지(경로x|파일x)" title="풍선 도움말"/>       

    <<개발자가 크기를 지정하는건 이상해질 수 있어 넓이랑 높이는 주지 않는다>>

    <!-- 파일명에 한해 대소문자 가림 & border로 테두리 선을 가질 수 있다.잘쓰지 않는다? -->


-iframe 태그
  • <<inner frame 의 약자>>
  • 하나의 브라우저(탭) 에서 여러개의 HTML을 동시에 보여줄 때 사용
  • 브라우저의 일부분을 나눠서 보여준다.
  • 특정영역을 변경하여 보여줄 때 
    • <iframe name="taget속성으로 찾을|사용할 이름=a" src="보여줄 페이지 링크" width="넓이" height="높이" scrolling="HTML보다 iframe이 작으면 scrollbar를 보여줄 것인지 에 대한 설정.(yes,no,auto)" frameBorder="테두리선 두께(보통 잘 쓰지 않는다X)"></iframe>           
    • <<iframe의 시작과 끝사이 ><에는 아무것도 적지 않는다>>

      <!-- frameborder,scrolling HTML5에서 지원하지 않는  속성이지만 사용가능 --> 

    • <a href="링크" target="a">클릭부분</a>           
    • <<링크로 안에 HTML을 바꾸어 줄 수 있다!=>name 과 target 속성으로  링크로 띄울것을 iframe 에 넣어쥼
    •  vs frame : 하나의 브라우저(탭)에서 여러개의 HTML을 동시에 보여줄 때!  -차이는..? : 브라우저 전체를 나눔(페이지의 디자인을 할 때) 프레임이 많이 느려서 div가 대신 하게 되었다,,..! +frame set을 함께 써야 디자인을 할 수 있지만 더이상 frame을 안씀.

-목록 태그
  • 순서목록, 도형목록, 설명목록 3가지 지원=>의미적 형태로 순서있고 없고를 나누어씀

  • 순서목록 (ordered list =ol)  <!-- 중간에 숫자를 건너 뛸수도  있다+줄도 알아서 변경 -->
    • <ol type="사용할 목록">    <<1을 넣으면 1,2,3,4 a를 넣으면 a,b,c,d, A를 넣으면 A,B,C,D, ,,,,,1,a,A,i(로마자),I(로마자)>>
    • <li>내용</li>
    • <li>내용</li>
    • <li>내용</li>  </ol>         <<이 li에 따라서 123...이 붙어 나온다=>순서가 있는 목록을 뿌릴때>>
  • 도형목록 (HTML5에서 지원ㄴㄴ)
    • <ul type="사용할 도형">    <<circle(○),disc(●),square(■) 들어감  보통 숨키고 구조를 잡을때 씀>>
    • <li>내용</li>
    •       .......                           <<순서목록과 반대로 순서가 없는 부분에서 사용하고 위의 도형들이 붙어져 출력된다.>>
    • </ul>
  • 설명목록    
    • <dl>
    •   <dt>제목</dt>
    •   <dd>설명</dd>            제목
    •   <dt>제목</dt>                       설명  <<이렇게 들여쓰기 되어져 제목과 설명임을 알 수 있다=>잘 안씀>>
    •   <dd>설명</dd>
    •   .....
    • </dl>
 
-marquee 태그 (지원종료되었지만 보여는 짐)
  • 왼쪽으로 계속 흐르는 Text
  • 예시는 위에 주석부분에 포함됨

    <!--

    scrollamount="3":속도,direction="right":오른쪽으로,behavior="alternate":좌우왕복,behavior="slide":쉰다

    --> 





반응형
저작자표시

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

69일차-CSS  (0) 2019.01.30
68일차-HTML Form Control  (0) 2019.01.29
67일차-HTML_div tag  (0) 2019.01.27
67일차-HTML_table tag  (0) 2019.01.26
65일차-HTML  (0) 2019.01.24

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글66일자-HTML Tag

관련글

티스토리툴바