잡(job)기술/HTML5&CSS36 아이템을 컨테이너의 중앙에 배치하기 카메라의 PTZ 기능을 웹페이지를 통해 제어할 수 있는 기능을 구현하면서, CSS에 대해서 조금씩 공부해가고 있다. 개발하다 보니 많이 사용해야 할 기법인 것 같아서 정리해놓을 필요가 있을 것 같다. CSS에 position이라는 속성이 있다. 자세한 설명은 다음 링크를 참조하면 된다. https://developer.mozilla.org/ko/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.m.. 2022. 8. 12. 유동형 웹사이트 반응형 웹사이트는 하나의 HTML 파일과 각 장치에 따른 여러개의 CSS 를 이용해서 대응하는 방법을 말한다. 유동형 웹사이트는 CSS 마저도 하나를 이용해서 구축을 하는데, 이렇게 할 수 있는 핵심 내용은 상대적인 크기를 이용하는 즉, % 를 이용한 크기 설정을 이용한다는 것이다.그러나, %로 지정하게 되면 세부적인 크기들은 지정할 수가 없기 때문에 간단한 레이아웃에서만 사용하게 되는 방식이다.width 값을 %을 이용하게 되면 부모의 크기로부터 비율을 얼마로 지정하는가의 의미가 된다. img 요소에 max-width: 100% 을 지정하게 되면 그림 크기가 원래 크기만큼 도달한 후에는 더 이상 커지지 않고, 작아질 경우는 계속 작아진다.max-width: 100%, min-width: 100% 을 함.. 2016. 9. 30. 반응형 웹사이트 웹문서는 하나이고 CSS 를 여러 개를 사용해서 핸드폰, 태블릿, PC 상에서 모두 가독성이 좋도록 구성해주는 방식을 말한다. 뭐 내용을 거창한 것 같으나, 지정하는 방법은 간단하다.@media screen and (max-width:767px) {/* 핸드폰 용 CSS */}@media screen and (max-width:959px) and (min-width:768px) {/* 태블릿 용 CSS */}@media screen and (min-width:960px) {/* PC 용 CSS */} 배치의 문제가 더 어려운 작업일 듯 하다. PC 화면 상에서는 주로 메뉴가 상단에 구성이 되어 있는 반면, 태블릿은 좌측에 보이고, 나타났다가 사라졌다가 하는 기능도 들어가는 경우도 많다. 핸드폰 용은 메뉴.. 2016. 9. 29. 뷰포트 설정하기 PC 환경과 모바일 환경에서 디바이스의 해상도가 다르기 때문에 표시하는 내용이 특히 모바일 환경에서 거북하게 보이는 경우가 많다. 이를 개선해 주기 위해서 뷰포트 설정을 이용하면 된다.뷰포트 설정은 를 이용한다. 기본 구조는 다음과 같다.content 안에 들어갈 내용은 다음과 같은데, 어떻게 적용되는지는 값을 바꿔가면서, 실제 핸드폰에 어떻게 보이는지를 경험해보는 것이 좋을 것 같다.width=device-widthinitial-scale=1.0user-scalable=nominimum-scale=1.0maximum-scale=2.0 2016. 9. 28. 이전 1 2 다음