HTML(1)

천소진·2022년 11월 21일
fronthtml5태그
0

Study

목록 보기
20/29

HTML(Hyper Text Markup Language)

: 웹 문서를 만드는 기본언어
: 웹 브라우저에 내용을 보여는 텍스트, 이미지, 영상등의 위치를 표시

  • 기본 구조
    : 저장할때 .html (확장자 이름)을 꼭 써야함.
<!DOCTYPE html>                           // 웹문서의 유형 지정하는 선언문 : html5로 작성한 웹문서라는 표시
<html lang="ko">                          // 웹문서의 시작 , 언어지정
   <head>                                 // 브라우저가 해석하는데 필요한 정보를 입력. 
     <meta charset="UTF-8">               // meta : 웹사이트의 키워드나 간단한설명등의 정보를 지정. 
     												==>화면에 표시할 글자의 인코딩지정.
     <title>HTML 기본 문서</title>         // title : 웹문서의 제목 입력 ==> 제목 표시문에 표시됨. 
   </head>0
   <body>                                // 실제로 웹 브라우저 화면에 나타나는 내용 입력.
     <h1>프런트엔드 웹 개발</h1>            // 제목 입력 태그로 h6까지 있음.
     <hr>                                // 가로선 
     <p>HTML</p>
     <p>CSS</p>
     <p>자바스크립트</p>
   </body>
</html>                                  // 웹문서의 끝

시맨틱태그

: 의미를 담고있는 태그란 뜻으로, 이름만 봐도 어떤 역할을 하는지 알수 있음.
→ 필요성
: 웹 브라우저가 사이트의구조를 제대로이해할수 있음.
: 문서구조가 정확히나눠져 다양한 화면에서 웹 문서를 쉽게 표현 할수 있음.
: 인터넷에서 검색할 때 필요한 내용을 정확하게 찾을 수있음.

  • 종류

  1. <header>
    : 말머리 부분을 의미하며, 사이트 전체나 특정 영역의 헤더가 존재
    : 주로 사이트의 맨 위쪽이나 왼쪽에있으며, 검색창이나 사이트 메뉴를 삽입.

  2. <nav>
    : 같은 웹문서 안에서 다른위치로 연결하거나 다른 웹 문서로연결하는 링크를 만듦.
    : 위치에 영향을 받지 않아 모든곳에 포함이 될수 있고, 독립적으로도 사용 할수 있음.
    : 여러개 사용할 경우 각각의 id 속성을 지정하면 다른 스타일을 적용할 수 있음.

  3. <main>
    : 웹문서의 핵심이 되는 내용 삽입.
    : 메뉴, 사이드바,로고처럼 페이지마다 들어가는 내용이 아닌 웹문서마다 다르게 보여줄 내용으로 구성
    : 웹 문서마다 한번씩만 사용 가능.

  4. <ariticle>
    : 웹에서 실제로 보여주고싶은 내용(독립적인 컨텐츠 항목) 삽입.
    : 한 문서 안에 여러개 사용 가능.

  5. <section>
    : 컨텐츠의 영역을 나타내며, 서로 다른 여러개의 컨텐츠를 묶는 용도로 사용.

  6. <aside>
    : 본문의 왼쪽이나 오른쪽, 아래쪽에 생성되는 사이드 바 영역.
    : 선택적으로 필요한 경우에만 사용.

  7. <footer>
    : 웹 문서 맨 아래 쪽 영역
    : 사이트 제작 정보나 저작권 같은 내용 삽입.
    : 다른 시맨틱 태그를 모두 사용할수 있음.(

    제외)

  8. <div>
    : 문서 구조를 만들거나 스타일을 적용할 때 사용. ==> 영역을 구별하거나 스타일로 문서를 꾸밈
    : 단순히 스타일 적용하기위해 컨텐츠를 묶을 때는

    보다
    를 사용.

