WEB 4주차 - CSS(2)

1. 그리드 소개

- 상황: 두 요소의 테두리를 넣고 나란히 배치하고 싶음

>> 디자인을 하겠다는 걸 암시하는 태그 div를 사용하여 테두리를 넣은 후, 나란히 배치하기 위해 그리드를 사용한다.

각 요소를 div 태그로 감싸 테두리를 넣음

두 요소를 나란히 배치하기 위해 둘을 한번에 묶는 부모 태그(div)를 넣고, id="grid"를 통해 구별함

grid 활용

https://caniuse.com/  (본인 환경에서 html, css 등의 최신 기술을 사용할 수 있는지 알려주는 사이트)

 

2. 그리드 써먹기

- 상황: 위 사진 속 본문을 부제목 경계선 옆으로 옮기고 싶음

현재 코드

 

>> ol과 h2, p 태그를 나란히 해야 하므로 그리드 사용하면 됨

우선 h2와 p를 div로 묶은 후, 둘에 그리드 적용할 것이므로 둘을 또 하나로 묶음

grid 적용, 각각 150px 1fr 부여

 

부제목, 본문 padding-left 값을 주어 보기좋게 수정, 이후 실습에 불필요한 saw, active 선택자 삭제, 부제목 ol에 준 효과가 이후 다른 ol에 적용될 위험이 있으므로 #grid ol 로 부모가 grid인 ol만을 선택하도록 함.

 

3. 미디어 쿼리 소개

- 반응형 디자인: 화면의 크기에 따라 웹페이지의 요소들이 반응해서 동작하게 됨

>> 이를 웹에서 css를 통해 구현하는 핵심적 개념이 바로 미디어 쿼리임!

 

- 상황: 화면의 크기가 80픽셀보다 작으면 텍스트를 보이게 하고, 크면 안보이게 하고 싶음

미디어 쿼리 실습: @media(min-width: 800px) 즉 화면 크기 800픽셀 넘기면 아래 코드 안보이게 함

실습 결과(개발자 모드에서 화면 크기 조작하면 우측 상단에 화면 크기 보임

 

- 만약 화면 크기 800픽셀보다 작으면 안보이게 하고 싶다면?

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

 

3. 미디어 쿼리 써먹기

- 상황: 화면의 크기가 800픽셀보다 작아지면 선을 없애고, 부제목 아래 본문이 배치되도록 하고 싶음

800px보다 화면 크기 작을 때, 아래의 효과가 적용되도록 함

 

실습 결과

4. CSS 코드의 재사용

- 스타일 하나나 복사, 붙여넣기하여 조정하는건 너무 비효율적

>> link 태그로 해결!

 

 

 

---

 

 

< 웹페이지 기획서 >

- 국민청원에 올라오는 여성 관련 의제를 모아볼 수 있는 웹페이지