Chap.2 CSS3[CSS3 속성] - CSS3 단위, 키워드 단위, 크기 단위, 색상 단위, URL 단위, 박스 속성, display 속성, 배경 속성, font속성, text속성, 위치 속성, float속성, 그림자 속성
CSS3 속성
CSS3 단위, 키워드 단위, 크기 단위, 색상 단위, URL 단위, 박스 속성, display 속성, 배경 속성, font속성
CSS3 단위
-
CSS3 단위
- 키워드
- 크기
- 색상
- URL
키워드 단위
-
키워드를 스타일 값으로 입력
- big, middle, small 등
→ 키워드에 해당하는 스타일이 자동으로 적용
-
통합 개발 환경에서는 입력한 속성에 속한 키워드를 자동으로 알려줌
크기 단위
-
크기 단위
- CSS3에서 가장 많이 사용하는 단위
- %, em, mm, inch, px
-
% 단위 적용하기 - size_persent.html
- % 단위: 기본으로 설정된 크기를 기준으로 상대적인 크기 지칭
- 기본 크기: 100%
<head>
<title>CSS3 Style Property Basic</title>
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 100%; }
p:nth-child(3) { font-size: 150%; }
p:nth-child(4) { font-size: 200%; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
-
em 단위 적용하기 – size_em.html
- em 단위: 배수를 나타냄
- 1배=1em=100%
- 1.5배=1.5em=150%
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 1.0em; }
p:nth-child(3) { font-size: 1.5em; }
p:nth-child(4) { font-size: 2.0em; }
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>결과
-
px 단위 적용하기
- px 단위: 절대적인 크기를 나타냄
- p 태그의 기본 font-size 속성이 16px
- width 속성, height 속성 적용가능
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 16px; }
p:nth-child(3) { font-size: 24px; }
p:nth-child(4) { font-size: 32px; }
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>결과
default : 16px
색상 단위
-
색상에 해당하는 영단어 입력
-
RGB 색상 단위
- 0부터 255사이의 숫자를 입력
-
RGBA 색상 단위
- 알파 값은 투명도를 나타냄
- 0.0(완전투명) 부터 1.0(완전불투명)사이의 숫자를 입력
-
HEX 코드 단위
- RGB 색상 조합을 16진수로 입력
잘 안쓴다. 팔레트 이용
URL 단위
-
URL 단위
- 이미지나 글꼴 파일을 불러올 때 사용
- background-image 속성 사용
▪ url(경로) 형태로 입력
박스 속성
-
다음 그림에 표시된 속성을 모두 합쳐 박스 속성이라고 함
-
width와 height 속성
- 글자를 감싸는 영역의 크기를 지정
-
boder 속성
- 테두리의 두께를 지정
-
margin 속성
- 테두리와 다른 태그와의 간격을 지정
-
padding 속성
- 테두리와 글자 사이의 간격을 지정
-
width와 height 속성 적용하기
- box_widthHeight.html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>결과
-
margin과 padding 속성 적용하기
- box_marginPadding.html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
border: 20px solid black;
margin: 10px;
padding: 30px
}
</style>
</head>
<body>
<div>내용 내용 내용 내용 내용 내용 내용 내용
내용 내용 내용 내용 내용 내용 내용 내용
내용 내용 내용 내용 내용 내용 내용 내용
</div>
</body>결과
Overflow 발생
-
전체 너비=width+2 X (margin+border+padding)
-
전체 높이=height+2 X (margin+border+padding)
-
border-width 속성 : 테두리의 두께 지정
border-style 속성 : 테두리의 형태 지정
- border_basic.html
<head>
<style>
.box {
border-width: thick;
border-style: dashed;
border-color: black;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>결과
-
border-radius 속성
- border_radius.html
-테두리가 둥근 사각형 또는 원 생성 가능
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
border-width: thick;
border-style: dashed;
border-color: black;
/* border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 */
border-radius: 50px 40px 20px 10px;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>결과
display 속성
-
display 속성
-
none 키워드 적용하기
- display_none.html
- 태그가 화면에서 보이지 않음
<head>
<style>
#box {
display: none;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>결과
-
block 키워드 적용하기
- display_block.html
<head>
<title>Display</title>
<style>
#box {
display: block;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>결과
-
inline 키워드와 inline -block 키워드 적용하기
- display_inline.html
<head>
<title>Display</title>
<style>
#box {
display: inline;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>결과
-
인라인 형식과 인라인-블록 형식의 차이
- inline 키워드를 적용한 코드
▪ width와 height 속성이 지정되지 않음
▪ margin 속성이 div 태그의 좌우로만 적용
- inline-block 키워드를 적용한 코드
▪ width와 height 속성이 적용
▪ margin 속성도 상하좌우로 적용
배경 속성
-
배경 속성
-
background-image 속성
- 배경 이미지를 지정하는 속성
-
background-size 속성
- 배경 이미지 크기를 조절하는 속성
-
배경 이미지 한 개 삽입하기
- background_image.html
- background-image 속성에 URL 단위 사용
<head>
<style>
body {
background-image: url('images/penguins.jpg');
}
</style>
</head>
<body>
</body>결과
-
배경 이미지 두개 삽입하기
- background_imageLayer.html
투명이미지가 있어야한다. pass
-
배경 이미지의 너비 조절하기
- background_size.html
- background-size 속성 사용
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image:
url('BackgroundFront.png'),
url('BackgroundBack.png');
background-size: 100%; /*width만*/
}
</style>
</head>
<body>
</body>
-
배경 이미지 높이 조절하기
- background-size 속성에서 두 번째에 입력하는 크기 단위는 높이를 의미
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image:
url('BackgroundFront.png'),
url('BackgroundBack.png');
background-size: 100% 250px; /*height 고정*/
}
</style>
</head>
<body>
</body>
-
repeat
- 이미지가 패턴을 이룸
-
repeat-x
- X 축 방향으로만 이미지가 반복됨
-
repeat-y
- Y 축 방향으로만 이미지가 반복됨
-
background-attachment 속성
- 배경 이미지를 화면에 고정하는 속성
- 기본 키워드 : scroll
▪ 화면 스크롤에 따라 배경 이미지가 함께 이동
-
background-position 속성
- 아이콘(스프라이트 이미지)을 만들 때 자주 사용
- 크기 단위나 키워드(left, top, right, bottom 등)를 입력
▪ background-position : 키워드;
▪ background-position : X축 위치;
▪ background-position : X축 위치 Y축 위치;
-
배경 이미지 반복 없애기
- background_repeatNone.html
- background-repeat 속성에 no-repeat 입력
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
-
스크롤이 가능할 분량의 텍스트 추가하기
- background_attachmentScroll.html
- 스크롤을 내리면 배경 이미지가 위로 올라가 사라짐
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
-
배경 이미지 화면에 고정시키기
- background_attachmentFixed.html
- background-attachment 속성 값에 fixed 입력
- 스크롤을 이동해도 배경 이미지가 고정
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
-
배경 이미지 하단에 배치하기
- background_positionBottom.html
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
</style>
-
배경 이미지 위치 조정하기
- X축 위치와 Y 축 위치를 지정하는 두 개의 값을 입력
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 50%;
}
</style>
font속성
-
font-size 속성
- 글자 크기를 지정하는 속성
- 크기 단위나 키워드를 입력
-
font-family 속성
- 글꼴을 지정하는 속성
-
font-family 속성을 여러 개 입력
- 사용자의 컴퓨터에 글꼴이 없는 경우 대비
-
웹 브라우저에서 지정하는 generic-family 글꼴 입력
- 다국적 사용자를 대상으로 웹 페이지를 개발할 경우
- Serif 글꼴(명조체)
- Sans-serif 글꼴(고딕체)
- Mono space 글꼴(고정 폭 글꼴)
-
글꼴 한 개 지정하기
- font_famaily.html
<style>
.font_arial { font-family: Arial; }
.font_roman { font-family: 'Times New Roman'; }
</style>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font_roman">Lorem ipsum dolor </p>
</body>
-
글꼴 여러 개 지정하기
– font_familyEach.html
- 사용자의 컴퓨터에 글꼴이 없을 경우를 대비하여 font-family 속성을 여러 개 입력
<style>
.font_arial { font-family: '없는 폰트', Arial; }
.font_roman { font-family: 'Times New Roman', Arial; }
</style>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font_roman">Lorem ipsum dolor </p>
<body>
-
font-style 속성
- 글자의 기울기 조정
-
font-weight 속성
- 글자의 두께 조정
-
글자 두께와 기울기 조절하기
– font_styleWeight.html
- font-weight 속성에 400을 입력할 경우 일반 글자의 두께로 출력
- font-weight 속성에 700을 입력할 경우 두껍게 출력
<head>
<title>CSS3 Font Property</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>
text속성
-
text-align 속성
- 글자의 정렬 지정
<head>
<title>CSS3 Font Property</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.</p>
</body>결과
inline은 의미 X
-
line-height 속성
- 글자의 높이 지정
- 글자를 수직 정렬할 때 사용
-
간단한 버튼 만들기
- font_lineHeightBefore.html
<style>
.button {
width: 150px;
height: 70px;
background-color: #FF6A00;
border: 10px solid #FFFFFF;
border-radius: 30px;
box-shadow: 5px 5px 5px #A9A9A9;
}
.font_big { font-size: 2em;}
.font_italic {font-style: italic;}
.font_bond { font-weight: bold;}
.font_center { text-align: center; }
.button > a {
display: block;
}
</style>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">
Click</a>
</div>
</body>결과
-
글자를 수직 중앙 정렬하기
- font_lineHeightAfter.html
- 글자를 감싸는 박스의 높이와 같은 크기의 line-height 속성을 적용
<style>
.button {
width: 150px;
height: 70px;
background-color: #FF6A00;
border: 10px solid #FFFFFF;
border-radius: 30px;
box-shadow: 5px 5px 5px #A9A9A9;
}
.font_big { font-size: 2em;}
.font_italic {font-style: italic;}
.font_bond { font-weight: bold;}
.font_center { text-align: center; }
.button > a {
display: block;
line-height: 70px;
}
</style>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">
Click</a>
</div>
</body>결과
위치 속성
-
요소의 위치를 설정하는 방법
절대 위치 좌표: 요소의 X 좌표와 Y 좌표를 설정해 절대 위치 지정
상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치 지정
-
position 속성
-
absolute 속성 적용하기
– position_absolute.html
<head>
<title>CSS3 Property Basic</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>결과
-
left와 top 속성 적용하기
<head>
<title>CSS3 Property Basic</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>결과
-
도형의 순서를 변경하고 싶을 경우 z-index 속성 사용
- 숫자가 클수록 앞에 위치
<head>
<title>CSS3 Property Basic</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>결과
overflow 속성
-
overflow 속성
- 내부의 요소가 부모의 범위를 벗어날 때 요소를 처리하는 방법 지정
-
hidden 속성 적용하기
-position_formulaOverflowHidden.html
<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>
<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>결과
-
scroll 속성 적용하기
-position_formulaOverflowScroll.html
overflow: scroll;결과
-
overflow-x와 overflow-y 속성 적용하기
- position_formulaOverflowEach.html
- 특정한 방향으로만 스크롤을 생성하고 싶을 경우
overflow-y: scroll;
float 속성
-
float 속성
- 웹 페이지를 만들 때 가장 많이 사용하는 속성
- 레이아웃을 잡을 때 많이 사용
<style>
</style>결과
<style>
img {
float: left;
}
</style>
결과
그림자 속성
-
text-shadow 속성
- 글자에 그림자 부여
-
box-shadow 속성
- 박스에 그림자 부여
브라우저 버전 체크해야한다.
-
글자에 그림자 만들기
- shadow_textShadow.html
<style>
h1 {
text-shadow: 5px 5px 5px black;
}
</style>결과
-
박스에 그림자 만들기
- shadow_boxShadow.html
<style>
div {
border: 3px solid black;
box-shadow: 10px 10px 30px black;
text-shadow: 5px 5px 5px black;
}
</style>결과
-
중첩 그림자 만들기
- shadow_duplication.html
<style>
.box {
border: 3px solid black;
box-shadow: 10px 10px 10px black,
10px 10px 20px orange,
10px 10px 30px red;
text-shadow: 10px 10px 10px black,
10px 10px 20px orange,
10px 10px 30px red;
}
</style>결과
댓글