10. CSS 리셋(reset) - 브라우저마다 태그를 렌더링하는 기본 스타일이 다름 - 그래서 위와 같은 원인으로 문제가 생기지 않도록 하는 원칙이 '크로스브라우징' 임 - 이에 크로스브라우징 중에 첫번째로, 모든 브라우저에서 동일한 화면을 볼 수 있도록 기본값을 초기화하는 것을 CSS 리셋이라함 - 일반적으로 실무에서 margin과 padding 값은 0으로 초기화 해주는 것이 CSS 적용하기 편함 - 태그별로 기본 적으로 스타일 되어있기 때문에, 부모요소가 아닌 태그 자체에 직접 CSS 리셋을 할 것 ※ css reset 관련 사이트 : cssreset.com

9-2. 미디어쿼리(Media Queries) : 구문(syntax) 가. 미디어쿼리 구문(syntax) 구조 1-1. 미디어쿼리 리스트(media_query list) ≒ 多미디어쿼리 : S* [media_query [',' S* media_query]*]? - 다수의 미디어쿼리가 연속적으로 들어가는 구문 1-2. 미디어쿼리(media_query) ≒ 미디어타입 + 미디어특성 : [only|not]? S* media_type S* [and S* expression]* - 미디어타입 없이 미디어특성만 입력된 구문도 유효함 - 이때, 미디어타입 입력이 없으면, 미디어타입은 'all'로 해석됨 1-3. 표현식(expression) ≒ 미디어특성 : '(' S* media_feature S* [':' S* e..

9-1. 미디어쿼리(Media Queries) : 정의 및 미디어 타입&미디어 특성 가. 미디어쿼리(Media Queries) 정의 - 미디어쿼리는 각 미디어 매체에 따라 다른 스타일(CSS Style)을 적용할 수 있게 만드는 것 - 여기서 미디어 매체란, 모니터와 같은 스크린 매체, 프린트, 스크린 리더기를 의미함 - 이에, 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공 - 따라서, 미디어쿼리로 인하여 정적인 고정 레이아웃 웹사이트에서 동적인 반응형 웹사이트로 변화함 나. 미디어쿼리(Media Queries) 구성 1 @media 미디어쿼리구문(미디어타입 or 미디어특성) {스타일규칙} - 미디어쿼리 선언 방법 및 그 순서는, ① @media : 이제부터 미디어 쿼리..

8-8-6. CSS 속성 : 레이아웃-제트인덱스(z-index) 가. z-index 속성 - 요소의 위치를 지정하다 두 개 이상의 요소가 겹쳐져, 어느 하나의 요소가 다른 요소를 덮는 경우가 있음 - 이때, 어느 요소가 더 위로 올라와야 하는지 규칙을 지정해야함 - 위와 같이, z-index 속성은 요소들이 겹치는 쌓임 순서(stack order)의 규칙을 지정하는 속성 - 쌓임 순서는 z-index 속성값을 이용하여 설정할 수 있음 - 만일, 요소들에 위와 같이 그 순서값이 별도로 없을 경우 코드상 생성순서에 따라 쌓임 - 단, z-index 속성을 입력하는 요소의 position 속성값이 static이 아니어야 됨 - 기본값 : auto 나. z-index 속성값의 종류 속성값 내용 auto ㆍ쌓임 ..

8-8-5. CSS 속성 : 레이아웃-포지션&옵셋(position&offset) 가. position 속성 - 요소의 레이아웃을 설정하는 대표적인 속성 - position 속성은 요소를 원하는 위치로 이동할 수 있게 하는 속성 - positon 속성은 좌표 값인 offset 값과 같이 활용됨 - 기본값 : static 나. position 속성값의 종류 속성값 내용 static ㆍ블록레벨요소는 상하로, 인라인레벨요소는 좌우로 그 성질에 따라 배치되는 순서 (normal-flow)와 같이 흐름에 맞춰서 배치되며, offset 값이 적용되지 않음(기본값) relative ㆍ해당 요소 자신이 원래 있어야 할 위치를 기준점으로, offset 값에 따라 위치를 배치함 ㆍ원래 자신의 위치 상 top/left 꼭지점..

8-8-4. CSS 속성 : 레이아웃-클리어(clear) 가. clear 속성 - float 속성이 선언된 요소는 주변 요소의 배치에 영향을 줌 - clear 속성은 위와 같이 float 된 요소의 영향으로부터 벗어나 영향을 받지 않도록 하는 속성 - 보통, 앞선 요소에 float 속성을 선언하였으면, 그 다음 요소에는 바로 clear 속성을 선언하는게 좋음 - clear 속성과 float 속성은 항상 같이 따라다니는 속성임 - clear 속성은 "블록레벨태그(요소)" 또는 display 속성값이 "block" 인 경우만, 적용 가능함 ※ display의 속성값 inline-block 은 인라인레벨이므로, clear 속성 적용불가 - 기본값 : none 나. clear 속성값의 종류 속성값 내용 none..