css4 9) 간단한 반응형 웹 디자인: 미디어 쿼리 반응형 웹 디자인? 반응형 디자인이란 말을 들어본 적이 있나 모르겠다. 개념은 간단하다. 사람들이 어떤 대상에 조작을 가할 때마다 그것의 모습이 변화하는 디자인이다. 웹페이지를 디자인하는 사람이라면 이러한 반응형 디자인을 염두에 두어야 한다. 특히 웹브라우저의 크기가 변화함에 따라서 웹페이지의 크기가 달라지는데 그럼 웹페이지가 전달하고자 하는 정보를 사람들에게 제대로 전달하지 못하는 경우가 생길 수 있다. 우리가 이용하는 대부분의 웹페이지는 반응형 디자인을 적용하고 있다. 예를 들어 쿠팡을 들어가보면 화면의 크기에 따라 나타내는 컨텐츠를 달리 적용하고 있는 것을 알 수 있다. 우리가 만든 웹페이지도 반응형 디자인을 간단한 수준으로 나타내볼까 한다. 그래서 활용하는 것이 미디어 쿼리(media query).. 2022. 8. 12. 8) 박스모델과 그리드 오늘은 무엇을 할 것인가? 저번에 하고자 했던 웹페이지 디자인을 마무리 지을 것이다. 이번 글에서는 박스모델과 그리드에 대해서 배우는 것이 핵심이지만, 이것을 이해하고 활용하기 위해서는 다른 여러가지 개념도 같이 배워야 한다. 다행스럽게도 크게 어려운 내용은 없으니, 하나하나 배워보자. 목차 1. 블록 요소와 인라인 요소 2. 블록 요소의 구성 3. 그리드 1. 블록 요소와 인라인 요소 먼저 저번에 한 것을 돌이켜보자. 저번에는 class와 id를 활용하는 방법을 배웠고, 이 방법을 활용해서 원하는 부분의 글자색을 바꾸고, 하이퍼텍스트의 밑줄까지 조절했다. 그리고 이번에는 배치에 관한 것을 수정할 차례이다. 사각형 상자 형태로 내용을 나누어서, 위쪽은 Web이라고 써진 부분을, 왼쪽은 리스트 부분을, 오.. 2022. 8. 12. 7) CSS의 class와 id 저번 글에서는 CSS의 주된 특징과 선택자와 속성을 이용하는 방법에 대해서 배웠다. 이번 글과 다음 글에서는 위의 그림과 같은 웹페이지를 만들어볼 것이다. 이번 글에서는 클래스와 id라는 아주 중요한 개념을 배운다. 목차 1. 인라인 속성 적용 2. 클래스 3. id 1. 인라인 속성 적용 저번에 만든 웹사이트와 이번에 만들 웹사이트와 대조해보자. 무엇이 다를까? 뭔가 많은 것이 바뀌었다. 내용은 모두 같지만 디자인 적인 요소가 많이 다르다. 일단 Web의 글자색이 바뀌었다. 그리고 내용마다 배치가 달라졌고 사각형 모양으로 구획 같은 게 생겼다. 글자 크기도 좀 달라졌다. 리스트 하이퍼텍스트에서는 원래는 있어야 할 밑줄도 없다. 차근차근 바꿔 나가 보자. 인라인(Inline) 속성 적용 먼저 글자색을 바.. 2022. 8. 12. 6) 입문자가 알아야 할 CSS의 기본 특징 CSS는 무엇을 위해 나왔을까? 이미 언급한 바 있지만 웹페이지를 꾸미기 위해서다. HTML은 웹페이지의 정보를 구조화해서 정확하게 전달하기 위해서 나왔다. 이를 위해서 ‘태그’를 사용한 마크업 언어라는 특징을 갖고 있다. 반면 CSS은 정보를 전달하기 위해서가 아니라, 그 정보를 어떻게 이쁘게 장식해서 전달할까에 중점을 맞춘 언어이다. HTML이 만들어진 초창기에는 CSS라는 것이 없었다. 하지만 사람의 욕심은 끝이 없어서 당시에도 웹페이지를 아름답게 디자인하고 싶었던 사람이 많았다. 그래서 웹페이지를 이쁘게 만들기 위해서 안타깝게도 디자인의 모든 것을 HTML안에 때려박았다. 그러다보니 HTML이 정보의 구조화라는 본래의 목적을 잃고 디자인을 위한 언어가 되어갈 때가 많았고, 결국엔 웹페이지 디자인을.. 2022. 8. 12. 이전 1 다음
