3. 태그의 구분 : Inline | Inlineblock | Block / 정렬 : Align | Position

---

 

구분			Inline ㅡ ㅡ	Inline Block □ □	Block □ □
			텍스트를 주입 할 때 사용 되는 형태 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.) width와 height를 명시 할 수 없다. margin은 위아래엔 적용 되지 않는다. (좌우만 됌) padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.	inline의 특징과 block의 특징을 모두 가진 요소입니다. >> 인라인 요소에 display : inline-block; 선언 줄바꿈이 이루어지지 않는다. block처럼 width와 height를 지정 할 수 있다. 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.	기본적으로 block은 width값이 100% block은 height와 width 값을 지정 할 수 있다. block은 margin과 padding을 지정 할 수 있다.
			<a>, <i>, <span>,<abbr>,  <img>, <strong>, <b>,  <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>,  <label>, <sup>, <q>,  <button>, <cite>	display : inline-b <button>,<input>, <select>	<address>, <article>,  <aside>, <blockgquote>,  <canvas>, <dd>, <div>,  <hr>, <header>, <form>, <video>, <h1>, <h2>, <h3>,  <h4>, <h5>, <h6>,  <pre>,  <p>, <ul>,<ol>, <li>             <dl>, <dt>, <dd> <table>, <tr>, <th>, <td>
표관련			- 순서가 없는 태그이며 일반적으로 많이 씀 <ul>   <li> </li> </ul> - 타입으로 모양 변경 가능 : type = "square" or "circle" - li 태그 글머리 없애는 방법 : liststyle : none; 설정 - li 태그에 특정 지정번호 부여 가능 : <li value="9">
			- 순서가 있는 태그이며, type="속성"을 줄 수 있다. ( ) <ol>   <li></li> <ol>
			- 기호 없이 문단으로 목록을 만드는 형식 <dl>    <dt></dt>   [제목셀 1번지정]    <dd></dd>  [내용셀]    <dd></dd>  [내용셀] </dl>
			<table> : 데이터 표를 만드는 태그.         <thead>             [ 표의 제목 영역 ]           <tr> : 테이블의 행을 만드는 태그             <th></th> : 테이블의 열(타이틀-제목)을 만드는 태그      [ 표의 제목 셀 ]             <th></th>             <th></th>           </tr>         </thead>         <tbody>             [ 표의 본문 영역 ]             <tr>                <td></td> : 테이블의 열을 만드는 태그.  [ 표의 내용 셀 ]                <td></td>             </tr>         </tbody>         <tfoot>             [ 표의 하단 영역 ]                                 <tr>                <td></td>                <td></td>             </tr>         </tfoot>     </table> - table 속성 : colspan, rowspan, border, bgcolor, width, height, cellpadding, cellspacing, align, valign 등 ● colspan : column span 약자로, 셀(가로줄)을 합치는 개수를 지정  ● rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정 ● border : 테이블 경계선 굵기를 지정(예: border="10") ● width : 너비를 지정(픽셀이나, %) ● height : 높이를 지정(픽셀이나, %) ● cellpadding : 셀과 경계선 사이의 여백 ● cellspacing : 셀과 셀 사이의 여백 ● align : 셀의 가로줄을   오른쪽(right), 왼쪽(left), 중앙(center) 등으로 정렬 ● valign : 셀의 세로줄의 위(top), 중앙(middle), 아래(bottom)를 정렬 ● bgcolor : 배경색 지정 bgcolor 속성값으로는 색상 이름(예:green)이나, 색상코드(#ff0000) 등을 쓸 수 있음 ● bordercolor: 경계선 색깔 지정 - th, td 셀에 rowspan / colspan 속성을 줘서 자리차지 지정가능 ex <td rowsspan = 2> 열합치기 ex <td colspan = 2>    행합치기
좌측상단	미드상단	우측상단
좌측	미드	우측	<텍스트> { text-align: left; }	<텍스트> { text-align: center; } { height : 100px; line-height : 100px; } : 텍스트 1줄일때만 가능 - 단점 : height와 line-height 값을 동일하게 설정하는 트릭 <테이블> { display : table; } >> { display : tablecell;   text-align: center;   vertical-align : middle; } <이미지> * 가로정렬 img { display : block; margin : 0 auto; }  * 세로정렬 div imgarea { height:300px;line-height:300px; }  >> img { vertical-align:middle; } *vertical-align : inline 및 inline-block 에만 적용됌 , div 적용x, 단! (table-cell* 수직 정렬은 예외) - 다른 인라인요소 대비 상대적인 정렬이므로, 같은 줄 다른 인라인요소나, line-height 설정값 따라 나타나는 차이 주의.	<텍스트> { text-align: right; }
			** display : flex; or grid > { justify-content: flex-start; }	{ margin: 0 auto; } 참고: width 속성이 설정되어 있지 않거나 100%로 설정되어 있으면 가운데 정렬되지 않음. ** display : flex; or grid >> { justify-content: center;   align-items : center; [1줄]   align-content : center; [2줄 이상] } ** { position: relative; } >> { position: absolute;   top: 50%;   left: 50%;   transform   : translate(-50%, -50%); } ** 부모::before { display : inlibe-block; content : ""; height : 100%; vertical-align : middle; } >> 자식 { display : inlibe-block; vertical-align : middle; }	** display : flex; or grid > { justify-content: flex-end; }
			div1 : { float : left; } div2 : {clear : left; or clear : both;} >> float의 영향 초기화		div1 : { float : right; } div2 : { clear : right; or clear : both; } > float의 영향 초기화
			float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다. “떠 있는” 상태로 그 크기가 상위 컨테이너 element보다 클 경우 컨테이너 밖으로 overflow 되어 보인다. 이는 “clearfix” hack을 통해 해결할 수 있다.
			overflow : 내용이 요소의 크기를 벗어났을 시 어떻게 처리할 것인지 정하는 속성 - 내용이 주어진공간에 다 들어가지 않을 시, 보여주게, 안보이게, 스크롤바 적용등이 가능 { overflow : hidden; } -> 초과영역 감추기 { overflow : auto; } -> flot 과 동시 적용시 float 영역 배제

---

<a 태그 : >

a 태그 : 태그는 하이퍼링크를 걸어주는 태그입니다.

<a href="" target="_속성"></a> target => 속성지정 _self : 링크를 클릭한 해당 창에서 연다. _blank : 링크를 새창으로 연다. _parent : 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리) _top : 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성으로 처리) css : 파란색 컬러색상 및 underbar _ 해제 >> { color : #000; text-decoration: none; }

---

<Input 태그>

input 태그 :  사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다. - <form> 요소 내부에서 사용 -  type 속성값을 달리함으로써 여러 가지 모양 - 빈 태그(empty tag)이며, 속성만을 포함 - <label> 요소를 사용하여 <input> 요소의 라벨(label)을 정의

type <form>   <input type="">       <label> 내용 </label>   </input> </form>

button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week list

---

<select 태그>

select 태그 :  - 드롭다운 리스트(drop-down list)를 정의할 때 사용합니다. - 요소 내부의 <option> 요소는 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션을 정의합니다. - 일반적으로 form 에 자주사용

<select>         <option value="americano">아메리카노</option>         <option value="caffe latte">카페라테</option>         <option value="cafe au lait">카페오레</option>         <option value="espresso">에스프레소</option>  </select>

---

<button 태그>

:  클릭할 수 있는 버튼을 정의할 때 사용

<button type="button" onclick="alert('Hello World!')"> 클릭해 보세요! </button>