제목과 문단 Headings & Paragraph

🔴 paragraph - 문단을 의미

<p> 내용 </p>

attribute - 태그의 성격을 디테일하게 주고 싶을때 사용

<p attr = "value"> </p>

예시

<p lang = "ru"> спокойный, благополучный </p>

🟠 headings - 제목을 의미

<h1>가장 중요한 제목</h1>
<h2>두번째로 중요한 제목</h2>
<h3>그다음으로 중요한 제목</h3>
<h4>그다음다음으로 중요한 제목</h4>
<h5>그다음다음다음으로 중요한 제목</h5>
<h6>마지막으로 중요한 제목</h6>

🟡 줄 바꾸기

<br/>

강조 Emphasis

🔴 emphasis - 강조하고 싶을때 사용

<em> 강조 </em>
<strong> 강조 </strong>

//예시
<p>머리가 아닌 <strong>마음으로 우는 내가 좋다.</strong></p>

링크 Anchor

🔅 anchor - 현 위치에서 다른 위치로 이동하도록 하는 태크

<a href = "주소"> 링크 </a>

🔴 전화 바로 걸리도록 하는 링크

<a href = "tel:01012345678"> 전화번호 </a>

🟠 이메일로 바로 이동하도록 하는 링크

<a href = "mailto: [email protected]"> 이메일주소 </a>

🟡 페이지 내에서 특정위치로 이동하도록 하는 링크 <id를 사용한다>
목적지: id = "아이디명"
출발지:

<a href = "#아이디명"> 아이디명 </a>

🟢 웹 url로 이동하도록 하는 링크

<a href = "url"> 웹이름 </a>

🔵 링크로 이동할때 새탭으로 열어서 이동하고 싶을 경우
★ target = "_blank" 를 넣어주면 된다.

<a href = "url" target = "_blank" > 웹이름 </a>

이미지 Image

🔴 src(source) - 이미지파일의 경로 or 주소값 설정해주는 attribute이다.
🟠 alt(alternative text) - 대체 text(그림이 안 보일 경우 그림대신 나오는 text)를 설정해주는 attribute이다.

<img src = "#" alt = ""/>
<img src = "https://bit.ly/2mw1wis" alt = "귀여운 고양이"/>

리스트 Lists

🔴 ol(ordered list): 순서가 중요한 목록
🟠 ul(unordered list): 순서가 중요하지 않은 목록
🟡 li(list item): 리스트 요소
🟢 ul과 ol의 직계 자식요소는 무조건 li만 가능하다.

<ul>
    <li>항목1</li>
    <li>항목2</li>
</ul>

//예시
<h1>개발</h1>

<ul>
    <li>웹 개발자</li>
    <li>서버 개발자</li>
    <li>프론트엔드 개발자</li>
    <li>자바 개발자</li>
    <li>안드로이드 개발자</li>
    <li>iOS 개발자</li>
    <li>파이썬 개발자</li>
    <li>시스템,네트워크 관리자</li>
</ul>

정의 리스트 Description List

🔴 { key : value } - 이와 같이 무엇인가를 정의를 하고 싶을때 쓰는 list이다.
🟠 dl(description list): 정의를 하기위한 리스트
🟡 dt(description term): key 값
🟢 dd(description data): value 값
🔵 dfn(definition): 쫌 더 강조하고 싶을때 사용

<dl>
    <dt>
    	<dfn> 사과 </dfn>
    </dt>
    <dd> 겉은 빨갛고 속은 노란 과일 </dd>
</dl>

인용 Quotations

🔴 blockquote : 긴 문단을 인용할 때 사용
🟠 q : 문단안에서 작은 일부를 인용할 때 사용
🟡 cite : 출처를 나타내기 위해 사용, 만약 출처의 url이 존재한다면 blockquote의 attribute로 출처를 적어주면 된다

<blockquote cite = "https://~">
    <p> ~<q>~~</q>~</p>
    <cite> 알베트 아인슈타인 </cite>
</blockquote>

Div & Span

