Web/HTML, CSS3 [CSS] GRID 코드 예제 grid-template-columns ---> 세로 방향 grid-template-rows ---> 가로 방향 column-gap ---> 세로 공백 row-gap ---> 가로 공백 gap ---> 세로 가로 공백 layout 방법 (Grid Template Areas, Rows and Columns, Shortcuts, Line Naming) 1. Grid Template Areas 2. Rows and Columns 3. Shortcuts 4. Line Naming Grid Template (fr 활용법) Place Items (요소를 개별적으로 위치를 지정해준다) Place Content (요소를 묶음단위로 위치를 지정해준다) Auto Columns and Rows (지정범위를 초과할 경우 자동.. 2021. 3. 12. [CSS] Selector 1. Id와 Class class id .으로 선택 #으로 선택 목적에 맞게 자유롭게 이름 붙일 수 있음 목적에 맞게 자유롭게 이름 붙일 수 있음 동일한 값을 갖는 엘리먼트 많음 문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐 엘리먼트가 여러 값을 가질 수 있음 엘리먼트 단 하나의 값을 가짐 스타일의 분류(classification)에 사용 특정 엘리먼트를 이름 붙이는 데 사용 2. 전체 선택자 : * 모든 형태의 모든 요소를 선택합니다 ns|* : 네임스페이스 ns 안의 모든 요소 선택 *|* : 모든 요소 선택 |* : 네임스페이스 없는 모든 요소 선택 3. 연결 선택자 하위 선택자 : section p { color: blue; } section - 상위요소, p - 하위요소 부모 요소에 포함된.. 2021. 1. 31. [CSS] 태그 & 속성 1. font-weight : normal | bold | bolder | lighter | namber | initial | inherit 글자 굵기를 정하는 속성입니다 / 상속 o / 애니메이션 o normal : 숫자 400과 같습니다 (기본값) bold : 숫자 700과 같습니다 lighter / bolder : 상속된 값보다 얇고 / 굵은 굵기입니다 number : 100, 200, 300, 400, 500, 600, 700, 800, 900 initial : 기본값으로 설정합니다 2. line-height : normal | length | number | percentage | initial | inherit 줄 높이를 정하는 속성입니다 / 상속 o / 애니메이션 o normal : 보통 1.. 2021. 1. 5. 이전 1 다음
