반응형 검색 결과

해당 글 3건

[반응형 웹 디자인]플렉서블 박스 기술 익히기-3

교차축 방향으로 다양하게 플렉스 아이템 배치하기속성명 속성값 적용 요소 align-items stretch(기본값),flex-start,flex-end,center,baseline 플렉서블 박스 속성값명 속성값 설명 stretch 박스를 확장해서 배치하며,기본값 flex-start 박스를 교차축의 시작점에 배치 flex-end 박스를 교차축의 끝점에 배치 center 박스를 중앙으로 배치 baseline 박스를 시작점에 배치되는 박스의 글자 베이스라인에 맞춰 배치합니다.시작점에 배치되는 박스는 교차축의 시작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치됩니다. 교차축 방향으로 플렉스 아이템을 개별적으로 배치하기속성명 속성값 적용 요소 align-self auto,stretch,fle..
Program/HTML5 & CSS3 2016. 3. 10. 14:19

[반응형 웹 디자인]플렉서블 박스 기술 익히기-2

플렉스 아이템을 여러 줄로 배치하기속성명 속성값 적용 요소 flex-wrap nowrap(기본값),wrap,wrap-reverse 플렉서블 박스 속성값명 속성값 설명 nowrap 박스를 한 줄로 배치하며, 기본값입니다. wrap 박스를 여러 줄로 배치합니다. wrap-reverse 박스를 여러 줄로 배치하되 역방향으로 배치합니다. 즉, 주축이 가로일 때는 아래에서 위로, 주축이 세로일 때는 오른쪽에서 왼쪽으로 배치합니다. 플렉스 아이템의 배치 방향과 여러 줄 배치를 한 번에 설정하기속성명 속성값 적용 요소 flex-flow [flex-direction]한칸 공백[flex-wrap], row nowrap(기본값) 플렉서블 박스 속성값명 속성값 설명 [flex-direction]한칸공백 [flex-wrap]..
Program/HTML5 & CSS3 2016. 3. 9. 18:28

[반응형 웹 디자인]플렉서블 박스 기술 익히기

플렉서블 박스로 작동시키기 위한 기본 설정속성명 속성값 적용요소 display flex, inline-flex 모든요소 속성명값 속성값 설명 flex 박스를 블록 수준의 플렉서블 박스로 작동하게 합니다. inline-flex 박스를 인라인 수준의 플렉서블 박스로 작동하게 합니다. [ display:-webkit-flex; ]를 사용하는 이유는? 브라우저 접두사를 붙여줘야 안정적으로 사용 가능하다. 신 기술일 경우 대부분 이런 방법을 사용한다.속성이라면 속성앞에 접두사를 붙여준다. 플렉스 아이템의 배치 방향 설정하기속성명 속성값 적용 요소 flex-direction row(기본값),row-reverse,column,column-reverse 플랙서블박스 속성값명 속성값 설명 row 박스를 왼쪽에서 오른쪽으..
Program/HTML5 & CSS3 2016. 3. 9. 17:13