목록CSS (3)

꾸매코딩

[CSS] Grid에 대한 설명과 사용 방법

Grid란? Flex가 한 방향 레이아웃 시스템(1차원)이라면 Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)이다. Flex도 충분히 좋은 기술이지만, 좀 더 복잡한 레이아웃을 위해 CSS Grid를 사용할 수 있다. Grid의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Grid Container(그리드 컨테이너), 자식 요소를 Grid Item(그리드 아이템)라고 부른다. "부모(컨테이너)는 Grid의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 6 7 8 9 Grid의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Grid 부모(컨테이너)에 적용하는 속성 grid 컨테이너 설정 displ..
CSS 2021. 10. 23. 20:52
[CSS] Flex에 대한 설명과 사용 방법

Flex란? Flex(플렉스)는 Flexible box, Flexbox라고 불린다. Flex는 레이아웃 배치 전용 기능으로 고안되었다. Flex가 나오기 전 사용하던 float, inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능이 많다. Flex의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Flex Container(플렉스 컨테이너), 자식 요소를 Flex Item(플렉스 아이템)라고 부른다. "부모(컨테이너)는 Flex의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 Flex의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Flex 부모(컨테이너)에 적용하는 속성 flex ..
CSS 2021. 10. 22. 18:07
[CSS] HTML <img> vs background-image 차이 비교

서론 이미지는 항상 HTML 태그를 사용하여 나타냈었는데, Scflix 프로젝트를 진행하면서 background-image를 사용하게 되었다. 둘 다 이미지를 나타낸다는 공통점이있는데, 두 방식의 차이점을 알아보고 어떤 방식이 더 나은지 정리를 해보려고 한다. 사용 방법 // HTML img tag // CSS background-image HTML HTML 에서 사용 가능 background-image 보다 SEO에 효과적 background-image 보다 성능에 효과적 default 이미지 포함 가능 이미지 불러오지 못했을경우 default 값으로 Broken image와 alt 텍스트가 보인다. background-image CSS에서 사용 가능 순수하게 디자인에 사용 이미지가 콘텐츠의 일부가 아..
CSS 2021. 9. 27. 23:03
이전 Prev 1 Next 다음