원 또는 타원 만드는 방법

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

Post Views: 1

CSS Tutorial

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

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

CSS / Tutorial / ul, ol 가운데 정렬하는 방법

목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법

CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.