[HTML] HTML Tag

워뇽쿤·2022년 10월 14일
0

HTML, CSS

목록 보기
1/4
post-thumbnail

MDN 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML은 99% 이런 형식으로 작성이 됨!
<tagname attname="attrvalue"> content </tagnemt>

1. 해더 태그

<!-- 해더 태그 -->
<h1>Hello this is my homepage</h1>
<h2>Hello this is my homepage</h2>
<h3>Hello this is my homepage</h3>
<h4>Hello this is my homepage</h4>
<h5>Hello this is my homepage</h5>
<h6>Hello this is my homepage</h6>

Hello this is my homepage

Hello this is my homepage

Hello this is my homepage

Hello this is my homepage

Hello this is my homepage
Hello this is my homepage

2. list

<!-- 순서가 없는 리스트 -->
<ul>
    <li>김치</li>
    <li>고기</li>
    <li>맥주</li>
</ul>
<!-- 순서가 있는 리스트 -->
<ol>
    <li>김치</li>
    <li>고기</li>
    <li>맥주</li>
</ol>
  • 김치
  • 고기
  • 맥주
  1. 김치
  2. 고기
  3. 맥주

3. 링크

<!-- 웹사이트 링크 -->
<a href="https://google.com" target="_blank">Go google gogogogogo!!!!!!!</a>
<!-- 이미지  -->
<img src="https://velog.velcdn.com/images/dnjs0397/post/6c86d632-1b3a-45ba-b444-0499b08594d6/image.png">

Go google gogogogogo!!!!!!!

4. input

에시

<input placeholder="text" type="text"> 
// required 적용해놓으면 입력 유효성 검사를 할 수 있음
// placeholder ="text" 해주면 원하는 텍스트를 미리 입력해놓을 수 있음 
<input placeholder="password" type="password">
<input type="color">
<input type="button">
<input type="file">

기본 텍스트 입력 :
비밀번호 입력 :
색상 입력 :
버튼 :
업로드 :

input attribute

  • placeholder="text" : input 대상에 희미하게 글씨를 미리 새겨놓을 수 있음
<input placeholder="이렇게 희미하게" type="text"> 
  • required : input 대상에 입력이 안되었을때 검사를 해줌
<input required placeholder="입력하고 엔터치면 검사" type="text"> 
  • minlength="10" : 최소로 입력해야하는 글자수 (최소 10글자 이상 입력해야함)
<input minlength="10" required placeholder="입력하고 엔터치면 검사" type="text"> 
  • file : 업로드할 파일을 선택할 수 있게 탐색기가 열림, 선택도 됨, accept를 활용시 원하는 파일 확장자만 업로드 가능!
<input type="file" accept=".pdf">

5. 기타

header : body의 해더
main : body의 메인 부분
footer : body의 꼬릿말 부분
div : 박스라 생각하면 됨 , 기본적으로 박스는 박스끼리 옆으로 배치할 수 없음
span : 짧은 문자를 위한 태그
p : 긴 문장을 위한 태그

profile
QA 성장기

0개의 댓글