개발 중인 웹 사이트의 텍스트 색상을 정하는 건 처음에는 혼란스러울 수 있습니다. 그러나 이 글을 보시면 쉽게 배우실 수 있을 거예요.

HTML에서 텍스트 색상 지정하는 방법

CSS에서 background-color 속성은 모든 것의 배경색을 설정하기에 매우 간단합니다.

페이지에서 어떤 것의 전경색을 설정하고 싶다면 어떻게 할까요? 특히 일반적인 조건에서는 배경색을 설정하고 싶지 않은 텍스트입니다.

CSS에슨 foreground-color 속성이 없기 때문에 이것을 가능하게 하는 게 color 속성입니다.

이 글에서는 색상 속성을 사용하여 텍스트의 색상을 설정하는 방법을 보여드리겠습니다. 또한 다양한 값을 사용하는 경우에 대해서도 알아보겠습니다.

색상 속성은 색상의 이름, hexadecimal, RGB, HSL 4가지 방식으로 값을 가져옵니다. 이제 각각을 살펴보겠습니다.

색상의 이름

이름에서 알 수 있듯이 색상 속성을 가져온 후 원하는 색상의 이름을 지정하여 값을 적용합니다. 이는 red, green, blue, orange, crimson, cyan 등이 될 수 있습니다. 브라우저에서 인식하는 색상의 이름은 약 147개입니다.

기본 문법은 이렇게 생겼습니다.

element {
  color: colorName;
}

<p>freeCodeCamp</p>

p {
  color: crimson;
}

Hexadecimal 컬러 (또는 Hex 컬러)

Hex 값은 총 6자로 색을 표시하는 데 사용됩니다. 숫자 기호는 파운드/숫자 기호(#)로 시작하여 0부터 9까지의 숫자, 그리고 마지막은 A부터 F까지의 문자입니다.

처음 두 개의 값은 빨간색, 다음 두 개는 초록색, 마지막 두 개는 파란색을 나타냅니다. Hex 값의 경우 사용할 수 있는 색의 음영에 제한이 없습니다.

<p>freeCodeCamp</p>

p {
  color: #dc143c;
}

RGB 컬러

RGB는 Red(빨강), Green(초록), Blue(파랑)을 의미합니다. RGB 컬러를 사용하면 빨간색, 초록색, 파랑의 정도를 지정할 수 있습니다. 세 가지 모두 0에서 255 사이의 숫자로 표현됩니다.

RGB에는 rgba라는 타입이 있는데 여기에 추가된 'a'는 알파를 의미하며, 색의 불투명도를 지정할 수 있고 0.0에서 1.0까지 선택할 수 있습니다 – 0.0은 불투명도 0%, 0.5는 불투명도 50%, 1.0은 불투명도 100%를 의미합니다.

기본 문법은 rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha)입니다.

알파 값을 원하지 않으면 rgba(amountOfRed, amountOfGreen, amountOfBlue)만 쓰셔도 됩니다.

다음은 일반 RGB 값의 문법입니다.

<p>freeCodeCamp</p>

p {
  color: rgb(220, 20, 60);
}

이것은 50% (0.5) 불투명도로 작용하는 알파 값을 보여줍니다.

p {
  color: rgb(219, 20, 60, 0.5);
}

HSL 컬러

HSL은 색, 채도 및 명도를 나타냅니다. 이것은 CSS에서 텍스트(그리고 색을 사용하는 다른 모든 것)에 색을 지정하는 또 다른 방법입니다.

• Hue는 360°로 색상 바퀴를 나타냅니다. 따라서 0°는 빨간색, 120°는 초록색, 240°는 파란색입니다.
• 채도는 백분율로 표현된 색의 선명한 정도입니다. 0%는 회색 음영이고 100%는 색상 자체입니다.
• 명도는 백분율로 표현된 색의 밝고 어두운 정도입니다. 0%는 검은색, 100%는 흰색입니다.

RGB 색상과 마찬가지로 색상의 불투명도를 설정할 수 있습니다. 그래서 hsla도 있습니다.

전체 기본 문법은 hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha)입니다. 알파 값을 원하지 않으면 hsl(colorDegree, saturationPercentage, lightnessPercentage)만 쓰셔도 됩니다.

<p>freeCodeCamp</p>

p {
  color: hsl(348, 83%, 47%);
}

이렇게 hsl 색상에 특정 불투명도를 적용할 수 있습니다.

p {
  color: hsla(348, 83%, 47%, 0.5);
}

반드시 색상의 이름, Hex 컬러, RGB 컬러, HSL 컬러로 색상을 지정해줘야 하나요?

CSS의 멋진 점 중 하나는 한 가지 일에도 다양한 방법이 있다는 것입니다. 텍스트에 색상을 적용하는 방법만 봐도 그렇죠.

4가지 방법으로 색상을 적용할 수 있기 때문에 어떤 것을 사용하는 게 가장 좋은지 궁금하실 겁니다.

