CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다.
원 만들기
- HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다.
<div class="circle"></div>
- 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.circle {
margin: 30px auto;
width: 200px;
height: 200px;
background-color: #e3f2fd;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
- border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
.circle {
margin: 30px auto;
width: 200px;
height: 200px;
background-color: #e3f2fd;
border-radius: 50%;
}
타원 만들기
- 가로 또는 세로 크기를 변경하면 타원이 됩니다.
.circle {
margin: 30px auto;
width: 400px;
height: 200px;
background-color: #e3f2fd;
border-radius: 50%;
}
테두리만 있는 원 만들기
- 배경색이 없고 테두리만 있는 원을 만들고 싶다면 background-color 대신 border 속성을 사용합니다.
.circle {
margin: 30px auto;
width: 200px;
height: 200px;
border: 20px solid #e3f2fd;
border-radius: 50%;
}
링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.
CSS 강좌 / 색상 값과 px·em·rem·% 단위 이해하기
색상 표기와 px·em·rem·%의 계산 기준을 비교합니다. 중첩된 글자 크기와 여백이 있는 상자 예제로 실제 크기를 계산하고 개발자 도구에서 확인할 수 있습니다.
CSS 강좌 / transform과 transition으로 상태 변화 표현하기
transform의 이동·회전·확대와 transition의 시간·곡선·지연을 비교합니다. 문서 흐름, 키보드 초점과 움직임 감소 설정을 전체 예제로 확인할 수 있습니다.
CSS 강좌 / position의 relative·absolute·fixed·sticky 차이
relative·absolute·fixed·sticky의 공간 유지, 위치 기준과 스크롤 차이를 비교합니다. 배지와 고정 버튼, 붙는 제목 예제를 실행하며 기준 부모와 동작하지 않는 원인을 확인합니다.
폼의 필수·유효성·비활성·읽기 전용 상태와 키보드 초점을 구분합니다. 실제 제출 항목을 확인하고 작은 화면·큰 글자에 대응하는 전체 예제를 제공합니다.
CSS 강좌 / 관계 선택자와 가상 클래스로 요소 고르기
자손·자식·인접 형제·일반 형제 선택자를 같은 문서 구조에서 비교합니다. hover·focus-visible·first-child·nth-child를 포함한 전체 예제와 구조를 바꿔 선택 결과를 확인하는 실습을 제공합니다.
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
실습용 이미지를 내려받아 배경색과 배경 이미지 경로를 설정합니다. cover·contain의 잘림과 빈 공간, 반복과 위치를 비교하고 배경이 안 보일 때의 확인 순서를 설명합니다.
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
CSS 강좌 / Grid 반복 열·자동 배치·영역 이름 사용하기
repeat·auto-fit·auto-fill의 차이와 자동 배치 순서를 실행 예제로 비교합니다. grid-template-areas로 페이지를 구성하고 모바일 전환, 영역 이름 오류와 읽기 순서도 확인합니다.