원 또는 타원 만드는 방법

CSS 강좌

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%;
}

CSS 강좌

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

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

CSS / Tutorial / 마름모 만드는 방법

CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.

CSS / Tutorial / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.

CSS / Tutorial / 링크 꾸미는 방법

CSS로 링크의 기본·방문·마우스·활성 상태를 구분하고, 키보드 초점까지 보이게 만드는 방법을 설명합니다. 밑줄과 색 대비를 유지하면서 직접 확인할 수 있는 예제를 제공합니다.

CSS / Tutorial / 선택자(Selector)

CSS의 요소·클래스·ID·속성 선택자가 어떤 HTML 요소를 고르는지 예제로 설명합니다. 여러 클래스를 가진 요소, 선택자가 일치하지 않을 때, ID와 클래스의 사용 기준도 다룹니다.

CSS / Tutorial / 표 꾸미기 / 배경색

배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.

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

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

CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.

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

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

CSS Tutorial / !important

CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.