CSS

• Cascading Style Sheet
• CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다.
• 특성 (property)
  • 색, 크기, 정렬 등이 존재한다.
• 기본문법
  • selector(선택자) {
    • property(속성) : value(값) ;
    • property(속성) : value(값) ;
  • }
• 사용방법
  • html 태그 속성에 입력하는 방법
    • 장점 : 스타일 적용 태그 즉시 확인 가능
    • 단점
      • 한번에 하나의 태그에만 적용 가능
      • 전체 코드 가독성 나쁨
      • 관심사 분리 안됨
  • <style> 태그에 입력하는 방법
    • 장점
      • 전체 코드 가독성 향상
      • 유지보수 용이
    • 단점
      • 태그와 CSS 연결이 필요
      • 관심사 분리가 안됨
  • CSS 파일을 만들어 불어오는 방법
    • <link href="~.css" rel="stylesheet" /> 
    • 장점
      • 전체 코드 가독성 향상
      • 유지보수 용이
      • 관심사 분리됨
    • 단점
      • 태그와 CSS 연결 필요

---

CSS 선택자

• 선택자는 CSS에서 꾸밀 대상. 즉, 속성을 줄 대상을 뜻한다.
  • * : 전체 선택자
  • tag : 태그 선택자 (ex: div)
  • .class : 클래스 선택자
  • <div class="클래스 이름"> 
    • .red {
      • color: red;
    • }
  • #id : 아이디 선택자
  • <div id="아이디 이름"> 
    • #submit {
      • width: 100px;
    • }
  • 선택자:가상상황 -> 가상선택자
    • #submit:hover {
      • background-color: yellow;
    • }

---

박스 모델 화면 표시 방법

• margin - border를 기준으로 박스의 바깥 여백
  • border - 박스의 기준이 되는 바깥 테두리 선
    • padding - 박스의 안쪽 여백
      • contents - 박스의 실질적인 내용 부분 
• CSS 박스 모델
  • border-box : border가 고정되고, contents 크기가 변한다. ( 박스가 고정 )
  • content-box ( default ) : contents가 고정되고, border의 크기가 변한다. ( 박스가 커짐 ) 

*{
    box-sizing: border-box;
 }