[Web] css / html tag 태그 정리 - 2

- HTML <pre> 요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.

- 다른 글씨체로 표시

<pre>happy</pre>

 

- HTML <abbr> 요소는 준말 또는 머리글자를 나타냅니다.

- time에 점선이 쳐지고 마우스를 위에 올리면 약어(my stylr)를 표시

<p>Day <abbr title="my style">time</p>

 

- <mark> 는 south korea 형광펜 표시

<p>l like to live in <mark>south korea</mark></p>

 

- <strong>는 south korea 굵게 표시

<p>l like to live in <strong>south korea</strong></p>

 

- <sub>는 south korea 밑으로 내려서 표시 <sup>는 south korea 위로 올려서 표시 - 제곱표시해줄때 유용

<p>l like to live in <sub>south korea</sub></p>

 

<p>2<sup>5</sup></p>

 

- audio 태그 / controls 꼭 있어야함 / autoplay 자동으로 음악 시작 / src 소스 파일

<audio controls autoplay src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</audio>

 

- 상자 박스에 글 집어넣기

<dialog open>
      <p>Greeting, on and all!</p>
    </dialog>

 

- 값을 적을 수 있는 공간 만들기

<form>
      <input/ >
</form>

- 색깔 고를 수 있는 값 (위에서 수정)

<input type="color"/>

 

- password 받는 값 (위에서 수정)

<input type="password"/>

 

- 값 입력 받는 곳에 힌트를 주는 placeholder

<input placeholder="Name" type="text"/>

 

- 버튼 sumbit 및 이름 변경 value 값 변경

<input type="submit" value="Creat Count"/>

 

- 입력할 수 있는 공간 disabled / 버튼에게도 적용가능

<input placeholder="Last Name" disabled type="text"/>

 

- 값을 입력했는지 안했는지 검사해주는 required

<input required placeholder="Name" type="text"/>

 

- 입력을 최소 n자를 설정해주는 minlength="10" 

<input required placeholder="Password" minlength="10" type="password"/>

 

- 특정 형식 파일을 가져오는 태그

<input type="file" accept=".png,.pdf" />

 

- label 이름 클릭시 id가 같은 동작을 실행시켜줌. / id는 무조건 1개, 고유해야한다.

<label for="profile">profile photo</label>
<input id="profile" required placeholder="Name" type="text"/>

 

      <label for="website">Website</label>
      <input id="website" required placeholder="Name" type="url" />

 

- 줄바꿈 태그

<div></div>

 

- div와 똑같은 기능을 하는 태그 / 다른 사람들이 어느 부분인지 직관적으로 알 수 있어 사용한다.

<header></header>
<main></main>
<footer></footer> //꼬릿말을 따름

 

html 참고 사이트 : 

developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

 

제일 기본적인 형태 / true-false 형태일경우 꼭 ="" 안해도 되구 원형으로 써도 된다.

<tagname attrname="attrvalue">flflflflfl</tagname>