# 속성 선택자(Attribute Selector)
HTML 태그의 속성명과 속성값을 선택자로 지정할 수 있는 선택자
- 속성 선택자의 종류
| 선택자 형태 | 예시 | 예시 설명 | 하이픈 ( - ) |
언더바 ( _ ) |
공백 | 합성어 |
| [속성이름] 선택자 | [title]{color : blue;} | title인 요소 모두 선택 | X | X | X | X |
| [속성이름="속성값"] 선택자 | [title="coder"] {color : blue;} |
title="coder"인 요소 모두 선택 | X | X | X | X |
| [속성이름~="속성값"] 선택자 | [title~="coder"] {color : blue;} |
속성값이 coder이거나 coder bear처럼 띄어쓰기 된 요소들이 모두 선택된다. coder-bear는 선택되지 않는다. (하이픈은 한 글자로 인식) |
X | X | O | X |
| [속성이름|="속성값"] 선택자 | [title~="coder"] {color : blue;} |
정확히 coder이거나 하이픈으로 연결된 요소만 선택 ex) coder (o) coder-bear (o) coder bear (x) |
O | X | X | X |
| [속성이름^="속성값"] 선택자 | [title^="coder"] {color : blue;} |
coder로 시작한 모든 요소 선택 | O | O | O | O |
| [속성이름$="속성값"] 선택자 | [title$="coder"] {color : blue;} |
coder로 끝나는 모든 요소 선택 | O | O | O | O |
| [속성이름*="속성값"] 선택자 | [title*="coder"] {color : blue;} |
coder를 포함하는 모든 요소 선택 |
O | O | O | O |
① [속성이름] 선택자
특정 속성을 가지고 있는 요소를 모두 선택
② [속성이름="속성값"] 선택자
특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택
③ [속성이름~="속성값"] 선택자
특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택
④ [속성이름|="속성값"] 선택자
특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택
⑤ [속성이름^="속성값"] 선택자
특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택
⑥ [속성이름$="속성값"] 선택자
특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택
⑦ [속성이름*="속성값"] 선택자
특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택
ex)
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
/* img 태그 중에서 src 속성이 png로 끝나는 태그의
border 속성에 3px solid red를 적용합니다.*/
img[src$=png] { border: 3px solid red; }
/* img 태그 중에서 src 속성이 jpg로 끝나는 태그의
border 속성에 3px solid green를 적용합니다.*/
img[src$=jpg] { border: 3px solid green; }
/* img 태그 중에서 src 속성이 gif로 끝나는 태그의
border 속성에 3px solid blue를 적용합니다.*/
img[src$=gif] { border: 3px solid blue; }
</style>
</head>
<body>
<img src="jajq.png" width="200" height="300" />
<img src="node.jpg" width="200" height="300" />
<img src="ux.gif" width="200" height="300" />
</body>
</html>
// Tip : ex) <h2 title="first h2"></h2>
ㄴ 툴팁(커서를 대면 해당 내용이 나온다)
# 동위 선택자
동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다.
ex) li 태그를 기준으로 모든 li 태그는 동일한 위치에 있는 동위 상태이다.
| 선택자 형태 | 예시 | 설명 |
| 선택자 A + 선택자 B | h1+div | 선택자 A 바로 뒤에 위치하는 선택자B를 선택 |
| 선택자 A ~ 선택자 B | h1~div | 선택자 A 뒤에 위치하는 선택자B를 선택 |
ex)
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
/* h1 태그의 바로 뒤에 위치하는 h2 태그의
color 속성에 red 키워드를 적용합니다. */
h1 + h2 { color: red; }
/* h1 태그의 뒤에 위치하는 h2 태그의
background-color 속성에 orange 키워드를 적용합니다. */
h1 ~ h2 { background-color: orange; }
</style>
</head>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
</body>
</html>
- 상태 선택자와 동위 선택자의 복합 활용
ex) input 태그의 type 속성
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
/* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,
바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */
input[type=checkbox]:checked + div {
height: 0px;
}
div {
overflow: hidden;
width: 650px; height: 300px;
/* 변환 효과를 적용합니다. */
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
</style>
</head>
<body>
<input type="checkbox">
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때,
이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.
CSS 권고안에 포함되지 못한 기능이나
포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 사용한다.
벤더 프리픽스는 실험적인 해당 기능들이 CSS 표준 권고안에 포함되거나,
완벽하게 제정된 상태가 되면 더는 사용할 필요가 없어진다.
| 브라우저명 | 접두어 |
| Chrome & Safari 4.0 이상 | -webkit- |
| FireFox 3.6 이상 | -moz- |
| Explorer 10.0 이상 | -ms- |
| Opera 10.0 이상 | -o- |
CSS 표준 문법 코드는 벤더 프리픽스(vendor prefix)로 작성된 코드가 모두 나오고 난 후에 나와야만,
벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.
// Tip : 벤더 프리픽스 생략하게 해주는 플러그인 - prefix-free 라이브러리
+ 현재는 벤더 프리픽스 쓰지 않아도 transition 가능하다.
- transition : 엘리멘트가 변하는 특정한 style 속성에 부드러운 애니메이션 효과를 주는 변형 속성
① transition : 모든 transition 속성을 한 번에 적용
② transition-delay : 이벤트 발생 후 몇 초 뒤에 재생할지 지정
③ transition-duration : 몇 초 동안 재생할지 지정
④ transition-property : 어떤 style 속성 변형할지 지정
⑤ transition-timing-function : transition의 시간 당 속도 설정
# 문자 선택자 : 태그 내부의 특정한 조건의 문자를 선택하는 선택자
문자 선택자는 가상 요소선택자(Pseudo-Element Selector)로 : 기호를 사용해도 정상 작동하지만,
표준은 :: 기호이므로 이를 사용할 것
| 선택자 형태 | 예시 | 설명 |
| ::first-letter | p::first-letter | 첫 번째 글자 선택 |
| ::first-line | p::first-line | 첫 번째 줄 선택 |
ex)
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
p::first-letter { font-size: 3em; } // 첫 번째 글자를 3배
p::first-line { color: red; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
</body>
</html>
- 전후 문자 선택자
| 선택자 형태 | 예시 | 설명 |
| ::before | p::before | 태그 앞에 위치하는 공간 선택 |
| ::after | p::after | 태그 뒤에 위치하는 공간 선택 |
ex)
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
p { counter-increment: rint; }
p::before { content: counter(rint) "."; }
p::after { content: " - " attr(data-page) " page"; }
p::first-letter { font-size: 3em; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p data-page="52">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p data-page="273">Aenean ac erat et massa vehicula laoreet consequat et sem.</p>
<!--주의 깊게 살펴볼 부분은 ::first-letter 선택자를 사용해 첫 번째 글자를 선택했을 때
전후문자 선택자로 생성한 글자도 스타일이 적용되었다.-->
</body>
</html>전후 문자 선택자에는 content 스타일 속성을 입력할 수 있다.
(다른 선택자에는 content 스타일 속성을 적용할 수 없다.)
ex)
<!doctype html>
<html>
<head>
<style>
h1. st:before{ // 뒤에 콘텐트를 붙일 땐 after 사용
content: "String";
color: skyblue;
}
h1.ur:before{
content: url("coderbear.jpg"); // 이미지 넣을 때
margin-right: 10px;
}
h1.at:before{
content: attr(class); // 선택 요소 속성값 출력 (p 요소의 class 값 나타내는 예시)
margin-right: 10px;
}
</style>
</head>
<body>
<h1 class="st">Lorem</h1>
<h1 class="ur">Ipsum</h1>
<h1 class="at">Dolor</h1>
</body>
</html>
- counter-reset, counter-increment
| 속성 형태 | 설명 |
| counter-reset | 시작하는 번호 지정 |
| counter-increment | 번호 증가 |
- 증가할 숫자를 주지 않으면 1씩 증가한다(기본값)
- 참고 data 속성
웹 표준에 따르면 각각의 태그에 지정된 속성 이외의 것을 사용하면 안 된다.
하지만 속성 앞에 문자열 data-를 붙이면 사용자 지정 속성으로 인정해준다.
웹과 관련된 기술을 접할수록 사용자 지정 속성은 굉장히 많이 사용된다.
ex) jQuery Mobile 프레임워크 (모바일 앱을 쉽게 만들 수 있는 프레임워크)
<html class="ui-mobile">
<head>
<base href="file://192.168.10.126/Java/Test/Day38/3.%20%EB%AC%B8%EC%9E%90%20%EC%84%A0%ED%83%9D%EC%9E%90/3.html">
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body class="ui-mobile-viewport">
<div data-role="page" data-url="/Java/Test/Day38/3.%20%EB%AC%B8%EC%9E%90%20%EC%84%A0%ED%83%9D%EC%9E%90/3.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 594px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">HTML5</h1>
</div>
<div data-role="content" class="ui-content" role="main"> // 레이아웃 자동 구성해줌
<ul data-role="listview" class="ui-listview">
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b">HTML5</li>
<li class="ui-li ui-li-static ui-body-c">Multimedia</li>
<li class="ui-li ui-li-static ui-body-c">Connectivity</li>
<li class="ui-li ui-li-static ui-body-c">Device Access</li>
<li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b">CSS3</li>
<li class="ui-li ui-li-static ui-body-c">Animation</li>
<li class="ui-li ui-li-static ui-body-c">3D Transform</li>
</ul>
</div>
</div>
<!--위와 같이 입력하고 실행해보면 페이지가 자동으로 디자인 된것을 볼수가 있다.
이러한 프레임워크를 UI 프레임워크라고 부르며 사용자 지정 속성을 굉장히 많이 활용한다.-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span>
<h1>loading</h1>
</div>
</body>
</html>
# 반응 문자 선택자
| 선택자 형태 | 예시 | 설명 |
| ::selection | p::selection | 사용자가 드래그한 글자 선택 |
ex)
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
p::selection { background: black; color: red; } // 드래그했을 때
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nunc nisl turpis, aliquet et gravida non, facilisis a sem.</p>
</body></html>
# 링크 선택자
| 선택자 형태 | 예시 | 설명 |
| :link href | a:link href | 속성을 가지고 있는 a 태그 선택 |
| :visited | a:visited | 방문했던 링크를 가지고 있는 a 태그 선택 |
ex)
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
a { text-decoration: none; } // 링크의 밑줄 삭제
a:visited { color: red; }
/* href 속성을 가지고 있는 a 태그의 뒤의 공간에
"- (href 속성)"을 추가합니다. */
a:link::after { content: ' - ' attr(href); }
</style>
</head>
<body>
<h1><a>Nothing</a></h1>
<h1><a href="http://hanb.co.kr">Hanbit Media</a></h1>
<h1><a href="http://www.w3.org/">W3C</a></h1>
<h1><a href="https://github.com/">Github</a></h1>
</body></html>
# 부정 선택자
| 선택자 형태 | 예시 | 설명 |
| :not(선택자) | li:not(.item) | 선택자를 반대로 적용 |
ex)
<html><head>
<title>Coderbear's CSS Practice</title>
<style>
/* input 태그 중에서 type 속성이 password가 아닌 태그의
background 속성에 red 키워드를 적용합니다.*/
input:not([type=password]) {
background: red;
}
</style>
</head>
<body>
<input type="password">
<input type="text">
<input type="password">
<input type="text">
</body></html>
# overflow
요소 내 컨텐츠가 너무 커서 모두 보여주기 힘들 때 보여주는 방식을 지정하는 속성
| overflow : 종류 | 설명 |
| visible | 기본 값, 넘칠 경우 컨텐츠가 상자 밖으로 보여짐 |
| hidden | 영역을 벗어나는 부분은 보이지 않음 |
| scroll | 영역을 벗어나는 부분을 스크롤로 만들어 볼 수 있음 |
| auto | 영역을 벗어나는 경우 스크롤바가 자동 생성, 가로/세로 필요한 부분에 생김 |
| overflow x, overflow y | 가로, 세로 overflow를 각각 제어할 때 사용 (특정한 방향으로 스크롤 생성하고 싶을 때) |
ex) overflow - hidden
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
ex) overflow - scroll
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow: scroll;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
ex) overflow - overflow x, overflow y
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
# float 속성 (부유해서 채워주고 자연스럽게 어울리는 효과)
해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어줌
현재는 웹 페이지의 레이아웃(layout)을 잡는 용도로 많이 사용된다.
ex)
<style>
img { float: left; margin-right: 20px; } // float이 없는 경우 이미지가 끝난 곳부터 글자 시작함
</style>
ex)float을 활용한 레이아웃 예시
<style>
div.page { border: 3px solid #CD5C5C; overflow: auto; }
h2 { text-align: center; }
header{ border: 3px solid #FFD700; } // 시멘틱 웹
nav { border: 3px solid #FF1493; width: 150px; float: left; }
section { border: 3px solid #00BFFF; margin-left: 156px; }
footer{ border: 3px solid #00FA9A; }
</style>
#clear 속성
clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다.
컨테이너 요소에 float 속성이 적용되면,
그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다.
ex)
<style>
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
p { clear: both; } // both = left, right 모두 float을 지우고 싶은 경우
</style>따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여,
이후에 등장하는 요소들이 더는 float 속성에 영향을 받지 않도록 설정해줘야 한다.
# css 크기(Dimension)
| 속성 이름 | 설명 | 기본 값 |
| width | 너비 | auto |
| height | 높이 | auto |
| max-width | HTML 요소의 최대 너비 설정 줄어드는 웹 브라우저 크기에 맞춰 해당 HTML 요소 너비도 자동으로 줄어듬 |
none |
| min-width | HTML 요소의 최소 너비 설정 웹 브라우저가 min-width 너비 이하로 줄어들면, HTML 요소 너비는 더 줄지 않고 수평 스크로 바 생성 |
width값 100% |
| max-height | HTML 요소의 최대 높이 설정 max-height 설정 시 HTML 요소 높이는 설정 높이 이하로 제한함 설정 높이보다 큰 경우 수직 스크롤바 생성 |
none |
| min-height | HTML 요소의 최소 높이 설정 min-height 설정 시 HTML 요소 높이는 설정 높이 이하로 제한함 (height 속성값이 min-height 속성 값 이하로 낮아지지 않도록 함) max-height나 height 속성값 보다 먼저 적용됨 |
0 |
ex) width, height 예시
<!doctype html>
<html lang="ko"><head>
<meta charset="UTF-8">
<title>Coderbear's CSS Practice</title>
<style>
div {
height: 200px;
width: 500px;
border: 2px solid lightsalmon;
}
</style>
</head>
<body>
<h1>height와 width 속성</h1>
<div>이 div 요소의 높이는 200px이고 너비는 500px입니다.</div>
</body>
</html>
ex) max-width 예시
<!DOCTYPE html>
<html lang="ko"><head>
<meta charset="UTF-8">
<title>Coderbear's CSS Practice</title>
<style>
div.width {
width: 500px;
border: 2px solid #DAA520;
}
div.maxWidth {
max-width: 500px;
border: 2px solid #CD5C5C;
}
</style>
</head>
<body>
<h1>max-width 속성</h1>
<div class="width">이 div 요소는 width 속성을 500px로 설정했습니다.</div><br>
<div class="maxWidth">이 div 요소는 max-width 속성을 500px로 설정했습니다.</div>
<p>웹 브라우저의 크기를 줄여서 두 div 요소의 차이를 알아보세요!</p>
</body>
</html>
ex) min-width 예시
<!DOCTYPE html>
<html lang="ko"><head>
<meta charset="UTF-8">
<title>Coderbear's CSS Practice</title>
<style>
div.width {
width: 500px;
border: 2px solid #DAA520;
}
div.minWidth {
min-width: 500px;
border: 2px solid #CD5C5C;
}
</style>
</head>
<body>
<h1>min-width 속성</h1>
<div class="width">이 div 요소는 width 속성을 500px로 설정했습니다.</div><br>
<div class="minWidth">이 div 요소는 min-width 속성을 500px로 설정했습니다.</div>
<p>웹 브라우저의 크기를 줄여서 두 div 요소의 차이를 알아보세요!</p>
</body>
</html>
ex) max-height 예시
<!DOCTYPE html>
<html lang="ko"><head>
<meta charset="UTF-8">
<title>Coderbear's CSS Practice</title>
<style>
p {
max-height: 50px;
background-color: greenyellow;
overflow: auto;
}
</style>
</head>
<body>
<h1>max-height 속성</h1>
<p>이 div 요소는 max-height 속성을 50px로 설정했습니다.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ligula non ligula iaculis semper at vitae ante. Sed condimentum viverra sollicitudin. Phasellus sodales ipsum nec nulla luctus, in luctus ipsum vestibulum. Pellentesque vehicula lectus a ex tincidunt, eget pellentesque nisl posuere. Vestibulum sed purus sapien. Aenean consequat urna sit amet quam pulvinar, in interdum augue volutpat. Donec ex leo, feugiat vel lorem non, blandit venenatis elit. Vestibulum eu erat eget ante consequat iaculis.
</p>
</body>
</html>
ex) min-height 예시
<!DOCTYPE html>
<html lang="ko"><head>
<meta charset="UTF-8">
<title>Coderbear's CSS Practice</title>
<style>
p {
min-height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<h1>min-height 속성</h1>
<p>이 div 요소는 min-height 속성을 100px로 설정했습니다.</p>
</body>
</html>
[번역] REM vs EM
원문 : REM vs EM — The Great Debate
medium.com
// Tip : Just Color Picker - 원하는 색상을 찾을 수 있는 프로그램
ㄴ alt+x : 해당 색상 알 수 있음
# 글자 속성
- font-size: 글자 크기 지정 속성
ex)
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.a { font-size: 32px; }
.b { font-size: 2em; }
.c { font-size: large; }
.d { font-size: small; }
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p class="a">Lorem ipsum</p>
<p class="b">Lorem ipsum</p>
<p class="c">Lorem ipsum</p>
<p class="d">Lorem ipsum</p>
</body>
</html>- 글꼴 한 개 지정하기
일반적으로 한 단어로 이루어진 글꼴 이름은 따옴표를 사용하지 않지만
두 단어 이상으로 이루어지는 글꼴 이름은 따옴표 사용을 하는 것이 좋다.
- font-family : 글꼴 지정 속성 (글꼴 여러 개 지정하기)
웹사이트 사용자의 컴퓨터에 폰트가 없는 경우를 고려해 여러 개의 font-family 속성을 입력한다.
그러면 웹 브라우저가 지정된 여러 글꼴 중에서 사용자의 컴퓨터에 설치된 글꼴을 찾아 출력한다.
가장 마지막에는 웹 브라우저에서 지정하는 generic-family 글꼴(기본 폰트)을 입력해줘야 한다.
ex)
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.font_arial { font-family: Arial; }
.font_roman { font-family: 'Times New Roman'; }
</style>
</head>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font_roman">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>
// Tip : HTML 페이지에서 p 태그의 기본 크기는 16px이다.
따라서 32px로 지정한 글자와 2배수를 적용한 글자의 크기가 같다.
또한 h1 태그의 기본 크기는 32px이다.
ex)
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.font_arial { font-family: '없는 폰트', Arial; }
.font_roman { font-family: 'Times New Roman', Arial; }
</style>
</head>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font_roman">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>
- font-style, font-weight : 글자의 두께와 기울기 조정 속성
두께를 지원하지 않는 글꼴은 이 속성으로 두께를 조절 할 수 없다.
// Tip : font-weight에 400을 입력할 경우 일반 글자의 두께로 출력되고, 700을 입력하면 두껍게 출력된다.
ex)
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
</style>
</head>
<body>
<p class="font_big font_italic font_bold">Lorem ipsum dolor amet</p>
</body>
</html>
- text align : 글자 정렬
ex)
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
.font_center { text-align: center; }
.font_right { text-align: right; }
</style>
</head>
<body>
<p class="font_big font_italic font_bold font_center">Lorem ipsum dolor amet</p>
<p class="font_bold font_right">2013.12.09</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>
★ex) 예시 설명 - span 태그는 인라인 형태이므로 너비가 존재하지 않아 text-align 속성을 적용할 수 없다.
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.font_center { text-align: center; }
</style>
</head>
<body>
<span class="font_center">Lorem ipsum dolor amet</span> // span은 정렬이라는 개념이 없다
<p class="font_center">Lorem ipsum dolor amet</p>
</body>
</html>
- line-height : 글자 높이 지정
요새는 이 속성으로 글자 중앙 정렬에 더 많이 활용한다.
- 글자 수직 중앙 정렬하기
ex) line-height before 예시
CSS에는 block 속성을 가지는 태그에 수직 정렬을 지정할 수 있는 스타일 속성이 없어 수직 중앙 정렬되지 않는다.
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.font_big { font-size: 2em;}
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
.font_center { text-align: center; }
.button {
width: 150px;
height: 70px;
background-color: #FF6A00;
border: 10px solid #FFFFFF;
border-radius: 30px;
box-shadow: 5px 5px 5px #A9A9A9;
}
.button > a {
display: block;
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">Click</a>
</div>
</body>
</html>
ex) line-height after 예시
글자를 감싸는 박스의 높이와 같은 크기인 70px을 line-height 속성으로 지정하면 글자가 수직으로 중앙정렬된다.
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
.font_center { text-align: center; }
.button {
width: 150px;
height: 70px;
background-color: #FF6A00;
border: 10px solid #FFFFFF;
border-radius: 30px;
box-shadow: 5px 5px 5px #A9A9A9;
}
.button > a {
display: block;
line-height: 70px;
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">Click</a>
</div>
</body>
</html>
- text-decoration : <a href>의 링크 밑줄 제거 시 사용
# 위치 속성
| 프로그램 개발 시 요소의 위치 설정 방법 2가지 |
| - 절대 위치 좌표 : 요소의 x좌표, y좌표를 설정해 절대 위치 지정 ex) absolute, fixed - 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치 지정 ex) static, relative |
- position : 레이아웃 배치 또는 객체 위치시킬 때 사용하는 속성
상속되지 않고, 위 아래 왼쪽 오른쪽의 위치 같이 설정할 수 있다.
(top, bottom, left, right)
| 속성 이름 | 설명 | 예시 |
| static | 기본값, 위치를 지정하지 않을 때 사용 상대 위치 좌표 설정 |
|
| relative | static 기준의 상대 위치 초기 위치에서 상하좌우로 이동 |
|
| absolute | 가장 가까운 상위 요소 기준으로 위치 결정됨 바깥 쪽에 공간이 생기지 않음 절대 위치 좌표 설정 |
ex) A(부모위치)를 기준으로 B 100px, C 200px 있는 곳에 위치하게 된다. |
| fixed | 브라우저 화면 기준으로 절대 위치 좌표 설정 |
ex) absolute 예시
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) { background-color: red; }
.box:nth-child(2) { background-color: green; }
.box:nth-child(3) { background-color: blue; }
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
ex) absolute 예시 2 - 레이아웃 시 성질들이 중요한 작용을 한다.
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
- z-index : 실행 결과에서 도형 순서 변경 시 사용하는 속성
인덱스 값의 숫자가 클수록 앞에 위치함.
(너무 크게 입력하면 웹 브라우저가 인식을 못할 수 있으므로 주의할 것)
ex)
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
- 위치속성 공식(중요)
ex) before
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div> // div 공간을 따로 잡지 못하고 있음
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>위의 예시 코드의 실행 결과 문제점
① h1 태그 두 개가 붙어 있다(div 태그가 영역을 차지하지 않는다).
② 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않는다.
position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않는다.
따라서 자손의 position 속성에 absolute 키워드를 적용할 경우에는 부모 태그에 아래와 같이 처리해야 한다.
① 해결방안
자손의 position 속성에 absolute 키워드를 적용하는 경우 부모에게 height 속성을 입력해야 한다!★
이를 통해 부모 태그가 영역을 차지할 수 있게 된다.
ex) ①
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
body > div {
width: 400px; height: 100px; // div만의 공간을 갖게 해주는 역할
border: 3px solid black;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
② 해결방안
자손의 position 속성에 absolute 키워드를 적용하는 경우 부모의 속성을 relative 키워드로 적용해야 한다.★
(CSS 레이아웃 공식 같은 개념으로 꼭 알아두자!)
이렇게 하면 자손 태그가 부모의 위치를 기준으로 절대 좌표를 설정한다.
이 공식에 따라 div 태그에 position 속성을 입력한다.
ex) ②
<!DOCTYPE html>
<html>
<head>
<title>Coderbear's CSS Practice</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
body > div {
width: 400px; height: 100px;
border: 3px solid black;
position: relative; // 부모의 div를 반드시 relative로 줄 것
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>[ 참고자료 ] http://tcpschool.com/
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
[ 참고자료 ] https://dasima.xyz/css-attribute-selector/
CSS 속성 선택자 의미 및 7가지 종류 예제 - SOFT HIVE
CSS 속성 선택자는 어떤 기능을 가지고 있을까요? HTML의 태그, 속성명, 속성값 요소중에서 속성명 및 속성값 부분을 선택자로 지정하는 기능입니다. 크게 일곱 가지 종류의 속성을 선택하는 경우�
dasima.xyz
728x90
'Web > CSS' 카테고리의 다른 글
| [필기정리] Day39 - float, shadow, gradient 등 (0) | 2020.08.04 |
|---|---|
| [필기정리] Day38 - CSS 문제 및 해답 (0) | 2020.08.03 |
| [필기정리] Day37 - CSS 문제 및 해답 (0) | 2020.07.31 |
| [필기정리] Day37 - 색상표현단위, 박스속성 등 (0) | 2020.07.31 |
| [필기정리] Day36 - CSS 문제 및 해답 (0) | 2020.07.30 |