9.<link>
: <link rel="외부소스" type= " 파일 형식" href= "외부 소스경로">
: 현재 문서와 외부 소스의 관계를 정의 할 때 사용.
: <head>태그 내부에만 위치 할 수 있으며 개수는 제한이 없음.
: 빈 태그로 속성만을 포함.
: 주로 스타일시트 (Style Sheet)를 연결할 때 사용.
: 상대적 경로와 절대적 경로가 있음.
1) 상대적 경로 : 현재 문서 기준으로 외부 소스의 경로를 작성하는방법 (./ 현재위치의 폴더, ../ 상위 폴더, / 최상위폴더)
2) 절대적 경로 : 내 컴퓨터에 지정되어 있는 소스의 주소를 이용하는 방법. ( http:// , c:/users/file/......)

다양한내용 입력하기

1. 텍스트입력

  • < hn>제목</hn>
    : 웹문서의 제목 입력
    : n 에는 1~6의 숫자를 넣어 텍스트를 크기 별로 표시. ==> h1이 제일 큰 제목이며 점점 작아짐.
    : </h>로 제목 마지막에 반드시 닫아줘야함.
    : 다른 텍스트보다 크고 진하게 보임.

  • <p>내용</p>
    : 텍스트의 단락을 입력할 때 사용.
    : 텍스트의 앞뒤로 빈주이 생기면서 단락을 표시해줌.

ex) 

<p>안녕하세요.</p>
<p>만나서 반갑습니다.</p>
<p>제 이름은             //<p></p> 안에서 줄을 바꿔도 출력은 연결되어서 나옴.
천소진 입니다.</p>

실행 결과

안녕하세요.

만나서 반갑습니다.

제 이름은 천소진 입니다.

- br : 줄바꿈 할때 사용 : 단독으로 사용하므로 닫는태그가 필요 없음.

ex)

<p>안녕하세요.</p>
<p>만나서 반갑습니다.</p>
<p>제 이름은 <br>천소진 입니다.</p>

실행 결과

안녕하세요.

만나서 반갑습니다.

제 이름은
천소진 입니다.

  • <pre>내용</pre>
    : 텍스트를 입력한 그대로 표현
    : 사용이 쉽지만 차 후 유지 보수가 어려움.

ex)

<pre>안녕하세요
     만나서 반갑습니다.
              저는 천소진 입니다.</pre>

실행 결과

안녕하세요
       만나서 반갑습니다.
                저는 천소진 입니다.

  • <blockquote>인용문</blockquote>
    : 인용문을 삽입할 때 사용.
    : 다른 텍스트보다 약간 들여쓰여짐.

  • <strong>굵게 강조할 텍스트</strong>, <b>굵게 표시할 텍스트</b>
    : 경고나 주의사항처럼 중요한 내용을 강조할 때는 <strong>
    : 단순히 글자만 굵게 표시 할 때는 <b>

  • <em>이탈릭체로 강조할 텍스트</em>,<i>이탈릭체로 표시할 텍스트</i>
    ==> 기울인 텍스트
    : <em>은 문장에서 특정부분을 강조하고 싶을때 사용.
    : <i> 는 단순히 다른 텍스트와 구별할 때 사용되며, 마음속의 생각이나 , 용어, 관용구등에 적용함.

2. 목록 만들기

  • <ol><li>항목</li></ol>
    : 순서가 있는 항목을 표현할 때 사용.
    : ordered list ==> ol
    : list ==> li
    : 기본으로 숫자 순서대로 번호를 붙임.
    ==> type 속성으로 영문자나 로마숫자로 변형 할수 있음.
    type = "1" : 숫자 (defualt)
    type = "a" : 영소문자
    type = "A" : 영대문자
    type = "i" : 로마숫자 소문자
    type = "I" : 로마숫자 대문자

==> 여러개의 순서있는 목록을 연결하여 붙여야 할 때는 start로 원하는 번호를 입력.

  • <ul><li>항목</li><ul>
    : 순서가 중요하지 않거나 순서가 없는 항목을 표현 할 때 사용.
    : 항목앞에 작은 원이나 사각형 같은 bullet 을 붙여서 구분
    ==> type 속성으로 불릿의 모양을 지정할 수 있음
    type = "square" : 사각형
    type = "circle" : 동그라미
    type = "compact" : 작은 점

ex)

