-
인프런 실전 HTML CSS 강좌 정리 - HTML 기본프로그래밍 연습 2020. 10. 9. 19:28
인프런 실전 HTML CSS 강좌 정리
- HTML 기본 1-
실전 HTML & CSS 강좌 - 인프런
Web을구성하고있는HTML5 과 CSS3 를 다루는 강좌 입니다. 입문 웹 개발 HTML/CSS 웹 퍼블리싱 온라인 강의 css 강좌
www.inflearn.com
인프런에서 HTML CSS 무료강좌를 들으면서 배운 내용을 토대로 찾아가며 정리한 내용들이다.
HTML과 CSS 태그 관련해서 궁금한 부분은 유투브 Webstoryboy에 올라와 있는 레퍼런스를 참고하면 된다.
HTML 레퍼런스 https://webzz.tistory.com/221
CSS 레퍼런스 https://webzz.tistory.com/353
HTML
웹 문서를 표현하기 위한 하이퍼 텍스트 마크업(Hyper Text Markup Language) 언어이다.
현재 사용하는 HTML은 HTML5로 시멘틱 요소와 미디어 요소를 제공하며 다양한 API를 제공한다.
HTML은 1989년 팀 버너스리에 의해 처음 만들어졌으며,
문서와 문서를 서로 이동하기 위해 만들어져 월드 와이드 웹(World Wide Web) 개념을 개발해 1991년에 배포한다.
태그
HTML문서를 구성하고 있는 요소로 태그에는 이름과 속성이 있다.
1 시작 태그와 종료 태그
예) <h1> h1 태그입니다. </h1>
<h1>는 시작을 알리는 태그이며, </h1>은 종료가 된다는 것을 뜻한다. 시작 태그와 종료 태그는 쌍을 이룬다.
2. 시작 태그와 종료 태그 구분이 없는 태그
예) </br>
3. h1, p, br, a, b, i, sup, ins, del 태그
<!DOCTYPE html> <html lang="ko" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>인프런 HTML CSS 강좌 01 </title> </head> <body> <h1> h1 태그입니다 </h1> <h2> h2 태그입니다 </h2> <h3> h3 태그입니다 </h3> <h4> h4 태그입니다 </h4> <h5> h5 태그입니다 </h5> <h6> h6 태그입니다 </h6> <p>주로 본문에 사용하는 태그로서 단락을 구분합니다</p> <p>주로 본문에 사용하는 태그로서 단락을 구분합니다</p> <p>주로 본문에 사용하는 태그로서 단락을 구분합니다<br/>행바꿈 태그입니다</p> <p>주로 <b>본문</b>에 사용되는 태그로서 단락을 구분합니다<br/>행바꿈 태그입니다</p> <p><a href="http://www.google.com">구글 웹사이트로 이동</a></p> <p><i>KOREA</i></p> <p>KOREA <sup>seoul</sup></p> <p><ins>KOREA</ins></p> <p><del>DELETE</del></p> </body> </html><h1~h6>은 제목 구분을 하며, 숫자가 커질수록 글자 크기가 작아진다.
<p>내용</p> 단락을 변경해준다.
<br>
<a herf="주소">텍스트</a></p>
a herf href="URL" 하이퍼 링크를 정의 속성 링크로 이동하는 경로(값)를 설정한다. <i>글씨 기울어지는 태그</i>
<sup>글씨 위쪽에 글씨가 작게 표시되게 함</sup>
<ins>링크 걸지 않아도 밑줄이 생기게 함</ins>
<del>글자에 줄이 그어지게 함</del>
'프로그래밍 연습' 카테고리의 다른 글
인프런 실전 HTML CSS 강좌 정리 - CSS 기본 1, 2 (0) 2020.10.19 웹표준 사이트 레이아웃 만들기 연습 1 스스로 코드 작성하기 (0) 2020.10.14 인프런 실전 HTML CSS 강좌 정리 - HTML 기본3 (0) 2020.10.13 인프런 실전 HTML CSS 강좌 정리 - HTML 기본2 (0) 2020.10.10 웹표준 사이트 레이아웃 만들기 연습 1 (1) 2020.10.09