색상의 이름을 사용하면 표현할 수 있는 범위가 제한됩니다. 빨간색, 초록색, 파란색, 노란색 혹은 다른 색상의 이름으로는 색을 변형시키는데 제약이 많고 브라우저에서 인식하는 약 147개의 정의된 색에만 접근할 수 있습니다.

Hexadecimal 컬러는 매우 역동적입니다. 이는 창의성에 목마른 개발자들 사이에서 가장 많이 사용됩니다. Hexadecimal 컬러를 사용하면 다양한 음영을 사용할 수 있고 심지어 아무도 사용하지 않은 색상을 사용할 수 있습니다.

RGB 컬러는 hex 컬러만큼 동적입니다. 0에서 255까지 빨간색, 초록색, 파란색의 정도를 지정할 수 있는 것 외에도 추가 알파 값을 사용하여 색상을 얼마나 투명하게 할 것인지 설정할 수 있습니다.

HSL은 이 중에서 가장 역동적입니다. 컬러 휠에서 0에서 360도로 정확히 원하는 색상을 지정하고, 백분율로 채도와 명도를 설정하고, 0.0에서 1.0 사이 불투명도를 설정합니다.

정말 여러분과 여러분의 상황에 따라 다르고 어느 정도로 창의적이고 구체적으로 원하는지에 따라 다릅니다.

결론

텍스트에 색상을 적용하면 방문자들이 더 매력적으로 느끼는 웹 사이트가 될 수 있습니다. 또한 올바른 색상 조합은 콘텐츠가 더 쉽게 읽히도록 도와줍니다.

이 글에서는 색상 속성과 함께 사용할 수 있는 4가지 다른 속성으로 텍스트에 색상을 적용하는 방법에 대해 알아봤습니다.

읽어주셔서 감사하고, 열심히 코딩하세요.

HTML과 CSS를 사용해 웹 사이트를 만들다보면 이미지를 자주 다루게 됩니다.

개발자들은 종종 CSS를 사용해 이미지를 정렬하게 되는데, 특히 중앙 정렬을 하려고 할 때 어려움을 겪곤 합니다. 특히 초심자에게는 CSS에서 무엇이든 중앙 정렬을 하는 것이 쉽지 않은 일입니다. 그렇기 때문에 div 를 중앙 정렬할 수 있다고 뽐내는 사람들도 있는 것입니다. :)

img 요소는 인라인 요소이기 때문에 중앙 정렬이 조금 더 어렵습니다. 하지만 걱정하지 마세요. 이미지를 블록 레벨 요소로 변환하여 중앙 정렬을 할 수 있습니다.

이 글에서는 이미지를 중앙 정렬하는 4가지 방법을 살펴보겠습니다.

목차

• text-align 속성을 사용한 이미지 중앙 정렬

• Flexbox를 사용한 이미지 중앙 정렬

• CSS Grid를 사용한 이미지 중앙 정렬

• margin 속성을 사용한 이미지 중앙 정렬

text-align 속성을 사용한 이미지 중앙 정렬

text-align 속성을 사용해 이미지를 중앙 정렬할 수 있습니다.

한 가지 알아두어야 할 것은, 이미지를 가져오기 위한 img태그는 인라인 요소라는 것입니다. text-align속성을 통한 중앙 정렬은 블록 레벨 요소에 대해서만 가능합니다.

그렇다면 어떻게 text-align 속성을 사용해 이미지를 중앙 정렬할 수 있을까요? 이미지를 div와 같은 블록 레벨 요소로 감싼 후, 이미지를 감싼 div의 text-align속성에 center값을 설정합니다. 이렇게 하면 이미지가 중앙에 정렬됩니다.

<div>
  <img src="fcc22.png" alt="freeCodeCamp" />
</div>

div {
  text-align: center;
}

Flexbox를 사용한 이미지 중앙 정렬

CSS Flexbox의 도입으로 무엇이든 중앙 정렬하기가 쉬워졌습니다.

Flexbox로 이미지를 중앙 정렬하려면, 중앙 정렬하고 싶은 요소를 컨테이너 요소로 감싼 후 컨테이너 요소의 display 속성값을 flex로 지정합니다. 그리고 컨테이너의 justify-content 속성값을 다음 코드 스니펫과 같이 center로 지정합니다.

div {
  display: flex;
  justify-content: center;
}

P.S.: justify-content 속성을 center 로 지정하면 이미지를 수평으로만 중앙 정렬하게 됩니다. 이미지를 수직으로도 중앙 정렬하기 위해서는 align-items 속성 또한 center 로 지정해야 합니다.

CSS Grid를 사용한 이미지 중앙 정렬

CSS Grid는 Flexbox와 유사한 방식으로 작동하지만, Grid는 2차원인 Flexbox와 달리 다차원이라는 추가적인 이점이 있습니다.

