어제 오늘 내일

네모난 이미지 파일을 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; } 결과 여기에 마우스를 가져오세요

마우스 오버 시, 이미지 어둡게 하기 - :hover 마우스 오버 시, 이미지 어둡게 하기 (천천히) - transition 1. 마우스 오버 시, 이미지 어둡게 하기 - :hover :hover 가상 클래스인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. filter: brightness() filter 속성에 적용되는 brightness() 함수는 대상 요소의 밝기를 조정합니다. brightness(1)은 원본 밝기이고, 숫자가 작아질수록 어둡고, 클수록 밝습니다. 자세한 설명은 지난 포스팅을 참조하세요. [HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient) 예제 my_mouseover.html ..

이미지를 어둡게 하기 filter: brightness() opacity, background-color linear-gradient() 1. filter: brightness() CSS의 filter에 적용되는 brightness 함수는 주어진 이미지의 밝기를 조절합니다. 허용값 숫자 1은 100%입니다. 퍼센트 100% 미만은 이미지를 어둡게 합니다. 100% 초과는 이미지를 밝게 합니다. 0%는 이미지를 검은색으로 만듭니다. brightness(100%); /* 원본 이미지 */ brightness(0%); /* 검은색 */ brightness(200%); /* 밝기 2배 */ brightness(0.4); /* 40% */ brightness() 예제 my_brightness.html bright..

이미지 투명도 지정하기 이미지의 투명도를 조절하기 위해서는 CSS의 opacity 속성을 사용합니다. opacity opacity는 불투명도라는 뜻입니다. 따라서 opcity는 대상 객체가 얼마나 불투명한지를 나타냅니다. 허용값 0.0 ~ 1.0 0% ~ 100% 숫자가 클수록 불투명하고, 숫자가 작을 수록 투명합니다. opacity 예제 my_image.html opacity 1.0 opacity 0.5 opacity 0.0 my_image.css div { width: 300px; float: left; border: 1px solid; } img { width: 300px; } .my_img1 { opacity: 1.0; } .my_img2 { opacity: 0.5; } .my_img3 { opa..

웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 2가지가 있습니다. Javascript를 이용하는 방법 [Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) [Javascript] 문자열의 첫 글자만 대문자로 변환하기 CSS를 이용하는 방법 text-transform 여기서는 CSS를 이용하여 대소문자를 변환하거나, 첫글자만 대문자로 바꾸는 방법을 소개합니다. text-transform CSS의 text-transform 속성은 요소의 문자열을 대문자 또는 소문자로 표시하는 방법을 지정합니다. text-transform 속성 값 none uppercase : 텍스트를 대문자로 lowercase : 텍스트를 소문자로 capitalize : 각 단어의 첫글자를 ..

가상 요소란? (Pseudo-elements) CSS 가상 요소는, 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용합니다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. p::first-letter { color: blue; } 위 코드로 영역의 첫번째 글자를 파란색으로 지정할 수 있습니다. 가상 요소 종류 가상 요소의 종류는 다음과 같습니다. ::before ::after ::first-letter ::fi..

CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 한 번만 넣기 (no-repeat) 가로 방향으로 이미지 반복 (repeat-x) 세로 방향으로 이미지 반복 (repeat-y) 배경 이미지 잘리지 않도록 반복 (space) - 공백 배경 이미지 잘리지 않도록 반복 (round) - 빈 공간 없음 배경 이미지 위치 지정하기 (background-position) 배경 이미지 가운데 한 번만 넣기 (center) 배경 이미지 크기 설정하기 (background-size) 이미지가 잘리지 않는 ..