비전공자 개발일기

HTML 본문

HTML _CSS

HTML

HiroDaegu 2021. 8. 16. 10:53
728x90
SMALL

HTML: Hyper Text(문서를 서로 연결해주는 링크) Markup Language

 

시멘틱(의미가 통하는) 태그를 사용하여 만든 웹 문서

시멘틱 태그가 필요한 이유

  • 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목, 메뉴, 본문 내용 등 알 수 있음
  • 문서 구조가 정확히 나눠지므로 PC, 스마트기기 등 다양한 화면에서 웹 문서를 표현하기 쉬움
  • 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음

시멘틱 태그의 종류

  • <header></header>: 헤더 영역을 나타냄, 검색창이나 사이트 메뉴를 삽입
  • <nav></nav>: 내비게이션 영역, 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크
  • <main></main>: 핵심 콘텐츠, 웹 문서마다 다르게 보여주는 내용으로 구성, 1회만 사용 권장
  • <article></article>: 독립적인 콘텐츠, 웹에서 실제로 보여주고 싶은 내용
  • <section></section>: 콘텐츠 영역, 몇 개의 콘텐츠를 묶는 용도
  • <aside></aside>: 사이드 바 영역
  • <footer></footer>: 푸터 영역, 맨 아래 위치, 사이트 제작 정보, 저작권, 정보, 연락처 등
  • <div></div>: 영역 구별, 스타일로 문서를 꾸밀 때 사용
<body>
  <div id="container">    
    <header>
      <div id="logo">
        <a href="index-footer.html">
          <h1>Dream Jeju</h1>
        </a>
      </div>
      <nav>
        <ul id="topMenu">
          <li><a href="#">단체 여행</a></li>
          <li><a href="#">맞춤 여행</a></li>
          <li><a href="#">갤러리</a></li>
          <li><a href="#">문의하기</a></li>
        </ul>
      </nav>
    </header>
    <main class="contents">
      <section id="headling">
        <h2>몸과 마음이 치유되는 섬</h2>                  
        <div class="detail"> 
          <img src="images/healing.jpg">                            
          <b><p>쉼(Healing)의 공간으로 안내합니다</p></b>          
          <p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다. </p>        
        </div>        
        <div class="schedule">
          <h3>상세 일정</h3>
          <ul>
            <li>여행 기간 : 2박 3일</li>
            <li>여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)</li>
          </ul> 
        </div>
      </section>
      <section id="activity">
        <h2>다양한 액티비티가 기다리는 섬</h2>
        <div class="detail">          
          <img src="images/activity.jpg">
          <b><p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p></b>          
          <p>둘러보기만 하는 여행을 하셨나요? </p>
          <p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?</p>
        </div>
      </section>
    </main>
    <footer>    
      <section id="bottomMenu">
        <ul>
          <li><a href="#">회사 소개</a></li>
          <li><a href="#">개인정보처리방침</a></li>
          <li><a href="#">여행약관</a></li>
          <li><a href="#">사이트맵</a></li>
        </ul>
      </section>   
    </footer>  
  </div> 
</body>

텍스트 관련 태그

  • <hn>제목</hn>: 제목(n = 1, 2, 3, 4, 5, 6 / 숫자가 작을수록 큰 제목)
  • <p>내용</p>: 텍스트 단락
  • <br/>: 줄 바꿈
  • <blockquote>인용문</blockquote>: 인용문, 자동으로 들여쓰기가 적용됨
  • <b></b>(키워드를 단순히 굵게), <strong></strong>(경고, 주의 사항 등 중요 내용 강조): 텍스트를 굵게 표시
  • <em></em>(강조), <i></i>(생각, 용어, 관용구 등): 기울인 텍스트 입력
  • <abbr title="Internet of things">IOT</abbr>: 줄임말(title 속성 = fullname)
  • <cite></cite>: 웹 문서나 포스트에서 참고 내용을 표시
  • <code></code>: 컴퓨터 인식을 위한 소스 코드
  • <small></small>: 텍스트를 작게 표시 ex) 부가 정보 
  • <sub></sub>: 아래 첨자
  • <sup></sup>: 위 첨자
  • <s></s>: 취소선
  • <u></u>: 밑 줄
  • <ins></ins>: (공동 작업 문서) 새로운 내용 삽입
  • <del></del>:(공동 작업 문서) 기존 내용 삭제
 <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
  <h2>레드향 샐러드 레시피</h2>
  <h2>상품 구성</h2>

