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는 해당 색이 가장 강함을 의..
웹 문서에서 목록(List)으로 정보를 정리해서 보여주면 보는 사람들로 하여금 정리가 잘 된 화면으로 줄 수 있습니다. 이번 포스팅에서는 웹 문서에서 리스트를 만들 수 있는 여러 가지 속성에 대해 알아보도록 하겠습니다. 리스트 만들기 웹 문서에서 목록(List)은 UL, OL, DL, LI 태그들로 만들 수 있는데요. 만드는 방법은 제가 예전에 포스팅해 둔 내용이 있어서 링크를 걸어둘테니 참고해 주기 바랍니다. [Html] UL 태그, OL태그, DL태그, LI태그 사용법 목록의 기호와 번호 스타일 지정하기 (list-style-type) HTML에서 리스트를 작성할 때, 항목의 스타일을 변경하는 방법 중 하나는 list-style 속성을 사용하는 것입니다. 이 속성은 UL, OL, DI 태그에 적용됩니..
white-space란 HTML 요소 내에서 빈칸, 탭, 개행 등을 일컫는 용어입니다. 즉, 공백이나 개행 문자 등을 말합니다. 이 공백이나 개행 문자는 웹 페이지나 문서의 레이아웃을 지정할 때 중요한 역할을 합니다. 이번 포스팅에서는 white-space의 여러 속성과 사용 방법에 대해 알아보겠습니다. 공백과 줄 바꿈 지정하기(white-space) normal: 여러 개의 공백이나 개행 문자를 하나로 합칩니다. (기본 값) nowrap: 공백이나 개행 문자를 무시합니다. pre: 원본 텍스트 그대로 표시합니다. pre-wrap: 원본 텍스트 그대로 표시하지만, 줄 바꿈을 인식합니다. pre-line: 줄 바꿈 문자를 기준으로 줄을 나눕니다. normal(가로의 오른쪽 끝에 닿으면 자동으로 줄 바꿈 합..
웹 사이트에 텍스트를 표시할 때 텍스트가 할당된 공간을 초과하는 경우가 있을 수 있습니다. 이로 인해서 웹 사이트가 깨져 보이는 등의 문제가 있을 수 있는데요. 이 문제를 해결하기 위해 CSS는 overflow와 text-overflow 속성을 사용할 수 있습니다. 이 overflow, text-overflow 속성을 사용하면 텍스트를 오버플로 처리할 수 있습니다. 이번 포스팅에서는 웹 페이지에서 넘치는 콘텐츠를 표시하는 방법에 대해 알아보도록 하겠습니다. 넘치는 텍스트 표기하기 overflow visible : 넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다. (기본값) hidden : 넘치는 콘텐츠를 자르고 보이지 않게 처리합니다. auto : 넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바..
한글, 영어를 비롯하여 대부분의 언어들은 보통 왼쪽 -> 오른쪽으로 쓰는것이 표준입니다. 웹 문서 또한 이를 기준으로 왼쪽 -> 오른쪽으로 텍스트가 작성되죠 하지만 아랍어의 경우에는 언어의 방향이 오른쪽 -> 왼쪽입니다. 이럴때는 어떻게 해야할까요? direction 속성을 사용하면 텍스트를 쓰는 방향을 왼쪽 -> 오른쪽으로 바꿀 수 있습니다. 이번 포스팅에서는 direction 속성에 대해 알아보도록 하겠습니다. 텍스트 쓰는 방향 지정하기 (direction) 사용법 direction: ltr | rtl ltr : 왼쪽에서 오른쪽으로 텍스트를 표시합니다. (기본 값) rtl : 오른쪽에서 왼쪽으로 텍스트를 표시합니다. ※ 다만 한글이나 영어처럼 왼쪽에서 오른쪽에서 쓰는 언어일 경우 속성값으로 rtl을 ..
웹 문서의 텍스트에 그림자를 설정하면 텍스트를 더욱 강조시켜 눈에 띄게 만들 수 있습니다. 사이트 제목같이 강조를 해야 할 텍스트에 사용하면 좋은데요. text-shadow 속성은 텍스트에 그림자 효과를 추가하여 입체적으로 만들어 줍니다. 텍스트에 그림자 효과 넣기 (text-shadow) 사용법 text-shadow: horizontality vertical blur color | none | initial | inherit horizontality : 그림자 수평 위치 (필수) vertical : 그림자 수직 위치 (필수) blur : 흐림 정도 (값을 정하지 않으면 0) color : 그림자 색 (값을 정하지 않으면 브라우저 기본값) none : 그림자 효과를 없앤다. initial : 기본값으로 ..