▶inline-block
inline-block은 inline속성이 기본적으로 가지고 있는 텍스트 성질을 가지고 있어서 block안에 기본적인 여백값이 생긴다. 이를 없애줄 순 있으나 호환성 문제가 생길 수도 있다. 그래서 보통 텍스트 양 옆에 어느정도의 여백이 있고 가로정렬인 디자인일 때 주로 사용된다.
▶float: right
float는 HTML 초창기에 오로지 문서전달과 간단한 이미지를 출력하기 위해 고안된 것이었다고 한다. 워드나 한글의 이미지와 한글 "글자처럼취급"기능처럼 어떤 글의 흐름을 따라 이미지를 삽입하면 흐르듯 글과 이미지가 합쳐진다. 단, 이미지 레이아웃을 위해 만들어진 기능이 아니기에 float를 사용하면 뒤의 태그까지 모두 영향을 주게되고 이는 clear: both; 로 컨트롤을 해야하는데 조금 불편하다. 그래서 요즘은 크게 사용하지 않는 태그이다.
*Reference
https://triplexlab.tistory.com/11
inline-block과 float 중 어떤 것을 써야 할까?
🙋♂️ inline-block과 float 중 어떤 것을 써야 할까? 안녕하세요 TriplexLab 입니다 :) 오늘은 가로 배치 속성에 대해서 이야기를 해볼게요 가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있
triplexlab.tistory.com
▶display: flex
레이아웃 배치 전용 기능으로 고안되었다. 그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.
*Reference
https://www.daleseo.com/css-align-right/
CSS로 엘리먼트 우측 정렬하기 (Flexbox/Grid)
Engineering Blog by Dale Seo
www.daleseo.com
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
▶display: grid
Flex와 더불어 현재 가장 많이 사용되고있는 레이아웃 시스템으로 Flex는 한 방향 레이아웃(1차원), Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원) 이다. 그래서 Flex보다 더 복잡한 구조를 구현할 수 있으나 높은 버전에서만 사용가능하기에 사용자 버전을 체크 후 grid를 사용하는 것이 좋다.
*Reference
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
[CSS] CSS Grid (그리드) 배우기
프롤로그 레이아웃을 구현할 때 flexbox를 쓰면 참 편합니다. 플박만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에는 그리드가 좋다는 소문(?)을 들었거든요.
nykim.work
'국비필기노트 > HTML,CSS,JS_Starbucks' 카테고리의 다른 글
| CSS_transform(변환) (0) | 2022.05.09 |
|---|---|
| CSS_가운데 정렬 (0) | 2022.05.09 |
| CSS_BEM 명명기법 (0) | 2022.05.07 |
| CSS_마진(Margin)과 패딩(Padding) (0) | 2022.05.07 |
| CSS_속성(Inline, block, Inline-block) (0) | 2022.05.06 |