[CSS] CSS 강의정리_by생활코딩

• CSS? 디자인 언어!
  CSS를 사용하면 1억개가 있어도 한 번의 수정으로 전체 수정이 가능함
  장점) 유지보수 가능, 가독성 높아짐
  
  
• CSS 삽입하는 2가지 방법
  - style 속성을 사용한다 : <style> a{color:black;}</style>
  - style 태그를 사용한다 : style = "color:red"
  
  
• CSS 문법 정리
  ex) a{color:red;}
  - a{} : 선택자 selector (이 웹페이지에 있는 모든 a태그를 선택한다.)
  - color:red; : 선언, 효과 declaration (선택자가 지정하는 태그들에 줄 효과 선언)
  - color : 속성 property
  - red : 값 value
• 모든 CSS 암기하지 말고 구글링하기~!
  
  
• 선택자 우선순위
  태그 < 클래스 < #id
   id 값은 단 한 번만 등장한다.
  
  

묶기 : class="saw" / 위에 .saw{color:gray;}
순서에 따라 입혀지는게 다르다.

위에서부터 바탕깔고 아래로 내려갈 수록 우선순위가 높아짐
복잡한 상황에서 우선순위 주고 싶을 경우, 대신 #을 넣어서 하면 됨 #active 같이

+) CSS SELECTORS 구글링해서 보기

---

• 박스모델
  block level element : h1태그 사용시 화면 전체를 쓴다.|
  inline element : a 태그 사용 시 content만 감싸진다.
  하지만 display:inline / solid로 CSS만으로 구성 바꿀 수 있음
  display : none 하면 사라짐
  border-width:5px;border-color:red;border-style:solid; 
  ➡ border : 5px solid red;로 함축 가능
  padding : 박스 내 여백
  margin : 박스 간 여백
  참고하기 : css box model
  
  
• 선 만들기
  - border-right:1px solid gray;
  - border-bottom:1px solid gray;

---

• 참고
  <div>디자인의 용도로 감싸주는 태그(화면 전체를 사용함)
  <span>inline으로 할 때 사용
  1fr : 화면 전체를 쓰도록 비율로 분배하는 크기

---

• 반응형 웹페이지
  화면에 따라서 디자인을 다르게 하는 방법 (mediaquery)
  @media(min-width:700px){div{display:none;}
  ➡ width가 700보다 클 때 조건 걸기

---

• 모든 페이지에서 중복되는 CSS코드는 어떻게 해야하나?
  ➡ css문서를 별도의 파일(style.css 파일)로 빼고 각 페이지에는 링크 태그로 연결!
• <link rel="stylesheet" href="style.css">
  style.css파일 하나만 바꾸면 1억개던 천억개던 동시에 바뀔 수 있음
  코드의 양이 줄었기 때문에 인터넷 사용료를 덜 수 있다.
  
  
• 캐싱 : 저장하다. 한 번 저장하면 바뀌기 전까진 우리 컴퓨터에 저장한다.