css
css는 문서 내용 작성과 꾸미는 부분을 분리하여 내용과 디자인 수정 시 서로 영행을 최소화하고, 다양한 기기에서도 디자인만 따로 적용하여 구동할 수 있도록 만들어주는 것 이다.
css에서 style은 정해진 속성을 입력하여 웹페이지를 꾸미는 것 이고,
stylesheet는 웹페이지에서 반복적으로 쓰는 style을 모아놓은 것 이다.
stylesheet
1. 내부 스타일 시트
html문서 내부의 style에 스타일 정보를 저장하는 방법<style> p { color : red; } </style>
- 외부 스타일 시트
외부에 css파일을 작성하고. link태그를 이용하여 읽어와서 스타일을 적용<link href=“css 파일경로” rel=“stylesheet” type=“text/css”>
- 인라인 스타일 시트
태그 내부에 스타일 정보를 지정하는 방법<p style=“color:red”>test</p>
css 선택자
css 선택자
- html문서 내부에서 스타일을 적용하기 위한 요소를 선택하는 것
- html문서를 꾸미기 위해서는 각 요소별로 스타일을 적용하기 위해 선택자를 이용하여 요소를 선택
css 선택자 사용 / html
제목
첫번째 문단
- 목록1
- 목록2
- 목록3
<h1>제목</h1>
<p>첫번째 문단 </p>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>css 선택자 사용 / css
h1{
color : red;
}
ul>li:first-child{
color : red;
}단순히 예시일 뿐 훨씬 다양하고 많은 방법으로 선택자를 사용하고 효과를 줄 수 있다.
전체 선택자 (*)
*{
속성: 값;
}전체에 효과를 적용하는 법
아이디 선택자 (#)
#li5{
color: rgb(33, 92, 72);
}아이디 속성을 가진 태그만 선택할때 사용 (id는 중복이 불가능해서 단일 대상만 선택 가능)
클래스 선택자 (.)
.c1{
color: white;
background-color: red;
}클래스의 효과를 넣어주는 방법으로 한 문단에 아양한 효과를 넣을 수 있다.
<h3 class="t-white bg-red">클래스 테스트 1</h3> // html코드
.t-white{
color: white;
}
.bg-red{
background-color: red;
} //css코드속성 선택자 ([])
div[name=name2]{
background-color: grey;
}
div에서 name이 name2인 코드들만 효과를 적용해준다는 뜻자손선택자/후손선택자 (>) / ( (스페이스바))
자손 선택자 : 상위요소 바로 아래 하위요소
#div1>h4{
color: orangered;
}후손 선택자 : 상위요소 밑에있는 모든 하위요소
#div1 li{
color: red;
}동위 선택자 (+) / (~)
선택한 영역의 밑에서부터 시작해 모든 속성요소 선택
#div2>.test3+div{
background-color: darkblue;
}선택한 부분의 다음에있는 모든 태그를 선택
#div2>.test2~div{
color: azure;
}반응 선택자 (active) / (hover)
active : 선택자들 중 사용자가 클릭한 태그
#active-test:active{
background-color: yellow;
}hover : 선택자들 중 사용자의 마우스가 올라가있는 태그
#hover-test:hover{
background-color: blue;
}상태 선택자 input (checked) / (focus) / (enabled) / (disabled)
checked : 체크 상태의 input태그 선택
input[name=gender]:checked+label{
color: white;
background-color: black;
}focus : 초점이 맞추어 진 input태그 선택
input[name=id]:focus{
background-color: aqua;
outline: none;
border: none;
}enabled : 사용 가능한 input태그 선택
input[name=gender]:enabled{
display: none;
}disabled : 사용 불가능한 input태그 선택
input[name=gender]:enabled{
display: inline-block;
}형태구조 선택자 (:first-of-type) / (:last-of-type) / (:nth-of-type(수열)) / (:nth-last-of-type(수열))
형제 관계 태그 중 첫 번째 태그 선택
#div1>p:first-child{
background-color: tomato;
color: white;
}형제 관계 태그 중 마지막 번째 태그 선택
/*중간 구조는 읽지않음 // div1의 마지막 원소를 가지고오는 메소드인거임 위치하는 구조가 (p)일경우에만 효과 적용*/
#div1>p:last-child{
background-color: violet;
color:white;
}형제 관계 태그 중 앞에서 수열 번째 태그 선택
/*이 선택자는 중간에 있는 구조만 읽으려고 한다. ((p)만 읽으려고 동작하고 그 외에는 건너뛸 것 이다.*/
#div1>p:nth-child(2n){
background-color: yellowgreen;
color: white;
}형제 관계 태그 중 뒤에서 수열 번째 태그 선택
#div2>p:nth-last-of-type(3){
background-color: aquamarine;
color: white;
}문자 선택자 (선택자::first-letter) / (선택자::first-line)
/ (선택자::first-after) / (선택자::first-before) / (선택자::first-selection)
첫 번째 글자를 선택
#test3>p::first-letter{
color: coral;
}첫 번째 줄을 선택
#test3>p::first-line{
background-color: cornflowerblue;
}태그 뒤에 위치하는 공간을 선택
#test3>p::first-after{
color: coral;
}태그 앞에 위치하는 공간을 선택
#test3>p::first-before{
background-color: cornflowerblue;
}사용자가 드래그한 글자 선택
#test3>p::selection{
background-color: red;
color: white
}부정 선택자 (not)
선택자에 대해 반대로 적용하는 선택자
이 선택자에는 다른 부정선택자나 가상요소를 젛을 수 없음
#test4>p:not(nth-of-type(2n)){
background-color: tomato;
color: white;
}텍스트 스타일
폰트를 적용해주는 방법
- 내장되어있는 폰트
/* 내장되어있는 폰트 */
.ff1{
font-family: "궁서체";
}내장되어있는 폰트에 경우 바로 이름을 써주면 된다.
- 폰트 받아와서 사용하기
/* 내장되어있지 않은 폰트를 가져와서 사용 */
.webfont1{
font-family: 'Hi Melody', cursive;
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://머시기 저시기 복사해와서 넣자ic.com" crossorigin>
<link href="https://fonts주소 머시기 머시기ss2?family=Hi+Melody&display=swap" rel="stylesheet">웹에서 다운로드받지 않고 받아와서 사용하기 위해서는 폰트를 배포해주는 곳에서 link와 font-family값을 가져와서 넣어줘야한다.
- 다운로드 받아서 사용하기
@font-face{
font-family: 폰트의 이름을 지정;
src: url(../Noto_Sans_KR/NotoSansKR-Light.otf);
/*../ 의 의미 : 상위폴더로 나간다는 뜻*/
}
.webfont2{
font-family: ns-light;
}사용할 폰트의 위치를 넣어주고 폰트의 이름을 지정해서 사용한다.
여기까지!!
