[HTML/CSS] HTML , CSS 는 무엇인가!? (2편) - CSS

CSS 는 무엇인가?

CSS (Cascading Style Sheets)의 약자로 문서에 디자인을 입힐 때 사용하는 스타일 시트 언어다. 

 

CSS 가 필요한 이유? 

HTML에서 디자인을 입히는 것보다 CSS를 따로 구현해서 관리한다는 점은 유지보수 관점에서도 유리하고 스타일만 모아두었기 때문에 웹페이지를 경량화 할 수 있다. 

 

<Web Page 에서 Console 여는 방법>

Ctrl + Shift + C 를 누르면 화면에 구현된 코드위치를 찾아 볼 수 있다.
혹은 궁금한 부분에서 스크롤 오른쪽 클릭하여 검사! 
혹은 F12 를 눌러서 개발자 도구를 확인 하면 구조를 파악하기 수월하다. 

 

CSS 용어 정리

 

 

---

<크기및 글자체>

• font-size : 24px
  ( 절대 단위 : px, pt )
  ( 상대 단위 : %, em, rem, ch, vw, vh 등 )
  * 상대 단위인 rem 이 보편적이다. ex) 1rem 디폴트 값이고, 2rem은 2배 값이 된다.
  
  
• Text-align, font-size 는 각각 정렬, 글자크기를 변경할 수 있다. 
  ex) text-align : center;
  ex) font-size : 300%; 
•  
• font-family 는 글자체를 바꿔준다.
  ex) <p style=font-family : 원하는 글자체;"></p> 

<기타 스타일링>

• font-weight : 굵기
• text-decoration : 밑줄
• letter-spacing : 자간
• line-height : 행간

<정렬>

• text-align : ex) left, right, center, justify <-양쪽정렬
  
  

---

실제로 모든 태그를 알 수 없으니 모르는 것들은 라이브러리에서 검색해서 사용하는 것이 가장 좋다. 

https://www.w3schools.com/tags/default.asp

HTML Reference

https://ofcourse.kr/

ofcourse

 

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

 

 

---

 

<줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스 (inline, inline-block)>

• 줄 바꿈이 되는 태그 : <h1>, <p>
• 줄 바꿈이 되지 않는 태그 : <span>
  
  
  

<박스를 구성하는 요소>

• Margin > Border > Padding > Content

 

Margin (바깥여백) = Padding (안쪽여백) 규칙 동일

• top -> right -> bottom -> left 순서 (시계방향)

p  {
  margin : 10px 20px 30px 40px;
 {

 

<모든 박스에서 여백과 테두리를 포함하여 계산 하는 방법>

* {
  box-sizing : border-box;
}

 

ID	Class
# 사용	. 사용
한 문서에 단 하나의 요소만 사용	동일한 값을 갖는 요소가 많을 떄 사용
특정 요소에 이름 붙일 떄 사용	스타일 분류에 사용

위 id와 Class로 분류하여 Style을 더 정교하게 할 수 있다. 

HTML 태그	Selector
<div id="print-section">	div#print-section
<li class="tube">	li.tube

 

1편으로 돌아가기!
https://choonsik-lab.tistory.com/entry/HTML-HighperText-Markup-language?category=935771

HTML , CSS 는 무엇인가!? (1편)

3편으로 이동~
https://choonsik-lab.tistory.com/entry/HTML-CSS-%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-3%ED%8E%B8-flexbox

HTML , CSS 는 무엇인가!? (3편) - flexbox!