22.1.9, 11 CSS기초 및 여러가지 style

CSS를 HTML에 입력하는 방법?

보통 class, id, p를 만들어 적용가능함.
→ class로 만들기 : .이름{style:~;}
→ id로 만들기 : #이름{style:~;} 자바스트립트에서 주로 사용, 많은 style을 넣진 못한다.
→ 바로 태그에 적용하기 : 태그{style:~;} 굳이 html가서 넣지 않아도 된다.
주의할 점은 모든 태그에 적용이 된다는 점..!

⊙ 글자에 color 입히는 방법

1. style.css로 가서 원하는 색을 정의해준다.
   .내가 정한 이름{color:색;}

ex) .red{
color:red;
}

2. 정의한 css 클래스를 html 태그 안에 입력한다.
   ex)
   ABCDE

⊙ 이미지 사이즈 조절하는 법

.이름{width:-px; height:-px;} *width:넓이, height:높이

HTML로 가서 적용
ex)

<img src="" class=img-size/>

⊙ text 및 이미지를 center 및 좌우로 보내고 싶다면?

.이름{text-align:center;}
.이름{float:right;}
.이름{float:left;}

• float : 이미지 또는 html 태그 요소를 배치하는 데 쓰임. float을 쓰게 되면 해당 영역의 사이즈가
  float을 포함하고 있는 컨텐츠 영역만큼 줄어듬

⊙ box 만드는 법

이미 만든 두개의 클래스로 생성 가능하다.
ex) HTML

⊙ text 사이에 여백 만들기 (text 움직이기)

ex) .이름{margin-top:400px; margin-left:200px; margin-bottom:40px;}

⊙ box 안쪽에 공간만들기

ex) .이름{padding-top:40px; padding-left:50px;}

⊙ dysplay와 visibility

dysplay : 어떻게 나타낼지
visibility : 요소를 보일지 말지

dysplay:inline; -> 줄바꿈 되지 않고 한줄로 나타냄
dysplay:block; -> 요소 앞뒤로 줄바꿈 됨
dysplay:none; -> 박스 생성x, 공간차지x
dysplay:inline-block; -> 박스 그대로 한줄로 나타냄
visibility:hidden; -> 공간은 그대로인채로 사라짐

⊙ 응용)

1. background 색 입히기
   ex) .red{
   color:red;
   background-color:yellow;
   }

2. 테두리 넣기 - 두께, 스타일, 색
   ex) .border{border:5px solid blue;}

▒ text에 이미 클래스가 적용되어 있는데 다른 클래스도 넣고 싶다면?
-> 띄어 쓰기하고 붙이면 된다.
ex)

<div class="red border">ABCDE</div>

3. font 바꾸기
   크기 : font-size
   스타일 : font-style
   글꼴 : font-family

4. 태그 중 text를 선택적으로 바꾸고 싶다
   1) 첫 글자만 바꾸고 싶다. ex)p:first-letter{font-size:200%}
   2) 첫 라인만 바꾸고 싶다. ex)p:first-line { font-weight: bold; }

5. 한 태그 모두 앞에 지정된 text를 넣기
   ex) h1:before {
   content: "Topic: ";
   }

6. 같은 태그 중 첫번째 것만 적용하고 싶을때
   ex) 첫번째 태그만 가운데 정렬할 때
   h1:first-child {
   text-align: center;
   }