css

css는 문서 내용 작성과 꾸미는 부분을 분리하여 내용과 디자인 수정 시 서로 영행을 최소화하고, 다양한 기기에서도 디자인만 따로 적용하여 구동할 수 있도록 만들어주는 것 이다.

css에서 style은 정해진 속성을 입력하여 웹페이지를 꾸미는 것 이고,
stylesheet는 웹페이지에서 반복적으로 쓰는 style을 모아놓은 것 이다.

stylesheet
1. 내부 스타일 시트
html문서 내부의 style에 스타일 정보를 저장하는 방법

<style>
p { color : red; }
</style>

2. 외부 스타일 시트
   외부에 css파일을 작성하고. link태그를 이용하여 읽어와서 스타일을 적용

<link href=“css 파일경로” rel=“stylesheet” type=“text/css”>

3. 인라인 스타일 시트
   태그 내부에 스타일 정보를 지정하는 방법

<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;
}

사용할 폰트의 위치를 넣어주고 폰트의 이름을 지정해서 사용한다.
여기까지!!