1주차 HTML 기초

2022. 9. 22. 15:19ㆍ배울수록 연봉은 늘어간다./자바스크립트

728x90

1. HTML의 요소의 구성

  • 시작 태그
  • 종료 태그
  • 콘텐츠 : 텍스트 , 이미지 등
<시작태그> 콘텐츠 </종료태그>

2. 제목 , 부제목 , 내용은 <h1>, <h2>, <p> 태그를 사용합니다.

  • <h1>바로 실행해보면서 배우는 HTML5/CSS3</h1>
  • <h2>쉽고 빠르게 배우는 HTML5와 CSS3</h2>
  • <p>HTML5와 CSS3의 필수 개념과 실습까지</p>

실행화면▼

바로 실행해보면서 배우는 HTML5/CSS3

쉽고 빠르게 배우는 HTML5와 CSS3

HTML5와 CSS3의 필수 개념과 실습까지

3.HTML의 정해진 양식

예제▼

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="utf-8">
<title>구름EDU</title>
</head>

<body>
<h1>바로 실행해보면서 배우는 HTML/CSS</h1>
<p>HTML과 CSS에 대해서 배워봅시다!</p>
</body>
</html>
  • <!DOCTYPE html> : 이게HTML 문서라고 알려줍니다.
  • <html lang="ko"> : <HTML>은 HTML 문서 안쪽 전체를 감싸는 태그이며 바깥쪽에는 다른 태그가 존재할 수 없습니다. lang="ko"은 이 페이지의 주 언어가 한국어라는 것을 명시하며 장애인 유저가 음성으로 듣는 경우 한국어로 들을 수 있습니다.
  • <head> : HTML 문서에 대한 정보를 가지고 있으며 문서 내에 단 하나만 존재할 수 있습니다. <head>안에 담을 수 있는 대표적인 태그는 <meta>,<title> 입니다.
    • <meta> : 문서와 관련된 정보를 담는 태그이며 utf-8이라고 작성하여 html문서에 한글이라고 사용할 수 있다는 것을 브라우저에게 알려 줍니다.
    • <title> : 웹 페이지의 제목을 담는 태그입니다. 탭의 제목이나 즐겨찾기를 하는 경우 볼 수 있습니다.
       
  • <body> : 사용자에게 보이는 부분입니다. <heda>와 마찬가지로 문서 내 단 하나만 존재해야 합니다.
    • <h1> : 제목 표시 태그입니다.
    • <p>: 콘텐츠의 본문을 표시하는 태그입니다.

실행화면▼

바로 실행해보면서 배우는 HTML/CSS

HTML과 CSS에 대해서 배워봅시다!

4. 레이아웃

레이 아웃을 태그로 만들어 놓은 태그를 시맨틱 태그(Semantic Tag)라고 부릅니다.

예제▼

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="utf-8">
<title>XX일보</title>
</head>

<body>

<header>
<p>여기는 로고와 이름이 들어갑니다.</p>
</header>

<nav>
<p>여기는 사이트 메뉴입니다.</p>
</nav>

<section>
<p>여기서 부터는 기사가 들어갑니다.</p>
<article>
<p>여기는 첫번째 기사입니다.</p>
</article>

<article>
<p>여기는 두번째 기사입니다.</p>
</article>

</section>

<aside>
<p>여기에 광고가 들어갑니다.</p>
</aside>

<footer>
<p>여기에 회사 정보가 들어갑니다.</p>
</footer>

</body>

</html>

 

  • <header> : <section>의 소개나 제목을 담기위한 태그입니다. <head>와 혼동하지 마세요.
  • <nav> : 페이지 이동을 위한 메뉴를 담습니다.
  • <section> : 구획을 구분하기 위해 사용되며 <article>태그를 담습니다.
    • <article> : 주 내용을 담습니다.
  • <aside> : 광고 또는 사이트 주변에 해당 되는 내용을 담기 위해 사용합니다.
  • <footer> : 사이트의 가장 아래이며 회사 정보나 사이트의 정보를 담습니다.

