어제 오늘 내일

지난번에는 이미지에 마우스 오버했을 때, 이미지를 어둡게 하는 방법을 알아보았습니다. [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..

Open in browser VSCode에서 Open in browser 라는 확장 프로그램을 이용하여 작성한 HTML 파일을 브라우저에서 열 수 있습니다. 1. 확장 프로그램 설치 (Open in browser) Extension -> Open in browser 검색/선택 -> install 2. HTML을 브라우저에서 실행하기 (단축키 : Alt + B) 선택한 HTML 파일은, 시스템의 default browser에서 실행됩니다. 실행할 파일 선택 -> Alt + B 실행할 파일 선택 -> 마우스 오른쪽 버튼 -> Open in Default Brower 선택

웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 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..

HTML 페이지가 길 경우, 페이지의 상단에 목차를 만들고, 목차를 클릭하면, 페이지의 원하는 부분으로 이동하고자 할 때 책갈피 기능을 사용할 수 있습니다. 페이지 링크 만들기 제목 1 제목 2 태그의 'href' 속성값을 '#'로 시작해야 합니다. 여기서 '#' 뒤의 'title1', 'title2'는 이동하고자 하는 위치의 태그 name 값입니다. 이 링크를 클릭하면, 페이지 내의 위치로 커서가 이동합니다. 이동하고자 하는 위치 지정 제목 1 ....content.... 제목 2 ....content.... 이동하고자 하는 위치에 태그를 추가하고, name 속성에 고유한 이름을 지정해 줍니다.

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

div 안의 배경색을 지정하기 위해서는 css의 background-color 속성을 지정합니다. background-color 예제 div { height : 20px; width : 200px; } CSS에서 색깔을 지정하는 방법은 다음과 같습니다. 이름 16진수 RGB(A) HSL(A) 위 예제는 각각 4가지 방법을 이용하여 div의 배경색을 지정한 예제입니다. CSS에서 색깔을 지정하는 위 4가지 방법에 대해서는 지난 포스팅을 참조하세요. [CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA)) 이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을..