CSS Grid로 이미지를 중앙 정렬하려면, 중앙 정렬하고 싶은 이미지를 감싸는 컨테이너 div 요소를 생성한 후, 컨테이너 div 요소의 display 속성값을 grid로 설정합니다. 그리고 컨테이너 div요소의place-items속성값을 center로 지정하면 이미지가 중앙 정렬됩니다.

div {
  display: grid;
  place-items: center;
}

P.S.: place-items 속성을 center 로 지정하면 무엇이든 수평 및 수직으로 중앙 정렬하게 됩니다.

margin 속성을 사용한 이미지 중앙 정렬

이미지의 왼쪽과 오른쪽의 margin을 auto로 설정함으로써 이미지를 중앙 정렬할 수 있습니다. 그러나 text-align 속성과 마찬가지로 margin 속성은 블록 레벨 요소에만 적용됩니다. 따라서 이미지의 display 속성값을 block으로 지정해서 이미지를 블록 레벨 요소로 변환해야 합니다.

img {
  display: block;
  margin: 0 auto;
}

display와 margin 이 두 가지 속성을 변경하는 것만으로도 이미지를 중앙 정렬하는 데 충분할 수 있습니다. 그러나 경우에 따라서는 이미지의 왼쪽 오른쪽 margin을 auto로 지정했을 때 왼쪽, 오른쪽에 여백을 주기 위해 이미지의 width를 지정해야 할 수 있습니다.

img {
  display: block;
  margin: 0 auto;
  width: 40%;
}

P.S.: 이미지의 width를 반드시 40%까지 낮출 필요는 없을 수 있습니다. 이 이미지의 경우 width가 60% 이상일 때 왜곡되기 때문에, 예시에서 이미지 width를 40%까지 낮춘 것입니다.

이 글이 이미지를 중앙 정렬하는 데 가장 적합한 방법을 선택하는 데 도움이 됐기를 바랍니다. 읽어주셔서 감사합니다.

중앙 정렬은 CSS에서 가장 어려운 것 중 하나입니다.

방법 자체를 이해하는 것은 그다지 어렵지 않지만, 너무나도 다양한 방법이 존재한다는 사실이 중앙 정렬을 어렵게 합니다.

중앙 정렬 하는 방법은 HTML 요소에 따라 혹은 수평 중앙 정렬인지, 수직 중앙 정렬인지에 따라 달라질 수 있습니다.

이 튜토리얼에서는 다양한 요소를 수평, 수직 및 상하좌우로 중앙에 배치하는 방법에 대해 살펴보겠습니다.

CSS로 무엇이든 중앙 정렬하는 방법을 설명하는 대화형의 비디오(Interactive Scrim)

수평 중앙 정렬하는 방법

수평 중앙 정렬하는 것은 대체적으로 수직 중앙 정렬하는 것보다 쉽습니다. 다음은 수평 중앙 정렬할 수 있는 몇 가지 일반적인 요소와 이를 사용하는 다양한 방법입니다.

CSS에서 Text-Align Center 속성으로 텍스트를 중앙 정렬하는 방법

텍스트 또는 링크를 수평 중앙에 정렬하려면, text-align 속성을 사용하여 값을 center로 주면 됩니다.

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* 수평 중앙 정렬하기 */
  text-align: center;
}

CSS에서 Margin Auto로 Div를 중앙 정렬하는 방법

div처럼 블록 레벨 요소(화면 전체를 차지하는 요소 —옮긴이)를 가지고 있는 태그를 중앙 정렬하기 위해선 margin 속성을 사용하여 값을 0 auto로 주면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수평 중앙 정렬하기 */
  margin: 0 auto;
}

Flexbox를 사용하여 Div를 수평 중앙 정렬하는 방법

Flexbox는 가장 현대적으로 페이지를 중앙 정렬하는 방법이며 반응형 레이아웃을 이전보다 훨씬 쉽게 디자인할 수 있습니다. 그러나 인터넷 익스플로러와 같은 일부 레거시 브라우저에서는 전적으로 지원되지 않습니다.

Flexbox를 사용하여 요소를 수평 중앙에 정렬하려면 부모 요소에 display: flex 그리고 justify-content: center를 적용하기만 하면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 자식 요소(.child)를 중앙 정렬하기 */
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

수직 중앙 정렬하는 방법

Flexbox와 같은 현대적인 방법 없이 요소를 수직 중앙 정렬하는 것은 꽤 번거로운 일이 될 수 있습니다. 이번엔 예전 방식으로 수직 중앙 정렬을 먼저 실행 해보고, Flexbox를 사용하는 방법도 함께 살펴보겠습니다.

CSS Absolute 배치와 Margin을 마이너스 값으로 설정하여 Div를 수직 중앙 정렬하는 방법

이 방법은 요소를 수직으로 중앙정렬하는데 오랫동안 사용되어 왔습니다. 이 경우에는 중앙에 정렬하려는 요소의 높이를 알아야 합니다.

