프로그래밍/HTML&CSS
-
[CSS]css 레이아웃(4) - grid프로그래밍/HTML&CSS 2021. 12. 28. 08:30
HTML의 레이아웃 배치시 다음과 같은 상황에서 사용된다. - 페이지를 여러 섹션으로 나눌 때 - 콘텐츠를 문서 계층 구조의 관점으로 정의할 때 글의 순서는 다음과 같다. 1. Grid 기본 사용법 1) columns 설정 2) rows 설정 +height: 100vh 설정 2. Grid 활용 예시 1) columns, rows 설정 2) 배치하기 - grid area 설정 - grid-template-areas 설정 1. Grid 기본 사용법 ex) 태그의 콘텐츠1과 태그의 콘텐츠2의 레이아웃을 배치하길 원할 경우 step1) grid를 사용할 콘텐츠들 태그로 묶어주기 contents1 contents2 ※ 를 모른다면 아래 포스팅 참고 [CSS]css 태그 - div / span 두 태그는 HTML..
-
[CSS]css 레이아웃(3)- flexbox프로그래밍/HTML&CSS 2021. 12. 27. 08:11
아래 포스팅에 이어서 이번에는 flexbox의 아이템 속성에 대해 알아보고자 한다. [CSS]css 레이아웃(2)- flexbox 앞에선 초기 css 레이아웃에 사용되던 position과 float에 대해 알아보았다. 이번엔 현재 레이아웃에 자주 사용되는 flexbox에 대해 알아보고자 한다. flexbox에 관한 두가지 포인트가 있다. 1. 중심 축(mai hyemco.tistory.com 3. 아이템 속성 flex-grow, flex-shrink, flex-basis, flex, order, align-self 아이템 속성은 아이템이 속한 컨테이너의 사용가능 공간을 어떻게 분배받을지 그리고 아이템을 어떻게 배치할지에 대한 설정에 관한 속성이다. 1) flex-grow 남은 사용 가능 공간들이 있을 때..
-
[CSS]css 레이아웃(2)- flexbox프로그래밍/HTML&CSS 2021. 12. 25. 08:44
[CSS]css 레이아웃(1) - position / float 앞서 CSS의 박스 모델에 대해 알아보았다. 오늘은 그 박스들을 배치해 레이아웃하는 법을 알아보고자 한다. [CSS]css 박스 모델 오늘은 CSS 기본 설정 중 하나인 박스 모델에 대해 알아보고자 한다. H hyemco.tistory.com 앞에선 초기 css 레이아웃에 사용되던 position과 float에 대해 알아보았다. 이번엔 현재 레이아웃에 자주 사용되는 flexbox에 대해 알아보고자 한다. flexbox에 관한 두가지 포인트가 있다. 1. 중심 축(main axis)과 반대 축(cross axis) 존재 2. 컨테이너 속성과 item에 관한 속성으로 나뉨 글의 순서는 다음과 같다. 1. 중심 축과 반대 축 2. 컨테이너 속성 ..
-
[CSS]css 레이아웃(1) - position / float프로그래밍/HTML&CSS 2021. 12. 24. 12:32
앞서 CSS의 박스 모델에 대해 알아보았다. 오늘은 그 박스들을 배치해 레이아웃하는 법을 알아보고자 한다. [CSS]css 박스 모델 오늘은 CSS 기본 설정 중 하나인 박스 모델에 대해 알아보고자 한다. HTML 콘텐츠는 다음과 같이 구성되어있다. - 높이(height) - 너비(width) - 패딩(padding) - 테두리(border) - 여백(margin) 웹페이지에서. hyemco.tistory.com css의 레이아웃 방법에는 여러 방법이있다. 1. positon 2. float 3. table 4. flexbox 5. grid 1~3은 css 초기 방식으로 레이아웃을 위해서는 잘 쓰이지 않고, 4, 5가 주로 쓰이고 있다. 이 포스팅은 그냥 이런 태그들이 있구나!하고 가볍게 이해하는 수..