728x90

HTML

인터넷과 웹의 시작

미국 국방성에서 시작. 1969년 현재 인터넷의 모태가 되는 ARPANET이 개발되었다. 1989년 팀 버너스 리는 월드 와이드 웹(World Wide Wep, WWW)을 개발하였다. 문서와 문서를 연결하는 하이퍼링크(Hyper Link) 개념이 도입되었고, 1991년에 배포되었으며 1993년에 소스코드가 공개되었다.

 

웹 브라우저의 역사

  • 1993년 : 최초의 GUI 환경의 '모자이크' 탄생
  • 1996년 ~ 2008년 말 : 1차 브라우저 전쟁. 모자이크를 개발했던 마크 엔더리슨은 '넷스케이프'를, 마이크로소프트는 '인터넷 익스플로러'를 개발. 운영체제에 기본으로 탑제되어 제공되던 익스플로러가 넷스케이프를 이기고 대부분의 점유율을 확보
  • 2008년 12월 : 구글 크롬 정식 출시
  • 2010년 : 인터넷 익스플로러가 최신 표준을 지원하지 않는 문제가 발생
  • 2009년 ~ 2015년 : 2차 브라우저 전쟁. 2022년 2월 기준 데스크탑 64.89%의 점유율로 크롬이 승리

HTML5

최신 웹 기술로, 단순히 웹 문서를 작성할 때 사용되는 마크업 랭귀지(HTML)의 문법적(syntactic) 버전 뿐만 아니라 새로운 DOM API 스펙을 포함한다. 일렉트론(Electron)등의 기술을 사용하면 애플리케이션 웹 기반으로 개발이 가능하다.

 

시작 태그, 끝 태그, 내용

<h1>Hello</h1>
  • 시작 태그 : <h1>
  • 끝 태그: </h1>
  • 내용: Hello
  • 요소(element): 시작 태그 + 내용 + 끝 태그
  • 내용엔 다른 요소들이 올 수도 있다.

속성

<a href="http://www.naver.com">naver</a>

 

 

기본 구조 

<!DOCTYPE html>
<html>
    <head>
        <title>문서의 제목</title>
    </head>
    <body>
        문서의 내용
    </body>
</html>

 

head

웹 브라우저에 문서 정보를 알려주는 태그. 화면에 보이는 부분은 아니다. <mata>, <title> 등이 쓰이고 스타일시트 파일도 이곳에서 연결해준다.

 

meta 태그

  1. 문자셋 정의: 문서의 문자 인코딩을 지정
<mate charset="UTF-8">

2. 뷰포트 설정: 반응형 웹 디자인에 필수적인 속성. 모바일 브라우저에서 페이지가 어떻게 보여질지 제어한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 키워드: 페이지 내용과 관련된 키워드를 제공하고 검색엔진 최적화(SEO)에 도움이 된다.

<meta name="keywords" content="HTML, CSS, JavaScript">

4. 웹 페이지 설명: 웹 페이지의 간단한 설명을 제공. 검색엔진의 검색결과에서 페이지 아래에 표시되는 설명문

<meta name="description" content="Html 구조에 대해 설명합니다.">

이외에도 저자 설명, 리프레시 설정, 캐시 제어, 오픈 그래프 메타태그 등의 설정을 할 수 있게 해주는 태그이다.

html 태그 종류

제목

h1, h2, h3, h4, h5, h6

h1은 가장 큰 제목, h6는 가장 작은 제목

 

줄바꿈

<br />

 

가로줄

<hr />

 

앵커

하이퍼링크 태그를 의미한다. 내용 부분을 클릭하면 해당 주소로 이동

<a href="주소">내용</a>

 

글자의 모양

<b>, <i>, <small>, <sub>, <sup>, <ins>, <del>

글자의 모양은 태그를 이용하지 않고 보통 CSS를 이용하는 것이 좋다

 

목록 태그/기본 목록

<ul> 순서가 없는 목록을 표현

<ol> 순서가 있는 목록을 표현

<li> 목록의 요소

 

목록 태그/정의 목록

<dl> 정의 목록 태그

<dt> 정의 용어 태그

<dd> 정의 설명 태그

 

테이블 태그

<table> 표

<tr> 표 내부의 행

<th> 제목 셀 태그

<td> 일반 셀 태그

 

- 테이블 속성

border 표의 테두리 두께

