02블럭요소_인라인요소

블럭요소_blockElement

-모든 인라인 요소를 포함 할 수 있고, 다른 블럭 요소도 일부 포함(자식요소로 포함)

-자동줄바꿈

-기본적으로 가로폭 100%을 가지는 직사각형 형태

-블럭요소는 인라인 요소로도 변경 가능(CSS 속성 display로 가능)

-높이와 넓이 설정 가능

-마진 패딩 설정 가능

-주로 레이아웃을 구성할때 사용

​

블록 요소 종류

header	화면 상단을 구성할 때 감싸는 태그
footer	화면의 하단을 구성할 때 감싸는 태그
nav	메뉴를 구성할때 감싸는 태그
h*	타이틀을 나타낼때 쓰는 태그
div	블럭을 표현 주로 쓰인다.
ul, li	주로 리스트를 표현할때 쓰이며, ul하위로 li태그가 있다.
table	주로 표를 구성할때 쓰이며, table, tr, td, thead, tbody, th 등으로구성된 태그
section	컨텐츠의 그룹 (컨텐츠 장, 절 구분)
article	블로그 글, 신문시가와 같은 독립적 컨텐츠 담는 태그
aside	참고 컨텐츠를 표현할때 쓰이는 태그
rowspan	행 병합 속성, 값 만큼 병합
colspan	열 병합, 값 만큼 병합

 

 

 

인라인 요소(inline element)

<a href="https://naver.com" target="_blank">네이버</a>//a 태그
<button type="button" onclick="alert(1)">확인</button>//button 태그
<img src="20201112_092602.png" alt="표">//img 태그
<small>안녕하세요.</small>//small 태그
<span>안녕하세요.</span>//span 태그
<strong>안녕하세요.</strong>//strong 태그

<!--input-->
<label>//text 데이터를 받을 때 쓰이는 태그
회원명 : <input type="text" name="memberName" placeholder="회원명" />
</label>
<input type="text" name="memberName1" value="홍길동" readonly="readonly" />
<input type="text" name="memberName2" value="이순신" disabled="disabled"/>
<input type="password" name="memberPw" />//password 데이터 받을 때 쓰이는 태그
<input type="hidden" name="memberAge" value="20" >//hidden 사용자에게 노출되지 않는 태그 서버에는 데이터 전송 가능//
<label>//radio ●남 ○여
	<input type="radio" name="memberGenger" value="남" checked="checked"> 남
</label>
<label>
	<input type="radio" name="memberGenger" value="여">여
</label>
<label>//checkbox 다중 선택을 할 수 있도록 만든 태그
	<input type="checkbox" name="check" value="1">1 선택
</label>
<label>
	<input type="checkbox" name="check" value="2" checked="checked">2 선택
</label>
<label>
	<input type="checkbox" name="check" value="3" >3 선택
</label>
<input type="number" name="memberAge" />//숫자만 입력 받을 수 있는 태그(html5)
<input type="date" name="date" />//날짜를 입력 받을 수 있는 태그(html5)
<label for="test">테스트</label>//from태그 요소들과 주로 사용 from태그를 감싸서 사용/for속성에 태그들의 id값 삽입하여 사용
<input type="text" id="test">
<select name="userAge">//사용자에게 여러 데이타중 1개를 선택 할 수 있도록 목록을 만들어 선택할 수 있도록 만드는 태그
                //서버에 전송될 명칭은  select 테그의 속성 name에 지정하며, 값은 하위 태그 option 속성 value의 값으로 지정한다. 
                //selected 속성 : option tag에서 사용되며, 기본 선택이 되도록 할 수 있는 속성이다.
<option value=""> :: 나이 선택 :: </option>//장문의 데이타를 사용자에게 입력을 받아야 할 경우 쓰이는 태그
<option value="10"> 10대 </option>
<option value="20"> 20대 </option>
<option value="30"> 30대 </option>
</select>
<textarea name="longdata" rows="10" cols="100"></textarea>
<form action="getData.jsp" method="get">//form 테그 요소들을 감싸서 데이타를 서버에 전송시킬 수 있는 테그 
                                        //action이라는 속성의 값에 데이타 전송시킬 경로를 삽입한다. 
                                        //method라는 속성은 데이타를 전달 시킬 방식을 결정하는 속성이다. 
                                        //1) post : 눈에 보이지 안도록 body에 담아 데이타를 전송한다. (무한적) 
                                        //2) get : 눈에 보이는 url에 담아 데이타를 전송한다. (유한적)  
<input type="hidden" name="userName" value="홍길동">
<input type="text" name="userId" placeholder="아이디">
<input type="text" name="userAge" placeholder="나이">
<button type="submit">전송</button>
</form>

-항상 블록 요소안에 포함되어 있음(항상 부모 객체는 블록 요소)

-인라인 요소안에 인라인 요소 포함 가능

-높이설정 불가능

-CSS 속성 중 Line-height로 텍스트(줄) 높낮이를 조절 가능

-CSS 속성 중 text-align로 좌,우,중 정렬가능

-줄 바꿈이 자동으로 없음

 

​인라인 요소 종류

 

a	하이퍼링크라고 불리며, 페이지를 전환 시킬 때 쓰인다.
button	클릭을 유도하는 태그
i	기울기 표현
img	이미지 표현 할 때 쓰이는 태그
small	텍스트를 감싸는 태그로 작은 텍스트로 표현
span	텍스트를 감싸는 태그
strong	텍스트를 감싸는 태그로 굵게 텍스트를 표현
from	사용자에게 데이터를 입력 받기 위한 태그
readonly	사용자가 입력 혹은 선택을 못하게 막는 속성, 서버에는 데이타 전송가능(from공통속성)
disabled	사용자가 입력 혹은 선택을 못하게 막는 속성, 서버에 데이타 전송 불가(from공통속성)
name	서버에 전송될 데이타 명칭(from공통속성)
value	서버에 전송될 데이타 값(from공통속성)
name과 value	name의 값으로 value의 값이 전송이 된다.(from공통속성)
input	사용자에게 한 줄의 텍스트 값을 받을 때 쓰이는 태그, 텍스트, 패스워드, 체크, 날짜, 숫자 등 받을 수 있다