Front-end

CSS 기본_ 셀렉터, 색/텍스트/폰트/박스/배경/커서

나는나는용 2024. 7. 31. 17:27
728x90

셀렉터 (selector)

HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능

 

여러 유형의 셀렉터를 작성할 수 있다.

 

예) 웹 페이지의 모든 <h3>태그에 color:brown 스타일 적용하는 h3 셀렉터 생성
h3(셀렉터) {  color : brown; }

 

태그 이름 셀렉터

태그 이름이 셀렉터로 사용되는 유형.


셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용
h3, li { color : brown; }

class 셀렉터

셀렉터 앞에 점 (.)을 찍어준다. 점으로 시작하는 셀렉터

 

HTML 태그에서 사용하려면 class 속성으로 접근해야 된다.

 

.warning { color : red; }
body.main { background : aliceblue; }

<body class="main">

<!-- <body>태그에 적용이 되지 않고, <body class="main">태그에만 적용 -->

<div class="warning">60점 미만은 F!</div>
</body>

id 셀렉터

셀렉터 앞에 # 을 붙여서, #으로 시작하는 셀렉터

 

HTML 태그의 id 속성으로 접근 가능

 

#list { background : mistyrose; }
<ul id="list">

 

셀렉터 조합하기

2 개 이상의 셀렉터 조합 : 조합에 적합한 HTML 테그에만 적용

 

자식 셀렉터(child selector)

부모 자식 관계인 두 셀렉터를 '>' 기호로 조합

 

예) <div> 태그의 자식인 <strong>에 적용되는 스타일 시트

div > strong {color : dodgerblue; }

자손 셀렉터(descendent selector)

자손 관계인 2개 이상의 태그 나열

 

예) <ul>의 자손 <strong>에 적용되는 스타일 시트
ul strong { color : deepskyblue; }

 

전체 셀렉터, 속성 셀렉터

* 전체 셀렉터(universal selector)

모든 태그에 적용시키는 셀렉터

 

와일드 문자 (*)를 사용하여 모든 태그에 적용시키는 셀렉터

 

예) * { color : green; } : 웹 페이지 모든 태그에 적용시켜라.
   

속성 셀렉터

HTML 태그의 특정 속성에 대해 값이 일치하는 태그에 적용하는 셀렉터

 

예) input[type=text] { color : red; }

     <input type="text">

가상 클래스 셀렉터

어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터

40개 이상의 가상 클래스 셀렉터가 있다.

 

        예1) a:visited {color : green;} - 방문했던 <a>태그의 링크 텍스트 색을 green으로
        예2) li:hover {background : yellogreen; }

유형 셀렉터 설명
마우스 hover 마우스 커서가 올라갈 때 스타일 적용
active 마우스로 누르고 있는 상황에서 스타일 적용
폼요소 focus 폼 요소가 키보드나 마우스 클릭으로 포커스를 받을때 사용
링크 link 방문하지 않은 링크에 스타일 적용
visited 방문한 링크에 스타일 적용
블록 first-letter
<p>, <div>등 블록 태그의 첫번째 글짜에 스타일 적용
<span>과 같은 인라인 태그에는 적용되지 않는다.
first-line
<p>, <div>등과 같은 블록형 태그에 첫번째 라인에 스타일 적용
구조 nth-child(even) 짝수 번째 모든 자식 태그에 스타일 적용
nth-child(1) 첫 번째 자식 태그에 스타일 적용

 

CSS3에서 색 표현

색을 표현하는 방법 3가지

1. 16진수 코드로 표현

#8A2BE2 -> blueviolet 
Red 8A ,Green 2B, Blue E2

 

8 * 16 + 10 -> 128 + 10 = 138 
2 * 16 + 11 ->  32 + 11 = 43
14*16 + 2 -> 224 + 2 = 226

 

2. 10진수 코드와 RGB()로 표현

rgb(138, 43, 226) -> blueviolet 

 

3. 색 이름으로 표현