실행화면▼

5. 본문태그

<body> 안에서 사용합니다.

예제▼

<!--여기 아래에 코드를 직접 작성한 뒤 실행해 봅시다!-->
<!--br 태그 예시에 이어 실습창에 작성해봅시다-->
<!--p태그 예시와 출력되는 결과가 다릅니다.-->

<p>구름IDE는 언제 어디서나
개발할 수 있는 웹 기반 IDE입니다.
동일한 도커 컨테이너 환경에 접속한
모든 사용자들은 코드를 동시 편집할 수 있고,
공유 링크를 통해 협업과 질문을
매우 편리하게 진행할 수 있습니다.</p>

<!--p태그 예시와 출력되는 결과가 다릅니다.-->
<p>구름IDE는 언제 어디서나<br>
개발할 수 있는 웹 기반 IDE입니다.<br>
동일한 도커 컨테이너 환경에 접속한<br>
모든 사용자들은 코드를 동시 편집할 수 있고,<br>
공유 링크를 통해 협업과 질문을<br>
매우 편리하게 진행할 수 있습니다.</p>


<pre>구름IDE는 언제 어디서나

개발할 수 있는 웹 기반 IDE입니다.
동일한 도커 컨테이너 환경에 접속한
모든 사용자들은 코드를 동시 편집할 수 있고,
공유 링크를 통해 협업과 질문을
매우 편리하게 진행할 수 있습니다.</pre>

 

  • <p> : 단락이란 뜻을 가집니다.
    • 단락 : 하나의 문장들이 모여 한편의 글을 이루는 것
  • <br> : break의 약자로 줄바꿈을 합니다. <br>은 종료태그를 쓰지 않습니다.
  • <pre> : preformatted의 약자로 형식화된 텍스트 브라우저에 그대로 표시합니다. 쉽게 말해 코드로 표현 된다기 보단 있는 그대로를 보여 줍니다. 우리가 문서작성을 하는 것처럼 있는 그대로~~~

실행화면▼

6. 나누기 태그

예제▼

<section>
<div>
<p>1번 문장입니다.</p>
<p>2번 문장입니다.</p>
</div>
<p>3번 문장입니다.</p>
</section>
  • <div> : division의 약자로 분활을 뜻합니다. 그저 각각의 태그를 구분짓기 위해 사용하며 굉장히 자주 쓰입니다. CSS를 이용하여 레이 아웃을 배치할 때도 사용합니다.

 

7.글자와 관련된 태그

콘텐츠가 중요하다는 걸 강조하기 위해 사용 합니다.
  • <strong> : 볼드체로 바꾸어 줍니다.
    • 볼드체 : 굵고 진한 글꼴
  • <em> : 기울임꼴 글자로 바꾸어 줍니다.
    • 기울임꼴 : 오른쪽으로 기울인 글자 = 이탤릭체라고도 합니다.
수학에서만 사용???

예제▼

<p>log<sub>2</sub>24</p>
<p>a<sup>2</sup>+b<sup>2</sup></p>

 

  • <sub> : 일반 위치 보다 위에 올림
  • <sup> : 일반 위치 보다 아래로 내림

실행화면▼

 

줄을 그어요!

예제▼

<!--여기 아래에 코드를 붙여넣고 실행해 봅시다!-->
<p>이 글에서 가장 <ins>중요한 문제</ins>는 밑줄이 있습니다.</p>
<p>글을 쓰다보면 이렇게 <del>시ㄹ수를</del> 실수를 할 때가 있습니다.</p>
  • <ins> : inserted의 약자로 밑줄을 그어 줍니다.
  • <del> : deleted의 약자로 취소선을 그어 줍니다.

실행화면▼

