본문 바로가기

HTML5 & CSS355

[HTML5 & CSS3] 미디어 쿼리를 사용해 웹 문서 만들기 ▶ 미디어 쿼리를 사용해 웹 문서 만들기 *레이아웃 구상하기 반응형 웹 디자인은 화면 해상도에 따라 화면 요소들을 옮길 수 있어야 하므로 처음부터 레이아웃을 잘 구상하고 옮길 부분을 결정해야 한다. 이때 주로 모바일 화면부터 시작해 태블릿과 PC 화면 순서대로 구상하면 편하다. *미디어 쿼리 중단점 결정하기 미디어 쿼리를 사용하려면 중단점을 먼저 결정해야 한다. 여기에서 만들어 볼 문서는 화면 너비에 따라 카드를 가로로 배치하거나 세로로 배치하기 때문에 카드 너비 값만 정하면 미디어 쿼리 중단점을 정할 수 있다. 모바일 화면일 경우 이미지와 텍스트를 세로로 배치하기 때문에 이미지 너비 값을 기준으로 카드 너비 값을 결정하면 된다. 사용할 이미지의 너비가 300px이므로 카드의 너비도 300.. 2021. 2. 14.

[HTML5 & CSS3] 미디어 쿼리 이해하기 (미완성) ▶ 미디어 쿼리 *미디어 쿼리란? 미디어 쿼리는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해 준다. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다. 이렇게 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 한다. *미디어 쿼리 구문 미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해준다. 기본형) @media [only | not] 미디어 유형 [and 조건] * [and 조건] 연산자 설명 and 앞의 소스처럼 조건을 계속 추가할 수 있다. ,(쉼표) 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면.. 2021. 2. 14.

[HTML5 & CSS3] 가변 레이아웃과 가변 요소 ▶ 가변 레이아웃과 가변 요소 가변 그리드를 사용하면 사이트에 접속하는 브라우저의 너비에 따라 웹 요소들의 너비가 유동적으로 바뀐다. 이때 웹 요소 중 너비 값을 가진 요소들도 브라우저 너비가 바뀔 때 함께 바뀌어야 자연스럽게 표현될 수 있다. *가변 글꼴 텍스트 크기를 픽셀(px) 단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시된다. 따라서 반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 바뀌어야 한다. 이것을 '가변 글꼴'이라고 한다. 가장 많이 사용하는 단위는 em 과 rem 이다. -em 단위 em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받는다. 즉, em 단위를 .. 2021. 2. 14.

[HTML5 & CSS3] 가변 그리드 레이아웃 ▶ 가변 그리드 레이아웃 사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법이다. 가변 그리고 레이아웃에서는 CSS를 하나만 정의하면 된다. *고정 그리드와 가변 그리드 웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템' 이다. 반드시 그리드 시스템을 따를 필요는 없지만 사이트 전체의 디자인이나 일관성을 유지하는데는 그리드 시스템이 편리하다. 그리드 시스템이란 화면을 몇 개의 칼럼으로 나누어 요소들을 배치하는 것으로 필요할 때마다 칼럼들을 묶어 배치할 수 있다. 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트들에서 사용된다. 그리드 시.. 2021. 2. 14.

[HTML5 & CSS3] 모바일 기기와 웹 디자인 ▶ 반응형 웹 *반응형 웹이란? PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어 보여주는 웹 디자인. 하나의 사이트를 제작해 여러 기기에서 볼 수 있도록 하는 것. *반응형 웹의 장단점 -모든 스마트 기기에서 접속 가능 반응형 웹에서 사용하는 기술들은 W3C에서 웹 표준으로 지정한 HTML과 CSS로 이루어져 있기 때문에 어떤 스마트 기기에서든 접속할 수 있다. -가로 모드에 맞추어 레이아웃 변경 가능 스마트폰이나 태블릿에서 가로 모드로 돌렸을 때 너비 값이 커지면 그에 맞추어 레이아웃을 바꾸어 보여줄 수도 있다. CSS에서 조절하며 화면 크기에 맞추어 자유롭게 반응할 수 있다. -사이트 유지 & 관리 용이 사이트가 하.. 2021. 2. 14.

[HTML5 & CSS3] 애니메이션 ▶ 애니메이션 *CSS와 애니메이션 CSS3의 animation 속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. CSS 애니메이션은 시작해서 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다는 점으느 트랜지션과 다르다. 이 때 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 부른다. 속성 설명 @keyframes 애니메이션이 바뀌는 지점을 설정한다. animation-delay 애니메이션 지연 시간을 지정한다. animation-direction 애니메이션 종료 후 처음부터 시작할지, 역방향으로 진행할지를 지정한다. animation-duration 애니메이션 실행 시간을 설정한다. animatio.. 2021. 2. 14.

이전 1 2 3 4 5 6 ··· 10 다음

티스토리툴바