다다의 개발일지 6v6

[HTML & CSS] Responsive Web Design Certification - Learn HTML by Building a Cat Photo App 본문

Frontend/HTML, CSS

[HTML & CSS] Responsive Web Design Certification - Learn HTML by Building a Cat Photo App

dev6v6 2025. 2. 11. 22:28

https://www.freecodecamp.org/learn/2022/responsive-web-design/

 

https://www.freecodecamp.org/learn/2022/responsive-web-design

 

www.freecodecamp.org

Learn HTML by Building a Cat Photo App

The main element is used to represent the main content of the body of an HTML document. Content inside the main element should be unique to the document and should not be repeated in other parts of the document.

-> main 요소는 HTML 문서 본문의 주요 내용을 나타내는 데 사용됩니다. 기본 요소 내부의 콘텐츠는 문서에 고유해야 하며 문서의 다른 부분에서 반복되어서는 안 됩니다.

 

The section element is used to define sections in a document, such as chapters, headers, footers, or any other sections of the document. It is a semantic element that helps with SEO and accessibility.

-> section 요소는 장, 머리글, 바닥글 또는 문서의 다른 섹션과 같은 문서의 섹션을 정의하는 데 사용됩니다. SEO와 접근성에 도움이 되는 의미적 요소입니다.

 

The figure element represents self-contained content and will allow you to associate an image with a caption.

-> figure 요소는 자체 포함된 콘텐츠를 나타내며 이미지를 캡션과 연결할 수 있습니다

이때 caption이란? 사진, 그림, 표 같은 이미지 아래에 붙는 설명문이다. 쉽게 말하면, 이미지가 어떤 내용인지 설명하거나 추가 정보를 제공하는 글이라고 보면 된다.

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>A cute cat</figcaption>
</figure>

 

The footer element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more.

-> footer 요소는 문서나 섹션의 바닥글을 정의하는 데 사용됩니다. 바닥글에는 일반적으로 문서 작성자, 저작권 데이터, 사용 약관 링크, 연락처 정보 등에 대한 정보가 포함됩니다.

 

input 태그

<input type="text" name="catphotourl" placeholder="cat photo URL" required> 
여기서 required는 필수 input 이라는 뜻
 
 

radio input 에서 name이 같으면 같은 name의 input 중 하나만 선택할 수 있게 해준다.

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

 

If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

-> 위에 예시랑 이어져서 만약 value 속성이 없으면 indoor를 선택하나 outdoor를 선택하나 form data가 indoor-outdoor=on 으로 들어간다. 따라서 indoor를 선택했을때(선택지가 여러개일때) indoor-outdoor=indoor 이렇게 data를 보내고 싶으면 value 속성을 추가해 줘야한다. (아래)

<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> 태그로 감싸면 예쁘게 이렇게 뜬다.

이렇게 사진(figure) 아래 설명이 figcaption이다!

 

 

legend 까지 추가해봄! 이 fieldset 안에 있는 content에 대한 설명

          <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>

 

 

input을 labeling하는 법 두가지!

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

 

여기서 정리하자면 name, value는 서버에 데이터 보낼때 양식이라면, id는 label과 연결하기 위한 것이다.

편하게 id와 value는 똑같이 맞추자.

 

checked 속성은 값이 필요없이 기본으로 선택됐으면 하는 선택지에 넣어주면 된다.

 

 

결과물!
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CatPhotoApp</title>
  </head>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <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>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
    <footer>
      <p>
        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
      </p>
    </footer>
  </body>
</html>

코드 줄바꿈이 안돼서 좀 잘 안보이는데 이부분은 공부하면서 블로그 html, css 코드 바꾸면서 차차 발전시켜 보겠습니다! 

'Frontend > HTML, CSS' 카테고리의 다른 글

[HTML & CSS] Build a Survey Form - 이제 실습이다! 직접 구현해보기  (3) 2025.02.13
[HTML & CSS] Learn HTML Forms by Building a Registration Form  (0) 2025.02.12
[HTML & CSS] Learn CSS Colors by Building a Set of Colored Markers - rgb , #RRGGBB, hsl 함수 이용해서 여러 색깔 만들기 실험  (0) 2025.02.12
[HTML & CSS] Learn Basic CSS by Building a Cafe Menu - meta 태그, visited, hover, active  (2) 2025.02.11
[HTML] 공부를 도와 줄 사이트! 공부는 빠르게 실습은 느리게  (4) 2025.01.23
'Frontend/HTML, CSS' Related Articles more