기억의 DataBase

grid display: grid; (block) / inline-grid; container와 item으로 구성 행과 열 grid-template-rows: 100px 100px; grid-template-rows: repeat(2, 100px); 행 2개를 지정하고, 행 2개의 너비 설정 grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr); fr: 비율을 의미 전체 너비에서 차지하는 비율(2fr 1fr > 전체에서 2:1 ) grid-column: 1/4; item에 작성하는 속성(firefox로 번호 확인) 1~4까지 확장 grid-row: -1/ -3; 음수도 가능 - 우하단에 고정되는 부분이면 음수사용 .container ..

position : 요소 배치의 기준을 설정(실제 배치는 아님) position의 속성들 ①relative : 자신의 원래 위치를 기준으로 배치 (margin처럼 밀려나는 것) > 실제로 이동한 것이 아니라, 보이는 것만 옮겨진 것(홀로그램) > 실제로 배치하는 것은 다른 요소가 변경되면 유동적이므로 위험(absolute를 권장) ②absolute : 부모요소를 기준으로 뜬 상태라고 생각하면 됨(기존 위치에서 위에 떠 있는 상황) > 다른 자식요소에게 영향을 주지 않음(본인은 의식함 - 순서에 영향을 받음) > 부모요소(position이 부여된 부모 - position: relative; 권장 / static은 안됨)를 기준으로 배치(top, left, right, bottom등으로 실제 배치) > 부모..

Before(flex이전에 수평을 만드는 방식) float: left;을 해당 요소에 주고 이를 담은 container요소에 clearfix를 추가 >수평을 위한 방식은 아니었음 .clearfix::after { content: ""; display: block; clear: both; } After(flex 이후에 수평을 만드는 방식) container요소에 display: flex; 하나만 추가해주면 끝! display: flex (item은 inline으로 수평이나, container는 그대로 block으로 쌓임) display: inline-flex (container자체도 수평으로 나열됨) flex-wrap: wrap (container에 선언해주면 요소의 크기를 그대로 유지할 수 있음 - 대신..

1 2 3 4 .box { width: 100px; height: 100px; margin :10px; background: tomato; float: left; } .box4 { width: 100px; height: 100px; margin: 10px; background: blue; } .clearfix::after { content: ""; clear: both; display: block; } float라는 개념은 display: flex가 등장하면서 밀려나는 추세 float에 영향을 받지 않으려는 해당 요소에 clear: left/right/both(권장)를 사용 기본적으로 떠 있는 개념이기 때문에 아래에 다른 요소가 깔릴수가 있음 (다른 속성들을 해제하는 것이 중요) float를 넣어주면 d..

border: 두께 종류 색상 (종류만 지정해도 보여짐 - solid) .box { width: 200px; height: 200px; background: orange; padding: 10px; border: 10px solid red; box-sizing: border-box; } box-sizing: border-box; (border/padding 모두를 포함한 크기 200/200) (padding/border등을 사용할 때 계산할 필요없이 본래 크기(w/h)를 유지) display: none(아예 존재하지 않음 - 삭제)과 opacity: 0(단순히 보이지 않음 - 투명)은 다른 의미 * opacity 0~1(0투명/1불투명) .hide { display: none; } class="hide"..

pixel과 % .parent { width: 100px; } .child { /* 50px */ width: 50%; } 부모요소가 100px 자식요소의 50% > 50px %는 부모요소를 기준으로 한 비율 em .parent { font-size: 10px; } .child { /* 20px */ font-size: 2em; } 부모요소의 font-size를 기준으로 하여 선택요소의 font-size를 결정 (중간 단계의 font-size에 영향을 받아 관리하기가 어려울 수 있음) rem html { font-size: 100px; } /* 나머지 Text들은 기본 값인 16px로 */ body { font-size: 16px; } .parent { font-size: 10px; } .independ..