HTML/CSS
1. 인라인레벨 (Inline)
<span>
해당 레벨의 가로는 컨텐츠의 가로사이즈, 세로는 컨텐츠의 세로사이즈 영역만 차지함.1) 텍스트 태그
<q> 태그 : 인용구 쌍따옴표("")
<b>,<strong> 태그 : 볼드체
<u>,<ins> 태그 : 밑줄
<del> 태그 : 중앙선
<i>, <em> 태그 : 글자 기울이기, 이탤릭체
<mark> 태그 : 배경 노란색
<sub> 태그 : 글자를 작게 하여 아래로 배치
<sup> 태그: 글자를 작게 하여 위로 배치2) A 태그 (링크 태그)
기본 폰트 밑줄 파랑 (히스토리 있으면 보라색으로 변함)
글씨 뒷 영역까지 영역화됨.
- 필수 속성
href: 클릭했을 때 이동할 경로 지정(img 태그와 동일)
"#" 임시링크, 현재 페이지 내부경로 지정
ex) <a href="http://www.naver.com" target="_blank"></a>네이버</a>
<a href="">
<img src="./img/1.jpg" alt="이미지에 대한 설명">
</a>
- 옵션 속성
target: 클릭하여 페이지 이동방법
_self: 기본값, 현재창
_blank: 새 탭에서 열기
ex) <a href="">
<div>메뉴</div>
</a>
이 경우 a 태그는 inline레벨이라 컨텐츠 영역만큼 작동하지만.
포함하고 있는 <div>는 block레벨이므로 메뉴라는 글씨의 우측 빈공간을 클릭해도 링크가 작동.
3) Select 태그
<select>: 여러 개의 옵션을 리스트처럼 나열하고 그 중에서 선택할 수 있게 하는 태그
부모로만 사용 가능함.
<option>: <select>의 자식/자손으로만 사용 가능
- 속성 -
1) selected: option에 적용됨. checked나 autofocus처럼 처음부터 선택되어 나타남
2) multiple: select에 적용됨. 여러 개 선택가능하지만 디자인상 이쁘지 않아 잘 안씀.
3) name: select에 적용됨.
4) value: option에 적용됨.
<optgroup>: <option>들을 그룹핑
ex) <optgroup label="포켓몬">
<option value="피카츄">피카츄</option>
<option value="라이츄">라이츄</option>
<option value="파이리">파이리</option>
</optgroup>
2. 블록레벨 (Block)
<div>
기본으로 디스플레이 가로 끝까지 세로는 컨텐츠 영역만큼 영역을 차지함.
별도 사이즈를 주면 적용함.1) 텍스트 태그 (Heading tag)
<h1> ~ <h6>: 웹표준, 제목 태그, 위아래 margin 있음.
<p>: 단락 태그 (위아래 margin 있음)
<br>: 줄바꿈. 픽셀을 알 수가 없어서 실무에서는 잘 안씀, <div>를 주로 사용함.
<hr>: 실선
<blockquote>: 좌우에 여백이 들어가서 들여쓰기
* figure와 차이가 없음
cf) <blockquote>는 대부분 텍스트
<figure>은 이미지
<pre>: 좌우에 여백이 들어가진 않지만 빈칸/엔터값이 그대로 출력, <div>로 대체.2) 목록 태그
<ul> unordered list: 순서가 필요없는 목록
- 속성 - ⇒ type: disc (기본값, 검은 점)
circle (흰 원)
square (검은 사각형)
none (점 표시 안함)
* <ul> 중복으로 사용시 기본값은 disc > circle > square 순으로 정해짐
cf) ul 위아래 여백, ul-li 여백 생각
여백 대칭으로 생각, 3개 블록 병렬일때 왼쪽 오른쪽 생각
<ol> ordered list: 순서가 필요한 목록
⇒ type: 1 (기본값, 정수)
A/a (영어 대문자 / 소문자)
I/i (로마 대문자 / 소문자)
start (시작점 변경, ex) "3" 3부터 시작)
reversed (시작점부터 거꾸로 표기, li의 개수와 같거나 크게 정해야 됨.
0과 음수가 나오면 안됨.)
<li>: <ul>/<ol> 자식으로 사용(li 밑에 ul 사용 가능)
<dl> Description-List: dd/dt의 부모로만 사용가능 (거의 안씀)
<dt> Description-Term: 왼쪽 정렬 , 제목
<dd> Description-Description: 들여쓰기, 내용3) 테이블 태그 (row / column) - 웹표준
<table>: 부모로만 사용 가능
<thead>, <tbody>, <tfoot>: table의 자식으로만 사용 가능
<tr>: <table>, <thead>, <tbody>, <tfoot> 자식으로만 사용 가능
<th>: tr의 자식으로만 사용 가능 / 한 칸을 의미하며 주로 제목에 쓰인다.
Bold체와 가운데 정렬이 기본값.
<td>: tr의 자식으로만 사용 가능 / 한 칸을 의미하며 기본 셀이다.
일반 두께와 왼쪽 정렬이 기본값.
- 옵셔널 요소 -
1) caption: 표 제목
실제 코드의 위치와 상관없이 표 위 가운데에 출력
table 태그의 자식으로만 사용됨
2) colgroup: 여러 열들을 묶어서 CSS 적용
col: 각 열
ex) 4열인 경우 4개의 col 태그를 써야 하며,
<colgroup>
<col style ="width: 100px">
<col style ="width: 200px">
<col style ="width: 300px">
<col style ="width: 400px
- 속성 -
1) border: (table용) 테두리 두께 / 단위: 정수, 기본값: 0
2) cellspacing: (table용) 컨텐츠의 외부영역 여백 / 단위: 정수, 기본값: 2
3) cellpadding: (table용) 컨텐츠의 내부영역 여백 / 단위: 정수, 기본값: 2
4) span : 칸을 늘림 / 단위: 정수,
colspan: 옆으로 늘림 / 같은 tr 상의 칸을 없애줘야 함.
rowspan: 아랫줄로 늘림 / 아래 줄에 있는 th/td를 없애줘야 함.
4) figure
<blockquote>처럼 좌우 여백이 있어서 들여쓰기가 됨.
<figcaption>: figure의 제목
cf) caption과의 차이점 - 실제 코드 위치에 배치, 왼쪽 정렬 5) fieldset
구역을 표시해줌 부모로만 가능
<legend>: <fieldset>의 자식으로만 사용 가능하며 fieldset의 타이틀6) form
* form 안에 있는 요소들(정보) 중에서 name 속성을 가지고 있는 요소들의 실제값을 서버로 전송
** 정보를 전송할 때는 반드시 sumbit 태그를 사용해야 함.
- 속성 -
1) action: 정보를 보낼 페이지 경로(a, img 태그와 비슷)
정해지지 않았다면 #, <submit> 버튼을 누르는 순간 동작
2) method: 정보를 보내는 방식
get: 기본값, URL에 정보를 다 표시하여 전달하는 방식
post: URL에 숨겨서 전달하는 방식 (민감정보 보낼때 쓰임)
3) target: 정보전달시 현재탭에서 이동할 것인지, 새탭에서 이동할 것인지 결정
_self: 기본값
_blank: 새탭
4) autocomplete: 기록이 있는 경우 자동완성
on: 기본값, 이전 히스토리를 이용하여 리스트를 보여줌
off: 자동완성 기능 끔.
ex) <form action="#" name="naver" method="get" target="_blank" autocomplete="off">
3. 인라인 블록 (Inline-block)
카테고리상 inline 레벨에 속하며,
inline의 컨텐츠 크기만큼 크기를 가지며 block레벨의 특정 수치를 주면 적용되는 특성이 합쳐짐1) img 태그
닫는 태그가 없으며
별도로 사이즈를 명시하지 않으면 이미지 원본 사이즈대로 출력됨.
가로 또는 세로 한쪽 사이즈를 기입하면 반대쪽 사이즈가 자동적으로 비율에 맞춰 조정됨.
- 속성 -
<img src="이미지 경로" alt="이미지 설명">
1) src : 필수 속성 (경로)
2) alt : 이미지 설명(img를 출력할 수 없는 경우 이미지 대신 출력된다)
이 속성은 모든 사람들이 똑같은 정보를 얻을 수 있게 해야 한다는 웹접근성의 대표적인 예이다.
일반 기기가 아닌 시각장애인용 기기는 콘텐츠를 음성으로 읽어준다.
텍스트는 읽어주지만 이미지를 읽어주지 못하므로
이미지 대신 "alt" 속성의 이미지 설명을 읽어준다.
cf) 웹표준 (크로스 브라우징) : 모든 브라우저에서 작업한 결과가 그대로 나오게 만듬.2) input 태그
<input type=" 유형" 속성="속성값" 속성="속성값">
사용자로부터 입력을 받을 수 있는 태그이며, 닫는 태그가 없고 기본 사이즈가 정해져 있다.
- 속성 -
1) type: (필수) 유형
2) value: (옵션) 실제값
* 필수처럼 사용하는 type: <button>
* <checkbox>나 <radio>에서는 실제화면에 출력되지 않고 정보를 전송할 때 사용된다.
3) name: (옵션) 요소에 이름을 달아주거나 요소들을 그룹핑할때 사용한다.
* 필수처럼 사용하는 type: <radio>
4) placeholder: 필드에 힌트표시 password 에서도 글씨로 표시됨
5) autofocus: 자동으로 커서 표시, 여러 요소에 동시에 사용시 제일 윗 요소에 커서 표시됨.
6) readonly: 해당 필드을 읽기전용 으로 표시되어 수정 불가하지만, form태그로 전송할때 값이 전송됨
7) disabled: 해당 필드를 비활성화되며 해당 필드 수정 불가. form태그로 전송할때 값이 전송안됨.
8) required: form 태그 안에서 필수 요소로 지정 빈칸 불가.
9) maxlength: 해당 필드의 최대 글자 수 지정, 단위 - 정수
10) minlength: 해당 필드의 최소 글자 수 지정, 단위 - 정수
form 태그 안에서만 동작함 (submit 버튼 클릭시 글자수 체크함)
11) checked: radio, checkbox 용도의 속성
- 많이 사용하는 type -
<input type="text" value="abcd">
<input type="password" value="1234">
<input type="button" value="로그인">
cf) <button>확인</button>
⇒ <input type="button">과 같지만 닫는 태그가 있으며
<form> 태그 밖에 있으면 type="button"으로 인식하고
<form> 태그 안에 있으면 type="sumit"으로 인식된다.
<input type="radio" value="예" name="rd">
<input type="checkbox" value="웹1" name="chk">
<input type="email">
- 중간 빈도 type -
<input type="submit" value="확인">
<input type="reset">
<input type="hidden">: text와 동일하지만 화면에 출력 안됨
<input type="search">: text와 동일하지만 글자 입력시 X 표시 나옴
<input type="file">: 파일 업로드시 사용 -
<input type="range">
<input type="number">
<input type="tel"> : 웹페이지에서는 일반 text 필드, 스마트기기에서는 숫자패드로 출력됨
<input type="email">: form태그 안에서만 동작. 필드에 @ 있어야만 통과
<input type="date">
<input type="datetime-local">
3) textarea 태그
메모/게시글 본문에 쓰이며, 엔터, 빈칸이 다 가능하다.
(cf. input type="text"의 경우 엔터키가 안먹음)
사이즈가 정해져 있지만 사이즈를 별도로 줄 수 있음.
cols: 30칸 rows: 10줄이 기본
ex) <textarea name="" id"" cols="10" rows="10"></textarea>
DONE IS BETTER THAN PERFECT.