생활코딩 WEB2. CSS

추가 개념 : media quary

미디어 쿼리는 반응형 웹을 제작할 때 필요하다. 요즘은 스마트폰, 티비, 컴퓨터 등 정보를 제공하는 매체의 화면 크기가 다양하기에 이에 맞춰서 출력을 다르게 하기 때문이다.

아래는 적용 방식이다.

<style>
  @media(max-width: 800px) {   /* 화면 크기가 800px보다 작아질때 적용 */
    ~~
  }
    
  @media(min-width: 800px) {   /* 화면 크기가 800px보다 커질때 적용 */
  	~~
  }
</style>

미디어 쿼리 문장 안에 셀렉터를 활용해서 style을 적용할 수 있다.

생활코딩 CSS 강의를 통한 배움 🎂

• CSS의 필요성
  1. HTML이 정보 자체에 집중하게 하기 위함
  2. CSS를 통해서 웹페이지를 디자인 하는 것이 HTML을 사용해서 디자인 하는 것보다 효율적이므로.

1. CSS 사항 작성을 위해 head 태그 아래 사용하는 style은 태그.
   태그 안에 작성하는 style은 속성.
   속성 style 예시) <h1 style="color: red">

2. 화면 전체를 사용하는 요소 : block level element
   요소 안에 내용을 감쌀만큼을 차지하는 요소 : inline level element
   block level element를 display: inline;으로 바꾸지 않고 width만 정해줘도 폭 조절이 가능.

3. span 태그 : inline level element, 디자인을 위한 목적으로 사용하는 무색무취의 태그
   div 태그 : block level element, 디자인을 위한 목적으로 사용하는 무색무취의 태그

4. 여러 property과 selector들은 많이 알면 좋지만 굳이 암기하지 않아도 OK.

5. 셀렉터 종류는 https://www.w3schools.com/cssref/css_selectors.asp 여기서 참고.

6. id 선택자가 제일 우선, 그 다음 class 선택자, 태그 선택자 순서로 적용. 이유는 포괄의 범위 때문.

7. grid 속성 사용하는 것이 꽤나 유용.

8. https://caniuse.com/
   해당 사이트를 활용하여 내가 사용하고자 하는 기술을 현재 사용하도 괜찮은지 확인.

9. 웹페이지를 개발할때는 단축키 F12 또는 마우스 오른쪽 > 검사 를 클릭하여 개발자 도구를 적극적으로 활용하는 것이 좋음. (특히, margin, padding 등의 속성을 사용할 때 유용해보임)

10. 여러 html에 중복되는 css가 있다면, 일단 따로 css 파일을 만든다. 해당 css 파일의 적용을 원하는 html style 태그에 <link ref="stylesheet" href="style.css">를 적어주면 css 적용 완료.
    → 불필요한 중복을 제거하여 재사용성을 높이고, 가독성을 높임.

11. 코딩을 잘하는 방법???? 중복을 줄이는 것!!!!

🎁 참조 및 출처

• 생활코딩 WEB2. 수업 전반 ↓ (링크)
  https://www.youtube.com/watch?v=Ok0bBJPtgJI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B