0221. UI 디자인 test

CHOISUJIN·2023년 2월 20일

🔅 html

글자 관련 태그

!DOCTYPE html : Document Type 문서 형식 -> 현재 문서 형식 지정
html : html 문서의 내용을 정의하는 태그
head : html 문서를 정의하는 태그 (문서의 제목, 스타일 시트(css), 스크립트(js), 메타 데이터(문서의 일반적 정보)
body : 화면에 보여질 html 문서의 내용을 정의하는 태그
hr : 수평선
: 띄어쓰기
br : 줄바꿈

목록 관련 태그

ul 태그 : 순서 없는 목록을 작성하는 태그(영역)
li 태그 : 목록에 들어가는 내용을 작성하는 태그
ol 태그 : 순서 있는 목록을 작성하는 태그
- type= "a" : 영어 소문자 순서
- type= "A" : 영어 대문자 순서
- type= "i" : 로마 소문자 순서
- type= "I" : 로마 대문자 순서

<ol type="a" start="5" reversed>

표 관련 태그

table
tr : 한 행을 나타내는 태그
th : 컬럼명을 표시하는 용도의 태그 -> 굵은 글씨 + 가운데 정렬
td : 한 행의 한 컬럼을 나타내는 태그
rowspan : 행(상하) 병합
colspan : 열(좌우) 병합
thead : 테이블의 상단 부분 영역(컬럼명)
tbody : 테이블의 중단 부분 영역(실제 값, 내용)
tfoot : 테이블의 하단 부분 영역(합계)

영역 관련 태그

block : 공간을 수직 분할 -> 수직으로 되어 있는 화면을 가로로 잘라서 여러 행을 만드는 것
- 크기를 지정하는 width, heigh 속성을 사용할 수 있음 O
- 줄바꿈(개행)
- 사각형 박스 형태로 영역을 지정
  ex) p/pre(문단 나누기), h1~h6(제목 영역 나누기), hr(수퍙선 넣어서 화면 나누기), div(영역 나누기)
inline 형식 : 공간을 수평 분할 -> 수평으로 되어있는 화면을 세로로 잘라서 여러 열(컬럼)을 만드는 것
- 크기를 지정하는 width, height 속성 사용할 수 없음 X
- 줄바꿈 X
- 내부에 작성된 내용(content) 단위로 영역을 지정
  ex) strong/b(글자 굵게), em/i(글자 기울이기), mark(형광펜), span(한 줄을 나누는 용도)
iframe : 웹 문서 내부에 다른 웹문서를 추가하는 태그(inline 형식이지만 크기 지정 가능)

  <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/0cPAuQKtCQY?autoplay=1&mute=1" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen>
    </iframe>

이미지 관련 태그

img : 웹 문서에 사진, 그림같은 이미지를 삽입하는 용도의 태그
- src : 삽입할 이미지의 경로를 지정하는 속성(파일경로, 웹주소)
- width/height : 이미지의 크기를 지정하는 속성
- alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시(웹접근성)
```
  <img src="./images/짱구dd.png" alt="나는 짱구야">
```

하이퍼링크 관련 태그

a : 페이지 이동 태그
- target="_blank" : 새 탭

<a href="02_목록관련태그.html" target="_blank">02_목록 관련 태그 blank</a>

입력 관련 태그

input : 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

[text 관련 input 태그]

text : 한 줄짜리 문자열(텍스트)를 입력할 수 있는 입력 상자
password : 비밀번호 입력 상자(입력되는 텍스트를 가려줌)
email : 이메일 입력 시 사용하는 입력 상자
url : 주소 입력 시 사용하는 입력 상자
tel : 전화번호 입력 시 사용하는 입력 상자
- size : 입력상자 크기
- maxlength : 입력 받는 텍스트의 최대 길이
- placeholder : 입력 상자에 작성된 내용을 설명
- value : input 태그에 들어갈 초기값 지정

[숫자 관련 input 태그]

number : 숫자만 입력 가능
range : 슬라이드 바를 이용해서 숫자 지정
- min : 최소값
- max : 최대값
- step : 증가/감소 단계 지정

[날짜/시간 관련 input 태그]

date
month
week
time
datetime-local

[radio / checkbox] : 여러 관련 값을 묶어서 선택하는 경우에 사용

묶음으로 다루려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다
radio

<label>A팀</label> <input type="radio" name="team" id="a-team">
    <label>B팀</label> <input type="radio" name="team" id="b-team">
    <label>C팀</label> <input type="radio" name="team" id="c-team">

checkbox

<label for="baseball">야구</label>
    <input type="checkbox" name="hobby" id="baseball">

    <label for="soccer">축구</label>
    <input type="checkbox" name="hobby" id="soccer">

    <label for="basketball">농구</label>
    <input type="checkbox" name="hobby" id="basketball">