Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 야놀자
- Javascript
- 부트캠프
- cpu
- DFS
- BFS
- html/css/js
- 자바스크립트
- CS
- 컴퓨터과학
- 코테
- KAKAO
- CSS
- github
- 프론트엔드개발자
- 코딩테스트
- 알고리즘
- 그리디
- js
- 백준
- git
- 패스트캠퍼스
- 국비지원
- 컴퓨터공학
- 너비우선탐색
- nodejs
- 국비지원취업
- 호이스팅
- LinkSnap
- computerscience
Archives
- Today
- Total
My Boundary As Much As I Experienced
CSS) Display 속성의 종류 본문
기본적인 Display 속성의 종류
none | block | inline | inline-block |
- 안 보여요. - 클릭도 안 돼요. - 아예 영역이 사라져요. |
- 한 블록을 모두 점유하는 요소이다. - 대표적으로는 h, div 등이 있다. - height와 width를 설정할 수 있다. - 구획으로도 많이 쓰인다. |
- 글자처럼 취급되는 요소이다. - 한 블록에 여러 개가 쌓일 수 있다. - 대표적인 인라인 요소는 p, span 등이 있다. - height와 width를 가질 수 없다. (컨텐츠에 auto로 맞춰짐) |
- block과 inline의 중간 형태. - 라는데 그렇게 딱히 쓰이는 걸 본 적이 없다. |
Display: none과 visibility: hidden, Opacity: 0의 차이
display:none | visibility:hidden | opacity:0 |
|
|
|
즉 영역을 아예 남기지 않고, 이에 달려있는 이벤트도 사라지게 만들고 싶을 때 display: none이 유리하다.
Display flex, grid, ruby란?
block과 inline은 외부 요소와의 상호 관계를 설정하는 태그라면
flex와 grid는 내부 요소들을 정렬하는 역할을 한다.
display: flex | display: grid |
- 기본적으로 flex를 선언하면 안의 요소들이 수평 정렬이 된다. - flex-direction으로 주 방향을 수직으로 바꿀수도 있다. - flex박스와 아이템간의 간격 조정과 아이템들 간의 간격 조정이 가능하다. - justify-contents와 align-items로 주축 정렬(기본적으로 수평), 보조축 정렬(기본적으로 수직)을 바꿀 수 있다. - flex-wrap 속성으로 flex-box 내의 아이템 overflow를 조절할 수 있다. |
- 그리드를 미리 짜서 그 그리드에 요소들의 부피를 얼마나 할당할건지 정하는 것 -grid-template으로 column으로 열을, row으로 행을 조작한다. - Adobe Indesign에서 편집디자인을 해봤다면 대강 사용법은 다들 알거다.. |
기타 display table, table-row 등은 많이 쓰이지 않으므로 생략
'FrontEnd > HTML&CSS' 카테고리의 다른 글
css) 텍스트 넘치면 2줄이 아니라 ...처리 하려면? (0) | 2024.03.04 |
---|---|
css라이브러리 tailwind css의 장점 (0) | 2024.02.24 |
오픈 그래프(Open Graph)란? (0) | 2023.08.01 |
시멘틱태그(sementic tag)란 (0) | 2023.07.25 |
CSS) Position의 종류 (0) | 2023.07.18 |