CSS3표준에서는 140개 색의 이름을 정하고 있다. blueviolet

 

예) div { color : #8A2BE2 ;}
      div { color : rgb(138, 43, 226); }
      div { color : blueviolet; }

 CSS3 표준 색 이름과 코드 중 일부 (140개)
 brown : #A52A2A
 blueviolet : #8A2BE2
 ....

 

색관련 프로퍼티

color : 색 /*HTML 태그의 텍스트 글자색*/
background-color : 색 /* HTML 태그의 배경 색*/
border-color : 색 /*HTML 태그의 테두리 색*/

 

예) <div> 요소의 배경색과 글자 색 지정
   div { color : blueviolet;
           background-color : gold;
           border-color : #6B8E23; }

 

텍스트 

텍스트를 꾸미는 CSS3 스타일 시트

text-indent : <length> | <percentage>; /*들여쓰기*/
text-align : left|right|center|justify; /*정렬*/
text-decoration : none|underline|overline|line-through; /*텍스트 꾸미기*/
 

<HTML>
<head>
<title>텍스트 꾸미기</title>
<style>
    h3 { text-align : right; }
    span { text-decoration : line-through; }
    strong { text-decoration : overline; }
    .p1 { text-indent : 3em; text-align : left; } /*em 글자 개수, 3em 3글자*/
    .p2 { text-indent : 1em; text-align : center; }
    a:visited { color : blue;} /*방문 했던 페이지의 링크 색 변경*/
</style>
</head>
<body>
<h3>텍스트 꾸미기</h3> 
<hr>
<p class="p1">HTML의 태그만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬,
공백, 간격 등과 같은 <span>텍스트 제어</span>를 할 수 없다. </p>
<p class="p2">그러나, <strong>스타일 시트</strong>는 이를 가능하게 한다.
들여쓰기, 정렬에 대해서 알아보자.</p>
<hr>
<a href="https://www.naver.com" style="text-decoration : none">네이버</a>
</body>
</HTML>

 

CSS3의 표준 단위 

단위 의미 사용 예
em 배수 font-size : 3em ; 현재 폰트에 3배 크기
% 퍼센트 font-size : 500%; 현재 폰트에 500% 크기
px 픽셀 수 font-size : 10px; 10픽셀 크기
cm 센치미터 margin-left : 5cm; 왼쪽 여백 5cm
mm 밀리미터 margin-left : 10mm; 왼쪽 여백 10mm
in 인치 2.54cm=96px margin-left : 2in; 왼쪽 여백 2인치
pt 포인터(1pt = 1in의 1/72 크기) margin-left : 20pt;  왼쪽 여백 20pt
pc 피카소(1pc = 12pt) font-size : 1pc; 1pc 크기의 폰트
deg 각도 transform : rotate(20deg);  시계 방향으로 20도 회전

 

폰트 

폰트 제어 CSS3 프로퍼티 

폰트 패밀리, font-family

예) font-family : Arial, "Times New Roman", Serif;
         프로퍼티               

 

Arial 폰트가 없으면  Times New Roman 폰트 이용
Times New Roman 없으면, Serif 계열 폰트를 이용해라.

 

폰트 크기, font-size

예) font-size : 40px; /*40픽셀 크기*/
     font-size : medium; /*중간 크기, 크기는 브라우저마다 다름*/
     font-size : 1.6em; /*현재 폰트의 1.6배 크기*/

폰트 스타일 ,  font-style

예) font-style : italic; /*이탤릭 스타일로 지정*/

폰트 굵기, font-weight

예) font-weight : 300;  /*100~900의 범위를 지정할 수 있다.*/
     font-weight : bold; /* 굵게. 700크기 */  

단축 프로퍼티, font 

font 프로퍼티 

font-style, font-weight, font-size, font-family 순서대로 지정하는 단축 프로퍼티
font : font-style, font-weight, font-size, font-family

예) 20픽셀로 이탤릭 스타일에 bold 굵기로 consolas 체
     font : italic bold 20px consolas, sans-serif;
     font : 20px consolas, sans-serif; 
               font-size, font-family 생략 불가
 