8. 링크 태그

  • <a> : anchor의 약자로 하이퍼 링크를 수행합니다.
    • <a>태그를 사용하여 다른 웹 페이지로 이동하거나 문서로 이동할 수 있습니다.
<a 속성>콘텐츠</a>
  • <a>태그는 속성을 필수로 가지며 공백을 가진 뒤 작성합니다.
    • 속성 :  키(key)="값"(value)
    • <a 키="https://naver.com">네이버</a>
  • href : hypertext reference의 약자이며 <a>태그의 속성 키값입니다.

예제▼

<a href="https://ide.goorm.io">구름IDE</a>

 

또 다른 속성??
  • taget : 해당 페이지를 어디에서 열지 정하는 속성 입니다.
    • _self : 현재 탭에서 링크 열기
    • _blank : 새 탭 or 새창에서 링크 열기

예제▼

<a href="https://ide.goorm.io" target="_self">구름IDE</a>
<a href="https://edu.goorm.io" target="_blank">구름EDU</a>

9. 이미지 태그

<img src="이미지 URL" alt="이미지 대체 문구"/>
  • src : source의 약자이며 이미지 경로 또는 URL의 속성을 가집니다.
  • alt : alternative text의 약자이며 대체문구라는 뜻을 가지는데 이미지가 정상 출력이 되지 않거나 이미지 파일이 존재하지 않을 경우 이미지 대신 표시할 문구를 나타냅니다.

예제▼

<img src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/QsT/image/NSTeOeMe0MddpqlJ23FZV7hJGvg" alt="dog's photo" width="430px" height="320px"/>
  • width , height : 높이나 너비를 조정 합니다. 권장 사양은 아닙니다. CSS 양식을 주로 사용합니다.

10. 오디오 태그

예제▼

<audio controls>
<source src="assets/audio/dance.mp3" type="audio/mpeg">
</audio>
  • type : 음원 형식을 뜻하는데 생략 가능합니다.

실행화면▼

11. 비디오 태그

예제▼

<video width="640" height="360" controls>
<source src="assets/video/dance.mp4" type="video/mp4">
</video>
  • type : 오디오와 마찬가지로 생략 가능합니다.
  • width,height : 오디오 태그와는 다르게 크기를 조정할 수 있지만 생략도 가능합니다.

실행화면▼

12. 유튜브 영상 삽입

유튜브에서 공유 버튼을 누른 후 퍼가기 버튼을 누르면 아래 예제와 같이 복사가 됩니다.

예제▼

<iframe width="560" height="315" src="https://www.youtube.com/embed/WnumLT3ZcLY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

13. 양식태그 

회원가입 신청서 만들기 

예제▼

<form action='http://server.me/check' method="get">
    <!--다양한 input form이 들어감-->
</form>
  • form : 하나의 신청 종이
  • action : 보낼 URL을 지정 합니다.
  • method : 속성을 보내는 방식을 지정합니다.
    • get : 받다라는 뜻으로 데이터 조회 목적으로 검색에 사용합니다.
    • post : 게시하다라는 뜻으로 데이터를 쓰거나 수정 삭제할 때 씁니다. 보통 게시물 or 회원가입에 사용합니다.

 

예제▼

<h3>text</h3>
<input type="text" name="myname">
<hr>

<h3>email</h3>
<input type="email" name="email">
<hr>

<h3>password</h3>
<input type="password" name="pw">
<hr>
  • <input> : 사용자에게 입력을 받기 위한 태그이며 빈 태그 입니다. 종료 태그는 쓰지 않습니다.
  • type : HTML에 정해진 양식이 있습니다.
  • name : 데이터를 전송하는데 씁니다. 중요합니다!!

 

실행화면▼

 

예제▼

<h3>color</h3>
<input type="color" name="color">
<hr>

<h3>date</h3>
<input type="date" name="birthday">
<hr>

<h3>number</h3>
<input type="number" name="quantity" min="1" max="10" step="1" value="1">
<hr>

