HTML_CSS_JavaScript

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ①

민주82 2023. 2. 17. 00:42

<HTML 시작하기>

 

앞장은 비주얼 스튜디오 코드 설치내용이라 스킵했다 :)

 

1. HTML 기본 문서 만들기

 

 

HTML (Hyper Text Markup Language)

  • 다양한 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어 → 웹 문서를 만드는 언어
  • Hyper Text  : 문서를 서로 연결해 주는 링크 인터넷에서 → 링크만 클릭하면 다른 페이지나 사이트로 쉽게 연결 가능
  • Markup : '표시한다.'

웹 문서는 내용을 작성하는 프로그램과 그 내용을 확이나는 프로그램이 다르다 !

웹 편집기에서 마크업 형식으로 작성해야 한다. (태그를 사용)

 

HTML 문서 기본구조

 

웹 문서는 보통<!DOCTYPE html>로 시작해 <html>, <head>, <body>라는 3개 영역으로 구성되어 있다.

 

  • <!DOCTYPE html> : 현재 문서가 HTML5언어로 작성한 웹 문서라는 뜻
  • <html> ~ </html> : 웹 문서의 시작과 끝
  • <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
  • <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용, HTML태그는 대부분 <body> 태그 안에 들어있음

 

<html lang='ko'>

: 문서에서 사용할 언어 = korea 

  검색 사이트에서 특정 언어로 제한해 검색할 때 필요

 

<meta>

: 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용

 

<meta charset="UTF-8">

: 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리하기 때문에 한글이 깨질 수도 있음

 

 

시맨틱(semantic)태그 

: HTML의 태그는 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 한다

  <header>,<footer>등....

 

시맨틱 태그가 필요한 이유

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

 

 

 

2. 웹 문서에 다양한 내용 입력하기

 

 

▽ 텍스트 관련 태그

 

종류  설명
<hn> 제목.<h1>~<h6>.숫자가 커질수록 글자 크기는 작아짐
<p> 텍스트 단락
<br> 줄 바꿈
<blockquote> 내용 인용
<strong> 중요한 텍스트 굵게 표시, 화면 낭독기에서 강조해서 읽어줌
<b> 중요하지는 않지만 굵게 표시
<em> 중요한 텍스트를 기울게 표시, 화면 낭독기에서 강조
<i> 중요하지는 않지만 기울게 표시
<ins> 내용을 편집할 때 추가한 내용을 표시
<del> 내용을 편집할 때 삭제한 내용을 표시
<sup> 위 첨자
<sub> 아래 첨자

 

 

 

▽ 목록 관련 태그

 

종류 설명
<ol> 순서 있는 목록의 시작과 끝을 나타냄
<ul> 순서 없는 목록의 시작과 끝을 나타냄
<li> 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냄
<dl> 설명 목록의 시작과 끝을 나타냄
<dt> 설명 목록의 이름(제목)을 나타냄
<dd> 설명 목록의 값(설명)을 나타냄 

 

 

 

▽ 표 관련 태그

 

종류 설명
<table> 표를 나타냄
<caption> 표의 제목
<tr> 표의 행
<td> 표의 셀
<th> 제목 셀
<thead> 표 구조에서 제목 부분
<tbody> 표 구조에서 본문 부분
<tfoot> 표 구조에서 요약이나 정리 부분
<col> 표에서 열의 스타일 지정
<colgroup> 표에서 여러 열을 함께 묶어서 스타일 지정

 

 

 

▽ 멀티미디어 관련 태그

 

종류 설명
<object> 멀티미디어,PDF 파일 등 다양한 형식의 파일 삽입
<embed> <audio>, <video> 태그와 <object> 태그도 지원하지 않을 경우 멀티미디어 파일을 삽입
<img> 이미지 파일 삽입
<audio> 오디오 파일 삽입
<video> 비디오 파일 삽입

 

 

마무리 문제 ♥♡

 

1. 다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성해 보세요.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>
</head>
<body>
  <h1>수습 국원 모집</h1>
  <h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
  <p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다. <br>
  평소 방송에 관심있었던 여러 학우들의 지원바랍니다.</p>
  <ul>
    <li><b>모집 기간 :</b> 3월 2일 ~ 3월 11일</li>
    <li><b>모집 분야 :</b> 아나운서, PD, 엔지니어</li>
    <li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
    <i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i></li>
  </ul>
  <h3>혜택</h3>
  <ol type="a">
    <li>수습기자 활동 중 소정의 활동비 지급</li>
    <li>정기자로 진급하면 장학금 지급</li>
  </ol>
  <img src="images/mic.jpg" alt="">  
</body>
</html>

 

 

2. 다음 결과 화면을 참고하여 조건에 맞게 표 형식으로 웹 문서를 완성하세요.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 2</title>
  <style>
    table, td, th {
      border:1px solid #ccc;
    }
    td, th {
      padding:10px 20px;
    }
    td:last-child{
      width:200px;
    }
  </style>
</head>
<body>
  <h1>수습 국원 지원 양식</h1>
  <table>
    <tr>
      <th rowspan="3">개인정보</th>
      <th>이름</th>
      <td></td>
    </tr>
    <tr>
      <th>학과/학번</th>
      <td></td>
    </tr>
    <tr>
      <th>연락처</th>
      <td></td>
    </tr>
    <tr>
      <th>지원 분야</th>
      <td colspan="2"></td>
    </tr>    
  </table>
</body>
</html>

'HTML_CSS_JavaScript' 카테고리의 다른 글

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥  (0) 2023.03.03
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑤  (0) 2023.03.01
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ④  (0) 2023.02.28
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ③  (0) 2023.02.22
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ②  (0) 2023.02.19

'HTML_CSS_JavaScript'의 다른글

  • 현재글Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ①

관련글

티스토리툴바