<body> 
  <h1>ol tag</h1>
  <ol type="1">   //순서있는 ol 태그
    <li><a href="https://ko-kr.facebook.com/" >Facebook</a></li>
    <li><a href="https://twitter.com/?lang=ko">Tweeter</a></li>
    <li><a href="https://kr.linkedin.com/">Linked in</a></li>
  </ol>
  <br>
  <h1>ul tag</h1>
  <ul>            //순서없는 ul 태그
    <li><a href="https://ko-kr.facebook.com/" >Facebook</a></li>
    <li><a href="https://twitter.com/?lang=ko">Tweeter</a></li>
    <li><a href="https://kr.linkedin.com/">Linked in</a></li>
  </ul>
</body>

실행 결과

ol tag

  1. Facebook
  2. Tweeter
  3. Linked in

ul tag

ex)ol+ul = ul안의 ol

<body>
  <ul>
    <li>HTML5</li>
    <ol type="1">
      <li>Mulitmedia Tag</li>
      <li>Cinnnectivity</li>
      <li>Device Access</li>
    </ol>
    <li>CSS3</li>
    <ul>
      <li>Animation</li>
      <li>3D Transform</li>
    </ul>
  </ul>  
</body>

실행 결과

  • HTML5
    1. Mulitmedia Tag
    2. Cinnnectivity
    3. Device Access
  • CSS3
    • Animation
    • 3D Transform
  • <dl><dt>이름(단어)</dt><dd>값(설명)</dd></dl>
    : 이름에 대한 값을 표현하는 목록을 표현할 때 사용.
    : <dl></dl> 사이에 한쌍의 <dt>와 <dd>가 있어야 함.
    : <dt>하나에 여러개의 <dd>사용 가능.

ex) 상품소개 페이지에서 중량별로 상품개수를 보여줄때

3. 표 만들기

  • <table><caption>표 제목</caption></table>

  • <tr></tr> : 행 표시(블럭 하나가 하나의 행), <td></td>: 열 표시 (블럭 순서대로 열에 적용)

  • <th></th>: 제목 셀 생성 ==> 표의 속성이름을 나타내는 행을 만들때는 <td>대신 사용.
    ==>글씨가 진하게 표시되고, 가운데 정렬됨.

  • <thead></thead>: 표 제목, <tbody></tbody> :표 내용, <tfoot></tfoot> : 표 요약
    : 표의 구조를 지정
    : CSS를 사용해 각각 다른 스타일 적용 가능.
    : 표가 길어 화면이 넘어갈 경우 <thead>와 <tfoot>는 고정하여 여러장 인쇄시에 자동으로 인쇄가능.

  • rowspan : 행 합치기 , clospan : 열 합치기
    : 셀을 합치는 속성으로 <td>나 <th>태그에서 사용.
    ==> 기본구조
    <td rowspan = "합칠 셀의 개수">셀의 내용</td>
    <td clospan = "합칠 셀의 개수">셀의 내용</td>

  • <col>: 열 1개를 지정 <colgroup></colgroup> : <col>태그를 두개이상 묶음.
    : <caption> 바로 다음에 사용 ==> 표 내용이 시작되기전에 열의 상태를 지정.
    : 한 행이지만 열마다 속성을 다르게 할때는 속성이 없는 열에도 <col>로 단순명시 해줘야함.
    ex)

<table>
    <caption>표 제목</caption>
    <colgroup> 
      <col style="background-color:#eee;"> //첫번째 열에 배경색 지정
      <col>                                //속성이 없는 열도 명시
      <col style="width:150px">                                  
      <col style="width:150px">            // 세번째와 네번째 열의 너비 지정.
    </colgroup>                           
<col span="2" style="width:150px">   ==> 두개의 열이 같은 속성을 가지므로 묶어서 표현 가능.