<h3>range</h3>
<input type="range" name="points" min="0" max="10" step="1" value="5">
<hr>

<h3>reset</h3>
<input type="reset">
<hr>

<h3>time</h3>
<input type="time" name="mytime">
<hr>

 

실행화면▼

 

예제▼

<h3>회원가입</h3>
<form action="my-app" method="get">
<input type="text" name="id">
<input type="submit">
</form>
  • submit : 제출하다

 

실행화면▼

 

예제▼

<!--여기 아래에 코드를 직접 작성한 뒤 실행해 봅시다!-->
<h3>회원가입</h3>
<form action="my-app" method="get">
<input type="text" name="id" placeholder="아이디를 입력하세요.">
</form>
  • placeholder : 가이드 문구를 지정하는데 사용합니다. 가이드를 입력하면 해당 문구가 사라집니다.

 

실행화면▼

 

예제▼

<h3>회원가입</h3>
<form action="my-app" method="get">
<input type="text" name="id" placeholder="아이디를 입력하세요.">
<input type="password" name="password" placeholder="비밀번호를 입력하세요.">
</form>

 

실행화면▼

 

예제▼

<h3>회원가입</h3>
<form action="my-app" method="get">
<div>
<label for="userid">아이디: </label>
<input type="text" id="userid" name="id" placeholder="아이디를 입력하세요.">
</div>
<div>
<label for="password">비밀번호: </label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요.">
</div>
</form>
  • <label> : 입력 양식의 역활이 무엇인지 알려주는 이름표 역활을 합니다.
  • for : input의 id 속성 값을 동일하게 입력합니다.

실행화면▼

 

예제▼

<h3>회원가입</h3>
<form action="my-app" method="get">
<div>
<label for="userid">아이디: </label>
<input type="text" id="userid" name="id" placeholder="아이디를 입력하세요.">
</div>
<div>
<label for="password">비밀번호: </label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요.">
</div>
<div>
<label for="gender">성별: </label>
<select name="gender" id="gender">
<option value="male">남성</option>
<option value="female">여성</option>
</select>
</div>
<div>
<label for="job">직업: </label>
<select name="job" id="job">
<option value="student">학생</option>
<option value="teacher">선생님</option>
<option value="etc">기타</option>
</select>
</div>
</form>
  • <select> : 선택박스를 만들어 줍니다.
    • name : label의 for 속성값과 동일하게 입력합니다.
  • option : value 라는 속성을 갖습니다. 입력하고자 한 한글을 영어로 입력해 주면 됩니다.

 실행화면▼

 

예제▼

<h3>회원가입</h3>
<form action="my-app" method="get">
<div>
<label for="userid">아이디: </label>
<input type="text" id="userid" name="id" placeholder="아이디를 입력하세요.">
</div>
<div>
<label for="password">비밀번호: </label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요.">
</div>
<div>
<label for="gender">성별: </label>
<select name="gender" id="gender">
<option value="male">남성</option>
<option value="female">여성</option>
</select>
</div>
<div>
<label for="job">직업: </label>
<select name="job" id="job">
<option value="student">학생</option>
<option value="teacher">선생님</option>
<option value="etc">기타</option>
</select>
</div>
<div>
<label for="introduce">자기소개: </label>
<textarea name="introduce" id="introduce" placeholder="자기소개를 입력하세요" cols="20" rows="6"></textarea>
</div>
</form>

 

  • <textarea> : 한번에 많은 양의 글을 받을 때 사용합니다.
    • cols : 글자의 수를 조정합니다
    • rows : 글 줄 수를 조정합니다.

 

실행화면▼

 

예제▼

