Learn HTML by Building a Cat Photo App

새롭게 알게 된 것들 정리

 

새로운 tab으로 열기

<a> 태그 안에 target="_blank"

<p>Click here to view more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a>.</p>

 

사진/글자를 누르면 링크 연결

<a href="링크"> <사진/글자> </a>

<a href="https://freecatphotoapp.com"> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."> </a>

 

figure element

독립적인 콘텐츠를 표현. <figcaption> 요소를 사용해 설명을 붙일 수 있음. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됨

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

 

em element

텍스트의 강세. <em> 요소를 중첩하면 더 큰 강세를 뜻함.

  <figcaption>Cats <em>love</em> lasagna.</figcaption>

 

strong element

중대하거나 긴급한 콘텐츠를 나타냄. 보통 브라우저는 굵은 글씨로 표시

<figcaption>Cats <strong>hate</strong> other cats.</figcaption>

 

form /div / section 비교

 

<Form> 태그의 Action 속성

action양식이 제출될 때 양식 데이터를 보낼 위치를 지정

<form action="/action_page.php" method="get">
~
</form>

 

<Input> 태그의 required 속성

폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시, 불리언 타입

<form action="/examples/media/action_target.php" method="get">
    이름 : <input type="text" name="st_name" required><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

 

자동으로 하나만 선택되는 radio 버튼 

name 속성을 똑같은 걸로 지정함

<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

 

Id, Name, Value 차이

Id : JS,CS에서 html 특성을 이용해 사용할 수 있도록 하는 식별자, 중복 불가 

Name : 양식의 이름, 태그명

Value : 서버에 넘어가는 데이터, 즉 값. 해당 태그의 값

 

>> js에서 document.getelementbyid를 통해 주소값을 가져오고, .value를 통해 id의 데이터, 값을 가져옴.

 

fieldset element

<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용, 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줌

 

legend element

 <fieldset> 요소의 캡션(caption)을 정의할 때 사용

 <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>

 

Label 중첩 다른 사용 방식 (for 사용)

<input id="loving" type="checkbox">   <label for="loving"> Loving</label>

== <label><input id="loving" type="checkbox"> Loving</label>

 

radio 버튼 / check 버튼

radio 버튼	check 버튼
한가지만 선택	다중 선택가능