본문 바로가기
  • Welcome to Smart-i
  • I can do it!
  • Those who come, be rich.
코딩공부

CSS tooltip, form, @, scroll

by ~~~~~하이글로시~~~~~ 2020. 10. 25.

css tooltip, form, @, scroll

tooltip 효과

어떤 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 한다.
CSS를 이용하면 이러한 툴팁 효과를 간단히 설정할 수 있다.

다음 예제는 visiblility 속성을 이용하여 툴팁 효과를 구현하는 예제이다.

.tooltip { position: relative; display: inline-block; }
.tooltip .tooltip-content {
    visibility: hidden;
    width: 300px;
    background-color: orange;
    padding: 0;
    margin-top: 10px;
    color: white;
    text-align: center;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltip-content { visibility: visible; }

CSS를 이용하면 툴팁(tooltip)이 나타나는 위치도 간단히 설정할 수 있다.
CSS의 상대적 위치를 나타내는 top, right, bottom, left 속성을 이용하여 툴팁의 상대 위치를 설정할 수 있다.

다음 예제는 툴팁이 해당 요소의 아래 쪽이 아닌 왼쪽에 나타나도록 구현한 예제이다.

.tooltip { margin: auto; }
.tooltip .tooltip-content { top: -15px; right: 105%; }

다음 예제는 해당 요소에 마우스를 올리면 툴팁이 위쪽에 나타나도록 구현한 예제이다.

.tooltip { margin: auto; }
.tooltip .tooltip-content { bottom: 100%; left: 50%; margin-left: -150px; }

다음 예제처럼 툴팁(tooltip)의 모양을 말풍선 모양처럼 설정할 수도 있다.

.tooltip .tooltip-content::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: orange transparent transparent transparent;
}

위의 예제에서 툴팁의 말풍선 모양은 border-color 속성값을 transparent로 설정하여 구현할 수 있다.

transparent 속성값은 투명함을 의미한다.

 

form 요소

CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있다.

input 요소의 크기 설정

width 속성을 이용하여 input 요소의 크기를 설정할 수 있다.

input { width: 100%; padding: 10px 20px; margin: 5px 0; box-sizing: border-box; }

input 요소의 테두리 설정

border 속성을 이용하여 input 요소의 테두리(border) 색상과 두께를 바꿀 수 있다. 또한, border-radius 속성을 이용하여 input 요소의 모서리를 둥글게 만들 수도 있다.