<h3>회원가입</h3>
<form action="my-app" method="get">
<div>
<label for="userid">아이디: </label>
<input type="text" id="userid" name="id" placeholder="아이디를 입력하세요.">
</div>
<div>
<label for="password">비밀번호: </label>
<input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요.">
</div>
<div>
<label for="gender">성별: </label>
<select name="gender" id="gender">
<option value="male">남성</option>
<option value="female">여성</option>
</select>
</div>
<div>
<label for="job">직업: </label>
<select name="job" id="job">
<option value="student">학생</option>
<option value="teacher">선생님</option>
<option value="etc">기타</option>
</select>
</div>
<div>
<label for="introduce">자기소개: </label>
<textarea name="introduce" id="introduce" placeholder="자기소개를 입력하세요" cols="20" rows="6"></textarea>
</div>
<button type="submit">제출</button>
</form>

 

  • <button> : 우리가 아는 그 버튼 입니다.
    • type : submit(제출) , reset (초기화) 을 사용할 수 있습니다.

 

실행화면▼

 

14. 표 만들기 (table)

나이 직업 이름
23 대학생 철수
24 직장인 영희
  • 표 전체 : 표 = table
  • 제목 셀 :  이름= <th> - table heading의 약자 입니다.
  • 데이터 셀 :  철수= <td> - table data의 약자 입니다.
  • 행 : 24 직장인 영희  = <tr> - table row(열)의 약자 입니다.

예제▼

<table> <!--전체를 담고 있는 표-->
<tr> <!--각 행-->

<th>나이</th> <!--각 열의 제목을 담은 제목 셀-->
<th>직업</th>
<th>이름</th>
</tr>

<tr>
<td>23</td> <!--데이터를 담은 데이터 셀-->
<td>대학생</td>
<td>철수</td>
</tr>

<tr>
<td>24</td>
<td>직장인</td>
<td>영희</td>
</tr>

</table>

 

실행화면▼

 

table 만드는 방법은?▼

<table> <!--전체를 담고 있는 표-->
<tr></tr> <!--각 행-->
<tr></tr>
<tr></tr>
</table>
  • table 태그 안에 원하는 행의 갯수<tr>을 추가합니다.
  • 첫 <tr> 사이에는 <th>
  • 두 번째 <tr> 사이에는 <td>를 넣어줍니다.
병합

예제▼

<table>
<tr>
<th>나이</th>
<td>23</td>
<td>24</td>
</tr>
<tr>
<th>직업</th>
<td colspan="2">대학생</td>
</tr>
<tr>
<th>이름</th>
<td>철수</td>
<td>영희</td>
</tr>
</table>
  • colspan : 숫자 만큼 행을 병합 합니다.
  • rowspan : 숫자 만큼 열을 병합 합니다.

실행화면▼

15. 목록 만들기 (list)

예제▼

<h3>오늘 할 일</h3>
<ul>
<li>학교 과제하기</li>
<li>Python 강의 듣기</li>
</ul>
<h3>장바구니</h3>
<ol>
<li>세제</li>
<li>돼지 고기 300g</li>
<li>생수</li>
</ol>
  • <ul> : 순서가 없는 목록을 나타냅니다.
  • <ol> : 순서가 있는 목록을 나타냅니다.
  • li : list item의 약자이며 목록을 작성할 때 사용합니다.

 

실행화면▼

 

<ol> 태그 속성? type으로 숫자 말고 다르게도 표현이 가능합니다. 

예제▼

<ol type="i">
<li>1</li>
<li>2</li>
</ol>
<ol type="I">
<li>1</li>
<li>2</li>
</ol>
<ol type="a">
<li>1</li>
<li>2</li>
</ol>
<ol type="A">
<li>1</li>
<li>2</li>
</ol>
<ol type="1">
<li>1</li>
<li>2</li>
</ol>

 

실행화면▼

 

<li> 속성은 value값에 원하는 숫자를 지정할 수 있습니다.

 

예제▼

<ol>
<li value="3">세제</li>
<li>돼지 고기 300g</li>
<li value="7">생수</li>
</ol>

 

실행화면▼

 

 

관련글

Total : Today : Yesterday :

티스토리툴바