본문 바로가기

SELF IMPROVEMENT/CODING

21.08.18.TUE - 코딩4일차 (CSS마무리)

#반응형 디자인

(resposive web)

화면크기에 따라 

웹페이지 크기에 따라 

변하는것

 

 

 

#미디어쿼리

마우스 오른쪽버튼누르고,

'검사'클릭하고

화면움직이면,

화면크기가 나타난다.

 

@media(min-width:800px){

}

이 코드를 이용하면

css가 작용하는 조건을 걸 수있다.

저 코드는 800px보다 큰화면일때만,

뭔가 적용되게 만들 수 있다.

 

이걸 '미디어쿼리'라고한다.

 

 

 

#코드의 재사용

style.css(이름은 바꿔도됨.)파일을 만든다.

다른 파일에서 style.css를 불러온다.

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

 

styel.css에는 <style></style>에 들어가는

모든 css를 저장해둔다.

 

이걸 사용하면 우리는 각각의 파일에서

css를 수정하지 않아도 되고,

style.css에서 한번만 바꿔도된다.

 


#짧은 코딩강의 수강을 마치며

4일 내내 코딩하다보니까

4일차에는 약간 수업을 듣기가 힘들었다.

그래도 변화는 하기싫을때 버티고 꾸준히 끌고가는게 중요하니까

한번 시작했으면 열심히 해보자.

 

지금까지 기본적인요소로

웹페이지를 만들 수는 있게되었으니까.

내게 의미있는 웹사이트를 한번 만들어보자.

그렇게 만들면서 부족한부분이 보일거고,

고민하고 검색해보고 적용해보면서

하나를 일단 완성해보고

다음진도를 나가보자.