코딩야학 2일차

ock·2023년 11월 20일

오즈코딩스쿨_코딩야학(HTML, CSS)

목록 보기

2/7

오늘의 공부목차

링크 표시하기

목록 만들기

표 만들기

입력태그

그 외 입력태그

입력 정보 내보내기

메타데이터

과제- 설문양식 작성하기

1. 링크 표시하기

<a href = "URL" >컨텐츠</a>

다른 페이지나 사이트로 이동하기 위한 링크를 표시하기 위해 <a>태그를 사용해준다.
<a> 태그 안에 href와 target을 작성할 수 있다.

href는 내가 이동하고자 하는 곳의 주소를 작성하면 된다. 예를 들어 네이버의 링크를 달고싶다면 네이버의 주소인 https://www.naver.com 을 넣어준다.

<a href="https://www.naver.com">

target 속성을 추가하면 새로운 문서를 열 때,
현재탭에서 열지, 새로운탭에서 열지 결정할 수 있다.

target을 _self로 설정하면 현재탭에서 링크이동을 하고,
target을 _blank로 설정하면 다른탭으로 링크이동을 한다.

<a href="URL" target="_self">현재탭에서 열기</a>
<a href="URL" target="_blank">다른탭에서 열기</a>

2. 목록 만들기

목록에는 두 가지의 경우가 있다.
순서가 있는 목록, 순서가 없는 목록.

순서가 있는 목록은 <ol> 로 Ordered List의 준말이며, 순서가 없는 목록은 <ul>로 Unordered List의 준말이다. 각 목록의 내용은 <li>로 나타낸다.

<ol>
  <li>순서있는 목록1</li>
  <li>순서있는 목록2</li>
  <li>순서있는 목록3</li>
</ol>  

<!--
1. 순서있는 목록1
2. 순서있는 목록2
3. 순서있는 목록3
-->


<ul>
  <li>순서없는 목록1</li>
  <li>순서없는 목록2</li>
  <li>순서없는 목록3</li>
</ul>  

<!--
- 순서없는 목록1
- 순서없는 목록2
- 순서없는 목록3
-->

기본적으로 순서는 숫자로 표현이 되고 순번은 1번부터 시작을 하나 type 속성과 start 속성을 추가하면 자신이 원하는 문자와 순번으로 목록을 만들 수 있다.

<ol start="2" type="A">
  <li>순서있는 목록1</li>
  <li>순서있는 목록2</li>
  <li>순서있는 목록3</li>
</ol>  

<!--
B. 순서있는 목록1
C. 순서있는 목록2
D. 순서있는 목록3
-->

3. 표 만들기

<table>

하나의 표를 나타내는 태그

<cation>

<table> 태그의 안쪽에서 제목 또는 표에 대한 설명을 나타내는 역할
기본적으로 가운데에 정렬

<tr>

표 안에서 하나의 행을 나타내는 태그

<th>

행 안에서 제목에 해당하는 셀을 나타내는 태그

<td>

행 안에서 콘텐츠에 해당하는 셀을 나타내는 태그

<thead>

표의 제목이나 주제를 나타내는 영역

tbody

표의 본문을 나타내는 영역

<tfoot>

표의 요약글이나 맺음말을 나타내는 영역

위 3개는 컨테이너 역할. 비주얼적으로는 변화를 주지 않는다.

4. 입력태그

<label>

라벨 작성하는 첫 번째 방법

<label>아이디<input type="text" placeholder="아이디" /></label>

라벨 작성하는 두 번째 방법

 <label for="pw">비밀번호</label>
 <input type="password" id="pw" placeholder="비밀번호" />

<input>

<input type="">
<!-- type에 text, email, password, search, date ... 등이 들어간다.-->

<input type="text">

텍스트를 입력할 수 있는 입력창을 생성한다.

<input type="password">

비밀번호를 입력할 수 있는 입력창을 생성한다.
type="text"와 달리 입력하려는 문자가 숨겨져 보이지 않는다.

<input type="color">

사용자에게 색상을 선택할 수 있는 인터페이스를 제공한다.
이 입력 요소를 사용하면 사용자는 웹 페이지에서 직접 색상을 선택할 수 있다.

<input type="number">

사용자가 숫자를 입력할 수 있도록 하는 데 사용된다.
여기에는 숫자가 아닌 항목을 거부하는 내장 유효성 검사가 포함되어 있어서 숫자 외의 문자는 입력이 되지 않는다.

<input type="range">

사용자에게 범위(예: 숫자 또는 값의 범위)를 조절할 수 있는 슬라이더를 제공한다.
이 입력 요소를 사용하면 사용자는 정해진 범위 내에서 값을 선택하거나 조절할 수 있다.

