[css]_6(style)
CSS 배우기6
목차
border
요소에 테두리 선을 지정한다. 단축속성이다!
속성값
- border-width : 선의 두께
- border-style : 선의 종류
- border-color : 선의 색상
border : 두께 종류 색상;의 형태를 띈다.
.box {
border : 1px solid red;
}
border의 특징
border의 속성값들은 모두 상하좌우 top,bottom,left,right
의 개별 속성들은 다 갖는다.
ex) border-top-style: solid;
border는 크기가 증가하는 특징을 갖는다.
그렇기 때문에 증가하지 않게 계산하는 방법은
padding과 같이 box-sizing:border-box;을 입력하면 된다.
box-sizing
content-box : 너비만으로 요소의 크기를 계산한다.
border-box : 너비에 안쪽 여백과 테두리선을 포함하여 크기를 계산
content-box+padding-box+border=border-box
display
요소의 유형을 설정한다.
속성값
- block : 블록요소이다.(div)
- inline : 인라인 요소이다.(span)
- inline-block : 수평으로 쌓이고 w,h,margin top,bottom값을 갖을 수 있다.(input)
- none : 화면에서 요소가 사라진다. opacity가 0 인것과는 다르게 아예 사라진다.
overflow
요소의 크기 이상으로 내용(자식요소) 가 넘쳤을 떄, 내용의 보여짐을 제어한다.
속성값
- visible :넘친 부분을 자르지 않고 그대로 보여줌.
- hidden : 넘친 부분을 잘라내고 보이지 않게한다.
- scroll : 넘친 부분을 잘라내고 스크롤바를 이용하여 보이게 한다.넘치지 않아도 scroll생성
- auto : 넘친 부분이 있는 경우만 잘라내고 스크롤바를 이용하여 보이게 한다.(자동)
opacity
투명도를 설정한다.
속성값은 0~1까지의 값을 같는다. 기본값은 1이다.
예)opacity : .5;
font
글자 관력 속성들을 지정한다.단축속성
속성값
font-style : 글자 기울기 nomal
font-weight : 글자 두께 nomal
font-size: 글자 크기 medium 16px
line-height : 줄 높이 nomal
font-family : 글꼴 지정 브라우저에 따라 달라짐
font : 기울기 두께 크기 / 줄높이 글꼴; 형태이다.
띄어쓰기로 구분하지만 크기와 줄높이때문에 /로 구분한다.
.box{
font : italic bold 20px / 1.5 "Arial" , sans-serif;
}
font-size, font family는 필수로 입력하여야 한다.
font-style
글자 기울기를 지정한다.
nomal : 기본 스타일
italic : 이텔릭체 주로 사용한다.
oblique : 기울어진 글자 italic과 비슷한 결과나온다.
font-weight
글자의 두께를 지정한다.
normal: 기본 글자 두께 400
bold : 글자 두껍게 700
bolder : 부모 요소보다 더 두껍게
lighter : 부모 요소보다 더 얇게
숫자 : 100~900 의 100단위의 숫자 9개
font-size
속성값
단위 : em,px,rem 기본값 : 16px
% : 부모 요소의 비율로 지정
smaller : 부모요소보다 작게
larger : 부모요소보다 크게
body 태그에 font-size:14px;을 입력하면 모든 글자 크기를 14px로 바꿀 수 있다.
css 상속때문에.
line-height
줄 높이을 지정한다.
글자크기 + bottom과 top에 있는 여백의 값을 더한 것
속성값
normal : 브라우저의 기본 정의를 사용한다.
숫자 : 요소가 같고 있는 글꼴 크기의 배수로 지정 추천
단위 : px,em,cm등 단위로 지정
% : 요소 자체 글꼴 크기의 비율로 지정
font-family
글꼴의 서체를 지정한다.
속성값
글꼴이름 : 후보목록을 지정한다. 여러개의 후보 설정
글꼴계열 : 계열이름을 적어준다. 필수
font-family : 후보1,후보2,글꼴계열형태를 이룬다.
.box {
font-family : Arial, "Open Sans",
"돋움",dotum, sans-serif;
}
글꼴계열
serif : 바탕체 Hello
sans-serif : 고딕체 계열 Hello
monospace: 고정너피 일정 Hello
cursive : 필기체 계열 Hello
fantasy : 장식 계열 Hello
문자 관련 속성
color
태그의 요소가 아닌 문자의 색상을 지정한다.
색상 : 문자의 색상을 지정한다. ex) red,blue
hex코드 : 16진수 색상 ex)#000000~#FFFFFF 주로사용
RGB : 빛의 삼원색 ex)rgb(255,255,255)
RGBA : 빛의 삼원색 +투명도 ex)rgba(255,255,255,.5)
HSL : 색상 ,채도,명도 ex) hsl(120,100%,50%)
HSLA : 색상, 채도, 명도,투명도 ex)hsla(120,100%,50%,.5)
text-align
문자 정렬 방식을 지정한다.
left : 왼쪽 정렬 기본값
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 맞춤 (br태그없이 계속 작성되었을때) 양쪽을 빽빽하게
text-indent
첫번째 줄의 들여쓰기를 지정한다. 음수값도 사용할 수 있다.
음수 사용시 글자를 밀어버린다.
background속성 url을 이용하여 가져올때 alt값을 적을 수 없다.
그래서 글자를 적고 text-indent: -9999px; 입력하여 밀어버린다.
text-decoration
문자에 선을 설정한다.
속성값
none : 선 없다. 기본값
underline : 밑줄을 지정한다.ex)KimDuckHwan
overline : 윗줄을 지정한다.ex)KimDuckHwan
line-through : 중앙을 가로지는 선.ex)KimDuckHwan
letter-spacing
문자 사이의 간격을 설정한다. 음수도 가능하다.
속성값
nomal : 기본값이며 일반적인 간격을 유지한다.
단위 : px,em,cm등을 사용한다.
word-spacing
단어 와 단어 사이의 간격을 설정 띄어쓰기간격을 설정한다.
속성값
nomal : 기본값
단위 : px,em,cm등을 사용한다. 기본값에 +또는 - 하는 개념이다.