먼저 부모 요소의 position속성을  relative로 설정합니다.

그 다음 자식 요소의 position속성을 absolute로 설정하고 top 또한 50%로 설정합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
}

하지만 이것은 자식 요소의 상단 가장자리만을 수직으로 중앙에 맞춥니다.

자식 요소 전체를 수직 중앙에 정렬하려면 margin-top속성을 -(자식 요소 높이의 절반)으로 설정합니다.

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* 이 요소 높이의 절반 */
}

CSS의 Transform과 Translate를 사용하여 Div를 수직 중앙 정렬하는 방법

중앙에 정렬하려는 요소의 높이를 모른다면(또는 알더라도), 이것은 꽤나 유용한 방법입니다.

이 방법은 위의 Margin을 마이너스 값으로 설정하는 방법과 아주 유사합니다. 부모 요소의 position속성을  relative로 설정합니다.

자식 요소의 경우 position속성을 absolute로 설정하고 top을 50%로 설정합니다. 이제 Margin을 마이너스 값으로 설정하여 자식요소를 중앙 정렬하는 대신에, 단순히 transform: translate(0, -50%)를 사용하면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

translate(0, -50%)은 translateX(0)와 translateY(-50%)의 줄임말입니다. 또한 transform: translateY(-50%)을 사용하여 자식 요소를 수직으로 중앙에 정렬할 수도 있습니다.

Flexbox를 사용하여 Div를 수직 중앙 정렬하는 방법

요소를 수평 중앙 정렬 하는 것처럼, Flexbox를 사용하면 요소를 수직으로 중앙에 정렬하는 방법은 정말 쉽습니다.

요소를 수직 중앙 정렬하려면 부모 요소에 display: flex와 align-items: center를 적용합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 수직 중앙 정렬하기 */
  display: flex;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

상하좌우 정중앙 정렬하는 방법

CSS Absolute 배치와 Margin을 마이너스 값으로 설정하여 Div를 상하좌우 정중앙 정렬하는 방법

이 방법은 요소를 수직으로 중앙에 정렬하는 위의 방법과 매우 유사합니다. 그와 마찬가지로 중앙에 정렬하려는 요소의 너비와 높이를 알아야 합니다.

부모 요소의 position 속성을 relative로 설정합니다.

그 다음에, 자녀의 position속성을 absolute 그리고 top을 50%로, left를 50%로 설정합니다. 이것은 단지 자식 요소의 왼쪽 상단 모서리를 수직 및 수평으로 중앙에 맞춥니다.

자식 요소 전체를 중앙에 정렬하려면 자식 요소 높이의 절반 값에 마이너스를 붙인 margin-top과 자식 요소 너비의 절반 값에 마이너스를 붙인 margin-left를 적용합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 상하좌우 정중앙 정렬하기 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* 자식 요소 전체를 중앙 정렬하기 위해, 상단 및 왼쪽 margin을 마이너스 값으로 적용하기 */
}

CSS의 Transform과 Translate를 사용하여 Div를 상하좌우 정중앙 정렬하는 방법

중앙에 정렬하려는 요소의 높이와 너비를 정확히 모르고, Flexbox 또한 사용할 수 없을 경우에 이 방법을 사용하여 요소를 수직 및 수평으로 중앙에 정렬 할 수 있습니다.

먼저, 부모 요소의 position속성을  relative로 설정합니다.

다음에, 자녀의 position속성을 absolute 그리고 top을 50%로, left를 50%로 설정합니다.

마지막으로, 자식 요소 전체를 중앙에 정렬하기 위해서 transform: translate(-50%, -50%)로 설정합니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 상하좌우 정중앙 정렬하기 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox를 사용하여 Div를 상하좌우 정중앙 정렬하는 방법

Flexbox는 요소를 상하좌우 정중앙 정렬하는 방법 중, 가장 쉬운 방법입니다.

이 방법은 단지 앞서 보았던 두 가지 Flexbox 사용법의 조합일 뿐입니다. 자식 요소를 수직과 수평으로 중앙에 정렬하려면 justify-content: center와 align-items: center를 부모 요소에 적용하면 됩니다.

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 상하좌우 정중앙 정렬하기 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

여러분들은 누구 못지않게 요소들을 중앙에 정렬할 수 있는 모든 방법을 배웠습니다. 자 이제 많은 것들을 중앙 정렬해 보세요.

CSS를 HTML에 적용하는 여러 방법 중 외부 스타일 시트를 사용하는 방법이 가장 일반적인 방법입니다. 그럼 어떻게 CSS파일을 HTML과 연결할 수 있을까요?

외부 CSS 파일을 연결하는 것은 그 어떤 HTML 템플릿에서도 중요한 부분입니다. 그럼 지금부터 이 글을 통해 어떻게 외부 CSS 파일을 연결하는지에 대해 알아보겠습니다.

CSS 파일을 HTML 파일과 연결하기

