Web 04 - CSS의 속성(colors, Font-size, Box Model, Display, Visibility, Position, Backgrounds, Font)
17 Feb 2019 | Web HTML CSSColors
- Color name
- Color code
- rgb
- rgba
- a(alpha)의 범위는 0.0~1.0 으로 값이 작아 질 수록, 색이 투명해짐.
<head>
<style>
/* 1. color name */
h1 {color: red;}
/* 2. color code */
h2 {color: #0000ff;}
/* 3. rgb() */
h3 {color: rgb(0,255,0);}
/* 4. rgba() */
/* 4. a(alpha): 0.0 ~ 1.0 */
p {color: rgba(255,0,0,0.5)}
</style>
</head>
<body>
<h1>빨간색</h1>
<h2>파란색</h2>
<h3>초록색</h3>
<p>흐릿한 빨간색(투명도)</p>
</body>
Font-sizes
- 문서 전체의 단위 길이 적용
<head>
<style>
/* 단위 길이(font-size) */
html {font-size: 10px;}
</head>
rem
&em
- 단위 길이를 다른 요소들과 비교하여 상대적으로 정함.
rem
: Root Element (html)의 폰트 사이즈가 기준이 됨.- 1.2 rem ; 10 px(html) * 1.2 = 12 px
em
: 상위 Element의 폰트 사이즈가 기준이 됨.<li class="em"> 저는 1.2em입니다.</li>
에서,li < ul < body < head
순의 상위 Element 로 이동하여 기준 폰트사이즈 (html: 10px) 를 찾음.- 자손 선택자
ul
&li (Ul의 자식 선택자)
의 폰트 사이즈가 각각1.2 em
인 것을 알 수 있음. - 따라서, 최종적으로 10px(html) * 1.2(ul) * 1.2(ul안의 li) = 14.4 px
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 단위 길이(font-size) */
html {font-size: 10px;}
/* rem: html에 정의된 font-size에 비례 */
ol {font-size: 1.2rem;}
/* 10px * 1.2 = 12px */
/* em: 자신의 상위 요소의 font-size에 비례 */
ul {font-size: 1.2em;}
.em {font-size: 1.2em;}
/* 10px(html) * 1.2(ul) * 1.2(ul li) = 14.4px */
</style>
</head>
<body>
<ol>
<li>저는 1.2rem입니다.</li>
</ol>
<ul>
<li class="em">저는 1.2em입니다.</li>
</ul>
</body>
https://www.w3schools.com/css/css_units.asp
- vh(viewpoint height) & vw(viewpoint height)
- 사용자가 보고있는 브라우져의 세로,가로 길이 (상대적인 값)
- 브라우져의 크기를 의도적으로 수정할 경우, 폰트 사이즈의 크기가 자동으로 변경됨.
- 1vh/vw: 100분의 1 값
- 브라우저 전체 넓이값이 1000px 일 때, 1vw는 10px
- 브라우저 전체 높이값이 900 px 일때, 1vh는 9px
<head>
<style>
.vh {font-size: 5vh;}
.vw {font-size: 5vw;}
</style>
</head>
<body>
<span class="vh">5vh</span>
<span class="vw">5vw</span>
</body>
Box Model
모든 HTML 요소들은 박스로 간주 할 수 있으며, CSS Box Model은 문서의 design과 layout을 일컫음.
기본 구성 요소 (참조: https://www.w3schools.com/css/css_boxmodel.asp)
- Content
- Padding
- Margin
- Border
box-sizing / width / height
box-sizing
: 박스 크기의 기준을 설정할 수 있음. (기본:content-box
)content-box
: 박스 크기의 기준이 cotent(내용)임border-box
: 박스 크기의 기준은 border이므로,padding
의 공간을 또한 포함함
width & height
: 박스의 너비 & 높이
<head>
<style>
box {
box-sizing: content-box;
width: 100px;
height: 100px;
}
</style>
</head>
padding & margin
padding
: border 의 안쪽 여백margin
: border의 바깥쪽 여백padding: 25px
와 같이, 상/하/좌/우의 여백을 동시에 줄 수도 있으며,padding-top: 25px
와 같이, 개별적으로 여백을 적용 할 수 있다.- cf)
padding: 25px 20px 15px 10px
처럼, 연속적으로 각각의 여백을 한줄로 표현도 가능.
- cf)
- 순서는 위부터 시계 방향(위 / 오른쪽 / 아래 / 왼쪽)
<head>
<style>
box {
/* 안쪽 여백 */
/* padding: 25px */
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
/*margin: 25px 20px 15px 10px ; 바깥쪽 여백 */
margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
</style>
</head>
border
border-width
: 테두리의 두께border-style
: 테두리의 스타일border-color
: 테두리 색상- cf)
border: 2px solid purple;
처럼 또한 연속적으로 테두리에 대한 설정을 할 수 있음 - 순서는 두께 > 스타일 > 색상 순임.
- cf)
border-radius
: 테두리 모서리 둥글기 정도
<head>
<style>
box {
/*border: 2px solid purple;*/
border-width: 2px;
border-style: solid;
border-color: purple;
/* 테두리 모서리 둥글기 정도 */
border-radius: 20px;
}
</style>
</head>
Display
Block
- 기본적으로 full width available 을 차지함. (전체 한 라인)
- 블록 레벨 속성은 항상 새로운 라인에서 시작함.
- block 레벨 요소 내에 inline 레벨 요소를 포함 할 수 있음.
- 예) div, h1~h6, p, ol, ul, li, table, form
Inline
- 자기자신을 담고 있는 곳 까지만 차지함(as much width as necessary)
- 새로운 라인에서 시작하지 않으며, 문장의 중간에 들어 갈수 수 있음.
- width, height, margin(top, bottom) 사용 불가 (상,하 여백은 line-height로 지정함)
- 예) span, a, strong, em, img, input
inline-block
- block과 inline 레벨 요소의 특징을 모두 가짐
- inline 레벨 요소 처럼 한줄에 표시 되면서, block에서의 width, height, margin(top, bottom) 속성을 모두 지정할 수 있음
None
- 해당 요소를 화면에 표시 하지 않음(공간 조차 차지 하지 않음)
div
태그는 블록 레벨 속성을 갖고 있음. 따라서 컨텐츠 만큼만 디스플레이를 설정하기 위해서는 아래와 같이display: inline
으로 의도적으로 변경을 해줘야 한다.
<head>
<style>
.box2 {
display: inline;
border: 2px solid red;
background-color: gray;
visibility: visible;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="box2">
이것은 박스 2 입니다.
</div>
</body>
Visibility
- Visibility & Opacity
- Visibility: 박스를 보이게 하는 설정(기본값: visible)
- 값을 hidden으로 적용하면 박스를 안보이게 설정 할 수 있음 (공간은 차지)
- Opacity: 박스의 투명도. 범위는 0.0~1.0으로 작아질수록 투명해짐
Position
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
종류: Static / absolute / relative / fixed
top / bottom / left / right 속성을 이용하여 위치 수정 가능
예)
top: 50px / left: 50px
: 테두리 내 기준으로 위에서 부터 50px, 왼쪽에서 50px 이동*각 박스의 위치가 겹치는 경우
z-index
속성을 이용하여 우선순위를 설정할 수 있음. static은 다른 박스와 상호작용을 못하기 때문에 z-index가 안먹힘.
Static (Default)
- top / bottom / left/ right 속성등에 영향을 받지 않음
- 위치는 페이지의 일반적인 흐름에 따라 결정됨. (CSS Position의 기본값)
.box-static {
background-color: gray;
border: 2px solid red;
width: 100px;
height: 100px;}
absolute
- 좌표(절대값) 기준으로 화면 내 어디로든 자유롭게 이동 가능.
- 이동할 경우, 기존 위치는 아애 비워져버리므로. static box가 있는 경우, 순차적으로 그자리를 차지해버림. (본가가 이사간다!)
.box-absolute {
position: absolute;
background: green;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
z-index: 1;}
relative
- Normal position (기존 위치)를 기준으로 이동(상대적 이동)
- 이동하여도, Normal position은 다른 content에 의해 차지되지 않음.
- (본가는 그대로 있고, 자취방을 구한다는 개념!)
.box-relative {
position: relative;
background: blue;
width: 100px;
height: 100px;
z-index:2;}
fixed
- 스크롤 바를 내려도 고정적으로 보이는 부분.
- 이동할 경우, 기존 위치는 아애 비워져버리므로. static box가 있는 경우, 순차적으로 그자리를 차지해버림. (본가가 이사간다!)
.box-fixed {
position: fixed;
background: pink;
width: 100px;
height: 100px;
top: 50px;
right: 50px;}
응용
- position을 설정한 태그 안에 추가로 태그를 넣음으로써, 기준점(시작점)을 설정 할 수도 있음.
<body>
<div class="small-box" id="green">
<div class="small-box" id="purple"></div>
<!-- green 안에 purple -->
</div>
<div class="small-box" id="blue">
<div class="small-box" id="orange"></div>
<!-- blue 안에 orange -->
</div>
</body>
<--! CSS file -->
<style>
#purple {
background-color: purple;
/* 초록색 기준으로 100 100 만큼 떨어져 있음 */
position: absolute;
top: 100px;
left: 100px;
}
#orange {
background: orange;
/* 파란색 기준으로 얼마나 떨어져있는가 */
position: absolute;
top: -100px;
left: 100px;
}
</style>
Background
CSS background의 속성은 선택자의 배경 효과를 설정하는데 사용 The CSS background properties are used to define the background effects for elements.
background-color
: 배경 색상 설정background-image
: 이미지 설정. 예)url(images/minsu.jpg);
background-position
: 가로 세로 초점 이동 설정- 예)
background-position: center center
- 예)
background-size
: 배경의 크기 설정- 직접 수치 입력 (예. 200px 200px)
contain
: 이미지가 완전히 보이도록 배경 이미지 크기 조정cover
: 전체 컨테이너를 덮을 수 있도록 배경 이미지 크기 조정
background-repeat
: 배경 이미지 반복 설정no repeat
: 반복하지 않음. (이미지는 1번만 표시)repeat
: 가로/세로로 반복. 적합하지 않을 시, 마지막 이미지가 잘림.initial
: 속성을 기본값으로 설정
background-attachment
: 배경 이미지 고정 / 스크롤 여부 설정scroll
: 배경이미지가 페이지와 함께 스크롤됨 (기본값)fixed
: 배경이미지가 페이지와 함께 스크롤 되지 않음
div {
height: 200px;
}
.background-color {
background-color: blue;
}
.background-image {
background-image: url(images/minsu.jpg);
/* 가로,세로 초점 이동 */
/*(left, right, top, bottom, center)*/
background-position: center center;
/* contain & 200px 200px & cover */
background-size: cover;
background-repeat: no-repeat;
/* fixed & scroll */
background-attachment: fixed;
}
Font
font-size
: font의 크기 설정font-style
: font의 스타일 설정font-weight
: font의 굵음의 정도 설정 (일반적으로 100~900 사이)font-family
: font 종류를 지정- 컴퓨터에 모든 폰트가 들어 있지 않으므로, font-name 중 원하는 폰트를 여러가지 나열하여, (font-stack) 마지막에 generic-family를 적어줌.
- 이를 통해, 적어도 폰트가 없을 때, 끝에 있는 generic fa,ily에서비슷한 폰트를 브라우저가 찾아서 보여줌.
- web-safe font 종류: verdana / georgia / times new roman / aria
- 구글 폰트(
https://fonts.google.com/
)를 통해서 다양한 폰트를 적용 할 수도 있음.
line-height
: 줄 간격 설정- font 사이즈에 비례하여 상대적으로 설정하거나 (기준: font size 1)
- 픽셀 크기로 설정 가능
letter-spacing
: font의 장평 조절 (플러스로 가면, 장평이커지고 마이너스로 가면 장평이작아짐)text-align
: 정렬 위치 설정 (center, end, inherit)
.font {
font-size: 40px;
font-style: italic;
font-weight: 700;
font-family: 'Times New Roman', Times, serif
line-height: 1.5;
letter-spacing: 1px;
text-align: center;
}
Comments