[Section 02] HTML

---

< 04. HTML 태그 - 2 >

1. 목록 태그

1.1. ul / li / dl / dt / dd 태그

<strong>과일</strong>
<p>사과</p>
<p>바나나</p>
<p>멜론</p>
→ p 태그로 나열하면 목록으로 인식되지 않고, 일반적인 문장으로 인식

• ul (unordered list) : 비순서형 목록 태그
  • <ul type=“disc”> 기존 동그라미 (기본값, 굳이 명시하지 않아도 됨)
  • <ul type=“circle”> 빈 동그라미
  • <ul type=“square”> 네모 상자

<strong>과일</strong>
<ul>
<li>사과</li>
<li>바나나</li>
<li>멜론</li>
</ul>

1.2. ol 태그

• ol (ordered list) : 순서형 목록 태그
  • <ol type=“1”> 숫자 (기본 값, 굳이 명시하지 않아도 됨)
  • <ol type=“A”> 대문자 알파벳 (소문자도 가능)
  • <ol type=“I”> 대문자 로마숫자 (소문자도 가능)

<strong>오늘 할 일</strong>
 <ol>
   <li>아침먹기</li>
   <li>점심먹기</li>
   <li>간식먹기</li>
   <li>저녁먹기</li>
   <li>야식먹기</li>
 </ol>

• ul과 ol 태그는 자식 태그로 li 태그만 올 수 있음!
  → 하위 목록으로 추가하고 싶을 경우 li 태그 안에 ul이나 ol 태그를 추가
  → ul이나 ol 태그를 li 태그와 같은 위치에 두면 안 됨!
• type 속성은 li 태그가 아닌 ul이나 ol 태그에 적용해야 함

1.3. li (list item) 태그

1.4. dl (definition list) : 정의형 목록 태그

• 들여쓰기 스타일 적용
• dl 태그는 type 속성 없음
• dt (definition terms) : 정의할 내용의 제목
• dd (definition description) : 정의할 내용
• 모든 언어는 기본적인 스타일이 있고,
  웹 브라우저에 저장되어 있는 기본 스타일로 보이는 것
  그러므로 각각의 브라우저마다 보여지는 스타일의 차이가 있음
  

    <dl>
    <dt>HTML</dt>
    <dd>
    HTML은 Hyper Text Markup Language의 약자로 
    웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.
    </dd>
    <dt>CSS</dt>
    <dd>
    CSS는 Cascading Style Sheets의 약자로 
    웹 문서를 꾸미기 휘한 목적으로 개발된 언어입니다.
    </dd>
    </dl>

---

2. 링크와 이미지 태그

2.1. a (Anchor) 태그

• 하이퍼링크를 생성하는 데 사용, a 태그의 존재로 웹상 문서를 연결 할 수 있게 됨.
• HTML (Hyper Text Markup Language)에서 Hyper Text가 a 태그를 뜻함.
• href : 링크의 목적지 url 지정
  • a 태그는 반드시 href 속성과 함께 사용해야 함.
• target : 링크를 클릭했을 때 페이지가 열리는 방식 지정
  • 설정하지 않으면 기존 페이지에서 해당 페이지가 열림
  • _blank : 새 탭에서 열기 (이것만 알고 있으면 됨)
  • _blank 설정했을 때 웹 페이지 우클릭 - 검사 - console - document.referrer 치면
    이전에 접속한 사이트 주소 확인 가능 → 불법 사이트 접속자 추적 가능
• rel : target 속성이 _blank일 때만 작성
  • rel 속성에 noreferrer을 셋팅하면 추적 불가
  • 사이트 이용자가 타 사이트에 정보를 옮기지 않고 안전하게 이용 가능 (보안을 위해)
  • rel 속성에 noopener를 셋팅하면 새 탭을 열면서 생길 수 있는 해킹 방지
  • 구형 브라우저에선 자동으로 설정이 되어 있지 않으므로
    셋팅하는 것이 좋다
  • 보안을 위해 rel="noopener noreferrer" 꼭 셋팅하자!!

