[STUDY] 231017~231102 | CSS | 생활코딩

💻 생활코딩>WEB2-CSS(8~15강)

📌 CSS 박스 모델

• /* */ : CSS에서의 주석
• padding:0px : 컨텐츠와 테두리간 간격 차이 설정
• margine:0px : 테두리와 테두리 사이 값
• block level element : 화면 전체를 쓰는 것
• inline element : 자기 크기만 갖는 것
• ⭐️개발자도구 활용하여 화면의 margine, padding 영역을 조절하며 디자인
  

📌 그리드 소개

• div : divition의 약자로 디자인의 의미로만 사용됨. 화면 전체를 사용(block level element)
  • 

  <div id="grid">
  		<div>NAVIGATION</div>
  </div> 

• span : inline element
• display : block level element, inline, none 등을 통해 어떤 태그가 표시되는 방법을 바꾸는 속성
  • display: grid;
grid-template-columns: 2fr 1fr;
    ➡️ 화면 전체를 3fr이라 가정했을 대 각 2, 1만큼 화면전체를 쓰게 자동으로 조정되는 단위=fr
• solid : 선/테두리 색상
• #grid ol : 현재 페이지 중 grid를 조상으로 가진 ol태그 선택자
• 그리드는 비교적 최신 기술! 해당 기술 사용 시 통계에 입각하여 사용 여부를 판단해야 함.(⭐️can i use 홈페이지에서 확인 가능)

📌 미디어쿼리(media query) 소개

• 미디어쿼리 : 반응형 디자인을 web을 통해서 css를 통해 구현하는 핵심 개념
• 반응형 디자인 : 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작
• ⭐️여러 화면의 특성들에 따라서 어떠한 조건을 만족할 때만 css의 내용이 동작하도록 하는 것이 가능함
  • ex:

    <style>
    @media(min-width: 800px){
    div{
    	display: none;
    	}
    }
    </style>

    ➡️ 화면의 크기가 최소 800px, 800px보다 화면이 크다면 div 코드가 동작하게 됨

📌 CSS 코드의 재사용

• link : 해당 위치에 별도의 파일에 저장된 css를 다운로드 받아서 여기에 원래 그 코드가 있었던 것처럼 동작하는 태그
  • 해당 웹페이지가 어떤 css 파일과 연결되어 있는지 웹브라우저에게 알려줄 수 있음
  • ex:

    <link rel="stylesheet" href="style.css">

    ➡️ 해당 웹페이지는 style.css 파일과 link(연결) 되어있고, 웹브라우저는 style.css 파일을 다운로드 받아서 그것이 이 웹페이지에 적용한다.
• 웹페이지마다 link-style.css 적용 가능 ➡️ 사용성/효율성/경제성/가독성 ⬆️
• 캐싱(저장하다) : 네트워크 트래픽(사용료)를 훨씬 절감할 수 있음
  ➡️ css 파일을 만들었다면 별도의 파일로 꺼내서 중복을 제거하는 것이 좋음

🍀 회고

• 개발자도구를 활용하면 현재 웹페이지의 상태를 정밀하게 점검하면서 좀 더 정확한 웹디자인이 가능한 것을 알았고, 초보일수록 이런 기능을 적극적으로 활용해야겠다는 생각이 든다.
• 화면의 구성이나 크기가 스마트폰, pc, 태블릿 등 기기마다 다를텐데 어떻게 다 적용이 되는 디자인을 할 수 있는 건지 궁금했는데, 미디어쿼리에 대해 알고나서 이해가 됐다. 하나하나 모두 적용하는 것은 불가능한데 반응형 디자인 덕분에 효율적인 관리가 가능하다는 것을 알았다.