오늘은 html, css 배우는 날~
Preview
- 태그
태그
meta
meta는 content가 존재하지 않고, attribute만 존재함. 즉, 어떤 설정만 해줄때 meta 태그를 사용함.
<hr>
수평 구분자가 생기게 함.
<p>
단순 텍스트를 표현할 때 사용.
<h1>, <h2>, <h3>
크기 조절 가능한 텍스트.
<a>
특정 링크의 문서를 요청할 때 사용함.
- href: 요청 할 페이지 링크 또는 경로.
- target: 어느 페이지에 랜더링 해줄까? 를 결정하는 부분.
- _blank는 새로운 페이지에서 랜더링 해주세요~
- _self는 현재 페이지에서 랜더링 해주세요~
- title: 마우스를 링크 위에 올리면 뜨는 툴팁.
<img>
이미지를 표시할 때 사용함.
- src: 이미지의 링크 또는 경로.
- height, width: 이미지의 크기를 조절함. 하나만 지정하면 비율을 유지함.
- alt: 해당 이미지에 대한 설명을 적어놓을 수 있음.
- title: 마우스를 이미지 위에 올리면 뜨는 툴팁.
<video>
동영상을 표시할 때 사용함.
- src: 동영상의 링크 또는 경로.
- height, width: 동영상의 크기를 조절함. 하나만 지정하면 비율을 유지함.
- controls: 재생, 멈춤, 볼륨 조절 등 영상을 컨트롤 할 수 있게 해줌.
- autoplay: 웹 페이지 접속시 자동으로 재생 되도록 해줌.
- muted: 음소거 모드로 기본 설정 되도록 해줌.
- loop: 동영상이 무한 재생되도록 함.
- 아래 처럼 적으면 위에서 부터 아래로 오류가 발생하면 대체 미디어를 보여줄 수 있음.
<video autoplay muted controls loop width="500">
<source src="./video/video.mp4">
<source src="./video/video2.mp4">
<source src="./video/video3.mp4">
This browser does not support HTML5
</video>글씨체 바꿀 수 있음.
<p>This is normal text</p>
<p>This is <b>bold</b> text</p>
<p>This is <i>italic</i> text</p>
<p>This is <big>big</big> text</p>
<p>This is <small>small</small> text</p>
<p>This is <sub>subscript</sub> text</p>
<p>This is <sup>superscript</sup> text</p>
<p>This is <ins>inserted</ins> text</p>
<p>This is <del>deleted</del> text</p>
<p>This is <mark>marked</mark> text</p><ul>
Unordered List, 순서없는 리스트
<ul>
<li>pizza dough</li>
<li>tomato sauce</li>
<li>cheese</li>
<li>toppings
<ul>
<li>peperoni</li>
<li>mushrooms</li>
<li>peppers</li>
</ul>
</li>
</ul><ol>
Ordered List, 순서있는 리스트
<ol>
<li>eat breakfast</li>
<li>take shower</li>
<li>leave for work</li>
</ol>
<ol type="A">
<li>eat breakfast</li>
<li>take shower</li>
<li>leave for work</li>
</ol><dl>
Description List, 용어와 설명을 묶어서 표현
<dl>
<dt>HTML</dt>
<dd>This adds structure to a webpage</dd>
<dt>CSS</dt>
<dd>This adds stype to a webpage</dd>
<dt>JavaScript</dt>
<dd>This adds functionality to a webpage</dd>
</dl>