HTML 요소를 적절하게 배치함에 있어 테두리가 있다면 요소의 영역을 시각적으로 표현할 수 있습니다. 작게는 텍스트의 단락에서부터 그림이나 표, 양식 등 형태를 가진 요소에게 다양하게 테두리를 적용할 수 있는데요. CSS의 border라는 속성을 통해 테두리를 적용할 수 있습니다. 이번 포스팅에서는 border 사용법에 대해 알아보도록 하겠습니다. 요소 테두리(border) 설정하기 border 속성은 요소에 테두리를 추가하는 데 사용됩니다. border 사용 예제 See the Pen 테두리1 by wjdxo513 (@wjdxo513) on CodePen. 기본적으로 테두리만 사용하시려고 하신다면 위와 같이 html style border에 원하는 값을 넣어주시면 됩니다. 참고로 border-style..
이전 포스팅에서 그라데이션을 만드는 두가지 방법에 대해 알아보았습니다. 이 선형 그라데이션과 원형 그라데이션은 패턴을 한번 만든 후 요소를 채울 만큼 반복해서 표시할 수 있는데요. 이 기법을 활용하면 그라데이션으로 패턴을 만들 수 있습니다. 이번 포스팅에서는 그라데이션을 활용하여 패턴을 만드는 방법에 대해 알아보도록 하겠습니다. ※ 선형, 원형 그라데이션을 만드는 방법이 궁금하시다면 아래 글을 참고해 주세요. [HTML/CSS] 배경에 선형 그라데이션 효과 넣기(linear-gradient) [HTML/CSS] 배경에 원형 그라데이션 효과 넣기(radial-gradient) 선형 그라데이션을 활용한 패턴 만들기 repeating-linear-gradient : 선형 그라데이션 반복하기 See the Pe..
그라데이션(Gradient) 효과는 여러 색상을 서서히 혼합하여 부드러운 색상 전환 효과를 만드는 것으로 크게 선형 그라데이션, 원형 그라데이션 두 가지 형태로 나뉩니다. 이 중 이번 포스팅에서는 원형 그라데이션을 넣는 방법에 대해 알아보겠습니다. CSS3에서는 radial-gradient 함수를 활용하여 선형 그라데이션을 넣을 수 있습니다. 원형 그라데이션 만들기 (radial-gradient) 원형 그라데이션은 색상이 가운데 중심에서부터 원이나 타원의 형태로 바깥으로 색상이 변하는 형태를 말하며 radial-gradient() 함수를 사용하면 배경에 원형 그라데이션을 적용할 수 있습니다. radial-gradient 사용법 radial-gradient([최종모양] [크기] at [위치], color1..
그라데이션(Gradient) 효과는 여러 색상을 서서히 혼합하여 부드러운 색상 전환 효과를 만드는 것으로 크게 선형 그라데이션, 원형 그라데이션 두 가지 형태로 나뉩니다. 이 중 이번 포스팅에서는 선형 그라데이션을 넣는 방법에 대해 알아보겠습니다. CSS3에서는 liner-gradient 함수를 활용하여 선형 그라데이션을 넣을 수 있습니다. 선형 그라데이션 만들기(linear-gradient) 선형 그라데이션은 색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 형태를 말하며 liner-gradient() 함수를 사용하면 배경에 선형 그라데이션을 적용할 수 있습니다. linear-gradient 사용법 linear-gradient([방향], color1, color2, color3 ...) See..
웹 사이트를 꾸미다 보면 때로는 배경에 단순히 배경에 색을 넣는 것보다는 이미지를 넣어 디자인을 하는 것이 필요한 경우가 있습니다. CSS의 background-image 속성을 사용하면 웹에서 사용이 가능한 jpg나 gif, png 파일을 사용하여 배경 이미지를 설정할 수 있으며, 다양한 크기의 이미지를 스케일링하여 사용할 수 있습니다. 이번 포스팅에서는 웹 문서의 배경에 이미지를 설정하는 방법에 대해 알아보도록 하겠습니다. 배경 이미지 지정하기 (background-image) body {background-image : url('이미지 URL');} #area {background-image : url('이미지 URL');} .area {background-image : url('이미지 URL');..
HTML과 CSS를 이용하여 웹 문서를 만들어감에 있어서 배경(background)의 설정은 매우 중요합니다. 배경을 설정함으로써 전체적인 웹 페이지의 느낌이나 분위기를 결정할 수 있기 때문입니다. 웹 문서 전체에 배경을 넣을 수 있기도 하고 텍스트, 목록 등 원하는 부분에만 배경을 설정할 수 있습니다. 이번 포스팅에서는 배경색 설정에 대해 알아보도록 하겠습니다. 배경색 지정하기 (background-color) 배경 색상을 지정하는 4가지 방법 background-color:#000000; (HAX코드 16진수 사용) background-color:rgb(0,0,0); (RGB 코드 사용) background-color:rgba(0,0,0,0); (RGBA 코드 사용) background-color:b..
웹 문서에서 색상을 바꿀 일이 있으면 RGB 색상 코드값이 필요한데요. 이때 유용하게 사용할 수 있는 RGB 색상코드를 제공하는 사이트들이 있습니다. 이번 포스팅에서는 RGB 코드값을 쉽게 확인할 수 있는 대표적인 사이트를 몇 가지 추천해드리고자 합니다. 1. 네이버 색상 팔레트 가장 많은 사람들이 사용할 수 있는 네이버 색상 팔레트입니다. 네이버에서 색상 팔레트라고 치면 특정 색상의 HAX코드와 RGB 색상을 확인하실 수 있습니다. 2. https://html-color-codes.info/Korean/ 위 사이트에서도 특정 색상의 HAX코드를 확인하실 수 있습니다. 네이버 색상 팔레트보다 조금 더 많은 색상의 코드를 확인하실 수 있으니 조금 더 상세한 색을 사용하고 싶다면 위의 사이트를 추천드립니다...
웹 사이트는 다양한 색상을 조합하여 디자인하게 됩니다. 그렇다면 웹에서 색상은 어떻게 넣을 수 있을까요? 웹 문서에서 색상을 표현하는 방법은 RGB, HSL, HWB, CMYK 등 여러가지 방법이 있는데 이 중에서 RGB 방법을 가장 많이 사용합니다. 이번 포스팅에서는 RGB 표현법에 대해 알아보도록 하겠습니다. RGB 색 모델 웹에서 색상의 표현은 RGB 색상을 표준으로 사용합니다. RGB 색 모델은 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue)을 이용하여 색상을 표현하는 방식입니다. 이 세 가지 색을 조합하여 세상의 모든 색상을 표현할 수 있습니다. 각 색상은 0부터 255까지의 숫자로 표현됩니다. 0은 해당 색이 전혀 들어있지 않음을 의미하고, 255는 해당 색이 가장 강함을 의..