HTML & CSS
-
[CSS Grid] min-content, max-contentHTML & CSS 2021. 9. 3. 12:57
min-content, max-content 를 사용하면 그리드 안의 content 의 크기에 맞게 박스 크기를 조절할 수 있음. min-content : content 에 맞게 박스가 최소화 max-content : content 에 맞게 박스가 최대화 minmax, auto-fit 등과 함께 사용하면 컨텐츠 사이즈에 맞는 반응형을 만들 수 있음. 예시 1. min-content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum .grid { color: white; display: grid; gap: 5px; grid-template-columns: min-cont..
-
[CSS Grid] minmax 로 반응형 만들기HTML & CSS 2021. 9. 3. 11:39
minmax 를 통해서 그리드를 반응형으로 만들자. body { display: grid; width: 100%; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(10, 100px); grid-auto-columns: 100px; gap: 5px; } .item { color: white; background-color: blueviolet; } .item:nth-child(odd) { background-color: skyblue; } 화면을 늘리고 줄였을 때의 모습 - 줄였을 때 cell 이 압축되는 것을 볼 수 있음.. 여기서 minmax 를 주기. body { display: grid; width: 100%; grid-templ..
-
[CSS Grid] grid-autoHTML & CSS 2021. 9. 3. 11:32
grid-auto-rows 높이값을 주지 않고, 그리드를 만들었는데 담기는 내용들이 템플릿의 columns 나 rows 보다 많다면, 아래와 같은 문제가 발생함. body { display: grid; width: 100%; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); gap: 5px; } .item { color: white; background-color: blueviolet; } .item:nth-child(odd) { background-color: skyblue; } 그리드 템플릿에서 정해준 row 는 잘 작동하지만, 17번부터 50번까지는 깨짐. 이런 경우 grid-auto-rows 를 사용. bo..
-
[CSS Grid] 그리드 정렬HTML & CSS 2021. 9. 3. 11:03
그리드 정렬 그리드 컨테이너는 justify-items, align-items / justify-content, align-content 로 정렬 items 와 content 의 차이점 items 는 그리드에서 각각의 cell 을 의미. content 는 그리드 전체를 의미. justify 와 align 의 차이점 justify 는 수평을 의미, align 은 수직을 의미. (flex 에서는 flex-direction 에 따라 수평 수직이 달라지며 이때 justify, align 방향에 주의해야 함.) item의 정렬 그리드 컨테이너 안의 item의 정렬은 justify-items, align-items 로 하며 stretch 가 기본값, start, center, end 사용. justify-items..
-
[CSS Grid] 그리드 기초, 그리드 템플릿HTML & CSS 2021. 9. 2. 17:08
그리드를 사용하는 이유 그리드는 격자무늬를 만들기 어려운 flexbox 의 한계를 보완함 그리드 템플릿을 사용해 레이아웃을 잡기 쉬움 비율 조정이 쉬워서 반응형으로 만들기 편리함 그리드 기초 개념 그리드는 flexbox 와 유사하게 부모 요소에서 지정해준다. .father { display: grid; grid-template-columns : 100px 200px 100px 50px; grid-template-rows: 100px 100px 100px 100px; column-gap: 10px; row-gap: 10px; } column 과 rows 의 크기, 사이 간격 값을 직접 지정할 수 있음. 크기에 동일한 값을 주는 경우 repeat() 을 사용. 간격에 동일한 값은 gap 으로 지정. .fat..
-
[HTML] HTML 과 HTML 코드의 구성HTML & CSS 2021. 4. 3. 13:44
이번 포스팅에서는 HTML이 무엇이며 HTML 코드가 기본적으로 어떻게 구성되어 있는지 알아보겠습니다😁 1. HTML HTML 은 Hyper Text Markup Language 의 약자입니다. 위키백과는 다음과 같이 설명하고 있는데요. 하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. - 위기백과 - 여기서, hyper text 는 쉽게 말해 링크를 의미하며 markup language 는 컴퓨터가 받아들일 수 있는 언어입니다. 우리가 일상적으로 사용하는 웹페이지는 수많은 링크로 구성되어 있고, html 은 글, 태그, 속성 등을 사용해 이러한 링크들을 포함하는 문서나 데이터의 구조를 컴퓨터에게 알려주고 컴퓨터는 이를 받아들..