2024.03.29
속성 선택자
<style type="text/css">
/* 요소[속성] 특정 속성을 가지고 있는 태그를 선택 */
/* a태그이면서 title이라는 속성을 갖고 있는 태그 */
a[title] {color:yellow;background-color:pink;font-size:20pt;}
/* 요소[속성=값] 속성 안의 값이 특정 값과 같은 태그 선택 */
/* a태그이면서 title이라는 속성을 갖고 그 값이 "홈페이지" 인 태그 */
a[title="홈페이지"] {color:blue;background-color:red;font-size:10pt;}
/* 요소[속성~=값] 속성 안의 값이 특정 값을 단어로써 포함하는 태그를 선택 */
/* a태그이면서 title이라는 속성을 갖고 그 값을 공백으로 구분했을 때 "email"이라는 단어를 포함하는 태그 */
a[title~="email"] {color:white;background-color:gray;font-size:40pt;}
/* 요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 태그를 선택 */
a[title*="서울"] {color:orange;background-color:green;font-size:30pt;}
/* 요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 태그를 선택 */
a[href^="https://"] {color:darkred;background-color:skyblue;font-size:15pt;}
/* 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 태그를 선택 */
a[href$=".net"] {color:pupple; background-color:yellow; font-size:35pt;}
</style>
가상클래스 선택자
<style>
/* 가상클래스 선택자
형식 역할
:hober 마우스 커서가 링크에 올라가 있는 상태
:active 마우스 커서를 클릭한 순간부터 놓기 직전까지 상태
:link 링크를 클릭하지 않는, 그냥 링크되어 있는 상태
:visited 링크를 눌러서 방문한 후 상태
*/
a{
font-size:50pt;
}
a:link{
text-decoration:none; /* 링크 밑줄 제거 */
color:rgb(255,102,102);
}
a:visited{
/* :link의 text-decoration 지정과 동일하게 동작 */
text-decoration:underline;
color:rgb(0, 255, 13);
}
a:hover{
text-decoration:underline;
background-color:skyblue;
}
a:active{
text-decoration:underline;
color:white;
background-color:black;
}
</style>
상태 가상클래스 선택자
<style>
/* 선택자 형태 설명
:checked 체크 상태의 input 태그를 선택
:focus 초점이 맞추어진 input 태그를 선택
:enabled 사용 가능한 input 태그를 선택
:disabled 사용 불가능한 input 태그를 선택 */
/* input 태그가 사용 가능할 경우에 배경색을 yellow로 하겠다. */
input:enabled {
background-color:yellow;
}
/* input 태그가 사용 불가능할 경우에 배경색을 gray로 하겟다. */
input:disabled {
background-color:gray;
}
input:focus {
background-color:orange;
}
input[type=checkbox]:checked + div{
height:0px;
}
div{
width:300px;
height:100px;
overflow:hidden; /* 지정한 넓이와 높이를 벗어난 데이터는 숨김 */
}
</style>
일반 구조 가상클래스 선택자
<style>
/*
선택자 형태 설명
:first-child 형제 관계 중에서 첫 번째 위치하는 태그를 선택
:last-child 형제 관계 중에서 마지막에 위치하는 태그를 선택
*/
ul{
list-style:none;/* 아이콘 제거 */
}
li{
float:left;/* 왼쪽을 기준으로 수평으로 정렬 */
padding:15px; /* 태그 안의 여백 */
background-color:#ffc703;
}
li:first-child{
border-radius:10px 0 0 10px;
}
li:last-child{
border-radius:0 10px 10px 0;
}
</style>
CSSText
text-decoration
<style type="text/css">
#t1{text-decoration:underline;}
#t2{text-decoration:overline;}
#t3{text-decoration:line-through;}
</style>
text-align
<style>
#t1{text-align:left;} /* 기본 정렬 */
#t2{text-align:right;}
#t3{text-align:center;}
#t4{text-align:justify;} /* 왼쪽, 오른쪽 동등하게 정렬 */
</style>
text-indent
<style>
p{width:500px; margin:auto; border:1px solid black;}
#t1{text-indent:2em;}/* 들여쓰기 */
#t2{text-indent:-2em;}/* 내어쓰기 */
</style>
letter-spacing/word-spacing
<style>
#t1{letter-spacing:2em;}/* 글자 간격 */
#t2{word-spacing:2em;}/* 단어 간격 */
</style>
white-space
<style>
#t1{white-space:pre;} /* 공백 인정 줄바꿈 인정(디바이스의 넓이를 줄여도 다음 라인으로 이동하지 않음) */
#t2{white-space:pre-line;} /* 공백 불인정 줄바꿈 인정(디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
#t3{white-space:pre-wrap;} /* 공백 인정 줄바꿈 인정(디바이스의 넓이를 줄이면 자연스럽게 글자가 다음 라인으로 이동) */
#t4{white-space:nowrap;} /* 공백 불인정 줄바꿈 불인정(디바이스의 넓이와 관계없이 줄바꿈 불인정) */
</style>
text-shadow
<style>
p{
font-family:Arial;
font-size:50px;
}
.text1{
color:#06F;
}
.text2{
color:#C30;
}
.text3{
color:#06F;
text-shadow:-3px -3px 1px #CCC;
/*
가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지 지정.
양수값은 글자의 오른쪽에, 음수값은 글자의 왼쪽에 그림자를 표시.
세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지 지정.
양수값은 글자의 윗 아래쪽에, 음수값은 글자의 위쪽에 그림자를 표시.
blur radius : 그림자의 번지는 정도 지정. 생략할 수 있으며, 생략할 경우 그림자가 선명하게 표시됨.
그림자 색상 : 그림자의 색상 지정. 색상은 16진수로 된 색상값(RGB값,색상 이름)을 사용할 수 있음.
*/
}
.text4{
color:#C30;
text-shadow:3px 3px 5px #000;
}
</style>
text-overflow
<style>
div{
width:100px;
border:1px solid black;
white-space:nowrap;/* 공백 불허,줄바꿈 불허 */
/* div를 벗어난 데이터 표시 방법을 지정 */
overflow:hidden;/* div를 벗어난 데이터를 숨김 */
text-overflow:ellipsis;
/*
clip이 넘치는 텍스를 잘라버림(기본값)
ellipsis (말줄임표) ...로 표시
*/
}
</style>
CSSFont
font
<style>
/*
font-family 속성의 사용
속성의 값으로는 구체적인 글자체의 이름을 지정하며 만약 여러 개의 글자체를 지정하고자 할 때는 ,로 구분하여 글자체를 열거한다.
명조체, 굴림체, 궁서체 등 구체적인 글자체 이외에 다음 값을 사용하여 폰트의 종류를 값으로 지정
값 설명
serif 명조 계열 글자체
sans-serif 고딕 계열 글자체
cursive 필기체
fantasy 장식이 되어 있는 글자체(화려한 글꼴)
monospace 글자 폭과 간격이 일정한 글꼴(고정폭 글꼴)
font-style 글자의 스타일(기울기 등) 지정
값 설명
italic 이탤릭체
oblique 이탤릭체
font-weight 글자의 굵기 지정
값 설명
bold 굵은 글씨
font-variant
값 설명
small-caps 작은 대문자로 변환
일괄지정 font
font:font-style 값
font-weight 값
font-variant 값
font-size 값 / line-height 값
font-family 값
ex) .font {font:italic, bold small-caps 30pt/50pt serif;}
*/
span{
font-size:20pt;
font-family:serif;
font-style:oblique;
}
p{
font:italic bold small-caps 30pt/50pt serif;
}
</style>
웹폰트
<style>
/* 사용할 폰트 지정 */
@font-face{
font-family:'나눔손글씨 혜준체';/* 폰트의 이름 지정(임의로 지정해도 됨) */
src:url('../files/나눔손글씨 혜준체.ttf') format('truetype');
}
p.font1{
/* 나눔손글씨 혜준체를 못 불러올 경우에 serif를 불러옴 */
font-family:'나눔손글씨 혜준체',serif;
font-size:20pt;
}
</style>
웹폰트 import형
<style>
@import
url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
p.font1{
font-family:'Hi Melody', serif;
font-size: 20pt;
}
</style>
리스트(메뉴 활용)
<style>
ul{
list-style:none; /* 리스트의 점 아이콘 제거 */
}
ul li{
display:inline;/* 리스트를 가로로 표시*/
}
ul li a{
text-decoration:none;
background-color:#c00;
color:#fff;
/*
a태그에는 width,height가 적용되지 않으므로
display: inline-block 명시함
*/
display:inline-block;
width:100px;
height:30px;
padding-top:3px;/* 태그 안의 상단 여백 */
padding-left:10px;/* 태그 안의 왼쪽 여백 */
}
ul li a:hover{
/* 336699 -> 369 로 명시 가능 */
background-color:#369;
text-decoration:none;
}
</style>