CSS 파일을 HTML 파일에 연결하기 위해서 HTML 파일의 head 요소 안에 link 요소를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

link 요소는 다양한 용도로 사용됩니다. 그리고 외부 CSS 스타일시트를 연결하기 위해서는 알맞은 속성을 사용하는 것이 중요합니다. 그럼 몇 가지 중요한 속성들을 살펴보도록 하겠습니다.

rel 속성

두 가지 필수 속성 중 첫 번째인 rel 속성입니다. 이 속성을 사용하여 브라우저에 현재 문서와 링크된 문서 사이의 연관 관계를 알려줄 수 있습니다.

rel="stylesheet"를 사용해 브라우저에 어떤 스타일시트를 사용할 것인지 알려줍니다.

href 속성

두 번째 필수 속성인 href는 가져올 파일을 지정하는 역할을 합니다.

보통의 경우에 CSS 파일과 HTML 파일은 같은 폴더 안에 있습니다. 이럴 때 href="style.css"를 사용할 수 있습니다.

만약 CSS 파일과 HTML 파일이 다른 폴더에 있다면 HTML 파일에서 CSS 파일로 가는 올바른 경로를 적어야 합니다.

예를 들어, CSS 파일이 HTML 파일의 형제 폴더 안에 있는 아래와 같은 상황입니다.

project --- index.html
            css ---------- style.css

이 경우에는 "css/styles.css" 를 경로로 적으면 됩니다.

type 속성

<link rel="stylesheet" href="style.css" type="text/css" />

type 속성을 사용하여 연결할 리소스의 타입을 정의합니다. 스타일시트의 경우 text/css 가 타입이 됩니다. 그러나 css가 웹에서 사용되는 유일한 스타일시트 언어이기 때문에, 타입은 포함하지 않는 것이 일반적입니다.

media 속성

<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)" />

media 속성은 선택적 속성으로, 언제 특정 스타일시트를 불러올지 지정하는 데에 사용합니다. 이 속성의 값은 반드시 미디어타입 / 미디어 쿼리여야 합니다.

이 속성은 다른 스크린 사이즈와 장치에 각각 다른 스타일을 적용하고자 할 때 유용합니다.
이것을 위해서는 각각의 CSS파일을 자체 link 요소와 함께 가져와야 합니다.

아래 문서들을 통해 미디어 쿼리를 위해 어떤 속성값들을 사용할 수 있는지 더 알아볼 수 있습니다.

• 반응형 웹사이트를 만들기 위해 CSS 미디어 쿼리 사용하기
• CSS 미디어 쿼리에서 너비의 범위 설정하기
• 미디어 쿼리 CSS 튜토리얼 - 표준 해상도, CSS 중단점, 디바이스별 분기점

결론

이 글에서는 link 요소와 href, src 속성을 사용하여 외부 스타일시트를 웹 페이지에 추가하는 방법을 배웠습니다.

또한 여러 개의 스타일시트를 불러오고 media 속성을 사용하여 언제 어떤 스타일시트를 적용할지에 대해 배웠습니다.

그럼 재밌게 웹 페이지를 만드세요!

이 글에서는 CSS로 버튼을 꾸미는 방법에 대해 알아보겠습니다.

제 목표는 각기 다른 CSS 규칙과 스타일들이 어떻게 적용되어 사용되는지 보여드리는 것입니다. 따라서 디자인적인 요소나 스타일링 방법은 다루지 않을 예정입니다.

이보다는, 스타일 자체가 어떻게 적용되고 어떠한 속성들이 흔히 사용되는지, 그리고 스타일과 속성이 어떻게 같이 사용되는지에 대해 개괄적으로 다루겠습니다.

첫째로는 HTML로 버튼을 만드는 법에 대해 배우고 버튼의 기본 스타일을 덮을 수 있는 방법에 대해 알려드리겠습니다. 마지막으로는 버튼의 세 가지 다른 상태에 대해 어떻게 스타일링할 수 있는지에 대해서 간략하게 살펴보겠습니다.

목차

1. HTML에서 버튼 만들기
2. 버튼의 기본 스타일 바꾸기
   1. 배경색 바꾸기
   2. 글자색 바꾸기
   3. 테두리 바꾸기
   4. 사이즈 바꾸기
3. 버튼 상태 꾸미기
   1. hover 상태 꾸미기
   2. focus 상태 꾸미기
   3. active 상태 꾸미기
4. 결론

그럼 시작해봅시다!

HTML에서 버튼 만들기

버튼을 만들기 위해서는 <button> 요소를 사용합니다.

<div> 요소처럼 포괄적인 태그를 사용하는 것보다 <button> 태그를 사용하는 것이 접근성 측면에서 더 좋고 시맨틱한 방법입니다.

아래의 index.html 파일에서 웹 페이지의 기본 구조를 만들고 버튼 하나를 추가했습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Button Style</title>
</head>
<body>
    <button type="button" class="button">Click me!</button>
