본문 바로가기

HTML+CSS+Javascript30

7. 마우스 커서 cursor 프로퍼티를 이용하면, 태그 위에 출력되는 마우스 커서의 모양을 제어할 수 있다. 많은 value가 있지만 많이 이용하는 커서로 예시를 쓰면, 마우스 커서 마우스커서 마우스커서 마우스커서 마우스커서 마우스커서 마우스 커서가 태그 위에 올리는 순간 변할 것이다. 크기 조절(resize) 커서는 resize 앞에 붙은 알파벳에 의해 방향이 바뀌는데, e w s n은 각각 동서남북을 뜻한다 ex) 남서로 이동하는 크기조절 커서 만들기 => cursor: ws-resize 2020. 3. 10.
6. 시각적 스타일 text-shadow 프로퍼티와 color을 적당히 이용하면 글씨에 다양한 시각적 효과를 제공할 수 있다. 다음이 text-shadow를 이용한 다양한 시각적 효과의 예시이다. 텍스트 그림자 만들기 Drop Shadow Color Shadow Blur Shadow Glow Effect WordArt Effect 3D Effect Multiple Shadow Effect 2020. 3. 9.
5. 배경 여태까지는 배경에 background-color을 이용해 색을 입히는 것만 했지만, 이미지를 제공하는 것 역시 가능하다. 이 때 사용하는 속성이 background-image이다. 배경이미지도 html에서 불러올때와 마찬가지로 url 혹은 경로를 지정하여 참조할 수 있다. 배경에도 다른 CSS와 마찬가지로 여러 프로퍼티가 존재한다. background-position : 배경이미지 위치 background-size : 배경이미지 크기 background-repeat : 반복출력 이를 이용한 예시를 보자. 박스에 배경 꾸미기 SpongeBob is an over-optimistic sponge that annoys other characters. background-size 프로퍼티를 통해 배경으로 쓰인 .. 2020. 3. 9.
4. 박스 스타일 모든 html 태그는 하나의 박스로 구성되어 있다. 이 투명한 박스에 선, 색, 테두리, 여백 등을 입히면 박스 형태가 보인다. - 박스의 구성 박스는 다음과 같이 구성되어 있다. 컨텐츠 : 텍스트나 이미지 부분 패딩 : 컨텐츠를 둘러싼 내부 여백 테두리 : 패딩 외부를 외각으로 둘러싼 선 여백 : 테두리 바깥의 공간 박스의 색과 크기를 제어한 예시는 다음과 같다. DIVDIVDIV background는 컨텐츠와 테두리 사이까지의 색을 지정하는 프로퍼티이다. border은 width, color, style의 세부사항이 있는데, width는 테두리의 넓이, color은 색, style은 모양을 지정할 수 있다. solid가 기본형이며, dotted는 점선 등, 테두리의 모양을 지정할 수 있다. paddi.. 2020. 3. 9.
반응형

티스토리툴바