어제 오늘 내일

지난 번에는 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; } 결과 여기에 마우스를 가져오세요