본문 바로가기

Flex2

5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트 목차마진과 갭의 차이마진인접한 요소가 없어도 적용갭인접한 요소가 있어야만 적용플렉스 박스화면 크기가 달라지면 그에 맞춰 플렉스 항목을 늘리거나 줄일 수 있는 유연한 상자를 활용해 레이아웃을 만듬CSS 그리드 레이아웃가로와 세로 방향 모두 사용항목은 1차원(flex), 그리드는 2차원부모 컨테이너로 묶어주어야 함정적으로 만들어진 행의 높이를 지정 1 2 3 4 5 6 동적으로 만들어진 행의 높이 지정 1 2 3 4 5 6 repeat와 함께 사용하여 원하는만큼의 열을 채울 수 있음자동 채우기auto-fit남은 공간 .. 2025. 5. 17.
5/13 - CSS, BOX, 이미지와 그라데이션, 반응형 웹 목차웹 문서의 레이아웃 만들기블록 레벨과 인라인 레벨을 바꾸는 display 속성종류block블록 레벨 요소로 표시 (한 줄 뛰어넘음)inline인 라인 레벨 요소로 표시 (한 줄)inline-block인 라인 레벨처럼 나란히 배치하지만 블록 레벨처럼 너비와 높이 지정 가능none해당 요소를 화면에 표시하지 않음영역도 사라짐hidden영역은 남아 있음 안녕하세요 반갑습니다 저는 홍길동 입니다.왼쪽이나 오른쪽에 배치하는 float 속성좌/우 차례대로 나열예를 들어, 그림 옆에 글이 나열 됨 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero nisi, culpa excepturi id laborum dolores! Expli.. 2025. 5. 17.
728x90
반응형