input[type="text"] { border: solid 2px #D2691E; border-radius: 8px; }
input[type="password"] { border: none; border-bottom: solid 2px #D2691E; }

input 요소에 배경색 적용

background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있다. 또한, color 속성을 이용하여 input 요소의 텍스트 색상를 변경할 수도 있다.

input { background-color: #FFF8DC; color: olive; }

포커스를 가지고 있는 input 요소의 스타일 적용

:focus 선택자를 이용하여 해당 input 요소가 포커스(focus)를 가지고 있을 때의 스타일을 별도로 설정할 수 있다.

input[type="text"] { border: solid 2px #FFE4B5; -webkit-transition: 0.5s; transition: 0.5s; }
input[type="text"]:focus { border: solid 2px #D2691E; }
input[type="password"] { border: solid 1px black; }
input[type="password"]:focus { background-color: #E0FFFF; }

input 요소에 아이콘이나 이미지 삽입

background-image 속성을 이용하여 input 요소에 아이콘(icon)이나 이미지를 삽입할 수 있다. 또한, background-position 속성을 이용하여 삽입한 아이콘이나 이미지가 나타날 위치를 설정할 수도 있다.

input {
    background-image: url("/examples/images/img_search_icon.png");
    background-position: 5px 4px;
    background-repeat: no-repeat;
}

textarea 요소의 크기 조절

resize 속성을 이용하여 textarea 요소의 크기를 조절할 수 있다. resize 속성을 설정하면 해당 textarea 요소의 오른쪽 아래 부분에 마우스로 잡을 수 있는 핸들이 생긴다. 사용자가 그 핸들을 마우스로 클릭하여 조절하면 textarea 요소의 크기를 마음대로 조절할 수 있게 된다.

CSS에서 사용할 수 있는 resize 속성값은 다음과 같다.

속성값

설명

none

해당 요소의 크기를 조절할 수 없음. (기본 설정)

both

사용자가 해당 요소의 높이와 너비를 모두 조절할 수 있음.

horizontal

사용자가 해당 요소의 너비만을 조절할 수 있음.

vertical

사용자가 해당 요소의 높이만을 조절할 수 있음.

 
textarea { width: 100%; height: 200px; box-sizing: border-box; resize: both; }

resize 속성은 익스플로러에서 지원하지 않습니다.

select 요소에 스타일 적용

CSS를 이용하면 select 요소에도 여러 가지 스타일을 적용할 수 있다.

select {
    width: 100%;
    padding: 10px;
    border: solid 1px black;
    border-radius: 5px;
    background-color: #FFFFE0;
}

 

@ 규칙

CSS에서는 W3C에서 규정하고 있는 몇몇 규칙들을 사용할 수 있다.
그 중에서도 많이 사용되는 대표적인 규칙은 다음과 같다.

 - @import
 - @font-face
 - @media

@import 규칙

@import 규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙이다.
이 규칙은 스타일 시트에 사용되는 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시되어야 한다.

보통 HTML 문서에는 다음과 같이 여러 개의 <link>태그를 사용하여 스타일 시트를 추가한다.

<head>
    <title>@import 규칙</title>
    <link rel="stylesheet" href="firstStyleSheet.css">
    <link rel="stylesheet" href="secondStyleSheet.css">
    ...
    <link rel="stylesheet" href="hundredStyleSheet.css">
</head>

하지만 이렇게 추가하는 CSS 파일의 개수가 늘어날수록 웹 서버의 부하도 같이 커지게 된다.
따라서 HTML 문서에는 일정 개수의 CSS 파일만을 추가하고, 추가된 CSS 파일에서 @import 규칙을 이용해 또 다른 CSS 파일을 추가하는 방법을 사용한다.

html 문서

<head>
    <title>@import 규칙</title>
    <link rel="stylesheet" href="firstStyleSheet.css">
    <link rel="stylesheet" href="secondStyleSheet.css">
</head>

firstStyleSheet.css

@import url("thirdStyleSheet.css");
@import "fourthStyleSheet.css";
...

@import 규칙을 사용해도 추가하는 CSS 파일의 개수가 늘어나면 여전히 웹 서버의 부하는 커질 수밖에 없다. 따라서 웹 서버의 부하를 줄이기 위해 작성한 CSS 파일들을 적절히 분산해서 추가하는 방법이 필요해진다.

@import 규칙을 이용하면 미디어 쿼리(media query)의 조건에 따라 필요한 CSS 파일만을 선별적으로 불러올 수 있다.

다음 예제는 프린트할 때에는 firstStyleSheet.css 파일을 불러오고, 스크린이 가로 방향으로 설정되어 있을 때는 secondStyleSheet.css 파일을 불러오는 예제이다.

html 문서

<head>
    <title>@import 규칙</title>
    @import url("firstStyleSheet.css") print;
    @import "secondStyleSheet.css" screen and (orientation:landscape);
</head>

@font-face 규칙

@font-face 규칙은 웹 폰트(web font)를 정의할 때 사용하는 규칙이다. 웹 폰트(web font)는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있게 해준다.

우선 웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가한다.
그러면 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시하게 된다.

@font-face {
    font-family: "myWebFont";
    src: local("NanumGothic"), url("NanumGothic.eot"), url("NanumGothic.ttf"), url("NanumGothic.woff");
}
* { font-family: "myWebFont"; }

@media 규칙

CSS2에서는 @media 규칙을 통해 서로 다른 미디어 타입(media type)을 위한 맞춤식 스타일 시트를 지원한다.

다음 예제는 HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용해 주는 예제이다.

body { background-color: darkorange; }
@media screen {
    body { background-color: black; color: white; }
}
@media print {
    body { background-color: white; color: black; }
}

 

scroll

div 모바일 웹에서 스크롤 속도 늦고 부자연 스러움

div 태그의 스크롤은 기본적으로 웹브라우저에서 안정적으로 동작하지만, 모바일 웹브라우저에서는 왠지 속도가 늦고 부자연스럽다.

이를 해결하는 방법응 아래와 같다.

<div style="-webkit-overflow-scrolling: touch;">

스크롤바 색상

scrollbar 속성을 이용하면 스크롤바의 색상을 바꿀 수 있다.

<style type="text/css">
body {
scrollbar-highlight-color:#FFFFFF; 
scrollbar-3dlight-color:#B58E63; 
scrollbar-face-color:#F2ECE6; 
scrollbar-shadow-color:#B58E63; 
scrollbar-darkshadow-color:white; 
scrollbar-track-color:#FFFFFF; 
scrollbar-arrow-color:#B58E63;
}
</style>

 

 

[코딩공부] - CSS fixedNavigation2 예제 다운로드

 

CSS fixedNavigation2 예제 다운로드

FixedNavigation 2 Tutorial 예제보기 다운로드 네비게이션에 필요한 목록 요소는 내부에 링크가 있는 간단한 순서없는 목록이다. 목록은 나중에 javascript에서 참조하기 위해 아이디를 가져온다. jQuery를

smarti.tistory.com

[코딩공부] - CSS3 2D, 3D Transform

 

CSS3 2D, 3D Transform

2D Transform CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있다. transform 속성은 HTML 요소에 대해 다음과 같은 동작을 제공한다.  - 해당 요소를 움직인다...

smarti.tistory.com

[세상살이] - 구글 메시지를 이용, PC에서 문자 보내기

 

구글 메시지를 이용, PC에서 문자 보내기

Google 메세지 이용, 내 PC에서 문자 보내기 휴대폰에서 문자를 보낼 때 작은 화면으로 문자를 보낼때 타자속도도 느리고 오타도 많이 발생한다. 장문의 문자를 보낼때는 특히 더 할텐데 내 책상에

smarti.tistory.com

[디자인공부] - 포토샵으로 화려하고 반짝이는 문자 효과 만들기

 

포토샵으로 화려하고 반짝이는 문자 효과 만들기

Adobe Photoshop으로 반짝반짝 화려한 문자 만들기 최종 레이어 창을 보자. 1. 배경 레이어 설정 포토샵을 열고 548*371픽셀의 문서 새로 만들기를 했다. 레이어1 문자가 돋보이도록 어두운 배경을 넣고

smarti.tistory.com

[코딩공부] - Sublime Text 3 다운로드 설치 및 플러그인, 윈도우10

 

Sublime Text 3 다운로드 설치 및 플러그인, 윈도우10

Sublime Text 다운로드 및 설치 코딩 연습을 위해 많은 에디터 중에 Sublime Text 3을 설치 www.sublimetext.com/3 에 들어가서 아래 화면에서 자신의 OS에 맞는 것을 다운로드한다. 나는 64bit 설치형을 다운로..

smarti.tistory.com

 

저작자표시

'코딩공부' 카테고리의 다른 글

CSS3 2D, 3D Transform  (0) 2020.10.27
CSS3 radial-gradient, shadow, web font  (0) 2020.10.26
CSS3, vendor prefix, 선형 그래디언트  (0) 2020.10.26
CSS selector 통합정리  (0) 2020.10.25
CSS 이미지스프라이트, 네비게이션바, 드롭다운  (0) 2020.10.23
CSS 위치속성, 플로트, 정렬  (0) 2020.10.21
CSS 위치속성 디스플레이, 포지션, 오버플로우  (0) 2020.10.21
CSS 박스모델, 패딩, 테두리  (0) 2020.10.16

관련글

 

댓글

티스토리툴바