<HTML>
<head>
<title>폰트</title>
<style>
    body { 
font-family : "Times New Roman", Serif;
font-size : large;
  }
    h3 { 
font : italic bold 40px consolas, sans-serif; 
   }   
</style>
</head>
<body>
<h3>Consolas font</h3> 
<hr>
<p style="font-weight:900">font-weight 900</p>
<p style="font-weight:100">font-weight 100</p>
<p style="font-style:italic">Italic Style</p>
<p style="font-style:oblique">Oblique Style</p>
<p>현재 크기의
<span style="font-size:1.5em">1.5배</span>
크기로</p>
</body>
</HTML>

 

 

CSS3의 박스 모델

HTML 태그는 사각형 박스로 다루어진다.

 

각 HTML 태그 요소를 하나의 박스로 다룬다.

박스 크기, 배경 색, 여백, 옆 박스와의 거리 등 제어 가능
(내부로 부터 작성)
     1. 컨텐츠(contents) : HTML 태그의 텍스트나 이미지가 출력되는 부분(실제 출력되는 부분)
     2. 패딩(padding) : 컨텐츠를 직접 둘러싸고 있는 내부 여백
     3. 테두리 (border) : 패딩 외부의 테두리, 직선이나 점선 혹은 이미지로 그릴 수 있다.
     4. 여백(margin) : 박스의 맨 바깥 영역이며, 테두리 바깥의 공간으로 인접한 아래위 이웃 태그의 박스와의 거리

박스 모델을 구성하는 CSS3 프로퍼티 

  콘텐츠 패딩 테두리 여백
크기 관련 width
height		 padding-top
padding-right
padding-left
padding-botton		 border-top-width
border-right-width
border-left-width
border-bottom-width		 margin-top
margin-left
margin-right
margin-bottom
크기 관련 단축 - padding border-width margin
스타일 관련 - - border-top-style
border-right-style
border-left-style
border-bottom-style		 -
스타일 관련  - - border-style -
색 관련 - 패딩 색은 없음.
태그의 배경색은 나타남		 border-top-color
border-left-color
border-right-color
border-bottom-color		 -
색 관련 단축 - - border-color -
전체 단축 프로퍼티 - - border -

 

 

박스 크기

<div> 태그의 박스 모델 예

div.box {
  width : 150px;
height : 50px;
margin : 40px;
border-width : 30px;
padding : 20px;
}
<div class="box"> DIVDIVDIV </div>

 

<HTML>
<head>
<title>박스 모델</title>
<style>
    body { background : ghostwhite;  }
    span { background : deepskyblue; }   
   div.box{
background : yellow;
border-style : solid;
border-color : peru;
margin : 40px;
border-width : 30px;
padding : 20px;
  }
</style>
</head>
<body>
<div class="box">
<span>DIVDIVDIV</span>
</div>
</body>
</HTML>

 

 

박스 모델의 색, 테두리, 단축 프로퍼티

CSS 스타일

p{ /*모든 선에 적용*/
   border-width : 3px;
   border-style : dotted;
   border-color : blue;
}

p{ /*왼쪽 선에만 적용*/
   border-left-width : 3px;
   border-left-style : dotted;
   border-left-color : blue;
}

/*단축속성으로 한꺼번에 지정*/
p{ border : 3px dotted blue ;}

<HTML>
<head>
<title>박스 모델</title>
<style>
   div{
background : yellow;
padding : 20px;
border : 5px dotted red;
margin : 30px;
  }
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 
빨간색 점선</p>
<hr>
<div>
     <img src="img/cat.jpg" alt="고양이">
