국비 36 일차

박스의 배치 : position

 

position 프로퍼티를 이용한 배치 방법

• 정적 배치 - position : static(디폴트)

                  height,width값 변함 없음

• 상대 배치 - position : relative 자기자신을 기준

                  자신 원래 위치 기준으로 적용 

• 절대 배치 - position : absolute 부모 요소를 기준

                  감싸고 있는 부모크기의 기준으로 적용

• 고정 배치 - position : fixed 브라우저를 기준

• 유동 배치 - float : left 혹은 float : right

 

• z-index 3차원 겹치기

  z-index : 값 음수~양수(0제외) 숫자가 클수록 제일 바깥쪽에 배치

 

• visibility

  visibility : visiable(보이게),hidden(안보이지만 공간 차지)

 

• overflow 

  정해진 박스 안에 더 많은 text가 들어갈 경우

  overflow : visible(text가 박스 넘어감)

              : hidden(text가 박스 안에 들어가서 내용 잘림)

              : scroll(text가 박스 내용 초과할시 스크롤 생김)

 

• flex 

flex container

큰 container 박스에 구성요소 item들이 맞춰서 정렬됨

 

Display:flex

Flex 컨테이너에 display:flex;를 적용하는게 시작이다.(우선적으로 적용해야 다음속성 적용가능)

 

부모 속성(container)

flex-direction

flex-wrap

justify-content

align-items

align-content

자식속성(item)

flex

flex-grow

flex-shrink

flex-basis

order

 

Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지한다. (마치 inline 요소들 처럼) height는 컨테이너의 높이만큼 늘어난다.

 

Inline-flex

컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값이다. inline-flex는 inline-block처럼 동작한다.

(flex가 부모 컨테이너 크기에는 영향 주진 않지만, inline-flex는 요소의 크기값만큼 적용)

 

flex-direction

아이템들이 배치되는 축의 방향을 결정하는 속성

• 아이템들이 배치된 방향의 축을 메인축(Main Axis),

• 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)

 

flex-direction속성 (정렬방향)

row 왼쪽끝에서 오른쪽으로

row-reverse 오른쪽끝에서 왼쪽으로

column 위쪽끝에서 아래로

column 아리쪽끝에서 위로

 

Flex-wrap :줄넘기기

nowrap(기본값) 아이템이 컨테이너 초과하면 빠져나옴

wrap 초과한 부분 다음줄로 넘어가서 배치 (컨테이너 width 유지)

wrap-reverse 왼쪽 아래쪽에서 시작해서 초과한 부분 위로 와서 배치

 

Flex-flow : direction+wrap

flex-direction, flex-wrap의 순으로 한 칸 떼고 작성해서 한꺼번에 지정 가능

 

Flex-order : 값

Order 는flex-item의 순서를 나타낸다.

0은 순서가 없고 숫자가 작을수록 1순위(먼저 정렬)입니다.

 

justify-content(가로)

flex-start 왼쪽 정렬

flex-end 오른쪽 정렬

center 가운데 정렬

space-between 양쪽끝에 마진없이 정렬

                     |A            B            C|

space-around 각 아이템 양쪽에 일정 여백 정렬

                     |   A         B         C   |

space-evenly 공평하게 여백두고 정렬

                     |      A      B      C      |

 

align-items(세로)

stretch 아이템들이 컨테이너 height에 맞게 정렬

flex-start 각 아이템들 사이즈대로 위쪽에서 정렬

flex-end 각 아이템들 사이즈대로 아래쪽에서 정렬

center 각 아이템들 사이즈의 중앙을 따라 중앙쪽에서 정렬

baseline 일정한 기준선에 따라 정렬

 

justify-content: center; align-item: center; 같이 써줄 경우

아이템을 한 가운데에 위치 가능

 

flex-basis

• flex-basis는 Flex 아이템의 기본 크기를 설정합니다

  (flex-direction이 row일 때는 너비, column일 때는 높이)

flex-basis 값을 넣어줄 경우 값보다 작을 경우 basis값에 맞춰서 늘어나고

             값보다 큰 경우 그대로 유지

width를 설정할 경우 동일하게 width크기 설정됨

 

flex-grow

• Item의 증가 너비 비율입니다.

0 일땐 증가 비율이 없고 숫자로 비율을 설정(각 아이템의 값 비교대로 비율 설정됨)

 

• flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는 지를 결정하는 속성

 flex-basis값이 결정되면 기본 너비로 정렬 후 여백이 남지만

 거기에 flex-grow속성 부여할경우 여백없이 레이아웃을 채운다. 

 

 

 

list 속성

list-style-type 아이템 마커 타입 지정 alpha,circle,square,none

list-style-image 아이템 마커 이미지 지정 url("img/apple.jpg)

list-style-position 아이템 마커의 출력 위치 지정(inside, outside)

list-style 속기형 가능

 

table 속성

테두리

border-collapse:collapse; (중복된 테두리 합친다)

border의 테두리와 td,th의 테두리 겹칠경우 border의 테두리로 합쳐짐

 

 

form 속성

input[type=text]로 폼 요소의 글자 색,테두리 지정

ex) input[type=text]{

         color : red;

         border-radius:5px;}

 

폼 요소 마우스 처리

마우스 커서 올라올때 :hover

포커스를 받을 때 :focus (클릭 시)