어제 오늘 내일

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_..

포토샵 등의 이미지 편집 도구를 사용하지 않고도 CSS를 사용해서 이미지를 흑백으로 보이게 할 수 있습니다. filter란 CSS에서 filter 속성을 사용하면 이미지 색상 변화나 흐림 처리 등 간단한 이미지 변경 처리를 할 수 있습니다. filter 함수 blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() 이 중 grayscale() 함수를 사용하면 컬러 이미지를 흑백으로 변환할 수 있습니다. filter : grayscale(amount) grayscale() 함수는 이미지를 흑백으로 변환하는 함수입니다. 파라미터로 들어가는 amount는 흑백으로 전환하는 비..

지난번에는 이미지에 마우스 오버했을 때, 이미지를 어둡게 하는 방법을 알아보았습니다. [HTML/CSS] 마우스 오버 시 이미지 어둡게 하기 (천천히) 이번에는 텍스트에 마우스를 올렸을 때 바로 아래에 이미지를 보여주는 코드입니다. ' ' (descendant) 선택자 사용하기 '+' 선택자 사용하기 1. ' ' (descendant) 선택자 사용하기 my_mouseover_text.html 여기에 마우스를 가져오세요 my_mouseover_text.css .my_img { display: none; } .my_box:hover .my_img { display: block; } 결과 여기에 마우스를 가져오세요