본문 바로가기

ViewPort2

HTML & CSS #15 : 미디어 쿼리 접속하는 미디어(device)에 따라 특정 CSS스타일을 사용할 수 있도록 하는 것! 브라우저 창의 너비가 조절될 때마다 화면에 표시되는 column 갯수가 달라지고, 사용하는 디바이스의 크기에 따라 웹사이트의 layout이 바뀌는 것이 그 예시이다. 미디어 쿼리 구문 @media [only|not] 미디어_유형 [and 조건] * [and 조건] 미디어 유형은 all, print, screen, tv, aural, braille, handheld, projection, tty, embossed 가 있다. 미디어 쿼리의 조건 - viewport (가로 너비와 세로 높이) 속성으로는 1. width, height 2. min-width, min-height 3. max-width, max-height 가 .. 2022. 12. 16.
HTML & CSS #14 : 반응형 웹 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법이 반응형 웹 디자인 이다. 화면 크기가 바뀔 때마다 반응하여 화면 요소들을 자동으로 바꾸어 구현하는 것을 의미한다. viewport 실제 내용이 표시되는 영역이다. 뷰포트를 지정하면 기기 화면, 혹은 크기가 조정된 화면에 맞추어 확대 혹은 축소해서 요소들을 표시해준다. html파일에서는 태그 안에 태그 안에 뷰포트를 지정해 줄 수 있다. 일반적인 사용법으로는 위 코드를 기억하면 된다. Grid System 화면을 여러 개의 column으로 나누어 배치하는 방법 주로 960픽셀 12 칼럼의 그리드 시스템을 사용한다. 1. 고정 그리드 : 화면 너비를 일정하게 고정하여 레이아웃을 만드는 방법 2. 가변 그리드 : 화면 너비를 백분율과 같은 가변 값으로 지정.. 2022. 12. 14.