웹 프론트엔드 썸네일형 리스트형 [웹] HTML/CSS #12 :: 미디어쿼리 반응형vs적응형 포스팅에서 반응형은 미디어쿼리를 이용해서 만든다고 언급했다. 미디어쿼리는 단순하게 CSS의 조건문이라고 생각하면 편하다. 정확한 개념은 아닐 수도 있다. 하지만 기능은 그와 같다. '미디어 유형이 무엇이고 화면 넓이가 x 픽셀 이상일 때, a 태그에 이런 서식을 적용해라'라고 정의하는 것이다. 미디어쿼리의 포맷은 아래와 같다. @media 유형 and (조건) { css 선택자 { css 속성: css 값; } } 실제 코드를 보면 더 쉽게 이해가 될 것이다. 그냥 보통의 css 코드를 "@media 유형 and (조건) { }"의 중괄호 안에 집어넣은 것이다. 그럼 html 파일이 보여지는 디바이스의 유형과 조건이 맞을 때에 한해, 중괄호 { }안의 css가 적용되는 것이다. 다음 예를.. 더보기 [웹] HTML/CSS #11 :: 반응형 vs 적응형 직접 페이지를 만들어보기 전에 우선 반응형 웹 디자인에 대해 알고 갈 필요가 있다. 모바일, 태블릿, 데스크탑 등 다양한 디바이스가 넘쳐나는 요즘 반응형은 필수다. 웹에 조금이라도 관심이 있다면, 그리고 없어도 우연히 한 번 쯤은 반응형이란 말을 들어봤을 것이다. 그럼 반응형은 대체 뭐에 반응하는 걸까? 눈치가 있다면 '아, 웹사이트에 접속하는 디바이스에 반응하는구나'라고 생각할 수 있다. 안타깝게도 반은 맞고 반은 틀렸다. 보다 정확히는, '접속하는 디바이스의 화면 크기'에 반응한다. 그게 그 말 아닌가 싶기도 하지만 굳이 깊게 들어간 이유가 있다. 바로 적응형이라는 개념 때문이다. 둘 다 다양한 디바이스에서 제대로 웹페이지를 보여주기 위한 기술이다. 그럼 반응형과 적응형, 영어로는 Responsive.. 더보기 [웹] HTML/CSS #6 :: 속성이란? HTML 실습정말 쉬운 실습이건 진짜 시작이 반이다네이버로 가자 빠르게 진행하겠다. 속성은 태그를 보조해주는 역할이다. 태그는 사이에 태그 이름이 들어가 있는 단순한 구조다. 여기에 좀 더 많은 기능을 부여해주는 것이 속성이다. CSS를 통해 태그를 보조해주는 경우가 많지만, 디자인보다 '기능'에 가까운 쪽은 HTML 자체 속성을 활용한다. 위의 표 중에서 맨 아래 요소만 가져와보겠다. #에는 네이버의 메인 주소를 치면 된다. 네이버로 가자 위의 줄 전체, 즉 오프닝 태그부터 클로징 태그까지, 다시 말해 부터 까지를 모두 일컬어 HTML 요소(element)라고 부른다. 그리고 파란색으로 색칠한 와 를 앞선 포스팅에서 설명한 것처럼 태그라고 부른다. 그리고 오프닝 태그의 안에 담겨있는 주황색, 저게 속성.. 더보기 이전 1 다음