rowspan 세로로 셀 합치기

colspan 가로로 셀 합치기

 

이미지 태그

<img> 이미지

 

- 이미지 속성

src 이미지 경로

alt 이미지 설명

width 이미지 너비

height 이미지 높이

 

멀티미디어 태그

<audio> 오디오 파일

<video> 비디오 파일

 

입력양식 태그

form 입력 폼

input 입력 창

textarea 입력 영역

select 선택 폼

 

공간 분할 태그

<div> block 형식으로 공간 분할

<span> inline 형식으로 공간 분할

 

시멘틱 구조 태그

<header> 헤더

<nav> 네비게이션

<aside> 사이드에 위치하는 공간

<section> 여러 중심 내용을 감싸는 공간

<article> 내용

<footer> 푸터

<address> 주소

 

실습문제1 - 자기소개 페이지 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자기소개 페이지</title>
</head>
<body>
    <header>
        <h1>지유빈의 자기소개 페이지</h1>
    </header>
    <hr/>
    <main>
        <img src="intro.png" alt="자기소개사진">
        <section>
            <h2>기본 자기소개</h2>
            <p>안녕하세요. 저는 멋쟁이사자처럼 백엔드스쿨 10기생 박경서입니다.</p>
            <p>저는 백엔드에 대해 공부하고 혼자서도 웹 페이지를 만들어보고싶습니다.</p>
        </section>
        <hr/>
        <section>
            <h2>취미 및 관심사</h2>
            <p>저의 취미는 야구 직관입니다.</p>
            <p>요즘 관심은 모루인형 만들기입니다.</p>
        </section>
        <hr/>
        <blockquote>늦었다고 생각할 때가 진짜 늦었다</blockquote>
        <cite>박명수</cite>
    </main>
    <hr/>
    <footer>
        <p>연락처 및 주소</p>
        <address>
            <p>주소 - 경기도 수원시</p>
            <p>연락처 - 010-1111-2222</p>
        </address>
    </footer>
</body>
</html>

실습문제2 - 블로그 포스트 페이지 만들기 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블로그 페이지</title>
</head>
<body>
    <header>
        <h1>HTML의 기본</h1>
        <p><small>2024-03-27 박경서</small></p>
    </header>
    <hr/>
    <main>
        <img src="html.png" alt="html아이콘">
        <p>오늘은 <strong>html의 기본</strong>을 배워보았다.</p>
        <p><em>다양한 태그</em>를 이용해 실습도 해보았다.</p>
        <a href="https://www.tcpschool.com/html-tag-attrs/img-alt" target="_blank">실습의 기본</a>
    </main>
    <hr/>
    <section>
        <h4>댓글</h4>
        <ul>
            <li>재밌었겠내요</li>
            <li>저도 배워보고 싶어요</li>
            <li>다음엔 어떤 걸 배우나요?</li>
        </ul>
    </section>
</body>
</html>

실습문제3 - 제품 소개 페이지 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제품 소개 페이지</title>
</head>
<body>
    <header>
        <h1>갤럭시 제품 소개</h1>
        <p>갤럭시는 한국 최고 기업 삼성에서 만들어진 최고의 스마트폰입니다.</p>
    </header>
    <hr/>
    <main>
        <img src="g1.jpg" alt="갤럭시사진1" width="400px">
        <img src="g2.jpg" alt="갤럭시사진1" width="400px">
        <ul>
            <li>예쁜 색감</li>
            <li>좋은 기능</li>
        </ul>
    </main>
    <hr/>
    <hr/>
    <section>
        <article>
            <h3>사용자1</h3>
            <p>너무 잘 쓰고있어요.</p>
        </article>
        <hr/>
        <article>
            <h3>사용자2</h3>
            <p>약간 버벅거려요.</p>
        </article>
        <hr/>
    </section>
    <footer>
        <p>제품 구매 페이지</p>
        <a href="https://search.naver.com/search.naver?ssc=tab.nx.all&where=nexearch&sm=tab_jum&query=%EA%B0%A4%EB%9F%AD%EC%8B%9C" target="_blank">구매 관련 홈페이지</a>
    </footer>
</body>
</html>
728x90
저작자표시

'Spring > TIL - 멋쟁이사자처럼' 카테고리의 다른 글

4월 11일 TIL : final  (0) 2024.05.03

+ Recent posts

티스토리툴바