</body>
</html>

<button type="button" class="button">Click me!</button> 코드를 분석해 봅시다.

• 가장 먼저 <button> 태그로 열고 </button> 태그로 닫음으로써 버튼을 추가했습니다.
• <button> 태그의 type="button" 속성은 명시적으로 클릭 가능한 버튼을 생성합니다. 이 버튼은 양식을 제출하기 위한 용도가 아니기 때문에 코드를 깔끔하게 작성하고 불필요한 결과를 초래하지 않기 위해 시맨틱하게 type="button"을 명시해 주는 것이 좋습니다.
• class="button" 속성은 별도의 CSS 파일에서 버튼을 스타일링하기 위해 사용될 예정입니다. 클래스명은 꼭 button일 필요는 없습니다. 예를 들어 class="btn"이라고 할 수도 있습니다.
• 버튼 내에 Click me!라는 텍스트가 보입니다.

버튼에 적용되는 모든 스타일은 별도의 style.css 파일 내에 들어가게 됩니다.

index.html에 <link rel="stylesheet" href="style.css"> 태그를 작성해서 두 개의 파일을 연결하면 HTML에 스타일을 적용할 수 있습니다.

style.css 파일에 버튼을 화면 중앙에 배치하는 스타일을 추가했습니다.

class="button"은 .button 선택자로 사용된 것을 확인할 수 있습니다. 버튼에 직접 스타일링할 수 있는 방법입니다.

* {
    box-sizing: border-box;
} 
body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}
.button {
    position: absolute;
    top:50%
}

위의 코드는 다음과 같은 결과를 보여줍니다.

버튼의 기본 스타일은 여러분이 사용하고 있는 브라우저에 따라 상이하게 보입니다.

위의 예시는 구글의 크롬 브라우저에서 보이는 버튼의 기본 스타일입니다.

버튼 기본 스타일 바꾸기

버튼 배경색 바꾸기

버튼의 배경 색은 CSS background-color 속성에 원하는 색상 값을 넣어 변경해 줄 수 있습니다.

.button 선택자의 배경색을 바꾸기 위해 background-color:#0a0a23;를 지정했습니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

버튼 글자색 바꾸기

글자의 기본 배경색은 검은색이라 어두운 배경색을 넣으면 글자가 잘 보이지 않습니다.

따라서 가독성을 위해 버튼의 배경색과 글자색에 충분한 대비를 주는 것이 좋습니다.

이제 글자색을 바꾸기 위해 color 속성을 사용해 줍니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
}

버튼 테두리 바꾸기

버튼의 회색 테두리가 보이시나요? 이 테두리는 버튼의 기본 스타일입니다.

border-color 속성을 사용해 테두리를 수정할 수 있습니다. background-color 값과 동일하게 설정해 주면 버튼의 배경색과 테두리 색상이 같아지겠죠.

버튼의 테두리를 모두 지우려면 border:none 속성을 지정해 줍니다.

.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
}

그리고 border-radius 속성을 다음과 같이 사용해 버튼의 테두리를 둥글게 만들어줄 수 있습니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
  }

또한 다음과 같이 box-shadow 속성을 사용해 버튼 주변에 살짝 어두운 그림자 효과를 줄 수도 있습니다.

 position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);

버튼 사이즈 바꾸기

버튼 테두리 내에 공간을 더 주고 싶으면 버튼에 padding을 추가합니다.

아래 코드에서 저는 버튼의 위, 아래, 오른쪽, 왼쪽에 padding을 15px씩 줬습니다.

그리고 min-height과 min-width 속성을 각각 사용해 최소 높이와 너비를 설정했습니다. 이렇게 하면 모든 종류의 디바이스에 따라 버튼 사이즈가 조정될 수 있습니다.

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none; 
    border-radius:10px; 
    padding:15px;
    min-height:30px; 
    min-width: 120px;
  }

버튼의 상태 스타일 바꾸기

버튼은 다음 세 가지 상태를 갖습니다.

• :hover
• :focus
• :active

이 세 가지 상태는 각각 다른 스타일을 갖는 것이 좋습니다.

아래 섹션에서는 각각의 상태가 무엇을 의미하며 어떻게 발생하는지에 대해 간단히 설명하겠습니다. 그리고 각각의 상태에 따라 버튼에 스타일을 줄 수 있는 방법에 대해 살펴보겠습니다.

`hover` 상태 꾸미기

:hover 상태는 사용자가 버튼을 선택하거나 클릭하지 않고 마우스나 트랙패드를 올릴 때 발생합니다.

마우스를 올렸을 때의 버튼 스타일을 바꾸고 싶을 때는 :hover라는 CSS 가상 클래스(의사 클래스) 선택자를 사용할 수 있습니다.

보통 :hover를 사용해 버튼의 배경색을 바꾸곤 합니다.

부드럽게 배경색을 전환하려면 :hover와 transition 속성을 같이 사용합니다.

