공부기록용

🔴align-items 🔴align-self 🔴align-content align-items flex container의 교차 축 위에서 flex item들이 어떤 식으로 정렬될 것인지를 결정한다. (flex container의 관점) align-self 각각의 flex item이 교차 축에서 어떤 식으로 정렬될 것인지를 스스로 결정한다. (flex item의 관점) align-content 교차 축 위에서 justify-content와 동일하게 사용할 수 있는 속성이다. 두 조건이 만족되고 여유 공간이 있을 때만 동작할 수 있다. flex-wrap의 값이 wrap으로 지정되어 있을 때 item을 배치하기 위해 필요한 공간보다 flex container가 더 클 때(넉넉하게 커야함) ⭐내용실습⭐ 강아지 ..

🔴justify-content justify-content flex item들이 flexbox의 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정한다. ⭐내용실습⭐ 강아지 고양이 비둘기 고라니 호랑이 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; display: flex; height: 200px; border: 5px solid red; } justify-content: flex-start; justify-content: flex-end; > ul의 순서는 유지하지만 배치가 뒤쪽으로 붙게 되었다. 역순❌ justify-content: center > 중앙..

🔴flex-direction 🔴flex-wrap 🔴flex-flow flex-direction flex container의 주축을 결정하는 속성으로 행은 가로 축을, 열은 세로 축을 주축으로 한다. flex-wrap flex item들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성이다. ⭐내용실습⭐ 강아지 고양이 비둘기 고라니 호랑이 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; display: flex; height: 200px; } 플렉스 컨테이너는 자식 요소인 플렉스 아이템을 일렬로 배치..

Layout 구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기술을 의미한다. CSS layout은 웹 요소를 올바른 위치에 배치하는 기술이다. CSS layout 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며, 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. 일반적인 문서 흐름 display 속성 flexbox grid layout float 속성 position 속성 등등 https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction flexbox flexbox는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 layout방식을 만한다. flexbox방식에서 요소의 배치와 정렬은 fl..

Git branch 전략 Git branch 전략은 프로젝트의 Git branch를 효과적으로 관리하기 위한 워크플로우이다. 직접 branch 전략을 만들어 사용해도 되겠지만, 세상에는 branch를 효과적으로 관리하기 위한 모범 사례들이 존재한다. 그 모범사례 중에서 유명한 Git Flow, Github Flow가 있다. Git Flow Git Flow는 네덜란드 빈센트 트라이센(Vincent Driessen) 블로그에서 유래된 branch 전략이다. Git Flow는 크게 5개의 branch 를 만들어 상호 운영되는 전략이다. 각 branch 는 고유의 기능이 있다. 일부 branch는 병합을 통하여 지속적으로 유지되는 branch도 있다. Master Develop Feature Release Ho..

Block 태그 전체적인 틀을 짠다던지 구조를 만들 때 주로 사용되는 태그이다. box를 치는 태그라고 생각하기 항상 새로운 줄에 태그를 생성한다. 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다. 한 줄에 한 개만 배치된다. 좌우 너비가 100%라서 한 줄을 독차지한다. 너비 값과 높이 값을 가질 수 있다. 상하좌우 margin을 가질 수 있다. h1 / h2 / h3 / h4 / h5 / h6 div ol / ul / li dl / dt / dd ol : 순서가 필요한 리스트에서 사용하며 li 태그로 리스트를 구분한다. (계약서, 약관, 법조문 등) ul : 순서가 필요없는 리스트에서 사용하며 li 태그로 리스트를 구분한다. (메뉴판, 사이트 메뉴등) li dl : 단어 또는 사물등을 설명하는 ..