[엘리스QA트랙]태그

황인철·2025년 1월 30일

엘리스 QA트랙

목록 보기
4/18

1. 테이블 생성

table 태그를 이용
tr -> 행을 나타내는 요소
th -> 헤더 셀을 나타냄, 굵은 글씨로 표시
td -> 데이터 셀을 나타냄

2. Form 양식

사용자로부터 입력을 받을 수 있는 HTML 양식
form -> 요소들을 감싸며 HTML의 fORM 양식을 정의

3. form 태그의 속성

  1. method : 사용자가 입력한 내용들을 서버 쪽으로 어떻게 넘겨줄 지 지정(get, post) 존재
  2. name : 폼의 이름을 지정
  3. action : 데이터를 전송한 url이나 서버쪽의 script 파일명, 보통 서버의 프로그램과 연결되는주소

4. 폼 요소

  1. label: 폼 요소에 레이블을 붙이기 위한 태그
    2.input : 다양한 입력을 받고 type 속성을 통해 입력 필드의 종류 지정 가능
  2. textarea : 여러줄의 텍스트를 입력할 수 있는 입력 필드

5. label 태그

6. input 태그

7. input의 type 속성

8. textarea 태그

  1. 여러 줄의 텍스트를 입력할 수 있는 요소
  2. cols, rows 속성 : textarea의 행과 열 개수를 지정하여 기본 사이즈 조정
  3. placeholder, name 속성 : input과 동일

9. 폼 요소의 활용 예시

10. Semantic 태그의 활용

사용한 모습

사용하지 않은 모습

형태의 차이가 확연하게 다름

11. Semantic 태그

  1. div 태그와 동일한 컨테이너 태그
  2. 단순하게 구획만 나누는 div와 다르게 해당 요소의 역할과 의미를 예측 가능함
  3. 태그만 보고 역할이나 위치 파악 가능

12. Semantic 태그의 종류

>직접 실습한 모습

좌 : div를 활용한 실습
우 : Semantic 태그를 사용해 한눈에 봐도 역할 파악이 가능하게 만듬

profile
열심히하는QA가되고싶어요

0개의 댓글