배치 속성,display,list,overflow

float = 박스를 옆으로 나열 할 떄 사용 / 떠다니는 - / 레이아웃을 나열하거나 형성 + 삽화를 넣을 때

float - left, right, none 

└ 옆의 박스에 영향을 주는 속성이라 나열하고자 하는 박스와 함께 나열값을 줘야한다. 

      └1,2,3을 한공간에 나열하고자 한다면 나열값 함께 잡기

clear : float와 함께 사용, 제거할 때 사용한다.

  └left : 좌측나열을 제거

     right : 우측 나열을 제거

     both : 양쪽 나열을 제거

 

box-sizing - content-box : (기본값) 넓이 속성을 콘텐츠 영역 넓이값 기준으로 크기를 지정.
                 - border-box 
                  (border,padding 잡아줌) 넓이 속성을 콘텐츠 영역 테두리까지 포함한 박스 모델 전체값으로 사용 
                   즉 위의 width와 height값이 존재할 때 padding+border를 안쪽의 폭값으로 계산하여 표현

                                                                              ┌안보이게 처리

display = 요소를 어떤 성격으로 보여줄지 결정하는 속성 block,inline,inline-block,none

                                                                 └글자와 같이 옆으로 나열 + 블럭과 같이 css에                                                                                                                         대한  모든 적용이 이루어지는 성격

목록태그 ul = 순서가 없는 목록태그 - 메뉴 多/ 불릿 + li

               ol = 순서가 있는 목록태그 - 순서나열/ 1,2,3~ + li         ex) <ul(ol)> <li> 회사소개 </li> </ul(ol)>

               dl = 정의목록태그, 용어 뜻을 나열 +dt, dd     ex) <dl> <dt>정의목록 타이틀</dt>  <dd>목록의 내용</dd> </dl>

style 설정시 

list-style:disc; = li태그의스타일을 결정하는 속성, 기본값 = none

list-style-type:decimal-leading-zero; = 숫자값 앞에 0이 붙는 형태 (decimal = 기본값)

list-style-type:lower-alpha : 소문자

list-style-type:upper-alpha : 대문자

overflow : 부모박스에서 내용물이 넘치는 경우 어떻게 보여질지 결정하는 속성

overflow-x = x축의 넘치는 내용물을 어떻게 보여줄 지 결정하는 속성 ex) overflow-x : hidden;

overflow-y = 이하동문

overflow: hidden = 폭값이 존재할 떄영역을 벗어나는 부분을 보이지 않게 처리,

                              -height값이 존재하지않을 때는 높이를 대신할 수 이씀.

overflow:scroll = 안에 컨텐츠가 넘치는 경우 스크롤, 내용물이 넘치지 않아도 자동 스크롤 생성.