CSS_생활코딩 : BOX 개념, GRID 개념, 반응형 웹

생활코딩 학습 내용 복습_4~5일차

 

- 날짜 : 2022.07.25.월 ~ 07.26.화

- 학습내용 : WEB 2 CSS

 

1. BOX

 

2. GRID

- caniuse : html과 css 구현 문법을 사용할 수 있는지 확인하는 사이트

https://caniuse.com/

- <div> </div> : block element (element=tag)

- <span> </span> : inline element

 

3. 반응형 웹

- 미디어 쿼리!!

@media(min-width:664px) {
        div{
          display:none;
        }
      }

-> 화면의 폭의 최소값이 664px일 때(화면 폭이 664px보다 작을 때), div태그가 적용된 내용의 display를 none으로 처리해라. 라는 뜻이다

  @media(max-width:664px) {
        div{
          display:none
        }
      }

반대로 화면의 폭의 최대값이 664px일 때(화면 폭이 664px보다 클 때), div태그가 적용된 내용의 display를 논으로 처리해라. 라는 뜻이다.

 

4. style.css

- 동일한 CSS가 적용되는 페이지가 많을 때 style 태그 안에 입력된 CSS 코드를 복붙해야한다. 

- 그 style 태그 안에 입력된 코드를 별도의 css확장자 파일에 붙여넣어 파일을 만들면 편리해진다.

- 이때 사용되는 태그가 link이다

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

-> style.css라고 하는 별도의 css 파일을 다운로드 받아서 여기에 그 코드가 있었던 것처럼 동작해! 라는 태그가 link태그이다.