클라우딩 어플리케이션 엔지니어링 TIL Day 3 (2)

# 리스트

<ul>, <li> :정렬되지 않은 목록 태그

<li> 태그를 사용하여 목록 구성, 다양한 태그 포함

<ul> 태그의 자식은 무조건 <li> 태그만 가능함

 

<ol>, <li> : 정렬된 목록 태그

1,2,3 ... 형식으로 목록을 그림

<ol> 태그의 자식 요소는 무조건 <li> 태그만 가능함

    <ol>
      <li>리스트</li>
      <li>리스트</li>
      <li>리스트</li>
      <li>리스트</li>
      <li>
        리스트
        <ul>
          <li>순서가 없는 하위 리스트</li>
        </ul>
      </li>
    </ol>

---

<dl>, <dt>, <dd> : 설명 목록 태그

<dl> 태그가 전체를 감싸고 <dt>가 제목 <dd>가 설명

    <dl>
      <dt>안녕</dt>
      <dd>만나서 반갑다</dd>
    </dl>

---

# 표

<table> : 표를 만드는 태그

<tr> : 행

<td> : 열

<th> : 열의 제목 태그, 기본적으로 글자 굵게, 가운데 정렬

<thead> : 제목 그룹 태그, 하나의 테이블 안에서 한번만 사용

<tbody> : 표의 본문 태그, 하나의 테이블 안에서 한번만 사용

<tfoot> : 표의 바닥글 태그

<caption> : 표 설명 태그

- 셀 병합 옵션 : colspan="병합하고 싶은 칸의 수"

    <table>
      <thead>
        <tr>
          <th>셀 제목은 th로</th>
          <th>셀 제목은 th로</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td colspan="2">셀 내용은 td로</td>
        </tr>
        <tr>
          <td>셀 내용은 td로</td>
          <td>셀 내용은 td로</td>
        </tr>
        <tr>
          <td>셀 내용은 td로</td>
          <td>셀 내용은 td로</td>
        </tr>
        <tr>
          <td>셀 내용은 td로</td>
          <td>셀 내용은 td로</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>tfoot 내용</td>
          <td>tfoot 내용</td>
        </tr>
      </tfoot>
    </table>

---

# 외부 콘텐츠 iframe

<iframe> : 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그

모든 서비스가 iframe으로 불러올 수 있는 것은 아님, 주의해서 사용하기

a 태그를 사용하여 iframe 내부의 내용이 바뀌도록 링크를 걸어줄 수 있음

 <iframe name="sample" src="https://example.com/"
      >지원하지 않는 브라우저에서 보이는 글씨입니다</iframe
    >
    <!-- a태그로 링크를 걸어서 iframe 안의 내용을 변경해줄 수 있음 -->
    <a href="chap05list.html" target="sample">리스트로 변경</a>
    <a href="chap05table.html" target="sample">테이블로 변경</a>

---

# 양식 태그

<form> : 정보를 제출하기 위한 태그

input, selectbox, textarea 등을 가질 수 있음

정보 제출 위한 button을 가짐, type을 입력해서 명시적으로 알 수 있게 하

action 속성 -> 정보 제출 시 페이지 이동, method 속성 -> 정보 제출 시 처리 방식 지정

- 개발자 도구 단축기(window) : ctrl + shift + c

    <!-- chap05form-result로 get 방식으로 제출하겠다는 의미 -->
    <form action="chap05form-result.html" method="get">
      <input name="id" type="text" />
      <input name="password" type="password" />

      <select name="opt">
        <option>고르기</option>
        <option>고르기</option>
        <option>고르기</option>
        <option>고르기</option>
        <option>고르기</option>
      </select>

      <button type="submit">전송</button>
    </form>

ID와 비밀번호 값 입력 후 전송 버튼 누르기

GET 방식으로 넘어온 것 확인

 

<label> : input, textarea, selectbox 의 설명 작성 태그

<input> : 데이터 입력 받을 수 있는 대화형 태그, type 속성에 따라 유형이 달라짐

• checkbox : 체크박스 형태
• radio : 예, 아니오 와 같은 라디오 버튼
• file : 파일 첨부
• button : input를 버튼으로 사용 시, 전송이 안 되기 때문에 페이지 이동 같은 기능을 넣을 수 있음 
• hidden : 시각적으로 숨겨줌

<select> : 옵션 메뉴를 제공하는 태그

<textarea> : 여러 줄 입력 가능한 대화형 태그

input, select, textarea 공통 기본 속성

• readonly : 읽기 전용
• required : 필수 입력 사항으로 설정
• placeholder : input, textarea 에 미리 부가설명 입력
• disabled : 비활성화, 값 제출 X

<!-- chap05form-result로 get 방식으로 제출하겠다는 의미 -->
    <form action="chap05form-result.html" method="get">
      <label for="username">ID</label>
      <!-- id값은 html 문서 안에서 고유한 값이어야 함 -->
      <input id="username" name="id" type="text" />

      <label
        >PASSWORD
        <input name="password" type="password" />
      </label>

      <label for="option">옵션 선택</label>
      <select id="option" name="opt">
        <option>고르기</option>
        <option>고르기</option>
        <option>고르기</option>
        <option>고르기</option>
        <option>고르기</option>
      </select>

      <input type="checkbox" value="true" name="checkbox" />
      <lable for="agree">약관에 동의합니다</lable>

      <!-- 동일한 name 값을 지정해주면 radio 버튼들 중 하나만 골라서 선택 가능 -->
      <input type="radio" name="number" value="1" />1
      <input type="radio" name="number" value="2" />2
      <input type="radio" name="number" value="3" />3
      <input type="radio" name="number" value="4" />4

      <input type="file" />

      <input type="button" value="버튼입니다" />

      <input type="hidden" name="hiddentype" value="wow" />

전송 버튼 옆에 hidden type input 숨어있음

 

 

# HTML 주의사항

1. 대소문자 주의 -> 가능한 소문자로 작성
2. 닫는 태그 생략 주의 -> 콘텐츠를 가지는 태그는 닫는 태그 필수
3. 개발은 영어로
4. ID 중복 주의 -> 한 문서, 한 페이지 내에 한번만 나와야 하는 고유 아이디
5. 계층 구조 유지 -> 예쁜 코드 작성하기
6. 동일한 의미 태그 중첩 금지

 

 

# 새로 배운 것 & 알게 된 것

태그들의 정확한 사용법, 옵션 등을 잘 모르고 써왔는데 이번 공부를 통해서 알게 되었다

확실하게 초반 개념을 잡을 수 있는 시간이었다 다시 한번 복습하면서 간단한 페이지를 만들어봐야겠다!