css에서 position때문에 정말 많이 화나고 포기하고싶었는데 다시 한번 정확하게 정리하려한다! 어휴..🤬
display(디스플레이)
display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.
https://developer.mozilla.org/ko/docs/Web/CSS/display
💡 한마디로 레이아웃을 만들 때 사용하는 아이들이라 생각하면된다.
block, inline-block
- block
block은 나 이외의 어느것도 허용하지 않겠다! 라고 이해하면 쉽다. 보통 div의 기본값은 block이라 div를 여러개쓰면 div들이 밑으로 하나씩 떨어지는것을 볼 수 있다.
- inline과 inline-block
inline과 inline-block의 차이점은 width와 height를 가질 수 있냐? 없냐?라는것이다. 너랑 나랑 같은 선에서 서자!라고 하는건 같지만 inline-block은 width와 height를 가질 수 있다. inline의 대표적인 태그는 span이다! 아래의 그림을 살펴보자
강제로 display:inline을 주고 width와 height를 줘도 적용이 되지않고 그대로 있는것을 볼 수 있다.
<!--html-->
<span class="inline">Hi!</span>
<span class="inline-block">Jetom!</span>/*css*/
.inline{
display: inline;
width: 100px;
height: 100px;
color:white;
background: black;
}
.inline-block {
display:inline-block;
width: 100px;
height: 100px;
color:white;
background: black;
}
flex
엄청 엄~~~처엉 자주 쓰이는 것 중 하나이다. flex와 비슷한 float도 있지만 ie를 고려 해야할 때만 쓰도록하자.. float를 쓰면 clear:both를 하고 뭐 이것 저것 엄청 열심히 했는데 flex는 그런 과정을 생략할 수 있어서 너무 행복하다..(ie...후😡)
flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다.
https://developer.mozilla.org/ko/docs/Web/CSS/flex
flex는 부모에 넣어주면 자식이 되는 요소들을 정렬 할 수 있는데, 아래의 사진을 살펴보자
inline block처럼 옆으로 붙어서 정렬이 되는것이 기본이고 수직과 수평을 자유롭게 정렬 할 수 있는데, 부모에 적용을 시켜주어야한다. (부모!!!)
/*css*/
.flex{
display: flex;
/*메인 방향*/
justify-content: center;
/*수직 방향*/
align-items: center;
}
flex에서 다양한 속성이 있는데 우선 flex-direction에 대해 살펴보겠다!
- flex-direction
배치를 어떻게 할것인가?하는 속성이다! (justify를 수직 또는 수평으로 기준을 할지 정하는 역할을 한다.)
/*기본*/
flex-direction: row;
/*세로로 정렬*/
flex-direction: column;
/*가로로 정렬하되, 역순으로 배치*/
flex-direction: row-reverse;
/*세로로 정렬하되, 역순으로 배치*/
flex-direction: column-reverse;- flex-wrap
div들이 일렬로 담길 수 없을 때 줄바꿈을 결정하는 속성이다!
/*기본*/
flex-wrap: nowrap;
/*줄바꿈*/
flex-wrap: wrap;
/*줄 바꿈하되, 역순으로*/
flex-wrap: wrap-reverse;👉 direction과 wrap을 한방에 쓸 수 있는 flex-flow는 처음을 direction 두 번째를 wrap로 넣는다.(margin이나 padding처럼 축약해서 쓴다고 생각하면 된다.)
1분코딩 flex를 보고 이해했던 나로서 벨로그에도 1분코딩의 justify, align의 설명을 가져왔다.😊😎
“justify”는 메인축(오뎅꼬치) 방향으로 정렬하며, align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬한다.
justify-content의 속성은 아래와 같다.(개인적으로 space로 시작하는 속성들이 너무 헷갈렸다 😥)
/*기본값*/
justify-content: flex-start;
/*끝점으로 정렬*/
justify-content: flex-end;
/*가운데 정렬*/
justify-content: center;
/*사이에 균일한 간격으로*/
justify-content: space-between;
/*둘레에 균일한 간격으로(끝부터 균일하게 정렬된다 생각하면된다.)*/
justify-content: space-around;
/*아이템들의 사이와 양 끝에 균일한 간격*/
justify-content: space-evenly;
- align-items
/*기본*/
align-items: stretch;
/* flex-direction에 따라 기준이 달라진다!*/
align-items: flex-start;
align-items: flex-end;
/*가운데*/
align-items: center;- align-content
flex-wrap: wrap의 상태에서 , 행이 2줄 이상 됐을 때 수직축 방향 정렬을 결정하는 속성이다!
속성은 items와 동일하다🤣
이외에도 display의 종류는 많지만.. 쓰면 욕나오고 🤬 아는데 실무에서 쓰지않았던 속성은 뺐다(like table 속성...?)!