<input type="checkbox">

사용자에게 이진 상태의 선택을 허용하는 체크박스를 생성한다.
체크박스는 주로 사용자에게 "예" 또는 "아니오"와 같은 이진 선택을 할 수 있는 옵션을 제공하는 데 사용된다.

<input type="button">

버튼을 생성한다.

수치를 입력받는 유형
: color, number, range ..

5. 그 외 입력태그

fieldset

여러 폼 요소들을 하나의 그룹으로 묶을 때 사용한다.

legend

<fieldset> 요소 내에서 사용되는 태그로, 그룹화된 폼 컨트롤에 대한 설명이나 제목을 제공하는 데 사용된다.

select

사용자에게 선택 목록을 제공한다.
주로 드롭다운 목록이라고 불리며, 여러 옵션 중에서 하나를 선택할 수 있게 한다.

textarea

<input>과 같이 text 입력을 받는 입력창을 만든다.
한 줄의 입력만 받는 <input>과는 달리 textarea는 여러 줄의 입력을 받는다.
- textarea 창이 고정이 안되어있는데 고정을 시키려면 css에서
```
   resize: none;
```
추가해주면 된다.

<progress>

작업 진행 상태를 나타내는 데 사용된다.
이 요소는 주로 파일 업로드, 다운로드, 설치 또는 기타 비동기 작업의 진행 상태를 시각적으로 표현하는 데 활용된다.

6. 입력 정보 내보내기

<form>

사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그
ex) 로그인 페이지, 회원가입 페이지, 검색어 입력 페이지 등..
폼은 웹 페이지에서 사용자에게 입력 필드를 제공하고, 이를 통해 정보를 서버로 전송하여 처리하는 데 사용된다.
서버가 정보를 받으면 name 속성으로 항목을 구별한다.
action : 폼 데이터를 처리할 서버 측 스크립트의 URL을 지정한다.
method : 데이터를 전송할 방법을 지정한다. 대표적으로 "get" 또는 "post"가 사용된다.

7. 메타데이터

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="author" content="정은옥" />
    <meta name="description" content="연습용페이지" />
    <meta name="keywords" content="공부, HTML, 실습" />
    <title>문서정보 관리하기</title>
  </head>
  <body></body>
</html>

HTML 문서에 대한 메타데이터를 정의한다.
- 데이터에 대한 데이터 즉, 정보를 의미한다.
- 문자세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정하는데 사용
메타데이터는 브라우저나 검색 엔진 등이 문서를 올바르게 해석하고 처리할 수 있도록 돕는 정보를 의미한다.
<head> 요소 내에 위치.

8. 과제- 설문양식 작성하기



<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>설문조사 양식</title>
  </head>
  <body>
    <header>
      <h1>설문조사 양식</h1>
      <p>모든 항목에 빠짐없이 체크해주세요.</p>
    </header>
    <hr />
    <main>
      <form>
        <fieldset>
          <legend>개인정보</legend>
          <label for="name">이름</label>
          <input
            type="text"
            name="name"
            placeholder="본명을 입력하세요"
          /><br />
          <label for="email">이메일</label>
          <input type="email" name="email" placeholder="메일 주소 쓰세요" />
        </fieldset>
        <fieldset>
          <legend>설문</legend>
          <p>나이가 어떻게 되십니까?</p>

          <input type="radio" id="teen" name="age" />
          <label for="teen">10대</label>

          <input type="radio" id="tewnty" name="age" />
          <label for="tewnty">20대</label>

          <input type="radio" id="thirty" name="age" />
          <label for="thirty">30대</label>

          <input type="radio" id="fourty" name="age" />
          <label for="fourty">40대</label>

          <input type="radio" id="fifty" name="age" />
          <label for="fifty">50대</label>

          <p>다음 중 선호하는 것을 모두 골라주세요.</p>
          <input type="checkbox" id="movie" name="contents" />
          <label for="movie">영화</label>

          <input type="checkbox" id="drama" name="contents" />
          <label for="drama">드라마</label>

          <input type="checkbox" id="animation" name="contents" />
          <label for="animaion">만화</label>

          <input type="checkbox" id="musical" name="contents" />
          <label for="musical">뮤지컬</label>
        </fieldset>
        <fieldset>
          <legend>기타 의견</legend>
          <textarea rows="3" cols="30" name="comment"></textarea>
        </fieldset>
        <input type="submit" />
      </form>
    </main>
    <hr />
    <footer><p>입력하느라 수고하셨습니다.</p></footer>
  </body>
</html>