</div>
</body>
</HTML>
<HTML>
<head>
<title>다양한 테두리</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border: 3px solid blue">3픽셀 solid</p>
<p style="border: 3px none blue">3픽셀 none</p>
<p style="border: 3px hidden blue">3픽셀 hidden</p>
<p style="border: 3px dotted blue">3픽셀 dotted</p>
<p style="border: 3px dashed blue">3픽셀 dashed</p>
<p style="border: 3px double blue">3픽셀 double</p>
<p style="border: 15px groove yellow">15픽셀 groove</p>
<p style="border: 15px ridge yellow">15픽셀 ridge</p>
<p style="border: 15px inset yellow">15픽셀 inset</p>
<p style="border: 15px outset yellow">15픽셀 outset</p>
</body>
</HTML>

 

테두리 둥근 모서리 만들기 border-radius

<HTML>
<head>
<title>둥근 모서리 만들기</title>
<style>
p {
background : #90D000;
width : 300px;
padding : 20px;
}
#round1 { border-radius : 50px; }
#round2 { border-radius : 0px 20px 40px 60px; }
#round3 { border-radius : 0px 20px 40px; }
#round4 { border-radius : 0px 20px; }
#round5 { border-radius : 50px; border-style : dotted; }
</style>
</head>
<body>
<h3>둥근 모서리 테두리</h3>
<hr>
<p id="round1">반지름 50픽셀의 둥근 모서리</p>
<p id="round2">반지름 0, 20, 40, 60픽셀의 둥근 모서리</p>
<p id="round3">반지름 0, 20, 40, 20픽셀의 둥근 모서리</p>
<p id="round4">반지름 0, 20, 0, 20픽셀의 둥근 모서리</p>
<p id="round5">반지름 50픽셀의 둥근 모서리, 점선</p>
</body>
</HTML>

 

 

배경 다루기 

배경 색이나 이미지지정 background-color, background-image

두가지 속성이 다 지정이 된다면, 

이미지 크기만큼 출력이 되고, 이미지의 영역이 넘어서는 부분은 백그라운드 색이 깔린다.

div { /*백그라운드 이미지가 한번만 출력이 된다.*/

	  background-color : skyblue;

	  background-image : url("img/spongbob.png");

    }

 

배경 이미지의 위치, background-position

    예) background-position : center center; /*박스 가운데에 이미지 출력*/

    

배경 이미지의 반복 출력, background-repeat

    예) background-repeat : repeat-y; /*위에서 아래로 이미지 반복 출력 */

 

 


예제1)  100 * 100 크기로 <div> 박스의 왼쪽 중간에 배경 이미지 넣기

div {
	  background-color : skyblue;
	  background-size : 100px 100px;
	  background-image: url("img/spongebob.png");
	  background-repeat : no-repeat;
	  background-position : left center;
    }

 

 

예제2)  100 * 100 크기로 <div> 박스의 center 위치에 y축을 따라 배경이미지 반복

div {
	  background-color : skyblue;
	  background-size : 100px 100px;
	  background-image: url("img/spongebob.png");
	  background-repeat : repeat-y;
	  background-position : center center;
    }

 

background 단축 프로퍼티

background : 배경을 꾸미는 여러 값을 한 번에 지정하는 단축 프로퍼티

 

ex)

div { background : skyblue url("img/spongebob.png") center center / 100px repeat-y; }

div { background : skyblue; } /*배경색을 skyblue로 설정*/

div { background : url("img/spongbob.png"); } /*배경 이미지 지정*/

<HTML>
<head>
<title>배경 꾸미기</title>
<style>
div {
background-color : skyblue;
background-size : 100px 100px;
background-image : url("img/spongebob.png");
background-repeat : repeat-y;
background-position : center center;
}
div {
width : 200px;
height : 200px;
color : blueviolet;
font-size : 16px;
}
</style>
</head>
<body>
<h3>div 박스에 배경 꾸미기</h3>
<hr>
<div>Spongebob is an over-optimistic sponge that annoys 
other characters.</div>
</body>
</HTML>

 

텍스트 그림자 , text-shadow

프로퍼티

text-shadow : h-shadow v-shadow blur-radius color|none 

h-shadow, v-shadow : 원 텍스트와 그림자 텍스트 사이의 수평/ 수직 거리(필수)

