CSS에서 투명도를 설정하는 방법은 두가지가 있다. 1. opacity 속성 div{ background-color : rgb(255,255,255); opacity : 0.5; } 2. rgba 속성 div{ background-color : rgb(255,255,255,0.5); } div 태그의 투명도를 0.5로 설정하였다. 0 ~ 1의 값으로 설정할 수 있다. 0에 가까울수록 투명해진다. opacity는 div 태그와 하위 요소까지 적용되고, rgba는 div 태그에만 적용된다.
반응형 웹은 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에 따라서 화면 크기가 자동으로 변하게 해준다. 뷰 포트(View Port)는 작은 화면의 스마트폰에서 PC의 웹 페이지 표시할 때 전체적인 페이지의 배율을 조정해준다. 반응형 웹에서 페이지의 배율이 아닌 CSS 스타일을 변경하고 싶다면 - 미디어 쿼리 (Media Query) 태그 사이에 아래의태그를 추가한다. 뷰 포트 설정 width=device-width : 페이지의 가로 길이를 기기의 스크린 가로 길이로 설정한다. height=device-height : 페이지의 세로 길이를 기기의 스크린 세로 길이로 설정한다. initial-scale : 페이지 로드 시 줌 레벨을 조정한다. minimum-scale : 줄일..
[CSS] 반응형 웹 미디어 쿼리 (Media Query)
반응형 웹은 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에 따라서 화면 크기가 자동으로 변하게 해준다. 미디어 쿼리(Media Query)는 접속하는 장치에 따라서 CSS 스타일을 변경한다. PC로 접속하면 PC화면에 맞게, 스마트폰으로 접속하면 스마트폰 화면에 맞게 레이아웃을 변경한다. 웹 페이지 CSS를 모바일 화면 CSS로 변경해보자. 반응형 웹에서 CSS 스타일이 아닌 페이지 배율을 변경하고 싶다면 - 뷰 포트 (View Port) 미디어 쿼리 (Media Query) 1. CSS 파일 안에서 적용할 때 .title { // .title에 font-size를 100px로 적용 font-size: 100px; } @media (max-width: 600px) { //..