정의 :

- 부모 요소인 컨테이너에 사용하는 스타일 속성

부모요소가 inline-flex속성이 된다면, 자식 요소에도 inline-flex요소가 적용이 된다.

 

참고사이트 :

https://rgy0409.tistory.com/4813

 

CSS display: flex 그리고 inline-flex

인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정

rgy0409.tistory.com

 

'CSS' 카테고리의 다른 글

스타일 시트 CSS접두어 -webkit의 의미  (0) 2023.03.02
backdrop-filter  (0) 2023.03.02
SVG 이미지 파일에 대하여  (0) 2023.03.02
display : grid에 대하여  (0) 2023.03.02
CSS : root (가상선택자) 를 통해 css 변수 선언하기!  (0) 2023.03.01

1.SVG 이미지 파일이란?

- Scalable Vector Graphics : 웹 친화적인 벡터 파일 포맷 이미지

- jpeg와 같은 픽셀 기반의 래스터 파일과 달리 점과 선으로 만들어진 수학공식의 이미지 저장 방식

 

관련 참고 자료 :

https://www.adobe.com/kr/creativecloud/file-types/image/vector/svg-file.html

 

SVG 파일 알아보기 | Adobe

SVG 파일은 크기를 조정해도 해상도가 저하되지 않으므로 온라인 그래픽에 매우 적합합니다. SVG 파일의 특징과 장단점에 대해 자세히 알아보세요.

www.adobe.com

 

'CSS' 카테고리의 다른 글

backdrop-filter  (0) 2023.03.02
display : inline-flex 에 대하여  (0) 2023.03.02
display : grid에 대하여  (0) 2023.03.02
CSS : root (가상선택자) 를 통해 css 변수 선언하기!  (0) 2023.03.01
display에서 inherit의 역할  (0) 2023.03.01

1.Grid와 Flex의 큰 차이점 :

- Grid는 두 방향 (가로 / 세로) 레이아웃 시스템 (2차원)

- Flex는 한 방향 레이아웃 시스템 (1차원)

 

2.Flex와 비슷한 점 :

- 부모요소를 Grid Container(*그리드 컨테이너)라고 부르고, 자식요소를 Grid Item(*그리드 아이템)이라고 부릅니다.

- Flex와 마찬가지로 Grid는 컨테이너에 display:grid;를 설정하는 것으로부터 시작!

3.전반적인 정리 :

4.그리드 형재 정의 :

- grid-template-rows

- grid-template-columns

원본 출처 및 참고사이트 :

https://studiomeal.com/archives/533

 

이번에야말로 CSS Grid를 익혀보자

이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “

studiomeal.com

 

'CSS' 카테고리의 다른 글

display : inline-flex 에 대하여  (0) 2023.03.02
SVG 이미지 파일에 대하여  (0) 2023.03.02
CSS : root (가상선택자) 를 통해 css 변수 선언하기!  (0) 2023.03.01
display에서 inherit의 역할  (0) 2023.03.01
CSS에서 all 속성에 대하여  (0) 2023.03.01

+ Recent posts

티스토리툴바