※ CSS3 단위
▶ CSS3 크기단위
▷ % 백분율단위
- 초기 설정 크기 : 100%
▷ em 배수단위
- 1배 : 1em = 100%
- 1.5배 : 1.5em = 150%
▷ px 픽셀
- p태그 기본 font-size : 16px
▶ CSS3 색상단위
▷ HEX코드 : #000000
- 16진수로 RGB 색상 조합을 순서대로 입력함
▷ RGB색상 : rgb(red, green, blue)
▷ HSL 색상 : 색상(Hue), 채도(Saturation), 명도(Lightness)
▶ CSS3 URL 단위
- url 함수 내부에 경로를 입력하면 됨
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('Desert.jpg');
}
</style>
</head>▷ 현재 폴더의 Desert.jpg
background-image: url('Desert.jpg');▷ 현재 폴더 내부의 Other 폴더의 Desert.jpg
background-image: url('Other/Desert.jpg');▷상위 폴더의 Desert.jpg
background-image: url(‘../Desert.jpg');
※ 가시 속성
: 태그가 화면에 보이는 방식을 지정하는 속성
▶ ★display 속성
▷ none : 없는취급
- 태그가 화면에서 보이지 않음
#box {display: none;}
▷ block : 태그를 block 형식으로 지정
#box {display: block;}
▷ inline : 태그를 inline 형식으로 지정
▷ inline-block: 요소는 inline이지만 내부는 block처럼 표시
#box {display: inline;}
#box {display: inline-block;}
▷ inline, inline-block 형식 차이 :
• inline 을 적용한 코드는 width, height 속성이 지정되지 않음 또한 margin 속성이 div 태그의 좌우로만 지정됨
• inline-block 을 적용하면 width, height 속성을 지정할 수 있고 margin 속성이 상하좌우로 적용됨
▶ ★visibility 속성
▷ visible : 태그를 보이게 만듬
#box { visibility: hidden; }display - 태그가 화면에서 제거됨
visibility - 화면에서 보이지 않을 뿐, 영역은 차지함
▷ hidden : 태그를 보이지 않게 만듬, 영역은 차지함
▷ collapse : table 태그를 보이지 않게 만듬
▶ opacity 속성
- 태그의 투명도를 조절하는 스타일 속성
- 투명 0.0 ~ 불투명 1.0 입력
#box {
background-color: black;
color: white;
opacity: 0.2;
}
▶ ★box속성
- 웹 페이지의 레이아웃을 구성할 때 가장 중요한 스타일 속성
- <p> 태그 (단락만들기 태그) 를 사용한 텍스트는 단락형태를 가짐
따라서 텍스트 단락 앞뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 갖게 된다 = 박스모델요소
박스모델 구성요소
· magin - 바깥여백
· border - 테두리
· padding - 안쪽여백
▷ width,height
- 박스 모델의 콘텐츠 영역에 대한 크기
- px, cm, %, auto 사용가능
- 전체 너비 = width+2 * (margin+border+padding) , 전체 높이 = height+2 * (margin+border+padding)
=> margin, border, padding 은 양쪽에 2개씩 위치하므로 2를 곱한다
div {
width: 100px; height: 100px;
background-color: red;
}
▷ margin, padding
- margin-bottom,left,right,top
- ex ) margin:10px 20px 30px 40px; ( 상 우 하 좌 - top 부터 시계방향으로)
- ex ) margin: 0 30px; padding: 0 30px; - margin: 위아래 padding : 왼쪽오른쪽 = 4개의 방향을 2개씩 묶어 지정
<style>
div {
width: 100px; height: 100px; // 넓이, 높이
background-color: red; //
border: 20px solid black;
margin: 10px; padding: 30px;
}
</style>
▷ box-sizing
- width, height 속성이 차지하는 범위를 지정함
• content-box 는 기본으로 적용되는 키워드
• content-box 키워드를 사용하면 width, heigth 속성이 글자가 들어가는 영역의 크기를 지정하게 만듬
이때 사각형의 전체 너비와 높이는
박스 너비 = width 속성 + 2*(margin + border + padding)
박스 높이 = height 속성 + 2*(margin + border + padding)
• border-box 키워드는 width,height 속성이 테두리(border, padding)를 포함한 영역의 크기를 지정하게 만듬
이때 사각형의 전체 너비와 높이는
박스 너비 = width 속성 + 2* margin
박스 높이 = height 속성 + 2* margin
▶ 테두리 속성
▷ ★border-width / border-style
- 테두리의 넓이, 형태를 지정
border width : medium, thick, thin
border style : solid, dashed, dotted, double, groove, hidden, inset, none
- 테두리를 넣을 때는 border-width, border-style, border-color 속성을 모두 사용해야 함
<style>
.box {
border-width: thick;
border-style: dashed;
border-color: black;
}
</style><style>
.box {border: 1px dashed black;} // 한번에 입력가능
</style>= > 두꺼운 dashed 형태의 검정색 테두리가 형성됨
▷ border-radius
- 테두리 둥글게
- 크기단위 이용
.box {border: thick dashed black;border-radius: 20px;}
▶ 배경속성
- 특정 태그의 배경 이미지 또는 색상을 지정하는 스타일 속성
▷ background-image
- 배경에 넣을 그림 지정
<style>
body {
background-image: url('BackgroundFront.png');
}
</style>
▷ background-size
- 그림 크기를 조절할 때 사용
- auto
contain : 너비를 100%로 지정한 것과 같은 효과
이미지가 어느쪽도 잘려나가지 않는 최선의 상태로 이미지를 꽉차게 보여줌.
cover : 높이를 100%로 지정한 것과 같은 효과
배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다는 조건하에 가능한한 배경 이미지를 작게 조정함
▷ background-repeat
- 이미지가 패턴을 이루어 여러개 출력됨
- background-repeat 속성의 기본 키워드 : repeat. 따라서 이를 원치않을경우 no-repeat으로 설정해줘야함
<style>
body {
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
}
</style>
▷ background-attachment
background-attachment: fixed;- 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정
- fixed - 스크롤을 이동해도 배경 이미지가 고정
scroll (기본키워드) - -화면 스크롤에 따라 배경 이미지가 함께 이동하는 것
▷ background-position
background-position: 위치(%) 위치(%)
background-position: 길이(px) 길이(px)bottom, center, left, right, top
수평위치는 left, center, right 중에서 선택
수직 위치는 top, bottom, center 중에서 선택
background-position: right center
▶ 폰트속성
- 글자 관련 스타일 속성
▷ font-size
- large, larger, medium, small, smaller, x-large, x-small
.a { font-size: 32px; }
▷ font-family
- 사용자 컴퓨터에 설치된 폰트를 입력함 => 사용자에게는 폰트가 설치되어 있지 않은경우
=> font-family 속성을 여러개 입력함 => 가장 마지막 폰트에는 Serif(명조체), Sans-serif(고딕체),
Mono space(고정 폭 글꼴)을 입력함 (전세계 공통으로 설치되어있음)
- font-family 속성은 상속되기 때문에 태그 스타일에서 한 번 정의하면
문서 전체에 적용되고, 문서 안의 모든 자식 요소에 계속해서 같은 글꼴이 사용됨
<style>
.font_arial { font-family: '없는 폰트', sans-serif }
.font_roman { font-family: '없는 폰트', serif }
</style>
▷ font-face
- 웹 문서 안에 글꼴 정보도 함께 저장했다가
사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드하게 하는 방식
@FONT-FACE {
font-family: 글꼴이름;
src:url(글꼴파일경로) format(파일유형);
}
▷ font-style / font-weight
- 기울기와 두께
font-style : italic, normal, oblique
font-weight : bold, bolder, lighter, normal, 100~900 사이의 수치
<style>
.font_big { font-size: 2em }
.font_italic { font-style: italic }
.font_bold { font-weight: bold }
</style>
▷ line-height
- 글자의 높이
- 글자의 높이를 지정하는 기능보다 글자를 수직 중앙 정렬할 때 사용함
<style>
~
.button { ~ }
.button > a {
display: block;
line-height: 70px; // 이거 !
}
</style>
▷ text-align
- 글자의 정렬
- center, justify(양쪽정렬), left, right
.font_center { text-align: center }
▷ text-decoration
- ex ) a 태그에 href 속성을 지정하면 글자에 밑줄이 생기고 글자의 색상이 파란색으로 변경됨
=> text-decoration 속성을 이용해 밑줄을 제거할 수 있다
- none, underline, overline, line-through
a { text-decoration: none }
▷ letter-spacing / word-spacing
- 텍스트 간격 조절
- letter-spacing : 글자 사이의 간격을 조절
- word-spacing : 단어 사이의 간격을 조절
letter-spacing:0.1em;
'HTML' 카테고리의 다른 글
| [Thymeleaf] 프로젝트에 사용한 타임리프 문법 정리 (0) | 2022.08.19 |
|---|---|
| [HTML] CSS 스타일속성 2 (0) | 2022.04.20 |
| [HTML] CSS, 선택자 (0) | 2022.04.19 |
| [HTML] 태그 (0) | 2022.04.19 |