본문 바로가기

HTML & CSS3

CSS 반응형 웹 (Responsive Web) - test1

저번 면접때 주로 질문 받은건 반응형 웹이 가능하냐에 대한 질문을 많이 받았다.

내가 리뉴얼한 페이지는 반응형이 아니라 자신있게 할 수 있다고 말을 못했다.

준비되지 않은것에 자신있게 거짓말하기가 싫었다.

그리고 해본거랑 할 주 아는거는 차이가 크기 때문이다.

그래서 조금씩 해보기로했다.

처음에는 간단하게 시작하도록 하자.

미디어 쿼리 적용법은 4가지가 있다.

1.link

<head>태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 css파일을 불러온다

2.<style>

<head>태그 안에 위치하여 media 속성 안 조건에 만족 할 때 스타일을 적용 시킨다

3.<style> - @import

<style>태그 안에서 @import를 사용하여 뒷 부분의 미디어 쿼리를 만족 할 때 해당 css파일을 불러온다.

4.CSS파일

불러온 css파일 안 혹은 <style>태그 안에서 직접 미디어 쿼리를 작성하여 만족할 때 해당 스타일을 적용한다.

나는 css파일 스타일로 만들어보았다.

아주 간단하게 크기별로 box의 with값을 변화를 주었다.

처음에는 박스4개가 나란히 있고 창크기의 변화에 따라

25%~100%까지 해서 적용해 보았다.

링크:http://newlex0124.cafe24.com/test/responsive/test1.html