목록 관련 태그

  • <ol><li></li></ol>: 순서 있는 목록
종류(속성) 속성
type = "1" 숫자(기본값)
type = "a" 영문 소문자
type = "A" 영문 대문자
type = "i" 로마 숫자 소문자
type = "I" 로마 숫자 대문자
start = "n"(n = 숫자) 원하는 번호부터 시작할 수 있도록 설정
  • <ul><li></li></ul>: 순서 없는 목록
  • <dl><dt>이름</dt><dd>값</dd>: 설명 목록
<body>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>  
  <h4>재료 준비</h4>
  <ol type="a">
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
  </ol>
  <h4>드레싱 준비</h4>
  <ol type="a" start="3">
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
  </ol>
  <h4>샐러드 완성</h4>
  <ol type="a" start="4">
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ol>    
</body>
--------------------------------------------------------------------------------------------
<body>
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
  <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>  
  <ul>
    <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
    <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
    <li>드레싱 재료를 믹서에 갈아줍니다.</li>
    <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
  </ul>
</body>
--------------------------------------------------------------------------------------------
  <h2>상품 구성</h2>
  <dl>
    <dt>선물용 3kg</dt>
    <dd>소과 13~16과</dd>
    <dd>중과 10~12과</dd>
  </dl>
  <dl>
    <dt>선물용 5kg</dt>
    <dd>중과 15~19과</dd>
  </dl>

표 관련 태그

  • <table></table>: 표의 시작과 끝
  • <caption></caption>: 표 제목, 생략 가능, 표의 위 쪽 중앙에 표시됨
  • <tr></tr>: 행
  • <td></td>: 열
  • <th></th>: 제목 행, 내용은 진하게 표시되고 중앙에 배열됨
  • <thead></thead>: 제목
  • <tbody></tbody>: 본문
  • <tfoot></tfoot>: 요약
  • <td rowspan = "합칠 셀의 개수"></td>: 행 병합
  • <td colspan = "합칠 셀의 개수"></td>: 열 병합
  • <col group><col></col>(표 전체 열 개수)</col group>: 열 묶음, 스타일(배경색, 너비 등), <caption> 다음에 입력
  • <col span="2" style="width: 150px;">: 스타일 속성이 같을 경우 묶어서 사용
<table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
      <col style="background-color:#eee;">
      <col>
      <col style="width:150px">
      <col style="width:150px">
    </colgroup>
    <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>갯수</t>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>   
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>        
  </table>
  ----------------------------------------------------------------------------------

이미지 관련 태그

  • <img src="이미지 경로 alt="대체용 텍스트">: 이미지 삽입
  • width, height 속성 단위 
    1. %: 현재 웹 브라우저 창의 너비와 높이를 기준으로 크기 지정
    2. px: 입력 px 크기만큼 표시
  <p>원래 크기의 이미지</p>
  <img src="images/salad.jpg" alt="레드향">
  <p>width="50%", height="50%"로 지정한 이미지</p>
  <img src="images/salad.jpg" alt="레드향" width="50%">  
  <p>width="150"으로 지정한 이미지</p>
  <img src="images/salad.jpg" alt="레드향" width="150">​
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

HTML EVENT  (0) 2021.08.20
HTML  (0) 2021.08.19
HTML_CSS GRID  (0) 2021.08.08
HTML_CSS GRID  (0) 2021.08.07
CSS - SCSS  (0) 2021.08.01
'HTML _CSS' Related Articles more