Order
- 플렉스 컨테이너에 나타나는 순서를 제어한다.
- 기본 값은 0
flex-grow / flex-shrink
- 플렉스 박스 아이템의 기본 너비를 자동으로 늘어나거나 줄어들도록 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 한다.
- grow속성의 기본 값은 0이다.
- 음수는 허용되지 않는다.
- flex-shrink
- 필요한 경우 플렉스 item이 축소되는 기능을 정의
- flex-shrink 속성은 플렉스 박스에 flex-wrap: wrap 속성을 부여한 경우 적용되지 않는다.
flex-item에 flex-grow를 0으로 지정, 나머지 요소들의 flex-grow를 다르게 주었다.
실습
flex-item에 flex-shrink를 0을 주고 item-4에만 1을 준 경우 item-4만 줄어들어서 해당 행에 맞춰지기 위해 줄어든 모습을 볼 수 있다.
그러나 flex-container에 flex-wrap:wrap을 적용하게 되면 넘칠 경우 줄바꿈을 해버리므로 flex-shrink가 적용되지 않는다.
flex-basis
- flex 아이템의 기본 사이즈를 지정하는 속성
- 기본 값은 auto이며 width에서 사용하는 모든 단위(px, %, em, rem 등)을 사용할 수 있다.
flex
- flex-grow, flex-shrink, flex-basis를 동시에 사용하는 약어이다.
- 값이 한 개일 때
- 단위가 없으면 flex-grow값이 되며
- 단위가 있다면 flex-basis값이 된다.
/*flex-grow*/
flex : 2
/*flex-basis*/
flex : 10em;
/*flex-grow | flex-basis*/
flex : 2 30px;
/*flex-grow | flex-shrink*/
flex : 2 2;
/*flex-grow | flex-shrink | flex-basis*/
flex : 2 2 10%;
Grid CSS 속성들
- grid-template-columns
- grid-template-rows
공백으로 구분된 값 목록으로 그리드의 열과 행을 정의한다. 값은 트랙 크기를 나타내고 그 사이의 공간은 grid line 격자선을 나타낸다.
.container {
grid-template-columns: 40px 50px auto 50px 40px;
}
auto는 나머지 공간을 갖게 된다.
.container {
grid-template-columns: repeat(5,10px);
}
repeat(5, 10px) : 10px 크기의 열을 5개 사용하겠다는 의미
.container {
grid-template-columns: repeat(5, 1fr);
}
fr = fraction 1fr은 사용 가능한 공간의 1 부분이다.(사용 가능한 공간에 대한 비율)
각 요소가 grid에서 어디서 시작하고 끝나게 할 건지 지정할 수 있는 속성
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
item-1의 grid column의 시작이 1번, 끝이 3번이 되도록 지정
실습
Position CSS
- 요소를 어떻게 위치시킬 지를 정의하며, 아래 5가지 값을 가짐
실습
absolute box가 relative box의 자식으로서 정의되었기 때문에 absolute-box-1의 위치를 조절했을 때 body가 아닌 relative-box-1를 기준으로 조절된다.
Sticky
- Sticky 요소는 스크롤 위치에 따라 static 요소와 fixed 요소 사이를 전환한다. 주어진 오프 위치가 뷰포트에서 만날 때까지 static하게 배치된 다음 제자리에 fixed된다.
실습
Z-index
- 앞과 뒤에 나타나는 요소를 결정
- 기본 값은 0이며 음수 사용 가능
- position : static 스타일을 가진 요소는 항상 뒤에 나타나므로 z-index 효과가 없다.
- z-index가 같거나 두 요소가 position : static이면 나중에 작성된 요소가 앞에 나타난다.
- 자식의 z-index값이 아무리 높아도 부모의 값이 낮으면 위로 올라올 수 없다.
- position이 없는 DIV #5는 아무리 z-index가 높아도 위로 올라올 수 없다.
Media Query
- 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있게 해준다.
- 반응형으로 스타일링할 때 사용한다.
@media (조건) {
스타일
}
##기본 문법
@media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {실행문}
다양한 미디어 유형을 적용할 수 있다.
CSS 적용 우선순위
- !important를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id로 지정한 속성
- .클래스, :가상 클래스로 지정한 속성
'HTML & CSS' 카테고리의 다른 글
CSS(Cascading Style Sheets) Basics [1] (0) | 2023.08.15 |
---|---|
HTML(Hyper Text Markup Language) Basics (0) | 2023.08.14 |
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!