4.이미지 삽입하기

  • <img src ="이미지 파일 경로" alt= "대체용 텍스트">
    : src는 이미지가 있는 파일의 경로를 나타내므로반드시 적어줘야함. ( 폴더이름/ 파일이름.파일형식 )
    ==> 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 이미지 파일의 이름만 작성.
    : alt는 화면낭독기등에서 이미지를 대신해서 읽어줄 텍스트를 삽입.
    ==> 인터넷이 불안정하거나 파일 경로를 잘못 넣어 이미지를 제대로 표시 할 수 없을 때 대신 나타남.
    ==> 텍스트를 부연설명한는 텍스트가 아닌 이미지가 나타내는 말 자체를 텍스트로 표현해야함.

    !!!! 웹에서 사용하는 대표적인 이미지 파일형식
    → gif : 파일 크기가 작아서 아이콘이나 불릿등 작은 이미지에 사용.
    → jpg/jpeg : gif 보다 색상과 명암을 다양하게 표현 가능. 수정을 반복하면 화질이 떨어짐.
    → png : 네트워크용으로 개발된 파일로 색상 표현이 다양하고 투명 배경도 가능. 웹에서 가장 많이 사용.

  • width 와 height
    : 이미지의 크기를 조절 하는 속성.
    : 둘중 하나만 지정해도 나머지는 비율을 자동으로 계산하여 나타냄.
    ==> %, px 단위 사용가능하며, px 는 숫자만 입력하면됨.

    ex)

  <img src="images/salad.jpg" alt="레드향">              // 원래 크기 
                          
  <img src="images/salad.jpg" alt="레드향" width="50%">  // width = 50%, height = 50%로 지정한 이미지

  <img src="images/salad.jpg" alt="레드향" width="150">  // width = 150px으로 지정한 이미지

  <img src="images/salad.jpg" alt="레드향" width="100%"> // 이미지를 브라우저에 딱맞게 설정할 때

5. 멀티미디어 파일 삽입하기

  • <object width="너비" height="높이" data= "파일"></object>
    : 오디오, 비디오, 자바애플릿, PDF 등 다양한 파일 삽입 가능

  • <embed src ="파일 경로" width ="너비" height="높이">
    : html 초기버전부터 사용 가능하며 닫는 태그가 없음.
    : 다른 태그들을 지원하지 않는 웹 브라우저에서도 사용가능.

  • <audio src="오디오 파일 경로"></audio>, <video src="비디오 파일 경로"></video>
    : 사용자가 음악이나 비디오를 재생 또는 멈출수 있도록 컨드롤 바를 넣어줄수 있다.
    ==> <audio src="오디오 파일 경로" controls></audio>

!!!!!! <audio>와 <video>의 여러가지 속성
→ controls : 컨트롤바 표시
→ autoplay : 자동실행
→ loop : 반복재생
→ muted : 소리제거
→ preload : 파일 로딩 방식 지정 ,기본값 auto
→ width, height : 플레이어의 너비와 높이 지정
→ poster = "파일 이름" : 비디오가 재생되기 전까지 표시될 포스터 이미지 지정. (thumbnail)
==> 오디오 파일을 배경음악으로 쓰려면 autoplay와 loop 를 지정하고 controls를 빼면 됨.
==> 대부분의 웹브라우저에서 오디오나 소리가 있는 비디오의 자동재생은 금지.

6. 하이퍼링크 삽입

  • 텍스트 링크 <a href="링크 주소"> 텍스트</a>
    : 링크가 걸린 텍스트에는 밑줄이 생기면서 파란색 글씨로 바뀜
    : 한번이라도 클릭한 텍스트링크는 자주색으로 바뀜.(글씨색은 CSS로 설정)
    : 제목의 아이디와 링크주소를 같게 해주면 같은 페이지 내에서 이동 가능.

ex)

<body>
<a href="#alpha">Move to Alpha</a><br>
<a href="#beta">Move to Beta</a><br>
<a href="#gamma">Move to Gamma</a><br>
<hr>
<h1 id="alpha">Alpha</h1>
<p>In ipsum ad voluptate culpa deserunt consectetur veniam aute qui. </p>
<h1 id="beta">Beta</h1>
<p>Id quis aliqua officia labore incididunt commodo aliquip velit laboris. </p>
<h1 id="gamma">Gamma</h1>
<p>Id irure est tempor tempor. </p>
</body>
</html>

  • 이미지 링크 <a href="링크 주소"><img src="파일 경로" alt="대체용 텍스트"</a>

  • target="_blank"
    : 링크를 클릭했을때 새탭에서 연결된 문서가 열리도록 설정해주는 속성.
    ==><a href="링크 주소" target="_blank"> 텍스트</a>

profile
천소진
이전 포스트

PL-SQL

다음 포스트

HTML(2)

0개의 댓글