웹 디자인 썸네일형 리스트형 [웹] HTML/CSS #12 :: 미디어쿼리 반응형vs적응형 포스팅에서 반응형은 미디어쿼리를 이용해서 만든다고 언급했다. 미디어쿼리는 단순하게 CSS의 조건문이라고 생각하면 편하다. 정확한 개념은 아닐 수도 있다. 하지만 기능은 그와 같다. '미디어 유형이 무엇이고 화면 넓이가 x 픽셀 이상일 때, a 태그에 이런 서식을 적용해라'라고 정의하는 것이다. 미디어쿼리의 포맷은 아래와 같다. @media 유형 and (조건) { css 선택자 { css 속성: css 값; } } 실제 코드를 보면 더 쉽게 이해가 될 것이다. 그냥 보통의 css 코드를 "@media 유형 and (조건) { }"의 중괄호 안에 집어넣은 것이다. 그럼 html 파일이 보여지는 디바이스의 유형과 조건이 맞을 때에 한해, 중괄호 { }안의 css가 적용되는 것이다. 다음 예를.. 더보기 [웹] HTML/CSS #11 :: 반응형 vs 적응형 직접 페이지를 만들어보기 전에 우선 반응형 웹 디자인에 대해 알고 갈 필요가 있다. 모바일, 태블릿, 데스크탑 등 다양한 디바이스가 넘쳐나는 요즘 반응형은 필수다. 웹에 조금이라도 관심이 있다면, 그리고 없어도 우연히 한 번 쯤은 반응형이란 말을 들어봤을 것이다. 그럼 반응형은 대체 뭐에 반응하는 걸까? 눈치가 있다면 '아, 웹사이트에 접속하는 디바이스에 반응하는구나'라고 생각할 수 있다. 안타깝게도 반은 맞고 반은 틀렸다. 보다 정확히는, '접속하는 디바이스의 화면 크기'에 반응한다. 그게 그 말 아닌가 싶기도 하지만 굳이 깊게 들어간 이유가 있다. 바로 적응형이라는 개념 때문이다. 둘 다 다양한 디바이스에서 제대로 웹페이지를 보여주기 위한 기술이다. 그럼 반응형과 적응형, 영어로는 Responsive.. 더보기 [웹] HTML/CSS #2 :: CSS란? CSS는 Cascading Style Sheet의 약자다. Cascading은 사전을 찾아보면 '폭포같은, 연속적인, 계속되는'으로 나온다. 스타일 시트는 말 그대로 스타일을 꾸미는 시트다. 벽에 시트지를 붙여서 꾸미는 것처럼, HTML에 꾸미는 시트를 붙이는 파일 형식이다. 앞에 Cascading이란 붙은 이유는 웹 브라우저의 특성 때문. 웹 브라우저는 CSS 파일을 위에서부터 아래로 읽는다. CSS를 열어보면 HTML의 이 내용은 이렇게 꾸미고, 저 내용은 저렇게 꾸미라는 코드가 들어있다. 예를 들어 "이미지는 가로는 160 픽셀, 텍스트는 폰트 굵기는 300, 색깔은 빨간색, 배경은 초록색으로 해라"라는 식이다. 실제로 거의 모든 웹사이트에서 이런 명령어들은 상당히 많고, 개중에 겹칠 수도 있다. .. 더보기 이전 1 다음
