본문 바로가기

프론트엔드 HTML CSS JAVASCRIPT32

[HTML] 이미지에 링크거는 방법 - <a>, href, <img> HTML 이미지에 링크 HTML에서 img태그에 링크를 다는 방법입니다. 태그로 태그를 감싸주면 됩니다. href 속성에는 이동할 주소를 적습니다. 이미지를 클릭하면 해당 주소(https://google.com)로 이동합니다. a태그의 target 프로퍼티를 '_blank'로 설정하면 웹페이지가 새 창에서 뜹니다. 2019. 8. 10.

[HTML, CSS] div 요소를 동그랗게 만드는 방법 - border radius border-radius css의 border-radius 속성을 사용해서 기본 사각형인 요소들의 모서리의 형태를 바꿀 수 있습니다. div 뿐만이 아니라 border가 있는 다른 html 요소들에도 적용이 가능합니다. border-radius 적용 전의 div입니다. border-radius 속성으로 4개의 모서리 부분을 동그랗게 만들 수 있습니다. border-radius: top-left top-right bottom-right bottom-left 위/왼쪽, 위/오른쪽, 아래/오른쪽, 아래/왼쪽 (시계방향) 순서대로 각 모서리의 반지름의 길이를 전달합니다. 4방향의 값이 모두 동일하다면 한 개만 전달하면 됩니다. px뿐만 아니라 %나 em단위로도 설정할 수 있습니다. border-radius: 3.. 2019. 8. 10.

[HTML, CSS] 마우스 커서 올릴 때 (오버) 효과주는 방법 - hover 1. hover CSS의 :hover 선택자를 사용해서 마우스를 요소 위에 올렸을 때 적용되는 스타일을 정의합니다. :hover는 링크, 버튼, 이미지 등 다양한 요소에 사용할 수 있습니다. 예시 hover 효과를 적용할 금색 div입니다. HTML 삽입 미리보기할 수 없는 소스 해당 요소의 style 클래스에 :hover를 추가합니다. .container { width: 200px; height: 200px; background: gold; } .container:hover { background: silver; } 이제 마우스 커서를 올리면 백그라운드 색상이 silver로 변합니다. (직접 마우스를 올려보세요) HTML 삽입 미리보기할 수 없는 소스 여러 가지 효과를 동시에 줄 수도 있습니다. .co.. 2019. 8. 10.

[HTML, CSS] div 태그에 배경화면 지정하는 방법 div 배경화면 지정하는 법 다음과 같이 화면 전체를 차지하는 div가 있습니다. 현재는 div가 비어있는 상태입니다. 이곳에 배경화면을 지정해 보겠습니다. 이미지는 프로젝트 폴더 내부의 파일을 사용합니다. div의 background 속성으로 이미지를 전달합니다. 이미지는 url(이미지 경로) 형식으로 불러올 수 있습니다. 나머지는 동일하므로 실행결과 배경화면이 적용되었지만 shanghai.jpg 원본과 비교해 보면 아래쪽이 잘렸습니다. 원본 background-position 속성과 background-size 속성을 이용해서 고쳐줍니다. 이미지가 div의 가로, 세로를 모두 차지하며 정중앙에 위치하도록 설정하였습니다. 2019. 8. 9.

[HTML, JAVASCRIPT] 버튼 클릭 시 이미지를 변경하는 방법 HTML 이미지 동적으로 변경하는 방법(버튼 클릭) 이미지와 버튼이 있습니다. toggle 프로젝트 구조 루트에는 index.html 파일과 함께 이미지 폴더 내부에 두 개의 이미지가 있습니다. button을 클릭하면 현재 eiffel.jpg로 설정되어 있는 이미지가 rose.jpg로 바뀌도록 구현해보겠습니다. 1. 함수 생성 먼저 이미지를 바꾸는 기능을 수행하는 함수를 생성합니다. 자바스크립트 함수이므로 toggleImg() 함수를 생성했습니다. getElementById로 img태그를 가져온 후 src 속성을 바꿔주는 함수입니다. 2. 이벤트 핸들러 다음으로 button의 onclick 이벤트 핸들러에 toggleImg() 함수를 전달해 주면 됩니다. toggle 이제 button을 클릭하면 togg.. 2019. 8. 9.

[HTML, JAVASCRIPT] 브라우저에서 확인창, 경고창 띄우는 법 - confirm confirm 브라우저 창에서 확인창, 경고창 띄우기 구문 result = window.confirm(message); message 확인창에 띄울 문구 result 사용자가 '확인'을 누르면 true / '취소'를 누르면 false 예시 버튼을 클릭하면 배경화면의 색상을 바꾸는 예시입니다. confirm 변경 아직은 '확인'이나 '취소'를 눌러도 모달창이 닫힐 뿐 아무 일도 일어나지 않습니다. 다음으로 '확인'을 눌렀을 때와 '취소'를 눌렀을 때의 상황을 조건문을 이용해서 구현합니다. confirm 변경 이제 '확인'을 누르면 true를 반환하므로 색상이 바뀌고, '취소'를 누르면 false를 반환하므로 콘솔창에 메시지를 출력합니다. MDN document - Window.confirm() Window.. 2019. 8. 8.

[HTML, CSS] 배경화면 한쪽만 흐리게 만들기 linear-gradient 배경화면 한쪽 흐리게 만들기 CSS의 linear-gradient 속성을 활용해서 배경의 한쪽은 밝고 반대쪽으로 갈수록 어두워지는 효과를 구현해 보겠습니다. 배경은 body에 적용해 보겠습니다. body { margin: 0; width: 100vw; height: 100vh; background: linear-gradient( to right, rgba(20, 20, 20, 0) 10%, rgba(20, 20, 20, 0.25) 25%, rgba(20, 20, 20, 0.5) 50%, rgba(20, 20, 20, 0.75) 75%, rgba(20, 20, 20, 1) 100% ), url(https://source.unsplash.com/random); background-size: cover; } .. 2019. 7. 30.

[HTML, CSS] linear-gradient 그라데이션 효과 / 텍스트에 그라데이션 적용하는 법 Linear gradient linear-gradient는 CSS 속성 중 하나로, 웹 페이지의 요소에 선형 그라데이션 배경을 적용할 때 사용됩니다. 그라데이션 배경을 적용하면 두 개 이상의 색상이 서로 부드럽게 전환되면서 매력적인 디자인 효과를 만들 수 있습니다. 참고) 그라데이션, 그라디언트 용어 차이 그라데이션은 인지적 관점에서의 용어로, 색이 점진적으로 변화하는 현상을 의미합니다. 그라디언트는 기술적 관점에서의 용어로, 그라데이션을 구현하는 방법이나 기술을 의미합니다. 기본 사용법 background 속성에 linear-gradient를 사용합니다. .gradient-background { background: linear-gradient(direction, color-stop1, color-st.. 2019. 7. 30.

이전 1 2 3 다음

티스토리툴바