생활코딩 WEB2 - CSS (3)

 

2022-01-11
반응형 디자인 / CSS 코드의 재사용

 

반응형 디자인

화면의 크기에 따라서 각 요소들이 반응하여 동작하는 디자인을 뜻한다.

 

미디어 쿼리(Media Query)

어떤 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다.

화면 크기에 따라서 특정 요소를 보이거나 안 보이게 하려면 우선 이것의 크기가 어느 정도인지 알아야 한다.

 

웹페이지에서 오른쪽 클릭을 통해 구글개발자 도구의 검사를 들어가보자.

화면 크기를 조정할 경우 상단 우측 모서리에 화면 크기가 나온다.

 

 

우측 상단에 px 사이즈가 뜨는 것을 확인할 수 있다!

 

특정 요소를 화면 사이즈에 따라 보이거나 안보이게 하는 코드는 아래와 같다.

 

/* screen width < 800px n보다 작다면 최대가 n이란 뜻 */
@media (max-width : 800px)

/* screen width > 800px n보다 크다면 최소가 n이란 뜻 */
@media (min-width : 800px)

 

그럼 작업하던 파일도 반응형 디자인에 맞춰주자.

구글 개발자 도구 > 검사를 통해 변경할 디자인을 800px에 맞춰서 요소들을 조정할 것이다.

 

#grid {
            display: grid;
            grid-template-columns: 160px 1fr;
        }

좌측에 위치칸 카테고리의 그리드를 복사해와서

 

#grid {
            display: grid;
            grid-template-columns: 160px 1fr;
        }

800px에 대한 제한을 걸어주자.

800px 보다 작을 경우 grid 였던 것을 block으로 바꿔주면 된다.

 

그럼 이런 화면이 된다.

 

 

grid가 깨지긴 했지만 남아있는 선 때문에 여전히 이상해 보인다.

이것은 ol 에 위치한 border-right: 1px solid gray; 때문에 생긴 것이니

이것과 함께 제목 밑의 줄도 같이 변경해주도록 하자.

 

 

@media (max-width : 800px) {
            #grid {
                display: block;
            }    
            #grid ol {
                border-right: none
            }
            h1 {
                border-bottom: none
            }
        }

 

---

작성한 코드의 재사용

앞서 사용한 코드들을 수많은 페이지에 일괄 적용하려면 쉽지는 않다.

모든 페이지에 중복되는 코드가 있기 때문에 일괄 적용이 힘든 것이다.

이것이 바로 중복 제거의 중요성이며, 해결 방법은 아래와 같다.

 

 

style.css 라는 파일을 만들어 준다.

적용하려고 하는 css를 해당 파일에 <style></style>을 제외하고 복사 붙여넣기하자.

그리곤 원래 css가 있던 자리에도 <style></style>를 삭제하고

<link>태그를 이용하여 여기는 style.css 라는 파일이 있어야 하는 위치야! 라는 것을 알려주자.

 

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