css

[CSS] grid-layout 그리드 레이아웃 (2) (Grid items 속성) ✔️ align-content / justify-content : 그리드 콘텐츠(Contents)를 수직(열 축) 정렬 / 그리드 콘텐츠(Contents)를 수평(행 축) 정렬 ✨ 그리드 콘텐츠의 세로 너비, 가로 너비가 그리드 컨테이너 보다 작아야한다. 📓 속성값 normal : 기본값 start : 시작점 정렬 center : 수직 가운데 정렬 end : 끝점 정렬 space-around : 각 행 위아래에 여백을 고르게 정렬한다. space-between : 첫 행은 시작점, 끝 행은 끝점에 정렬하고 나머지는 여백으로 고르게 정렬한다. space-evenly : 모든 여백을 고르게 정렬한다. strech : 열 축을..

[CSS] grid-layout 그리드 레이아웃 ✔️ grid-layout : 그리드 레이아웃이란 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본요소로 작성된 콘트롤 간의 관계를 정의하는데 탁월하다. : 테이블과 마찬가지로 그리드 레이아웃을 훨씬 더 쉽게 구현할 수 있다. : FLEX 는 한 방향 레이아웃 시스템이고, Grid 는 두 방향 레이아웃 시스템이다. 📓 grid 구성 - 복수의 자식 요소인 grid item 과 그 상위 부모 요소인 grid container 로 구성된다. - 정렬하려는 요소의 부모 요소에 display: grid 또는 display : line-grid 속성을 선언한다. - display: grid 또는 display : lin..

[CSS] display: flex 으로 메뉴 만들기 (1/2/3) ✔️ 메뉴 만들기 (1) - 메뉴가 고정되지 않음 홈 Menu 1 Menu 2 메뉴바를 화면 상단에 고정 - display: flex main 영역 main 영역 main 영역 main 영역 main 영역 main 영역 main 영역 footer 영역 💡 헤더 부분에 포지션 fixed 를 줬다. position: fixed; top: 0; left: 0; right: 0; 태그에는 display: flex; align-items: center; /* justify-content: center; */ flex 를 주니까 메뉴들이 옆으로 붙어서 출력되었다. 💡 태그에 display: block; 준 이유 : 그래야 패딩 값이 먹히기 때문이다..

[CSS] columns 속성 / masonry layout 메이슨리 레이아웃 ✔️ columns 속성 : 요소의 다단 레이아웃 열수 및 열 너비를 설정한다. .box2 { columns: 200px; margin: 30px;} /*단 최소 크기 지정*/ .box3 { columns: 200px 5; margin: 30px;} /*단 최소 크기 지정 및 최대 단수*/ 💡 단의 최소 가로 크기를 200px로 하면, 균등한 크기로 분할했을 때 200px 보다 크면서 200px에 가장 가까운 가로 크기를 갖도록 단의 개수가 정해진다. 웹브라우저의 가로 크기를 늘리면 단의 개수가 늘어난다.(폭을 늘리거나 줄이면 확인 가능) ✔️ masonry layout 메이슨리 레이아웃 : 단으로 구현. 상자의 순서는 열 아..

[CSS] z-index 속성 ✔️ z-index 속성 : position 속성이 설정된 요소 중 static 이 아닌 요소와 그 자손 요소의 Z축 순서를 지정한다. 즉, Z 축 순서를 지정하기 위해서는 position 속성을 설정한 후 z-index 속성을 지정해야한다. ✨ 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다. 📓 속성값 - auto : z-index를 설정하지 않는다. 부모 요소와 동일 .yellow { background-color: yellow; z-index: 1000; /*position 이 static 이면 적용 안된다.*/ } .orange { background-color: orange; left: 100px; top: 100px; z-index: 100;..

[CSS] position 속성 - static, relative, absolute, fixed ✔️ position 속성 : 문서 상에 요소를 배치하는 방법을 지정한다. : top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다. 📓 속성값 1) static : 요소를 일반적인 문서 흐름에 따라 배치한다. (기본값) top, bottom, left, z-index 속성이 아무 영향을 주지 못한다. 2) relative : 요소를 일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다. 자기 자신을 기준으로! top, right, bottom, left 속성 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 못준다. ❌ 페이지 레이아웃에서 요소가 차지하는 ..

[CSS] float 속성 ⭐⭐ / 해제 방법 ✔️ float 속성 : 해당 요소를 자신을 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정한다. 📓 속성값 - left : 자신을 감싼 컨테이너 왼쪽에 배치 - right : 자신을 감싼 컨테이너 오른쪽에 배치 - none : 요소를 float 시키지 않음 (기본값) - inline-start : 해당 요소를 자신을 감싼 컨테이너 시작 쪽에 배치 - inline-end : 해당 요소를 자신을 감싼 컨테이너 시작 끝에 배치 👩‍💻 float 해제하는 방법 - float된 요소의 부모 태그에 강제로 높이 값을 지정(단점 : 반응형시 자동 높이 값 설정 불가) - float된 요소의 부모 태그에 overflow:hidden을 적용(단점 : 해당 요소 안..

[CSS] margin 겹침 (마진 상쇄 현상 Margin collapsing) ✔️ [CSS] margin 겹침 (마진 상쇄 현상) top 및 bottom 마진은 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))된다. 마진 겹침은 어떤 두 개 이상 블록 요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용된다. - 마진 겹침은 인접한 두 박스가 온전한 block-level 요소일 경우에 발생한다. - 마진 값이 0이더라도 겹칩은 적용된다. - 좌우 마진은 겹치더라도 상쇄되지 않는다. - 마진 겹침이 일어나는 경우 인접 형제의 상하 마진이 겹칠 때, 빈 요소(height가 0인경우)의 상하 마진이 겹칠 때, 부모 박스와 첫 번째(마지막) 자식 박스의 상단(하단) 마진이 겹칠 때 - 마..

[CSS] border-style 속성 (box-shadow/ border-radius) ✔️ border-style 속성 .bs1 {border-style: solid; border-color: red green; } .bs2 {border-style: dotted;} .bs3 {border-style: dashed;} .bs4 {border-style: double;} .bs5 {border-style: groove;} .bs6 {border-style: ridge;} .bs7 {border-style: inset;} .bs8 {border-style: outset;} ✔️ border-radius 속성 : 레이디어스 속성은 요소의 바깥 테두리 경계의 모서리를 둥글게 만든다. .br1 { border..

[CSS] overflow 속성 / resize 속성 / opacity 불투명도 ✔️ overflow 속성 : 요소의 박스에 콘텐츠가 넘칠 때 표현방법을 지정한다. : 속성 값은 하나 또는 두개 지정할 수 있고, 첫번째 값은 x 축, 두번째 값은 y축을 지정한다. 하나를 지정하면 두 축에 동일하게 값이 적용된다. .visible { overflow: visible; } .hidden { overflow: hidden; } .scroll { overflow: scroll; } .auto { overflow: auto; } 💡 scroll : 넘치는 콘텐츠를 자르고 항상 스크롤이 생긴다. auto : 넘치지 않으면 스크롤이 보이지 않고, 넘치면 콘텐츠를 자르지만 스크롤바가 표시된다. ✔️ resize 속성 ..