Style/CSS (4) 썸네일형 리스트형 CSS - grid 수평선과 수직선으로 이루어진 집합. 사용방법 .container { display: grid; } 기능 격자 나누기 간격 미리 크기 정하기 원하는 위치에 원하는 칸만큼 배치 이름으로 배치 1. 격자 나누기 grid-template-rows grid-template-columns grid-template grid-template-rows 와 grid-template-columns를 동시에 작성하는 것이 grid-template 이고, 문법은 아래와 같다. .container{ grid-template-rows: 100px 100px 100px 100px 100px; grid-template-columns: repeat(8, 100px); } .container{ grid-template: repeat(5,.. CSS - Flexbox 가로 또는 세로로 요소를 배치/정렬하기 쉽게하기 위한 모듈. 1차원 레이아웃 모델이므로 한 번에 하나의 차원(행 또는 열) 만을 다룬다. 사용방법 .page{ display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10em; } 기능 방향 설정 정렬 요소가 넘치는 경우 요소사이의 간격 크기를 늘리거나 줄일 때 유연한 크기를 정할 때 1. 방향 설정 flex-direction 으로 정의하며 아래 4개의 값을 가질 수 있다. row column row-reverse column-reverse * 기본축과 교차축 - flex-dirction이 row인 경우 기본축 : 행 교차.. CSS - position의 속성과 특징 * position 속성값 static relative absolute fixed sticky * 사용 방법 .page{ position: relative; top: 30px; right: 50px; } 1. static 기본값. 요소를 일반적인 문서흐름에 따라 [ 왼쪽 -> 오른쪽 , 위 -> 아래 ] 로 배치한다. top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다. 2. relative 기준 : 원래 있던 위치 요소를 일반적인 문서 흐름에 따라 배치한다. 자기 자신을 기준으로 top, right, bottom, left 속성으로 주어진 픽셀만큼 오프셋을 적용한다. 오프셋은 다른 요소에 영향을 주지 않는다. (레이아웃에서 요소가 차지하는 공간이 static .. CSS - Cascading HTML Element는 여러 스타일의 영향을 받을 수 있으며 우선순위에 의해 적용되는 스타일이 정해지는 것을 캐스케이딩이라고 한다. CSS의 정식 명칭이 Cascading Style Sheets인 만큼, 캐스케이딩의 원리가 중요하게 적용된다. - cascading : 계단식의 작은 폭포이다. 캐스케이딩은 다음의 두 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다. 스타일 우선순위 스타일 상속 1. 스타일 우선순위 스타일요소는 각각 우선순위를 가지고 있으며 우선순위가 가장 높은 스타일이 적용된다. 다음의 세가지 요소를 통해 우선순위가 결정된다. 중요도 명시도 코드 순서 ① 중요도 중요도는 스타일이 선언된 위치에 따라서 우선순위를 매기는 것. [ 작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도.. 이전 1 다음