blur-radius : 흐릿한 그림자를 만드는 효과, 흐릿하게 번지는 길이(선택)

color : 그림자 색

none : 그림자 효과 없음

<HTML>
<head>
<title>텍스트 그림자</title>
<style>
div { font : normal 24px verdata; }
.dropText { text-shadow : 3px 3px; }
.redText { text-shadow : 3px 3px red; }
.blurText { text-shadow : 3px 3px 5px skyblue;}
.glowEffect { text-shadow : 0px 0px 3px red; }
.wordArtEffect { color : white; text-shadow : 0px 0px 3px darkblue;}
.threeDEffect { color :white; text-shadow : 2px 2px 4px black;}
.multiEffect { color : yellow; text-shadow : 2px 2px 2px black,
  0 0 25px, 0 0 5px darkblue; }
</style>
</head>
<body>
<h3>텍스트 그림자 만들기</h3>
<hr>
<div class="dropText">Drop Shadow</div>
<div class="redText">Color Shadow</div>
<div class="blurText">Blur Shadow</div>
<div class="glowEffect">Glow Effect</div>
<div class="wordArtEffect">wordArt Effect</div>
<div class="threeDEffect">3D Effect</div>
<div class="multiEffect">Multiple Shadow Effect</div>
</body>
</HTML>

 

박스 그림자, box-shadow

박스 전체에 그림자 효과

 

프로퍼티

box-shadow : h-shadow v-shadow blur-radius spread-radius color |none|inset

spread-radius : 그림자 크기(선택 디폴트는 0)

inset : 음각 박스로 보이게 박스 상단 안쪽(왼쪽과 위쪽)에 그림자 생성

<HTML>
<head>
<title>div 박스에 그림자 만들기</title>
<style>
div {          
width : 150px; 
height : 70px; 
padding : 10px; 
border: 10px solid lightgray; 
margin : 20px;
background-image: url("img/spongebob.png");
background-size : 150px 100px;
background-repeat : no-repeat
}
.redBox { box-shadow : 10px 10px red; }
.blurBox { box-shadow : 10px 10px 5px skyblue;}
.multiEffect { box-shadow : 2px 2px 2px black,
        0 0 25px blue, 0 0 5px darkblue; }
</style>
</head>
<body>
<h3>박스 그림자 만들기</h3>
<hr>
<div class="redBox">스폰지 밥</div>
<div class="blurBox">스폰지 밥</div>
<div class="multiEffect">스폰지 밥</div>
</body>
</HTML>

 

cursor

HTML 태그 위에 마우스가 올라갈 때 마우스의 커서 모양 지정

 

프로퍼티

cursor : value 

value - 마우스 커서 모양을 나타내는 값으로, auto, crosshair, default, pointer, move, copy...

<HTML>
<head>
<title>마우스 커서</title>
</head>
<body>
<h3>마우스 커서</h3>
아래에 마우스를 올려 보세요. 커서가 변합니다.
<hr>
<p style="cursor: crosshair">십자 모양 커서</p>
<p style="cursor: help">도움말 모양 커서</p>
<p style="cursor: pointer">포인터 모양 커서</p>
<p style="cursor: progress">프로그램 실행 중 모양 커서</p>
<p style="cursor: n-resize">상하 크기 조절 모양 커서</p>
</body>
</HTML>

 

 

 

728x90

'Front-end' 카테고리의 다른 글

[JavaScript] 특징, 작성위치, 다이얼로그, 문장, 변수  (0) 2024.08.01
CSS 배치, 블록/인라인/인라인블록박스(display, position), 리스트/표/폼 꾸미기  (0) 2024.08.01
CSS 스타일 시트  (0) 2024.07.31
[HTML5] 웹 폼  (0) 2024.07.31
[HTML5] 시맨틱 웹 _ 문서 구조화  (1) 2024.07.31

'Front-end'의 다른글

  • 현재글CSS 기본_ 셀렉터, 색/텍스트/폰트/박스/배경/커서

관련글

댓글

티스토리툴바