2.2. img (Image) 태그

• 웹 페이지에 이미지를 삽입하는 데 사용
• 콘텐츠가 없는 빈 태그
• 추가적인 속성이 필요함
  • src : 웹 사이트에 삽입하고 싶은 이미지 파일 경로 지정
  • alt : 이미지의 대체 텍스트, 이미지를 로드할 수 없을 때나 스크린 리더 사용자에게 설명

<img src="이미지명.webp" alt="설명 텍스트" />

• 상대적 이미지 경로 방식
  • images라는 폴더에 이미지가 있다면 아래와 같이 작성

<img src="images/이미지명.webp" alt="설명 텍스트" />

- `./` : 현재 폴더라는 뜻 (생략 가능)
- `../` : 상위 폴더라는 뜻, 리눅스 개념의 시스템에서도 동일하게 작동
- `/`는 앞에 도메인 주소가 생략되어 있다고 생각하면 된다.
- 모든 경로는 html 파일 위치를 기준으로 한다.

• 절대적 이미지 경로 방식
  

<img src="<https://~>" alt="설명 텍스트" />

- 이미지 경로가 다른데 alt 속성 값이 같으면 좋은 구조의 html 구조가 아님

2.3. 이미지 링크

• 링크 태그와 이미지 태그를 함께 사용하는 기법
  

<a href="<https://www.google.co.kr>" target="_blank" title="google">
  <img src="../1.webp" alt="google" />
</a>          
→ html 문서가 폴더 안에 있고 img 파일이 폴더랑 같은 위치에 있는 경우

---

3. 폼 구성 태그

• 상호 작용 요소 (입력창, 버튼 등)

3.1. form 태그

• 사용자 입력을 수집하기 위한 폼을 정의
• action : 폼 데이터를 전송할 url을 지정, 서버 지정
• method : 웹 브라우저는 기본적으로 get 속성값을 사용함
• 프론트엔드 개발자가 직접적으로 action과 method를 제어하는 일은 없음
  (백엔드 영역)
• ※ JSONPlaceholder : 가짜 서버 제공 사이트
  

<form action="서버주소" method="get">
  <input type="text" />
</form>

• form 안에 form 태그가 들어갈 수 없음

3.2. input 태그

• 한 줄 입력 요소
• type 속성값
  • text
  • password : 비밀번호 (입력내용이 숨겨짐)
  • tel : 전화번호
  • number
  • url
  • search
  • email
  • checkbox : 다중 선택 시 사용
    ex) (필수) 약관동의, (선택) 광고 마케팅 정보 활용 동의
  • radio : 단일 선택 시 사용
    ex) 성별 선택 등
  • file
  • button : value 속성과 함께 사용
  • image : 이미지 파일을 버튼으로 만들 때
  • hidden
  • date
  • datetime-local
  • month
  • week
  • time
  • range
  • color
  • submit
  • reset
• type을 다 외우는 것은 어려움
• 실무에서 사용 하는 type
  (text, password, email, checkbox, radio, file)
• input은 논 시멘틱, button은 시멘틱
  따라서, 같은 입력값이 나오는 경우엔 button으로 사용하는 것이 좋음
• input은 텍스트를 한 줄로만 입력 가능
• 주요 속성
  • type : 필드 유형 정의
  • name : 필드 이름 정의, 서버에서 사용할 키 지정
  • value : 필드의 초기 값 설정
  • placeholder : 필드에 표시될 안내 텍스트, 입력창에 대한 힌트를 보여줌
    (ex- 입력창에 "이름을 입력해주세요" → 입력하면 사라짐)
  • required : 입력하지 않으면 오류 표시
  • disabled 속성 : 비활성화 속성
  • readonly 속성 : 입력하지 못하게 함,
    일부 정보는 보여주되 수정하지 못하게 할 때
  • maxlength 속성 : 글자수 제한
  • checked 속성 : checkbox에서 체크가 된 상태로 표현
