본문 바로가기
728x90
반응형

HTML38

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 기초(7) 선택자(1) 태그 선택자, class 선택자, id 선택자, 부모, 자식, 형재 선택자 CSS 기초(7) 오늘은 CSS에서 선택자를 지정하는 방법에 대해 알려드리겠습니다. 선택자를 지정하는 방식에는 직접 태그를 선택할 수도 있고 class 속성이나 id 속성을 지정할 수도 있습니다. 더 나아가 부모 태그, 자식 태그, 형재 태그를 이용하여 선택자를 지정할 수도 있는데요. 오늘은 태그 선택자, class 선택자, id 선택자, 부모, 자식, 형재 선택자 까지 다루어보겠습니다. (1) 태그 선택자 먼저 태그 선택자입니다. 태그 선택자는 말 그대로 HTML에서 태그를 직접 선택하는 방식으로 CSS에서는 '태그{속성: 속성 값;}'으로 작성할 수 있습니다. 태그 선택자의 단점은 태그가 겹치는 것이 없다면 해당하지는 않지만 만약 태그가 겹치는 상황이 생겨서 원하지 않은 태그에도 스타일이 지정될 수 .. 2022. 7. 12.
CSS 기초(6) background-image 심화 CSS 기초(6) 오늘은 background-image 속성에 대해 더 자세히 배워보겠습니다. 저번 시간에 내용을 복습해보면 CSS에서는 background-image 속성을 '선택자{background-image: url(이미지 경로/ 이미지);}'로 작성하여 사용할 수 있습니다. background-image 속성을 사용하면 이미지의 크기와 지정한 배경의 크기가 맞지 않는 경우가 생기는데요. 이럴 경우에 사용할 수 있는 방법에 대해 알아보겠습니다. (1) 먼저 알려드릴 것은 이미지의 크기와 배경의 크기가 맞지 않을 경우 발생하는 현상인데요. 이때 사진에서 처럼 빈 공간을 채우기 위해 사진이 여러 장으로 나타나는 것을 볼 수 있습니다. 이럴 때는 배경의 크기를 이미지의 크기에 맞게 줄이거나 이미지의 연.. 2022. 7. 12.
728x90
반응형

티스토리툴바