1번째
인라인요소, 블로요소와 인라인 블록요소
인라인요소
like 코끼리를 삼킨 보아뱀
들어간 내용의 크기에 따라 거기에 맞춰 크기가 결정되는 요소 (자체적인 크기가 없음)
- 높이, 너비, 패딩, 마진 설정 불가능
- 가로, 세로 정렬설정 불가능
- 줄바꿈을 강제하지 않는다.
- 블록요소들 포함할 수 없음(강제는 아니지만 이상하게 나옴)
- 같은 요소 안에서도 줄
바꿈이 일어날 수 있다.
코끼리를 삼킨 보아뱀은 모자처럼 생겼지만, 그렇지 않은 보아뱀은 그저 뱀이다.
<a> <b> <br> <button> <cite> <em> <i>
<img> <input> <label> <script>
<select> <small> <span> <strong>
<sub> <sup> <textarea>주요 인라인 요소 <span>
블록요소
like 조개같은 어패류
들어간 내용의 크기와 상관 없이 고정된 크기를 가지는 요소(자체적인 크기와 여백을 가짐)
별다른 크기 지정이 없다면 부모 요소의 width를 그대로 가진다.
- 높이, 너비, 패딩, 마진 설정 가능
- 가로, 세로 정렬 설정 가능
- 자신의 크기랑 상관 없이 부모 요소의 한 줄을 독점 (강제 줄바꿈이 일어남)
- 일반적으로 다른 인라인 요소, 블록레벨 요소를 포함할 수 있음
<article> <aside> <blockquote> <div>
<footer> <form> <h1>~<h6>
<header> <hr> <li> <nav> <ol> <p>
<section> <ul>
주요 블록 요소 <div>
인라인 블록요소
인라인 요소와 블록 요소의 특징을 혼합하여 가지고 있음
- 자체적인 크기와 여백을 가짐
- 줄바꿈을 강제하지 않음
span 태그처럼 내용의 크기에 따라 요소의 크기가 결정된다.
div 태그처럼 자체적인 패딩과 마진을 가진다.
줄바꿈 없이 한 줄 내에 연달아 나올 수 있다.
2번째
div 태그는?
구획을 나누는 태그
<div> : 스스로 아무것도 아지 않는 순수 컨테이너 구획들을 나누는 태그이다.
단점 : 코드로는 해당 구획이 무슨 일을 하는지 알 수 없다.
시멘틱 태그는?
의미가 부여된 div 태그
역할이나 용도는 div와 구분되지 않지만, 코드를 보고 어떤 역할을 하는 구혁인지를 나타내기 위해 사용함
<header>
페이지의 최상단에 위치
일반적으로 제목, 로고, 검색창 등의 내용 등 포함
페이지의 소개 및 탐색에 도움을 줌
<footer>
페이지의 최하단에 위치
일반적으로 작성자, 저작권 정보, 관련 문서 등 포함
<nav>
링크들(현재 페이지 내 구획 또는 다른 페이지로의)을 포함 (헤더 내부에 있는 경우가 많음)
<aside>
문서의 주 내용과 간접적으로 연관된 부분
주로 사이드바 등에 사용
<main>
<body>의 주요 컨텐츠
메인 컨텐츠가 이 구획에 들어감
<section>
컨텐츠 내 큰 단위의 독립적인 구획
다른 시맨틱 태그의 의미에 해당하지 않는 구획
<article>
독립적으로 재사용되거나 반복적으로 나타나는 구획
게시판이나 뉴스, 갤러리의 목록상 각 항목
(갤러리의 아이템, 카드 뉴스 아이템)
단점: 사실 시멘틱 안쓰고 div로 떡칠하는 사이트가 훨씬 많다.
3번째
HTML 폼 사용하기
html폼 태그는 사용자가 정보를 서버로 보내는데 사용하는 태그들이다.
과거에는 서버로 데이터를 전송하기위한 방법이 많지 않았기 때문에 폼태그들을 이용해 보냈었다.
<form> 태그
- 정보 제출에 사용되는 문서 구획,
- 내부 입력 양식들의 최 상위 부모(컨테이너)
- 입력된 정보들을 어떻게 서버에 전달할 지 설정
- 내부에 폼 관련된 태그가 아니어도 포함 할 수 있다
| 속성 | 역할 | 값 |
|---|---|---|
| id | 고유값 | |
| method | 입력된 정보들의 전달 방식 | get , post |
| action | 정보들을 처리할 서버상의 프로그램 지정 | 텍스트 |
| autocomplete | 이전에 입력 내역 있을 시 자동완성 | on, off |
<form>태그가 없어도 정보를 서버로 보낼 수 있긴 하지만 활용할 경우 유용한 기능들이 있음
<label>
각 입력 양식의 레이블을 표시한다.
⭐입력 양식의 클릭가능 영역을 확장 한다.(라디오 버튼같은 것을 클릭 할 때 레이블을 눌러도 활성화된다)
| 속성 | 역할 | 값 |
|---|---|---|
| for | 어떤 입력양식의 레이블인지 지정 | 입력 양식 요소의 id(고유값) |
<input>(가장 기본적인 입력 폼들)
서버로 데이터를 보내는 입력 창구 type을 지정하는 것에 따라 어떤 형태의 인풋인지 결정 된다.
- 기본적으로 인풋 태그가 가질 수 있는 속성들
| 공통 속성 | 역할 | 값 | 비고 |
|---|---|---|---|
| id | 고유값, label과 연결 | 텍스트 | |
| autocomplete | 자동완성 | boolean | |
| autofocus | 페이지로 들어올 때 커서가 위치 | boolean | 페이지에서 하나만 사용되어야 함 |
| disabled | 수정 불가, 값이 전송되지 않음 | boolean | |
| name | 서버로 전송될 항목명 | 텍스트 | |
| readonly | 수정 불가, 입력된 값은 전송됨 | boolean | |
| type | 해당 태그가 어떤 형태의 인풋인지 나타낸다.default = "text" | 텍스트 | "text","password","tel,"number","checkbox","radio","file"...매우 많음 |
type="text","password","tel"
일반적인 텍스트, 비밀번호, 전화번호를 받도록 제한한다.
- tel의 경우 윈도우에서는 차이가 없지만, 모바일로 들어갈 경우 넘패드를 보여준다.
| 속성 | 역할 | 값 |
|---|---|---|
| placeholder | 입력값이 없을 때 보여지는 텍스트 | 텍스트 |
| maxlength | 최대 글자 수 | 숫자 |
type="number"
입력을 숫자만 받도록 제한된다.
|속성|역할|값|
|------|---|---|
|min|최소 입력값|숫자|
|max|최대 입력값|숫자|
|step|입력 가능한 값의 간격(2로 주면 0,2,4,6...)|숫자|
type="checkbox"
체크박스
|속성|역할|값|
|------|---|---|
|checked|디폴트로 체크를 해 놓을 것인지를 알려줌|boolean|
type="radio"(n중 택1)
n중 택 1이라는 것을 알려줘야 한다. 그렇기 때문에 id 뿐만 아니라 같은 name을 이용해 이것들이 같은 그룹이라는 사실을 알려줘야 한다.
| 속성 | 역할 | 값 |
|---|---|---|
| checked | 디폴트로 체크를 해 놓을 것인지를 알려줌 | boolean |
| name | 속한 선택자의 구분자 | 텍스트 |
type="file"
파일 첨부
| 속성 | 역할 | 값 |
|---|---|---|
| multiple | 여러 파일 가능 여부 | boolean |
###<select> 와 <option>
두개를 함께 조합해서 사용한다. select 태그 안에 option 태그를 넣는다.
<select> 태그의 속성
| 속성 | 역할 | 값 |
|---|---|---|
| id | 고유값, label과 연결 | 택스트 |
| name | 서버로 전송될 항목명(서버에서사용하는변수명) | 텍스트 |
<option>태그의 속성
| 속성 | 역할 | 값 |
|---|---|---|
| value | 서버로 전송될 값 | 택스트 |
| selected | 선택 여부 | boolean |
type="textarea"
여러 줄의 텍스트를 입력할 수 있는 태그
| 속성 | 역할 | 값 |
|---|---|---|
| placeholder | 입력값이 공백일 시 보여질 텍스트 | 텍스트 |
| maxlength | 최대 글자 수 | 숫자 |
| rows | 보이는 줄의 수 | 숫자 |
<button>
일반적인 태그지만 역할 지정을 통해 제출할 때 사용할 수 있다.
| 속성 | 역할 | 값 |
|---|---|---|
| type | 버튼의 역할 | submit, resetbutton |
| disabled | 비활성화 | boolean |
[주의] 제출용 버튼이 아닐 시 type을 'button'으로 지정할 것
강의 들으면서 생긴 의문점
<input type="button"> 과 <button> 두개의 차이점이 뭘까 라는 의문이 생겨 구글링을 진행 하였다.
<button> 와<input type="button>의 차이점은"?
해당 질문의 답변에 따흔다면, <button>을 사용할 경우 좀더 풍부한 랜더링(이미지를 넣는다던가,css pseudo element를 사용한다던가...)를 할 수 있게되는 반면, IE에서 버그가 발생할 수 있다는 것으로 보인다.
하지만 IE는 공식적으로 지원이 종료되었기 때문에 현 시점으로는 <button>을 이용하는게 보편적으로 올바르다.
#패스트캠퍼스 #내일배움카드취업 #국비지원교육 #K디지털기초역량훈련 #프로그래밍기초
