HTML이란? - 그림으로 배우는 HTML-CSS, 입문!

그림으로 배우는 HTML-CSS, 입문!

01
웹 개발, 시작하기!

강의 소개

체험하기

웹 서비스 개요

체험하기

개발 환경 만들기

체험하기

02
HTML 문서 만들기

HTML이란?

체험하기

텍스트와 이미지

체험하기

링크 만들기

목록 만들기

표 만들기

입력 폼 만들기

03
CSS 셀렉터, 선택하여 꾸미기

CSS란?

셀렉터 기본

복합 셀렉터

셀렉터 게임

04
CSS 박스모델, 태그의 영역

CSS 박스모델?

블럭 vs 인라인

CSS 포지션?

구글 페이지 개선하기

05
CSS 플렉스, 배치하기

CSS 플렉스?

Flexbox, 핵심 정리!

개구리 게임

06
부트스트랩, 잘 만들어진 도구

부트스트랩?

컴포넌트 활용하기

Grid 레이아웃

레이아웃과 유틸리티

부트스트랩 테마

07
마치며..!

강의를 마치며

HTML이란?

02 HTML 문서 만들기

HTML이란?

⭐ HTML의 역할

웹 문서를 만드는 언어. 이를 HTML이라 한다.

⭐ 텍스트 태그

글 작성을 위한 것들.

<h1>머릿글1</h1>
<h2>머릿글2</h2>
<p>단락으로 묶을 글자들...!</p>

html

⭐ 미디어 태그

이미지, 오디오, 비디오 등을 표현.

<img src="이미지 주소" />

html

⭐ 링크 태그

클릭 시, 다른 페이지로 이동케 함.

<a href="http://google.com">구글로 이동!</a>

html

⭐ 리스트 태그

목록 생성 시 사용.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

html

⭐ 테이블 태그

표를 만듦. 하나의 행은 tr 태그, 각 행의 데이터는 td 태그로 나타냄.

<table>
  <tr>
    <td>언어</td>
    <td>역할</td>
  </tr>
  <tr>
    <td>HTML</td>
    <td>문서 내용을 작성</td>
  </tr>
</table>

html

⭐ 입력 태그

사용자의 입력을 받음.

작성자: <input type="text" />
질문 내용: <textarea></textarea>

html

질문하기