IT공부/HTML + CSS

[CSS] transfrom 이용하기

transfrom 이용하기 transfrom이란? transfrom의 translate (상하좌우 이동) transfrom의 scale (크기 조절) transfrom의 rotate (회전) transfrom의 skew (왜곡) transfrom이란? transfrom은 특정 요소를 움직이고 싶거나 회전을 시키고 싶거나 크기를 조절 혹은 왜곡하게 해 줍니다. 사용방법은 아래에 translate, scale, rotate, skew순으로 설명과 예시를 보이겠습니다. transfrom의 translate (상하좌우 이동) 위의 예시처럼 요소를 위, 아래, 왼쪽, 오른쪽으로 이동시키고 싶은 경우에 transfrom의 함수인 translate(), translateX(), translateY()를 이용하여 이동..

[CSS] background 이미지 넣기

background 이미지 넣기 background-image란? background-image의 이미지 크기 정하기 background-image의 이미지 반복 처리 background-image란? background에 색상 대신 이미지를 넣고 싶은 경우 background-image를 이용하여 이미지를 넣을 수 있습니다. 이미지를 넣는 방법은 style의 값으로 background-image : url(이미지의 주소)를 주면 됩니다. See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen. background-image의 이미지 크기 정하기 background-image의 크기를 조절하기 위해서 div의 사이즈를 조절하면 이미지를 띄울 공간..

[CSS] background 색상 넣기 (그라데이션)

CSS의 background 색상 넣기 - 그라데이션 background-color 사용하기 background 그라데이션 효과 그라데이션 반복하기 background-color 사용하기 HTML에서 지정한 영역 예시를 든다면 div태그로 지정된 영역에 배경을 설정할 때 background-color를 이용하여 색을 지정할 수 있습니다. style의 값으로 background-color: blue처럼 지정된 색은 직접 색의 이름으로 입력하여도 되고 RGB 값을 16진수로 표현하여 #FFFFFF처럼 줄 수도 있습니다. See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen. background 그라데이션 효과 선형 그라데이션 배경에 그라데이션 효과..

[HTML] HTML의 이미지 태그와 맵 태그

태그와 태그 알아보기 태그란? 태그란? 예시 태그란? 이미지를 화면에 띄우고 싶은 경우 태그를 이용하여 이미지를 올릴 수 있습니다. 1. src속성 태그에는 다양한 속성이 있는데 src 속성을 통하여 이미지를 불러옵니다. 예시는 이와 같습니다. src의 값으로 url주소를 주면 주소를 찾아 소괄호 안의 주소 값이 가지는 이미지를 불러와서 띄워줍니다. 2. alt속성 alt속성은 이미지를 불러올 수 없을 때 대체 텍스트로 사용되며 화면 낭독 기를 사용하는 경우 이미지를 읽을 때 낭독해줄 내용이 됩니다. 3. usemap속성 usemap속성은 map태그에서 저장한 정보를 불러와 이미지에 적용해주기 위하여 사용합니다. map태그에는 어떠한 정보가 들어가는지는 다음 " 태그란?"에서 설명하겠습니다. 태그란? 이..