영역 분할 태그
1. div 태그
- div태그는 display 방식이 block이다 한 줄을 그대로 차지한다.
- block 방식 애들은 크기나 여러 가지 속성 추가 가능하다.
- 나의 공간 표시~ 한 줄을 영역으로 통째로 먹고 있다.
2. span 태그
- span 태그는 display 방식이 inline이다.
- inline 방식 애들은 입력한 내용이 차지하는 크기만큼만 영역 차지한다.
# 그냥 써도 똑같은 결과인데 왜 굳이 div태그랑 span태그로 사용하냐?
- 일단 분할 태그임으로 분할하는 목적 ok
- 그것보다도 나중에 스타일 지정 시 선택하는 부분이 있는데 –
- span 애들 / div 애들 이런 식으로 선택할 수 있다.
- 그냥 쓴 애는 어떻게 선택? 하기 어렵다.
영역 분할( 공간 표시) 방법 크게 2가지 있다.
display 방식 크게 2가지 있다.
- block 애들은 입력한 데이터의 크기 상관없이 영역 차지
- 한 줄을 통째로 잡아먹기 때문에 자동 줄 바꿈 된다.
- inline 애들은 입력한 데이터의 크기만큼만 차지
Media 관련 태그
1. image 태그
- 이미지 태그는 닫는 태그가 없네~ ( br태그처럼 )
- alt 부분에는 이미 설명을 써놓는다.
- - 이미지 안 나올 때 하면에 표시된다 + 스크린리더(시각장애인)에서 alt부분 읽어준다.
- 이미지 경로 설정하기
- 현재 내 파일(06_MEDIA)과 똑같은 위치에서부터 입력해주면 된다!
- 자동완성 기능으로 잘하고 있는지 / 오타 있는지 확인하면서 작성!
2. audio 태그
- 오디오 태그는 오디오 경로 지정뿐 아니라 컨트롤러 필요하다
2-1. controls 속성
- 컨트롤러 추가해주어야 화면에 표시된다!
2-2. autoplay 속성
- 들어가자마자 오디오 재생 기능 - 크롬에서는 안되고 다른 브라우저에 가능
2-3. loop 속성
- 노래 끝나고 반복되도록 설정 기능
- loop속성 값으로 “loop“입력해주는 것이 정석이지만
- key와 value가 똑같은 상황에서는 value를 지워도 작동한다.
속성 지정 순서는 상관 x
속성이 있는지 없는지만 확인하면 된다.
3. video태그
- controls 속성 필요
- audio 태그와 비슷
3-1. controls
- 컨트롤러 추가해주어야 재생/정지 선택 가능 – 안 해주면 사진만나온다
3-2. poster
- 원하는 썸네일 지정 가능
- 재생 누르기 전 보이는 사진
3-3. loop — 사용가능
3-4. autoplay – 사용가능
4. iframe 태그
- 웹 문서를 가져오는 태그
- 사실 사용하지 말라고 권장하는 태그다.
- 다른 웹 문서를 가져오는 과정에서 무슨 문제 발생할지 모른다.
4-1 .현재 경로에 있는 02_LIST.html 파일 가져와보자
4-2 .유튜브 영상 하나 가져와보자
- 영상 들어가서 – 공유 – 퍼가기 – ifram 태그에 src속성 값 복사해오기 - 붙여 넣기
- 가로로 나오는 거 보니까 iframe 태그는 inline 형식이겠구나 생각~
HYPERLINK 태그
a태그
- 다른 웹 사이트로 연결해서 html 파일 보는 태그
- 그렇다는 것은 – 내 컴퓨터의 파일도 볼 수 있다는 뜻!
- 옆으로 나란히 나오는 것 보니 a태그는 inline형식이구나 체크
1-1. target 속성 값
- 새로운 창에서 열린다.
- target기본값은 _self라서 설정 안 해주면 현재 창에서 열린다.
1-2. id값을 이용하여 이동
- #은 id값을 의미!
- 아무 값 안 넣어주면 – 맨 위로 이동하는 것이 아니라
- 창 새로 고침의 개념이다
- 새로고침이 아닌 id=“t” 로 지정된 곳으로 이동할 것이다!
list 태그
- <li> 태그는 <ul> 또는 <ol> 태그 안에 사용한다.
- 리스트 안에 리스트 중첩 사용 가능
- 정의하는 태그 순서 <dl> - <dt> - <dd> 순서로 사용
1. <ul> <li>
- unorder list - 정렬이 없는 리스트
2. <ol> <li>
- order list - 정렬된 리스트
- type 속성으로 여러 가지 정렬 값 지정 가능
- start 속성으로 첫 시작 값 지정 가능
3. 중첩 가능하다
- <ul><li> 안에 <ul><li>
- 리스트 안에 리스트 해주기
4. 정의 목록
- definition list
- <dl> - <dt> - <dd>
input 태그
< input > 태그의 속성으로는
- type / name / placeholder / value / required / size / maxlength 있다.
< input > 태그의 < input type=" " > 속성의 값으로는
- text, password, email 등.. 많은 것들이 올 수 있다.!
< input type = " " > 속성 값들과 < input > 속성 알아보기
1. "text" , "password", "number", range"
2. "search" , "url", "email", "tel"
3. "date" , "month", "week", "time", "datetime-local"
4. "radio"
- 라디오 버튼은 같은 name을 주어야 하나의 그룹으로 묶인다.
- 그룹으로 묶어줘야지 그룹에서 한 가지만 선택하도록 설정 가능
- 라디오 버튼은 하나의 값만 선택하게 할 때 사용한다( 다중선택 X )
- 기본값으로 체크가 되어있게 하려면, checked 속성 부여
- 제출(submit)시, check 된 input 태그의 value가 전달된다.
- value가 없으면, on이라는 값으로 전달된다.
5. "checkbox" , "submit" , "reset"
6. "color" , "hidden"
- color : 색 선택
- hidden : 화면에는 보이지 않게 값 전달
#Q - "hidden value = "vvv"
- 개발자가 입력해야 되고
- 사용자가 입력하는 것도 아니고, 화면에 보이지도 않는데
- hidden 태그는 왜 쓸까요?
#A - 추가적인 정보를 주기 위해서
- ex) 쇼핑몰 상품 선택하면 – 상품번호 같은 것들 관리하고 있을 텐데
- 클라이언트 눈에는 보이지 않는다. -
- 반드시 필요한 정보이지만 보여주기는 싫다. / 안 보여줘도 된다.
- 이런 값들 hidden 태그에 넣어준다.
7. "file"
7-1. accept 속성
- accept 속성 값으로 업로드 가능한 파일 유형 제한 가능
- 유형 다르면 업로드 안됨.
8. "button"
#1 일반버튼 – 누르면 바로 제출(submit)처리 돼버림 – form태그 안에 버튼은 제출 역할을 한다.
#2 버튼 태그로 만든 submit 버튼
#3 버튼 태그로 만든 reset 버튼 –
#4 인풋 태그로 만든 버튼 – 눌러도 제출 처리 안됨
## button 태그는 보통 폼 태그 밖에 만든다.
9. "select" , "option"
- 셀렉트 박스는,
- !목록에서! 값을 선택해서 서버로 전달한다.
- (목록에 없는 값은 선택 불가)
select - option은 option태그의 contesnt 영역에
서버로 넘길 데이터를 넣어줄 수 있다.
(value 속성을 이용해서 지정도 가능하다.)
#1 - selected 속성
option 태그에 selected 속성 추가하면 기본적으로 선택되어있는 값 지정가능.
#2 - select – option
- form태그 안에 있는 것은 – 서버 쪽으로 데이터 넘겨준다는 의미
- name필요~
#3 - 사용자에게는 한국으로 보여주고
- 서버로 데이터 넘겨줄 때는 korea로 넘겨주고 싶다면? - value값 지정
- ( value 없으면 콘텐츠의 값이 넘어간다 )
- # value 지정 전
- 한국이라고 콘텐츠 값이 전달된다.
- http://192.168.219.101:5500/selectzzz?s=%ED%95%9C%EA%B5%AD
- # value 후
- 지정해준 value값 korea가 전달된다.
- http://192.168.219.101:5500/selectzzz?s=korea
#4 – selected 기본 선택 값 지정 가능
- 속성 – 속성 값 같은 경우 — 속성 값 생략 가능
10. "datalist"
- 목록에서 값을 선택하거나, or
- 직접 입력해서 서버로 데이터를 넘겨줄 수 있다.
목록에서 골라도 되고,, 내가 직접 입력해도 되고 하는 상황
#1 - input 태그랑 연결해서 사용해야 한다.
- 연결방법 - input 태그에 list = " datalist 의 id "로 연결
11. "textarea"
- 여러 줄의 텍스트 받기
review
와우. 정리하기 힘들었다.
HTML과 CSS는 이런 식으로 배울 거 같은데 흠.
내용은 어려운 것이 없지만
양이 너무 많다.
주제별로 내용을 분리해서 올리는 것이
찾아보기 편할 거 같기도 하고
하나의 포스팅에 다 모아놓는 것이
내용도 많아지고,
필요한 내용 빨리 찾기 어려워질 것 같다.
일단은 정리해놓고 분리는 생각해보기로 ㅎㅎ
input 태그 너란 녀석 많은 기능을 가지고 있었구나.
'Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원 > 6월' 카테고리의 다른 글
| 22. 06. 10 - [ CSS 스타일 ] 적용 방법, 글꼴 스타일, 텍스트 스타일 (0) | 2022.06.13 |
|---|---|
| 22.06.09 - [ CSS란? ] , [ CSS 선택자 ] - 기본, 다양한, 부모-형제, 반응, 상태 (0) | 2022.06.12 |
| 22. 06. 07 - 브라우저의 역사, HTML 여러가지 태그와 속성 [ 텍스트 태그, 테이블 태그 ] (0) | 2022.06.10 |
| 22.06.06 - 현충일 - [ MVC2 패턴 연습 ] (0) | 2022.06.09 |
| 22. 06. 03 - [ MVC2 패턴 ] - Java 부분 세분화 구조 잡기 - Controller, Service, Dao (0) | 2022.06.08 |