transition 속성은 일반 상태에서 :hover 상태로 보다 부드럽게 바뀌는 transition을 만들어줍니다.

transition 속성이 없을 때보다 배경색이 부드럽게 바뀌기 때문에 사용자 경험이 개선될 것입니다.

.button:hover {
      background-color:#002ead;
      transition: 0.7s;
  }

위 예시에서 버튼이 hover 되었을 때 배경색을 더 옅게 만들기 위해 Hex 색상 코드를 사용했습니다.

일반 상태에서 :hover 상태로 바뀔 때 transition 속성의 도움을 받아 0.7s 동안의 딜레이를 넣었습니다. 이렇게 함으로써 기존 배경 색인 #0a0a23에서 #002ead로 더 천천히 바뀌게 되는 것이죠.

:hover 가상 클래스(의사 클래스)가 모바일 화면이나 앱에서 동작하지 않는다는 점에 유의하세요. hover 효과는 터치스크린이 아닌 데스크톱 웹 애플리케이션에서 사용하세요.

`focus` 상태 꾸미기

:focus 상태는 키보드를 사용하는 유저들에게 동작합니다 - 특히 Tab키(⇥)를 눌러 버튼이 포커스 되었을 때 활성화되는 상태입니다.

잘 따라오고 계신다면 Tab 키를 눌러 버튼을 포커스 했을 때 다음과 같이 보일 것입니다.

버튼이 포커스 되었을 때 쳐지는 얇은 파란색 테두리가 보이시나요?

브라우저는 키보드로 조작했을 때의 접근성 때문에 :focus 가상 클래스(의사 클래스)에 기본 스타일을 가지고 있습니다. outline을 같이 지워버리는 것은 권장하지 않습니다.

하지만 outline을 커스터마이징 해서 잘 보이게 할 수 있습니다.

먼저 outline 색상을 transparent로 설정합니다.

그리고 outline-style을 solid로 유지합니다. 마지막으로는 box-shadow 속성을 사용해서 요소가 포커스 되었을 때 원하는 색상을 추가할 수 있습니다.

 .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
}

원하는 효과에 따라 이번에도 transition 속성을 같이 사용해 줄 수 있습니다.

  .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
    transition: 0.7s;
}

`active` 상태 꾸미기

:active 상태는 마우스나 노트북 트랙 패드로 버튼을 눌렀을 때 활성화 됩니다.

:hover와 :focus 상태를 적용한 버튼을 누르면 어떤 효과가 발생하는지 확인해 봅시다.

:hover 상태의 스타일은 버튼을 클릭하기 전 마우스를 올렸을 때 적용됩니다.

버튼을 클릭하면 :focus 상태의 스타일도 적용됩니다. :active상태와 :focus 상태가 같이 적용되기 때문이죠.

하지만 :focus와 :active는 서로 다르다는 점에 유의하세요.

:focus 상태는 요소가 포커스 되었을 때 적용되며 :active 상태는 유저가 요소를 클릭하기 위해 잡거나 누르고 있을 때 적용되는 상태입니다.

유저가 버튼을 클릭할 때의 스타일을 바꾸기 위해서는 :active CSS 가상 선택자(의사 선택자)에 스타일을 적용합니다.

이번에는 유저가 버튼을 클릭하고 있을 때의 배경색을 바꾸어보았습니다.

.button:active {
    background-color: #ffbf00;
}

결론

수고하셨습니다! 여러분은 오늘 CSS로 버튼을 스타일링할 수 있는 기본 방법에 대해 학습했습니다.

버튼의 상태에 따라 스타일링할 수 있는 방법뿐만 아니라 버튼의 배경색과 글자색을 바꿀 수 있는 방법에 대해서도 살펴보았습니다.

웹 디자인에 대해 더 공부하고 싶다면 freeCodeCamp의 반응형 웹 디자인 자격증을 확인해 보세요. 이 쌍방향 수업에서는 15개의 토이 프로젝트와 5개의 최종 결과물을 만들며 HTML과 CSS를 학습할 수 있습니다.

위 자격증 과정은 아직 베타 버전이기 때문에 가장 안정적인 최신 버전은 이곳에서 확인해 볼 수 있습니다.

읽어주셔서 감사드립니다. 즐거운 코딩하세요!

많은 개발자들이 이미지 작업을 할 때 어려움을 느끼곤 합니다. 반응형과 정렬, 특히 이미지를 페이지 정중앙에 배치하는 것을 어려워합니다.

이번 글에서는 다양한 CSS 속성을 활용해 이미지를 수직 및 수평으로 가운데 정렬할 수 있는 가장 일반적인 방법을 소개해 드리려고 합니다.

CSS Position과 Display 속성은 이전 글에서 다룬 적이 있습니다. 아직 이 속성들이 낯설게 느껴지신다면, 이번 글을 읽기 전에 이전 포스트를 읽어보시길 추천해 드립니다.

