어제 오늘 내일

지난 번에는 텍스트의 줄높이, 즉 행간격을 조정하는 방법을 알아보았습니다. [HTML/CSS] 텍스트 줄간격 설정하기 (line-height) [HTML/CSS] 텍스트 줄간격 설정하기 (line-height) CSS의 line-height 속성을 지정하여 텍스트의 줄간격(줄 높이)을 지정할 수 있습니다. line-height CSS의 line-height 속성은 텍스트 라인의 높이를 지정합니다. 주로, 줄간격을 지정하는데 많이 사용됩니다. hianna.tistory.com 자간 간격 설정하기 자간(글자 간격) 또는 단어 간격을 조정하기 위해서 CSS의 letter-spacing, word-spacing 속성을 사용할 수 있습니다. letter-spacing 글자 사이의 간격을 조정합니다. 양수 값을 사..

CSS의 line-height 속성을 지정하여 텍스트의 줄간격(줄 높이)을 지정할 수 있습니다. line-height CSS의 line-height 속성은 텍스트 라인의 높이를 지정합니다. 주로, 줄간격을 지정하는데 많이 사용됩니다. 허용 값 number - 해당 element의 폰트 사이즈를 기준으로 계산됩니다. ex) 폰트 사이즈 * number length - px, em 등의 단위를 사용합니다. percentage - 폰트 사이즈를 기준으로 계산됩니다. ex) 폰트사이즈 * percentage / 100 keyword "normal" - 브라우저에 지정된 값으로 설정됩니다. 위 허용 값들 중 'number'를 사용하기를 추천합니다. 줄간격 설정하기 default 기본값 default 기본값 def..

CSS의 text-indent 속성을 사용하면 텍스트 단락의 들여쓰기와 내어쓰기의 정도를 설정할 수 있습니다. text-indent 속성 CSS의 text-indent 속성을 사용하면, 블록에서 텍스트 앞에 놓이는 공간의 길이를 설정할 수 있습니다. 기본값 : 0 허용값 length : px, em 등 percentage : ex) 10% 등 값이 양수일 경우, 들여쓰기가 됩니다. 값이 음수일 경우, 내어쓰기가 됩니다. 단락 들여쓰기 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나서 반갑습니다. 안녕하세요. 만나..

cursor 웹에서 마우스 커서의 모양은 자동으로 변경됩니다. 링크가 있을 경우 손가락 모양으로, 텍스트를 입력하는 란에서는 텍스트 입력 커서로 자동으로 변경됩니다. 마우스 커서를 사용자 임의로 변경할 수도 있습니다. 이때, CSS의 cursor 속성을 사용합니다. 예제 손모양 로딩중 돋보기 .pointer { cursor: pointer; } .wait { cursor: wait; } .zoomin { cursor: zoom-in; } 위 예제는 각 텍스트에 마우스 포인터를 가져가면 cursor 속성에 정의된 값에 따라 커서의 모양이 변경됩니다. (pointer, wait, zoom-in) 좀 더 많은, 커서의 모양은 다음의 MSDN 문서를 참고하세요. https://developer.mozilla.o..

CSS를 사용하여 텍스트의 색과 배경색을 지정할 수 있습니다. CSS로 텍스트 배경색 지정하기 (background-color) 텍스트의 배경색을 지정하기 위해서 CSS의 background-color 속성을 사용할 수 있습니다. background-color: yellow; background-color: #ffff00; 예제 배경색은 노랑, 초록, 파랑입니다. .y { background-color: yellow; } .g { background-color: #00FF00; } .b { background-color: blue; } CSS로 텍스트 색 지정하기 (color) 위 예제를 보면, 배경색을 파란색과 같이 진한 색으로 지정한 경우 텍스트가 검정색이라서 잘 눈에 띄지 않습니다. 텍스트의 색도 ..

지난 번에는 CSS의 linear-gradient() 함수를 이용하여 배경색에 그라데이션을 주는 방법을 알아보았습니다. [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) 또한, 이를 활용하여 무지개 색으로 배경을 지정하는 방법도 알아보았습니다. [HTML/CSS] 무지개 그라데이션 (linear-gradient) 이를 응용하면 배경색을 2가지 색으로 반반 나누어 지정하는 것은 더 쉽겠죠? 배경색 두개로 반반 나누어 지정하기 (그라데이션) 배경색 두개로 반반 나누어 지정하기 (Solid) 두 배경색의 경계선 위치 조정하기 (Solid) 1. 배경색 두개로 반반 나누어 지정하기 (그라데이션) my_gradient_half_1.html my_gradient_half_1.css #h..

지난 번 포스팅에서는 CSS로 그라데이션을 만들 수 있는 linear-gradient에 대해서 설명했습니다. [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) 이번에는 linear-gradient를 이용해서 무지개 모양의 그라데이션 배경을 만들어 보겠습니다. 무지개 그라데이션 무지개 그라데이션 (solid) 1. 무지개 그라데이션 my_gradient_rainbow_1.html my_gradient_rainbow_1.css #rainbow { background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple); width: 500px; height: 300px; } 결과 2. ..

지난번에는 단순하게 요소의 배경색을 지정하거나, 배경 이미지를 지정하는 방법을 알아보았습니다. [HTML/CSS] div 안의 배경색 지정하기 div 안의 배경색을 지정하기 위해서는 css의 background-color 속성을 지정합니다. background-color 예제 div { height : 20px; width : 200px; } CSS에서 색깔을 지정하는 방법은 다음과 같습니다. 이름 16진.. hianna.tistory.com [HTML/CSS] div에 배경 이미지 넣기 총정리 (반복, 한번만, 가운데, 꽉차게) CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat..

네모난 이미지 파일을 CSS 속성을 이용하여 동그란 원 모양으로 보이도록 조정할 수 있습니다. border-radius 이 속성은 요소의 테두리를 둥글게 하는 단축 속성입니다. 속성 값은, 각 테두리의 꼭짓점을 나타내는 반지름 길이(px, em 등)나 퍼센트입니다. 원래는 각 모서리의 변마다 8개까지 값을 지정할 수 있는 속성이지만, 모든 모서리의 반지름이 같은 원을 표현하고자 할 때는, 한 개의 속성값으로 충분합니다. border-radius에 대한 자세한 설명은 지난 포스팅을 참조하세요. [HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius) [HTML/CSS] div 테두리 모서리 둥글게 만들기 (border-radius) border-radius 30px 30% 30p..

CSS에서는 filter 속성을 사용하여 포토샵 등의 이미지 편집 도구를 사용하지 않고 간단한 그래픽 효과를 줄 수 있습니다. filter: invert(amount) filter: invert(100%); filter 속성에 적용할 수 있는 여러 가지 함수 중 invert() 함수는 이미지의 색상을 반전시킵니다. 파라미터로 입력받는 amount는 반전의 정도를 나타내는데, 퍼센트(%) 또는 0~1까지의 숫자로 표현할 수 있습니다. 100%는 완벽한 반전, 0%는 반전이 없는 원본 상태입니다. 예제 my_invert.html 원본 invert(0) invert(50%) invert(100%) my_invert.css .invert_img_1 { filter: invert(0); } .invert_img_..