웹 사이트는 다양한 색상을 조합하여 디자인하게 됩니다. 그렇다면 웹에서 색상은 어떻게 넣을 수 있을까요? 웹 문서에서 색상을 표현하는 방법은 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 : 기본값으로 ..
텍스트가 많은 문서일 때는 문단의 첫 글자를 들여쓰게 되면 문단의 시작이 눈에 확 들어오기 때문에 가독성이 향상됩니다. 이번 포스팅에서는 웹 문서에서 문단을 들여 쓸거나 내어쓸 수 있는 text-indent 속성에 대해 알아보도록 하겠습니다. 텍스트 들여쓰기 See the Pen 텍스트 들여쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 양수의 크기나 백분율을 넣으면 해당 값만큼 들여쓰기를 할 수 있습니다. 백분율로 크기를 설정하였을 경우에는 부모 요소의 너비가 달라지면 들여쓰기 값도 달라집니다. 텍스트 내어쓰기 See the Pen 텍스트 내어쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 음수의 크기나..
html 태그에서 텍스트 관련 속성 중에서 가장 많이 사용하는 속성 중에 하나가 바로 이번 포스팅에서 서술할 (text-align) 속성일 것입니다. 이번 포스팅에서는 text-align 속성을 사용하여 텍스트를 좌측, 중앙, 우측 정렬을 하는 방법에 대해 알아보도록 하겠습니다. 텍스트 정렬하기(text-align) left : 왼쪽 정렬 right: 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 match-partent : 부모 요소에 따라 문단 정렬 왼쪽 정렬 See the Pen 왼쪽 정렬 by wjdxo513 (@wjdxo513) on CodePen. te..
font 속성 - 간략하게 요약하여 표현하기 [HTML/CSS] 글자색 변경하기 (font-color) [HTML/CSS] 글자 굵기 변경하기 (font-weight) [HTML/CSS] 글자 이탤릭체, 밑줄, 취소선 변경하기 [HTML/CSS] 대/소문자 변경하기 (text-transform) [HTML/CSS] 작은 대문자로 표시하기 (font-variant) [HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) [HTML/CSS] 구글 웹 폰트 사용하기 (@font-face) 앞에서 포스팅 했던 위의 소스들을 여러개 적용하기 위해서 글꼴 스타일을 하나하나 코딩하려고 하면 소스가 너무 지저분해질 것입니다. See the Pen Untitled by wjdxo513 (@wjdxo513..
[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) 이전 포스팅에서는 웹 문서에서 시스템 폰트를 사용하는 방법에 대해 알아보았습니다. 시스템 폰트는 속도가 빠르다는 장점이 있지만 사용자 디바이스에 설치가 되어있어야 하기에 다양한 폰트는 사용하기가 힘듭니다. 또한 설정한 시스템 폰트가 존재하지 않는다면 적용되지 않는 문제도 있죠. 하지만 웹 폰트를 사용하면 모든 디바이스에 예쁜 디자인의 폰트를 적용시킬 수 있습니다. 이번 포스팅에서는 구글 웹 폰트를 사용하는 방법에 대해 알아보도록 하겠습니다. 웹 폰트(Web Font)란? 온라인 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 웹 전용 폰트를 말합니다. 이렇게 한다면 방문자의 디바이스에 특정 폰트의 설치 여부와 상관없이 동..
문장의 가독성에 영향을 끼치는 요소가 무엇이냐고 물어본다면 저는 가장 먼저 글꼴이라고 말할 수 있을 정도로 텍스트 가독성에 있어 글꼴은 매우 중요한 요소입니다. 웹 문서에서 글꼴(폰트)은 font-family 속성을 통해 바꿀 수 있습니다. font-family는 말 그대로 폰트들의 집합, 즉 여러 개의 글꼴을 한 군데 모아둔 것으로 생각하시면 됩니다. 이번 포스팅에서는 웹 문서에서 웹 문서의 글꼴을 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 글꼴(폰트) 변경하기 font family와 generic family font family : 특정 글꼴 (arial, courier, 나눔고딕, 궁서, 굴림 등) generic family : 비슷한 모양을 가지는 글꼴의 집합 (serif, sans-se..
웹문서의 영문자 글꼴에서는 '작은 대문자'라는 설정도 할 수 있습니다. 여기서 작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것인데요. font-variant 속성으로 지정할 수 있습니다. 작은 대문자로 표시하기 See the Pen 작은 대문자로 표시하기1 by wjdxo513 (@wjdxo513) on CodePen. font-variant 속성 값 normal : 기본 값 small-caps : 작은 대문자로 표시하기 font-variant 속성에 small-caps 값을 사용하면 위와 같이 작은 대문자로 표시됩니다. 한글(영어) 형태로 문장을 기술할 때 사용해주면 좋습니다. CSS 처리 See the Pen 작은 대문자로 표시하기2 by wjdxo513 (@wjdxo513) on Cod..
영문자의 대/소문자를 일괄적으로 변경해야 할 경우에는 CSS의 text-transform 속성을 이용하시면 됩니다. 이번 포스팅에서는 텍스트의 대/소문자를 변형하는 text-transform 속성에 대해 알아보도록 하겠습니다. 문장 대/소문자 변경하기 See the Pen 대/소문자 변경하기1 by wjdxo513 (@wjdxo513) on CodePen. text-trasnform 속성 값 none : 기본값 capitalize : 문장의 첫글자만 대문자로 변형 uppercase : 문장 대문자로 변형 lowercase : 문장 소문자로 변형 ※ HTML 태그는 , , , , , 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다. CSS 처리 See the Pen 대/소문자 변경하기2 by wjdxo51..