data life

영역 이름으로 그리드 정의 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법 .container { display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: 100px repeat(2, 200px) 100px; grid-template-areas: "header header header header" "content content content nav" ". . . ." "footer footer footer footer"; } HTML 삽입 미리보기할 수 없는 소스 빈칸은 마침표(.) 나 “none”을 사용하면 되고, 마침표의 개수는 여러개를 써도 됨! ⭐️ 중요 ⭐️ >> 해당 아이템 요소에 ..

Grid 간격 생성 column-gap row-gap gap >> Grid cell 사이에 간격을 만들어 줌 .container { row-gap: 10px; /* row의 간격을 10px로 */ column-gap: 20px; /* column의 간격을 20px로 */ gap : 10px 20px; /* row 10px, column 20px */ } HTML 삽입 미리보기할 수 없는 소스

flex : 한번에 한 방향의 레이아웃 (1차원) grid : 한번에 두 방향(가로,세로) 레이아웃 (2차원) Grid flex보다 복잡한 레이아웃 표현이 가능 기본 구성 Grid Container(그리드 컨테이너) : Grid의 전체 영역 Grid Item(그리드 아이템) : Grid Container의 자식 영역 1 2 3 4 5 6 7 8 9 Grid 적용하기 .container { display:grid; } Grid 형태 grid-template-columns gird-template-rows 직접 크기 설정 / auto .container { display:grid; grid-template-columns:auto auto auto; grid-template-rows: 20px 40px 60p..

flex-grow 남는 행의 여백을 나눠서 채우는 방법으로 flex-grow 속성이 적용되지 않거나 속성 값이 0 인 경우 레이아웃 너비보다 item들의 너비 합이 더 작으면 아이템 우측 끝에 여백이 남게 된다. HTML 1 2 3 css .flex_box{ display: flex; flex-wrap: nowrap; gap: 0; padding: 10px; background-color: #e8e8e8; } .item{ min-height: 150px; flex-basis: 100px; } .item:nth-child(1){ background-color:beige; } .item:nth-child(2){ background-color: yellowgreen; } .item:nth-child(3){ b..

align-self HTML 1 2 3 CSS .page { width: 220px; height: 300px; border: 3.5px solid gray; display: flex; align-items: flex-start; color : white; } .page div { flex: 1; justify-content: center; border: 2px solid gray; } .page div:nth-child(2) { align-self: center; } HTML 삽입 미리보기할 수 없는 소스 order >> 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정 >> default 값 = 0 >> 음수값을 지정할 경우 default값보다 앞에 위치 HTML 삽입 미리보기할 수 ..

Position 문서 상 요소를 배치하는 방법을 지정함 position : static(default) position : fixed 뷰포트 기준으로 위치 설정 웹 페이지를 스크롤하여도 항상 같은 곳에 위치 position : relative : element가 처음 놓인 자리에서 상하좌우로 움직임 position : absolute relative한 부모를 찾을 때, 부모 기준 relative한 부모를 못 찾을 경우, body 기준

절대 길이 단위 px : pixels, 픽셀(1px=1/96th of 1in) 상대 길이 단위 : 상위 요소의 글꼴 크기나 viewport의 크기와 연관 1. 글꼴 사이즈 기준 em : font-size 1em = 부모의 폰트 크기 rem (root em) : 최상위(root) 요소의 font-size 1rem = html의 폰트 크기 2. 뷰포트 기준 vh & vw = 뷰포트 높이/너비의 1% 예) 500px 너비의 뷰포트일때, 1vw = 5px 10vw = 50px vmin & vmax : 뷰포트의 최소/최대값 1% 반응형에 최적화! 예) 1200px*600px 뷰포트 => 1vw = 12px, 1vh = 6px 이므로 1vmin = 1vh = 6px, 1vmax = 1vw = 12px

1️⃣ Linking Style Sheet 2️⃣ Internal Style Sheet 3️⃣ Inline Style Sheet Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결 Internal Style Sheet : HTML과 한꺼번에 작성 Inline Style Sheet : HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법 hello world!

padding : 상하좌우 모두 적용 margin : 좌우에만 적용 ▶️ inline 성질!!! hello hello Class .class name { property: property-value ; } : 연이어 여러 개를 가질 수 있음 Id #id name { property: property-value ; } : class와 달리 한 번에 여러 개를 가질 수 없음 차이점 우선순위 id > class > tag

Border : box의 경계 border : width style color border-style 종류 한 개의 값 모든 면의 테두리 스타일 설정 두 개의 값 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 스타일 설정 세 개의 값 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 스타일 설정 네 개의 값 상, 우, 하, 좌(시계방향) 순서로 테두리 스타일 지정 border-radius : 테두리를 둥글게 만드는 효과 : 50% (circle⭕️) border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y