Web/HTML, CSS(78)
-
Web/HTML, CSS
2023.02.18
1
[HTML/CSS] 넘치는 텍스트 표기하기 (overflow, text-overflow)
웹 사이트에 텍스트를 표시할 때 텍스트가 할당된 공간을 초과하는 경우가 있을 수 있습니다. 이로 인해서 웹 사이트가 깨져 보이는 등의 문제가 있을 수 있는데요. 이 문제를 해결하기 위해 CSS는 overflow와 text-overflow 속성을 사용할 수 있습니다. 이 overflow, text-overflow 속성을 사용하면 텍스트를 오버플로 처리할 수 있습니다. 이번 포스팅에서는 웹 페이지에서 넘치는 콘텐츠를 표시하는 방법에 대해 알아보도록 하겠습니다. 넘치는 텍스트 표기하기 overflow visible : 넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다. (기본값) hidden : 넘치는 콘텐츠를 자르고 보이지 않게 처리합니다. auto : 넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바..
-
Web/HTML, CSS
2023.02.12
1
[HTML/CSS] 텍스트 쓰는 방향 지정하기 (direction) +아랍어
한글, 영어를 비롯하여 대부분의 언어들은 보통 왼쪽 -> 오른쪽으로 쓰는것이 표준입니다. 웹 문서 또한 이를 기준으로 왼쪽 -> 오른쪽으로 텍스트가 작성되죠 하지만 아랍어의 경우에는 언어의 방향이 오른쪽 -> 왼쪽입니다. 이럴때는 어떻게 해야할까요? direction 속성을 사용하면 텍스트를 쓰는 방향을 왼쪽 -> 오른쪽으로 바꿀 수 있습니다. 이번 포스팅에서는 direction 속성에 대해 알아보도록 하겠습니다. 텍스트 쓰는 방향 지정하기 (direction) 사용법 direction: ltr | rtl ltr : 왼쪽에서 오른쪽으로 텍스트를 표시합니다. (기본 값) rtl : 오른쪽에서 왼쪽으로 텍스트를 표시합니다. ※ 다만 한글이나 영어처럼 왼쪽에서 오른쪽에서 쓰는 언어일 경우 속성값으로 rtl을 ..
-
Web/HTML, CSS
2023.02.11
[HTML/CSS] 텍스트에 그림자 효과 넣기 (text-shadow)
웹 문서의 텍스트에 그림자를 설정하면 텍스트를 더욱 강조시켜 눈에 띄게 만들 수 있습니다. 사이트 제목같이 강조를 해야 할 텍스트에 사용하면 좋은데요. text-shadow 속성은 텍스트에 그림자 효과를 추가하여 입체적으로 만들어 줍니다. 텍스트에 그림자 효과 넣기 (text-shadow) 사용법 text-shadow: horizontality vertical blur color | none | initial | inherit horizontality : 그림자 수평 위치 (필수) vertical : 그림자 수직 위치 (필수) blur : 흐림 정도 (값을 정하지 않으면 0) color : 그림자 색 (값을 정하지 않으면 브라우저 기본값) none : 그림자 효과를 없앤다. initial : 기본값으로 ..
-
Web/HTML, CSS
2023.02.04
[HTML/CSS] 텍스트 들여쓰기 / 내어쓰기 (text-indent)
텍스트가 많은 문서일 때는 문단의 첫 글자를 들여쓰게 되면 문단의 시작이 눈에 확 들어오기 때문에 가독성이 향상됩니다. 이번 포스팅에서는 웹 문서에서 문단을 들여 쓸거나 내어쓸 수 있는 text-indent 속성에 대해 알아보도록 하겠습니다. 텍스트 들여쓰기 See the Pen 텍스트 들여쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 양수의 크기나 백분율을 넣으면 해당 값만큼 들여쓰기를 할 수 있습니다. 백분율로 크기를 설정하였을 경우에는 부모 요소의 너비가 달라지면 들여쓰기 값도 달라집니다. 텍스트 내어쓰기 See the Pen 텍스트 내어쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 음수의 크기나..
-
Web/HTML, CSS
2023.02.03
[HTML/CSS] 텍스트 정렬하기 (text-align) 왼쪽, 가운데, 오른쪽 정렬
html 태그에서 텍스트 관련 속성 중에서 가장 많이 사용하는 속성 중에 하나가 바로 이번 포스팅에서 서술할 (text-align) 속성일 것입니다. 이번 포스팅에서는 text-align 속성을 사용하여 텍스트를 좌측, 중앙, 우측 정렬을 하는 방법에 대해 알아보도록 하겠습니다. 텍스트 정렬하기(text-align) left : 왼쪽 정렬 right: 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 match-partent : 부모 요소에 따라 문단 정렬 왼쪽 정렬 See the Pen 왼쪽 정렬 by wjdxo513 (@wjdxo513) on CodePen. te..
-
Web/HTML, CSS
2023.01.27
3
[HTML/CSS] font 속성 - 글꼴 속성을 한꺼번에 지정하기
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..
-
Web/HTML, CSS
2023.01.19
[HTML/CSS] 구글 웹 폰트 사용하기 (@font-face)
[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) 이전 포스팅에서는 웹 문서에서 시스템 폰트를 사용하는 방법에 대해 알아보았습니다. 시스템 폰트는 속도가 빠르다는 장점이 있지만 사용자 디바이스에 설치가 되어있어야 하기에 다양한 폰트는 사용하기가 힘듭니다. 또한 설정한 시스템 폰트가 존재하지 않는다면 적용되지 않는 문제도 있죠. 하지만 웹 폰트를 사용하면 모든 디바이스에 예쁜 디자인의 폰트를 적용시킬 수 있습니다. 이번 포스팅에서는 구글 웹 폰트를 사용하는 방법에 대해 알아보도록 하겠습니다. 웹 폰트(Web Font)란? 온라인 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 웹 전용 폰트를 말합니다. 이렇게 한다면 방문자의 디바이스에 특정 폰트의 설치 여부와 상관없이 동..
-
Web/HTML, CSS
2023.01.18
[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family)
문장의 가독성에 영향을 끼치는 요소가 무엇이냐고 물어본다면 저는 가장 먼저 글꼴이라고 말할 수 있을 정도로 텍스트 가독성에 있어 글꼴은 매우 중요한 요소입니다. 웹 문서에서 글꼴(폰트)은 font-family 속성을 통해 바꿀 수 있습니다. font-family는 말 그대로 폰트들의 집합, 즉 여러 개의 글꼴을 한 군데 모아둔 것으로 생각하시면 됩니다. 이번 포스팅에서는 웹 문서에서 웹 문서의 글꼴을 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 글꼴(폰트) 변경하기 font family와 generic family font family : 특정 글꼴 (arial, courier, 나눔고딕, 궁서, 굴림 등) generic family : 비슷한 모양을 가지는 글꼴의 집합 (serif, sans-se..
-
Web/HTML, CSS
2023.01.17
1
[HTML/CSS] 작은 대문자로 표시하기 (font-variant)
웹문서의 영문자 글꼴에서는 '작은 대문자'라는 설정도 할 수 있습니다. 여기서 작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것인데요. 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..
-
Web/HTML, CSS
2023.01.16
1
[HTML/CSS] 대/소문자 변경하기 (text-transform)
영문자의 대/소문자를 일괄적으로 변경해야 할 경우에는 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..
-
Web/HTML, CSS 2023.02.18 1[HTML/CSS] 넘치는 텍스트 표기하기 (overflow, text-overflow) 웹 사이트에 텍스트를 표시할 때 텍스트가 할당된 공간을 초과하는 경우가 있을 수 있습니다. 이로 인해서 웹 사이트가 깨져 보이는 등의 문제가 있을 수 있는데요. 이 문제를 해결하기 위해 CSS는 overflow와 text-overflow 속성을 사용할 수 있습니다. 이 overflow, text-overflow 속성을 사용하면 텍스트를 오버플로 처리할 수 있습니다. 이번 포스팅에서는 웹 페이지에서 넘치는 콘텐츠를 표시하는 방법에 대해 알아보도록 하겠습니다. 넘치는 텍스트 표기하기 overflow visible : 넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다. (기본값) hidden : 넘치는 콘텐츠를 자르고 보이지 않게 처리합니다. auto : 넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바..
-
Web/HTML, CSS 2023.02.12 1[HTML/CSS] 텍스트 쓰는 방향 지정하기 (direction) +아랍어 한글, 영어를 비롯하여 대부분의 언어들은 보통 왼쪽 -> 오른쪽으로 쓰는것이 표준입니다. 웹 문서 또한 이를 기준으로 왼쪽 -> 오른쪽으로 텍스트가 작성되죠 하지만 아랍어의 경우에는 언어의 방향이 오른쪽 -> 왼쪽입니다. 이럴때는 어떻게 해야할까요? direction 속성을 사용하면 텍스트를 쓰는 방향을 왼쪽 -> 오른쪽으로 바꿀 수 있습니다. 이번 포스팅에서는 direction 속성에 대해 알아보도록 하겠습니다. 텍스트 쓰는 방향 지정하기 (direction) 사용법 direction: ltr | rtl ltr : 왼쪽에서 오른쪽으로 텍스트를 표시합니다. (기본 값) rtl : 오른쪽에서 왼쪽으로 텍스트를 표시합니다. ※ 다만 한글이나 영어처럼 왼쪽에서 오른쪽에서 쓰는 언어일 경우 속성값으로 rtl을 ..
-
Web/HTML, CSS 2023.02.11[HTML/CSS] 텍스트에 그림자 효과 넣기 (text-shadow) 웹 문서의 텍스트에 그림자를 설정하면 텍스트를 더욱 강조시켜 눈에 띄게 만들 수 있습니다. 사이트 제목같이 강조를 해야 할 텍스트에 사용하면 좋은데요. text-shadow 속성은 텍스트에 그림자 효과를 추가하여 입체적으로 만들어 줍니다. 텍스트에 그림자 효과 넣기 (text-shadow) 사용법 text-shadow: horizontality vertical blur color | none | initial | inherit horizontality : 그림자 수평 위치 (필수) vertical : 그림자 수직 위치 (필수) blur : 흐림 정도 (값을 정하지 않으면 0) color : 그림자 색 (값을 정하지 않으면 브라우저 기본값) none : 그림자 효과를 없앤다. initial : 기본값으로 ..
-
Web/HTML, CSS 2023.02.04[HTML/CSS] 텍스트 들여쓰기 / 내어쓰기 (text-indent) 텍스트가 많은 문서일 때는 문단의 첫 글자를 들여쓰게 되면 문단의 시작이 눈에 확 들어오기 때문에 가독성이 향상됩니다. 이번 포스팅에서는 웹 문서에서 문단을 들여 쓸거나 내어쓸 수 있는 text-indent 속성에 대해 알아보도록 하겠습니다. 텍스트 들여쓰기 See the Pen 텍스트 들여쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 양수의 크기나 백분율을 넣으면 해당 값만큼 들여쓰기를 할 수 있습니다. 백분율로 크기를 설정하였을 경우에는 부모 요소의 너비가 달라지면 들여쓰기 값도 달라집니다. 텍스트 내어쓰기 See the Pen 텍스트 내어쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 음수의 크기나..
-
Web/HTML, CSS 2023.02.03[HTML/CSS] 텍스트 정렬하기 (text-align) 왼쪽, 가운데, 오른쪽 정렬 html 태그에서 텍스트 관련 속성 중에서 가장 많이 사용하는 속성 중에 하나가 바로 이번 포스팅에서 서술할 (text-align) 속성일 것입니다. 이번 포스팅에서는 text-align 속성을 사용하여 텍스트를 좌측, 중앙, 우측 정렬을 하는 방법에 대해 알아보도록 하겠습니다. 텍스트 정렬하기(text-align) left : 왼쪽 정렬 right: 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 match-partent : 부모 요소에 따라 문단 정렬 왼쪽 정렬 See the Pen 왼쪽 정렬 by wjdxo513 (@wjdxo513) on CodePen. te..
-
Web/HTML, CSS 2023.01.27 3[HTML/CSS] font 속성 - 글꼴 속성을 한꺼번에 지정하기 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..
-
Web/HTML, CSS 2023.01.19[HTML/CSS] 구글 웹 폰트 사용하기 (@font-face) [HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) 이전 포스팅에서는 웹 문서에서 시스템 폰트를 사용하는 방법에 대해 알아보았습니다. 시스템 폰트는 속도가 빠르다는 장점이 있지만 사용자 디바이스에 설치가 되어있어야 하기에 다양한 폰트는 사용하기가 힘듭니다. 또한 설정한 시스템 폰트가 존재하지 않는다면 적용되지 않는 문제도 있죠. 하지만 웹 폰트를 사용하면 모든 디바이스에 예쁜 디자인의 폰트를 적용시킬 수 있습니다. 이번 포스팅에서는 구글 웹 폰트를 사용하는 방법에 대해 알아보도록 하겠습니다. 웹 폰트(Web Font)란? 온라인 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 웹 전용 폰트를 말합니다. 이렇게 한다면 방문자의 디바이스에 특정 폰트의 설치 여부와 상관없이 동..
-
Web/HTML, CSS 2023.01.18[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) 문장의 가독성에 영향을 끼치는 요소가 무엇이냐고 물어본다면 저는 가장 먼저 글꼴이라고 말할 수 있을 정도로 텍스트 가독성에 있어 글꼴은 매우 중요한 요소입니다. 웹 문서에서 글꼴(폰트)은 font-family 속성을 통해 바꿀 수 있습니다. font-family는 말 그대로 폰트들의 집합, 즉 여러 개의 글꼴을 한 군데 모아둔 것으로 생각하시면 됩니다. 이번 포스팅에서는 웹 문서에서 웹 문서의 글꼴을 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 글꼴(폰트) 변경하기 font family와 generic family font family : 특정 글꼴 (arial, courier, 나눔고딕, 궁서, 굴림 등) generic family : 비슷한 모양을 가지는 글꼴의 집합 (serif, sans-se..
-
Web/HTML, CSS 2023.01.17 1[HTML/CSS] 작은 대문자로 표시하기 (font-variant) 웹문서의 영문자 글꼴에서는 '작은 대문자'라는 설정도 할 수 있습니다. 여기서 작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것인데요. 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..
-
Web/HTML, CSS 2023.01.16 1[HTML/CSS] 대/소문자 변경하기 (text-transform) 영문자의 대/소문자를 일괄적으로 변경해야 할 경우에는 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..