• radio는 name 속성을 작성하여 여러 개중 하나만 선택 가능하게 설정 가능

<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성

3.3. label 태그

• 폼 요소에 대한 설명 제공, 글자만 클릭해도 연결된 입력 필드 활성화
• 명시적인 방법
  • for 속성과 함께 사용
    → for 값과 input의 id 속성값이 동일하게 작성되어야 함
  • id와 class는 글로벌 속성 (태그에 상관없이 공통적으로 작동)
    ↔ 로컬 속성 (특정 태그만)

 <form action="">
    <label for="uname">이름</label>
    <input type="text" id="uname" name="username">
  </form>

• 암묵적인 방법
  • label 태그 안에 input 태그 작성

<form action="">
  <label>
    이름
    <input type="text" name="username" />
  </label>
</form>

• 암묵 + 명시적인 방법
  • 암묵적인 방법을 좀 더 명확하기 하기 위해 사용
    (디자인에 따라 달라짐)

<form action="">
   <label for="uname">
      이름
      <input type="text" id="uname" name="username">
   </label>
</form>

3.4. textarea 태그

• 여러 줄 입력 요소
• 주요 속성
  • rows : 행의 수 지정
  • cols : 열의 수 지정

<textarea rows="4" cols="30" required>
  의견을 입력해주세요.
</textarea>

3.5. button 태그

• type : 버튼의 유형을 정의, submit이 기본값
  • button, submit, reset 버튼을 많이 사용함
• form 태그 없이 입력 요소들을 작성하는 실수를 주니어개발자들이 많이 함!!
  → 화면에는 정상적으로 나오지만, 기계들이 요소들의 의미를 제대로 인식 못 함

<form action="">
  <button type="button">클릭</button>
</form>

3.6. fieldset 태그

• form 요소들을 시각적인 박스로 그룹 짓고 싶을 때 사용, 시멘틱 태그
  div는 논시멘틱 태그 (의미 있는 태그가 아님)
• legend : 그룹명 지정

<form action="">
  <fieldset>
    <legend>기본정보</legend>
    <label for="id">
      아이디
      <input type="text" id="id" name="id" />
    </label>
    <label for="pwd">
      비밀번호
      <input type="password" id="pwd" name="password" />
    </label>
  </fieldset>
</form>

3.7. select 태그

• name : 선택된 값의 이름 지정
• multiple : shift, ctrl과 함께 사용하면 중복 선택 가능 (잘 사용하진 않음)
• option : 콤보 박스 생성
  • value : 선택할 값
  • size : 글씨 크기 선택
  • selected : 초기값 선택 (여러 개 지정하면 마지막 값이 지정됨)

<form action="">
  <select name="country" required>
    <option value="">국가 선택</option>
    <option value="kr">한국</option>
    <option value="us">미국</option>
    <option value="jp">일본</option>
  </select>
</form>

3.8. optgroup 태그

• select 태그를 그룹화할 때 사용
• label 속성과 함께 사용

<form action="">
   <select name="fruits" required>
     <optgroup label="씨가 있는 과일">
       <option value="apple">사과</option>
       <option value="peach">복숭아</option>
     </optgroup>
     <optgroup label="씨가 없는 과일">
       <option value="banana">바나나</option>
       <option value="grape">포도</option>
     </optgroup>
   </select>
</form>

---

< 05. 표 만들기 >

1. 필수 태그

1.1. table 태그

• 표의 시작을 의미

1.2. caption 태그

• 표의 제목을 입력하는 태그 (무조건 적어주는게 접근성에 좋다)
  • 안보이게 하고 싶다고 display : none 쓰면 안됨,
    기계가 존재하지 않는 것을 인식함
  • top : -9999px 과 같이 우회해서 처리

1.3. tr (table row) 태그

