231004/D+1

 element /css id사용

block level element

: display 속성이 block으로 지정된 엘리먼트. 화면 전체를 쓰는 요소로 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지함. <div>이나 <p>, <h1> 태그 등이 해당.

 

inline element

: display 속성이 inline으로 지정된 엘리먼트. 자기 자신의 부피만큼만 쓰는 요소.

inline엘리먼트 사용시,width와 height속성을 지정해도 무시된다.

해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문.

또한, margin과 padding속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

<span>이나 <a>, <em> 태그 등 해당.

 

inline-block element

: display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작.

inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, 

block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.

<button>이나 <input>, <select> 태그 등이 해당.

 

CSS

• 1. float: left

 

div 자기 자신과 그 뒤에 있는 요소가 왼쪽으로 붙게 조정

 

• 2. button 을 클릭했을 때 fold를 부여하면서 창이 열리게 하고 싶으면

그 창을 지정하는 id에 style을 부여하거나(inline) class를 부여해서 창을 열도록 옵션을 넣어줌.

>> sytle="display: none;"

      sytle="display: block;"

 

> button에 click 이벤트 생성

>클릭 이벤트 - fold를 를 넣고 빼는 동작으로 화살표 모양 변경

 

드롭다운 박스가 열렸을 때

>block이 없으면 넣고, 있으면 빼는 방식. toggle처럼 아래에 박스가 보였다 안보였다를 반복.

 

• 한번만 쓸 애들은 id값 지정하여 사용