카테고리: CSS

CSS / Tutorial / 원 또는 타원 만드는 방법

CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.

CSS / Tutorial / 삼각형 만드는 방법

CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.

CSS / Tutorial / 구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.

CSS / Reference / aspect-ratio

선호 가로세로 비율과 이미지의 고유 비율을 구분합니다. auto 조합, 확정 크기, cover·contain의 잘림과 빈 공간을 실행 예제로 비교합니다.

CSS / Reference / border-width

테두리 두께의 1~4개 값 대응과 실제 외곽 크기를 확인합니다. none·hidden의 계산값과 hover 시 배치 변화, outline 대안을 설명합니다.

CSS / Reference / tab-size

실제 탭 문자의 정지 간격을 조절하고 공백 네 개와 구분합니다. 공백 보존 조건과 같은 문자열에서 4·8의 결과를 확인합니다.

CSS / Reference / align-content

Flex 줄 묶음과 Grid 트랙의 공간 배분을 비교합니다. nowrap·wrap, auto 트랙 stretch와 일반 블록의 적용 조건을 별도 실습으로 확인합니다.

CSS / Reference / overflow

넘친 내용을 자르거나 스크롤하는 조건을 비교합니다. hidden과 clip의 scrollTop 차이를 버튼으로 확인하고 축별 계산값과 레이아웃 조건을 설명합니다.

CSS / Reference / background-repeat

repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.

CSS 강좌 / 변수 사용하는 방법: var()·상속·대체값

CSS 변수의 범위와 상속, var()의 대체값과 잘못된 값 처리 방법을 예제로 설명합니다. calc()와 단위 조합, 미디어 쿼리 조건에 변수를 사용할 수 없는 적용 한계도 확인할 수 있습니다.