728x90 반응형 개발자27 CSS 미디어 쿼리(Media Query) CSS 미디어 쿼리(Media Query) 오늘은 저번 시간에 다뤘던 반응형 웹, 적응형 웹 중 현재 가장 많이 사용되는 반응형 웹 디자인에서 기초적으로 사용되는 미디어 쿼리(Media Query)를 알아보겠습니다. 반응형 웹을 간단하게 정리하면 웹 사용자들이 사용하는 디바이스에 따라 보기 편하게 변화하는 웹 디자인입니다. 그래서 반응형 웹을 사용하는 대표적인 홈페이지로 애플을 예로 들었습니다. 만약 안 들어가 보셨다면 꼭 가서 반응형 웹에 대해 경험해보셨으면 좋겠습니다. 미디어 쿼리는(Media Query) CSS에서 사용하는데 화면의 크기에 따라 텍스트의 크기나 이미지의 크기, 버튼의 생성 여부 등의 변화를 부여하여 반응형 웹을 만들 수 있습니다. 작성 예시를 보여드리면 '@media (조건){선택자.. 2022. 7. 20. CSS 반응형 웹, 적응형 웹 CSS 반응형 웹디자인 기초 오늘은 CSS에서 미디어 쿼리를 사용하여 반응형 웹에 대해 간단하게 설명드리겠습니다. 먼저 반응형 웹이란 웹페이지를 이용하는 각기 다른 사용자들이 스마트폰, 테블릿 pc, pc 모니터 등등의 기기를 통해 볼 수 있기 때문에 사용자마다 사용하는 기기의 화면의 크기에 맞게 변형되는 것을 반응형 웹이라고 합니다. 반응형 웹의 반대는 적응형 웹이라고 하는데 적응형 웹은 기기에 따라 변화하지 않고 특정한 화면이 유지되는 웹을 의미합니다. 대표적으로 애플의 홈페이지를 반응형, 네이버의 홈페이지를 적응형이라고 할 수 있습니다. 두 방식의 장단점을 보시면 반응형 웹의 장점은 수정하려고 할 때 한 파일에서만 작업을 하기 때문에 수정하기에 용이하고 단점은 한 파일에 모바일, PC의 웹을 다 작.. 2022. 7. 18. HTML 메타 태그, 메타 태그속성 HTML 메타 태그 오늘은 HTML에서 메타 태그에 들어가는 속성에 대해 자세하게 알아보겠습니다. 먼저 메타 태그를 간단하게 정리하면 HTML에서 head 태그 안에 위치하는 태그로 웹사이트 디자인에는 보이지 않지만 내용에 대한 정보나 검색을 했을 경우 나타나는 정보에 관여하는 등의 안 보이는 곳에서 꼭 필요한 태그입니다. 메타 태그의 속성에는 http-equiv, charset, name, content가 있습니다. (1) http-equiv http-equiv 속성은 content 속성의 속성 값에 대한 http 헤더를 제공하는 속성입니다. 여기서 http 헤더란 클라이언트와 서버에서 요청이나 응답에 대한 정보를 전송할 수 있도록 사용되는데 보통 백엔드에서 사용됩니다. http-equiv 속성은 주로.. 2022. 7. 15. CSS 전체선택자(*) CSS 전체선택자(*) 오늘은 CSS의 전체선택자에 대해 알아보겠습니다. CSS 전체선택자를 알기 전에 먼저 알아두셔야 할 것이 2가지 있는데 먼저 CSS의 기본 구조를 알아야 합니다. CSS의 기본 구조는 선택자{속성: 속성값;}으로 설정하는데 전체선택자는 기본 구조에서 '선택자'에 작성하는 것이고 전체선택자는 '선택자'에 *를 작성하는 방식으로 사용합니다. 다음으로 알아야 할 것은 HTML은 기본적으로 적용되어 있는 스타일이 있다는 것입니다. 예시로 태그를 보시면 CSS 스타일을 적용하지 않았는데 font-size가 2em으로 적용되는 것을 볼 수 있습니다. 여기서 em은 부모 태그의 font-size의 값을 의미합니다. -더 디테일한 정보는 다음 단위에 대한 글에서 알려드리겠습니다.- 부모 태그의 .. 2022. 7. 5. 이전 1 ··· 3 4 5 6 7 다음 728x90 반응형