관심 있는 분들을 위해 영상 버전도 첨부합니다:

수평적으로 이미지 가운데 정렬하기

먼저 CSS 속성을 사용해 이미지를 수평 중앙에 정렬할 수 있는 세 가지 방법에 대해 알아봅시다.

Text-Align

이미지를 가로 중앙에 배치할 수 있는 첫 번째 방법은 text-align 속성을 사용하는 것입니다. 하지만 이 방법은 이미지가 <div>와 같은 블록 레벨 컨테이너 안에 있을 때만 작동합니다:

<style>
    div {
        text-align: center;
    }
</style>
<div>
    <img src="your-image.jpg">
</div>

Margin: Auto

또 다른 방법은 margin: auto 속성을 사용하는 것입니다.

하지만 margin: auto 자체만으로는 이미지를 중앙 정렬할 수 없습니다. margin: auto를 사용하려면 다른 두 가지 속성을 함께 적용해야 합니다.

margin-auto 속성은 인라인 요소에 아무 영향을 미치지 않습니다. 따라서 인라인 요소인 <img> 태그의 경우 먼저 이를 블록 레벨 요소로 먼저 바꿔주어야 합니다.

img {
    margin: auto;
    display: block;
}

두 번째는 너비입니다. 왼쪽과 오른쪽 마진이 나머지 빈 공간에 자리를 잡아 자동으로 가운데 정렬이 적용되기 때문입니다. 단, 너비가 100%로 지정되지 않은 경우에 한해서요.

img {
    width: 60%;
    margin: auto;
    display: block;
}

Display: Flex

세 번째 방법은 display: flex를 사용하는 것입니다. 컨테이너 요소에 text-align 속성을 사용했던 것처럼 컨테이너에 display: flex를 똑같이 사용해 줄 수 있습니다.

하지만 display: flex만으로는 부족합니다. 컨테이너 요소는 justify-content라 불리는 추가적인 속성을 가져야 합니다:

div {
    display: flex;
    justify-content: center;
}
img {
    width: 60%;
}

justify-content는 이미지를 수평 중앙 정렬을 할 때 display: flex와 함께 사용되는 속성입니다.

마지막으로 이미지의 너비는 컨테이너의 넓이보다 작아야 합니다. 그렇지 않으면 이미지가 공간 너비의 100%를 차지하게 되므로 중앙 정렬을 할 수 없습니다.

주의할 점: display: flex 속성은 오래된 버전의 브라우저에서는 지원되지 않습니다. 구체적인 내용은 이 링크를 참고하세요.

수직적으로 이미지 가운데 정렬하기

Display: Flex

수직 정렬을 할 때도 display: flex가 큰 도움이 될 수 있습니다.

컨테이너 요소의 높이가 800px이고, 이미지의 높이가 500px밖에 되지 않는다고 가정해 봅시다.

div {
    display: flex;
    justify-content: center;
    height: 800px;
}
img {
    width: 60%;
    height: 500px;
}

이때는 align-items: center라는 한 줄의 코드만으로 중앙 정렬을 할 수 있습니다.

div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
}

align-items는 display: flex와 함께 사용될 때 요소를 수직으로 정렬하는 속성입니다.

Position: Absolute & Transform 속성

또 다른 방법은 position과 transform 속성을 함께 사용하는 것입니다. 이 방법은 조금 복잡하기 때문에 한 단계씩 해보겠습니다.

Step 1: Position Absolute 설정하기

먼저, 이미지의 position 속성을 static에서 absolute로 바꿔줍니다.

div {
    height: 800px;
    position: relative;
    background: red;
}
img {
    width: 80%;
    position: absolute;
}

이미지가 상대적으로 위치한 컨테이너 요소 안에 위치해야 하므로, 컨테이너 div에 position: relative 속성을 부여해줍니다.

Step 2: Top & Left 속성 부여하기

두 번째로, 이미지의 위와 왼쪽 속성을 50%로 설정합니다. 이렇게 하면 이미지의 시작 지점(좌상단)이 컨테이너의 중간 지점이 될 것입니다.

img {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
}

Step 3: Transform 속성 부여하기

위의 두 번째 단계까지 적용하면 이미지의 일부가 컨테이너의 밖으로 빠져나오게 됩니다. 이제 이미지를 다시 돌려놓아야 합니다.

transform 속성으로 X축, Y축 모두 -50%를 적용하면 비로소 이미지가 중앙에 배치됩니다.

img {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

이 외에도 다른 방법들이 더 있지만 가장 일반적으로 사용되는 방법들을 소개해 드렸습니다. 이 글이 이미지 가운데 정렬을 이해하는 데 도움이 되었으면 좋겠습니다. 영어 원문을 읽고 싶으시다면 How to Center an Image Vertically and Horizontally with CSS를 읽어보세요.

웹 개발을 더 공부하고 싶으시다면 제 유튜브 채널을 방문해 주세요.

읽어주셔서 감사합니다!