웹 문서에서 목록(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..