🔴 Div & Span : 아무런 의미가 없음, CSS 스타일링할 때 요긴하게 사용(CSS 효과를 줄 요소들을 묶어줄 때 사용하면 요긴하기 때문), 최대한 안 쓰는게 좋음
🟠 Div는 주로 큰 덩어리로 묶어줄 때 사용하고 Span은 자그마한 text의 일부분을 묶어주고 싶을 때 주로 사용한다.

//예시
<div>
    <h1> 자기소개 </h1>
    <p> 안녕하세요 저의 이름은 홍길동입니다. </p>
    <a href="#"> 링크 </a>
</div>

Form

기본구조

🔴 Form은 사용자로부터 input을 받기위한 태그이다.
🟠 action = "API주소", method = "GET | POST"

<form action = "" method = ""> </form>

Input

🔴 input은 입력창, input field를 나타낸다.
🟠 기본형식

<input type = "?"/> 

🟡 ?에 들어가는 값 : text, email, password, number, tel, file 등
🟢 placeholder : 아무값도 없을 때 기본적으로 보여줄 text를 입력
🔵 maxlength, minlength : text의 길이를 제한할 때 사용
🟣 required : 무조건 입력을 하도록 독촉함
🟤 disabled : 사용자가 사용하지 못하도록 막음
⚫ value : placeholder는 사용자가 값을 입력하기 위해 input 창을 클릭하면 text가 사라지지만 value는 사용자가 input 창을 클릭해도 text가 사라지지 않고 기본적으로 적용되는 text이다.
⚪ min, max : type이 number일 경우 사용, 숫자의 크기를 제한할 때 사용
🔴 accept : type이 file일 경우 사용, 허용하고자 하는 파일의 확장자를 지정해줄 때 사용

<form action = "" method = "GET">
    <input type = "text" placeholder = "아이디를 입력하세요" minlength = "5" maxlength = "13" required/>
    <input type = "text" value = "홍길동" disabled/>
    <input type = "number" min = "5" max = "12"/>
    <imput type = "file" accept = ".png, .jpg"/>
</form>

Label

▷Label은 폼 양식에 이름을 붙이는 태그이다.
▼아래 그림에서 진한 글씨로 적힌 '이름'이 Label이다.

🔆 기본 형식

<label for = "누구"> 라벨 </label>

📣 예시

// label 태그에는 for이라는 attribute가 꼭 들어가 주어야 한다.
// for에는 이름을 붙여주고 싶은 폼 양식의 id 값을 적어주면 된다.
<label for = "user-name"> 이름 </label>
<input type = "text" id = "user-name"/>

Radio & Checkbox

🔴 Radio - 여러개중 한개만 선택 가능
🟠 Checkbox - 여러개중 다중 선택 가능
🟡 label을 꼭 달아주어야 한다
🟢 name : radio나 checkbox들을 연관 시켜준다
🔵 value : 연관 되어있는 것들을 구분하기 위한 값을 준다
🟣 name = value 형식으로 url로 전달된다

형식

<form action = "" method = "GET">
    <input type = "radio" name = "apple" value = "1" id = "apple"/>
    <label for = "apple">사과</label>
    <input type = "radio" name = "apple" value = "0" id = "unapple"/>
    <label for = "unapple">안 사과</label>
    
    <input type = "checkbox" name = "skills" value = "html" id = "html"/>
    <label for = "html">HTML</label>
    <input type = "checkbox" name = "skills" value = "css" id = "css"/>
    <label for = "css">CSS</label>
</form>

Select & Option

🔴 위의 그림과 같은 기능을 하게 해주는 것이 Select & Option이다.
🟠 multiple : 여러가지 옵션을 선택 가능하게 해준다.

<form action = "" method = "GET">
    <label for = "skill"> 스킬 </label>
    <select multiple name = "skill" id = "skill">
        <option value = "html"> HTML </option>
        <option value = "css"> CSS </option>
        <option value = "js"> JavaScript </option>
    </select>
</form>

Textarea

✨ textarea : 긴 줄을 입력 받을때 사용

<label for = "field"> 자기소개: </label>
<textarea id = "field" placeholder = "자기소개를 입력하세요">
</textarea>

Buttons

🎈 button : 버튼을 만들때 사용

<button type = "button"> 버튼 </button>
<button type = "submit"> 제출하기 </button>
<button type = "reset"> 다시쓰기 </button>