css 선택자 썸네일형 리스트형 [웹] HTML/CSS #12 :: 미디어쿼리 반응형vs적응형 포스팅에서 반응형은 미디어쿼리를 이용해서 만든다고 언급했다. 미디어쿼리는 단순하게 CSS의 조건문이라고 생각하면 편하다. 정확한 개념은 아닐 수도 있다. 하지만 기능은 그와 같다. '미디어 유형이 무엇이고 화면 넓이가 x 픽셀 이상일 때, a 태그에 이런 서식을 적용해라'라고 정의하는 것이다. 미디어쿼리의 포맷은 아래와 같다. @media 유형 and (조건) { css 선택자 { css 속성: css 값; } } 실제 코드를 보면 더 쉽게 이해가 될 것이다. 그냥 보통의 css 코드를 "@media 유형 and (조건) { }"의 중괄호 안에 집어넣은 것이다. 그럼 html 파일이 보여지는 디바이스의 유형과 조건이 맞을 때에 한해, 중괄호 { }안의 css가 적용되는 것이다. 다음 예를.. 더보기 [웹] HTML/CSS #8 :: CSS 선택자 사실 7편보다 이걸 먼저 했어야 순서상 효율적이지 않았을까 싶다. 그래도 뭐 선택자 개념 배운 다음에 다시 속성 활용해서 실습하면 된다. 1편부터 쭉 봐왔다면 알겠지만 HTML은 내용을 담는 통이고, CSS는 그 내용이 보여지는 모습을 꾸민다. HTML에 태그를 이용해 각각 요소들을 만들어 구성을 짜면, CSS는 각각의 요소들을 어떤 방식으로 표시하라고 브라우저에게 명령한다. 비유적으로 표현하면, HTML은 레고다. 각각의 태그들은 새하얀 레고블럭이다. 그리고 레고블럭들을 이용해 원하는 모양을 만든다. CSS는 그 새하얀 레고블럭들을 칠하는 것이다. 정확히 말해 HTML과 CSS는 이러한 행동을 하라는 지시를 적은 명세서이다. 실제로 레고를 쌓고 블럭을 칠하는 건 브라우저다. 그럼 CSS에는 브라우저가 .. 더보기 이전 1 다음
