* 변경 전 * | * 변경 후 * |
| |
원래 아래처럼 한 줄을 div로 묶고, 그 안에서 span 을 3개로 나눠 정렬한 뒤 두번째 span에서 위아래로 나누고 싶었는데..
막상 작업해보니 정말 span / div 태그에 대한 아무런 지식도 없이 그저 생각일 뿐이었다..
그래서 인터넷 찾고 공부해보니 아래처럼 div 안에 div 로 3개를 나눈 뒤, CSS에서 제공하는 flex 를 적용시켜
파란 div엔 flex-direction:row (가로로 정렬), 두번째 div엔 fiex-direction:column (세로로 정렬) 을 먹혀야 하더라.
공부할 때 참고한 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
반응형
'Frontend > CSS' 카테고리의 다른 글
| [CSS] CSS로 인스타그램 마우스오버 이벤트 적용하기 (0) | 2018.07.22 |
|---|---|
| textarea 선택 영역 파란테두리 없애는 방법 (0) | 2018.07.16 |
| position 활용하여 더보기 버튼 클릭하면 더보기 메뉴 뜨게 만들기 (0) | 2018.07.12 |
| @media와 flex 활용하여 화면 줄였을 때 보여지는 정렬순서 바꾸기 (0) | 2018.07.12 |
| CSS 처음 접할때 공부하기 좋은 사이트 (0) | 2018.07.02 |
댓글