• 행 표현 (항상 행을 먼저 작성해야 함)

1.4. th (table header), td (table data) 태그

• css 처리를 해야 표처럼 보임
• border를 사용하여 임시로 표 모양으로 표현
• th : 표의 제목 성격을 나타낼 때
• td : 표의 데이터를 나타낼 때
  

      <table border="1">
        <tr>
          <th>구분</th>
          <th>이름</th>
          <th>나이</th>
        </tr>
        <tr>
          <td>1</td>
          <td>김씨</td>
          <td>20</td>
        </tr>
        <tr>
          <td>2</td>
          <td>이씨</td>
          <td>25</td>
        </tr>
      </table>

• 접근성 향상을 위해 scope 속성 사용 (기계들이 파악하기 좋음)
  • th 태그에만 사용 가능
  • 제목이 영향을 끼치는 범위를 정할 때 사용
  • th가 thead에만 있으면 굳이 사용할 필요 없음
  • scope="row"는 가로 방향으로 영향을 줄 때
  • scope="col"은 세로 방향으로 영향을 줄 때

1.5. thead (table header), tbody (table body), tfoot (table foot) 태그

• thead : 제목 성격의 부분을 그룹화
• tbody : 내용 성격의 부분을 그룹화
• tfoot : 요약 정보 부분을 그룹화
• 해당 내용이 있을 때 쓰는 것, 없으면 사용 안해도 됨
• 스크린 리더기는 thead - tfoot - tbody 순으로 읽어 줌
  

     <table border="1">
        <thead>
          <tr>
            <th>구분</th>
            <th>이름</th>
            <th>나이</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>김씨</td>
            <td>20</td>
          </tr>
          <tr>
            <td>2</td>
            <td>이씨</td>
            <td>25</td>
          </tr>
        </tbody>
      </table>
    

1.6. colspan, rowspan 태그

• colspan : 열 병합
• rowspan : 행 병합

    <table border="1">
      <thead>
        <tr>
          <th>구분</th>
          <th>이름</th>
          <th>나이</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>김씨</td>
          <td>20</td>
        </tr>
        <tr>
          <td>2</td>
          <td>이씨</td>
          <td>25</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">총합</td>
          <td>45</td>
        </tr>
      </tfoot>
    </table>

1.7. col, colgroup 태그

• 열을 일괄적으로 그룹화해서 동일한 스타일을 적용하고 싶을 때 사용
• 전체 크기가 충분해야 적용되며,
  충분하지 않으면 알아서 반응형으로 요소 크기 줄여 줌
• col 태그는 빈 태그, colgroup 태그는 닫는 태그가 있음

    <table border="1">
      <colgroup span="2" style="width: 50px"></colgroup>
      <col style="width: 100px" />
      <thead>
        <tr>
          <th>구분</th>
          <th>이름</th>
          <th>나이</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>김씨</td>
          <td>20</td>
        </tr>
        <tr>
          <td>2</td>
          <td>이씨</td>
          <td>25</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">총합</td>
          <td>45</td>
        </tr>
      </tfoot>
    </table>

하루 정리

확실히 1일차 수업보다는 배우는 양도 많고 이해하는 시간도 비교적 오래 걸린다..

이해가 안되는 부분을 끝까지 잡고 있다가는 진도를 못 따라갈 것 같아서
쉬는 시간이나 자율 학습 시간에 정리하면서 이해를 하고 있다.

수업을 들으면서 필기를 할 때, 예시를 비쥬얼 스튜디오 코드에만 작성하니까 
추후 복습할 때 기억이 제대로 나지 않는다. 
필기하는 노트에도 따로 작성을 해놔야 복습할 때 헷갈리지 않을 것 같다.

슬랙에 스터디 모집을 했던데... 그걸 이제 보고 참여를 못했다... 이런... 
누가 또 만들어주세요 ㅠㅠ 저는 아무 것도 몰라서...