HTML 요소 공부

현재 듣는곡

【結月ゆかり】月旅【オリジナル曲】

 

학습내용 확인용 글

 

step 3부터 시작

 

step 3

p 요소 설명하는 스탭 

h2아래에 해당하는 글을 적으라는 내용

 

 

step 4

주석에 대한 설명을 다루고 있다

<!-- -->로 주석을 넣을 수 있다

p에 대한 설명을 추가한다

 

step 5

주요 내용을 main 요소로 엮는 내용에 대해서 다룬다

 

 

step 6

들여쓰기로 정리하라는 이야기이다

 

step 7

이미지를 넣기 위한 img 요소에 대한 설명이다

img는 빈 요소이기에 /로 닫지 않아도 된다

 

step 8

이미지 요소에 src를 추가하여 이미지를 넣는다

 

step 9

img 요소의 alt요소를 설명하는 것이다

alt는 이미지에 마우스를 올리면 나오는 설명을 적을 수 있다

 

step 10

링크를 추가하는 a요소에 대한 설명이다

p던 h던 a를 걸면 하이퍼 링크를 넣을 수 있다

넣을때에는 안쪽에 넣는다

 

step 11

a를 닫는 위치에 따라 앵커가 어떻게 걸지는지 에 대한 이야기이다

텍스트를 넣어 링크를 넣어준다

 

Step 12

 

11과 동일 내용

 

Step 13

현재 text가 요소없이 혼자 있다

이를 p요소로 감싸서 정리해준다

 

Step 14

a요소를 cute cats에 넣어서 특정 url로 유도하라는 내용이다

 

 

Step 15

a요소 안에 target을 넣어 새창을 띄우도록 유도하는 내용이다

"_blank"를 넣어주면 된다

 

 

Step 16

주석을 제거하라는 내용이다

 

Step 17

a요소를 다양한 요소에 넣을 수 있음을 알려주는 스탭이다

이미지에 a를 넣으라는 것이다

 

Step 18

section요소를 사용해 문서를 나누는 것에 대한 내용이다

h2를 기준으로 나누면 된다

Step 19

새로운 section을 이전 section 밑에 넣으라는 내용이다

Step 20

list를 만들기 전 리스트의 제목을 h2로 넣으라는 내용이다

Step 21

h2밑에 h3로 다른 내용을 넣으라는 내용이다

Step 22

ul = unordered list를 넣는 내용이다

Step 23

ul에 li를 넣어서 list를 넣으라는 내용이다

Step 24

리스트 아래에 새로운 이미지를 추가하라는 내용이다

Step 25

 

figuer요소에 대한 내용이다

보통 한 요소를 엮어서 묶는데 사용한다

📌 <figure>란?

<figure>는 하나의 콘텐츠 묶음을 나타냅니다.
그 안에는 보통 다음과 같은 것이 포함됩니다:

• 이미지 (<img>)
• 도표, 차트
• 코드 블록
• 그리고 그에 대한 설명 (<figcaption>)

Step 26

figcaption에 대한 내용이다

보통 이미지 밑에서 figuer를 설명하는데 사용된다

Step 27

em 요소에 대한 내용이다

✅ 왜 <em>을 쓰는가?

• <em>은 emphasis(강조)를 의미하는 태그입니다.
• 보통 기울임꼴(이탤릭)으로 표시되며,
• 스크린리더도 "강조된 단어"임을 인식해줍니다.

Step 28

피규어 요소 밑에 h3를 넣는 내용이다

Step 29

위에서 사용한 것 과 같은 ul대신 ol = ordered list를 사용하는 스탭이다

Step 30

29의 부분을 figure로 엮어서 새로운 영역을 만들어 준다

Step 31

이미지를 추가하는 스탭이다

Step 32

alt를 추가하는 부분이다

Step 33

figcaption을 넣는 스탭이다

Step 34

<strong>으로 text에 강조 표시를 넣는 스탭이다

Step 35

section을 추가하는 부분이다

Step 36

form요소를 설명을 위한 h2요소를 추가해 준다

Step 37

사용자 입력을 위한 빈 form요소를 넣어준다

Step 38

form의 action을 넣어줘 사용자의 입력에 대해서 어떻게 반응할지에 대한 url을 넣는다

Step 39

사용자 입력을 위한 input을 form안에 넣어준다

input이나 img는 빈요소이기에 닫지 않아도 된다

Step 40

input에 type="text"를 넣어서 입력 공간을 넣는다

Step 41

name field를 추가하여 key value를 넣어준다

Step 42

placeholder은 input영역에 적어야 하는 내용을 암시적으로 보여준다

Step 43

required를 input에 넣어주면 무조건 넣어야 하는 input이 된다

Step 44

제출 버튼을 button요소를 사용하여 만들어 준다

Step 45

button에 type에 submit을 추가하여 제출 버튼임을 명시해준다

Step 46

input type radio를 넣어 확인용 체크박스를 넣어준다

Step 47

<label>의 역할

1. <input> 요소와 연결되어 사용자가 뭘 입력해야 할지 알려주는 설명 역할
2. 마우스로 라벨을 클릭하면 해당 input 요소가 자동으로 선택되도록 해줌

Step 48

input에 id를 추가하여 어떠한 값인지 명시해 준다

Step 49

outdoor input radio를 추가해 준다

Step 50

현재의 radio는 동시 선택이 가능하다

동시 선택을 막기 위해서 name를 동일하게 하여 제한 해 준다

Step 51

input은 name과 value가 쌍으로 작동하는데, 현재 value가 없어서 반쪽짜리이기에 value를 추가하여 완성해 준다

Step 52

<fieldset>은 label을 묶는 요소이다

Step 53

fieldset으로 묶은 요소에 legend를 사용하여 제목을 넣어줄 수 있다

Step 54

요구사항대로 fieldset과 input을 추가해 준다

Step 55

legend를 추가해 준다

Step 56

checkbox를 추가해 준다

Step 57

Step 58

for 속성의 의미

<label for="어떤값">은 해당 라벨이 어떤 입력 요소(input)를 설명하는지를 알려줍니다.
이때 for에 들어가는 값은 input 요소의 id 속성과 같아야 합니다.

 

for 속성을 사용하여 checkbox요소를 사용하는 방법이다

Step 59

checkbox에 name를 추가하여 값을 넣어준다

Step 60

lazy라는 checkbox를 추가해 준다

Step 61

checkbox를 하나 더 추가해 준다

Step 62

checkbox에 value가 없어도 작동은 하지만, 있는것이 좋기에 추가해 준다

Step 63

radio와 checkbox의 첫 요소들에 checked를 넣어 기본적으로 체크가 되어있도록 한다

Step 64

main아래에 footer을 넣어서 아랫글을 적는 공간을 만든다

Step 65

p로 텍스트를 넣어준다

Step 66

앵커로 링크를 만들어 준다

Step 67

head요소를 main위에 넣어준다

Step 68

title을 추가해 준다

Step 69

언어 표시를 html요소에 넣어준다

Step 70

doctype를 추가하여 html5임을 알린다

Step 71

utf-8임을 알린다

 

END