Front/CSS13 [CSS] :before :after 삭제(가상 요소 반응형 웹에서만 삭제하기) 데스크탑 모드에서 이렇게 선언한 요소가 있다고 가정했을 때 .title:before { content: ""; position: absolute; width: 28px; height: 28px; } 반응형으로 적용되는 쪽에서는 content: none; 만 붙여주면 손쉽게 제거가 가능하다. @media (max-height: 500px) and (orientation: landscape), screen and (max-width: 768px) and (orientation: portrait) { .title:before { content: none; } } 2021. 7. 27. [CSS3] 반응형 웹(Responsive Web) 기초 반응형 웹(Responsive Web) - 정의 : 하나의 웹 사이트에서 pc, 태블릿pc, 스마트폰 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 - 웹사이트를 pc용과 태블릿pc, 모바일 용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다는 장점이 있음. - 웹페이지의 내용을 수정할 경우, 하나의 웹 페이지만 수정하면 pc와 태블릿 px 모바일등 다양한 디바이스에서 동일하게 반영되는 장점이 있음. - 반응형 웹의 핵심 기술은 가변 그리드, 유연한 이미지, 그리고 미디어 쿼리가 중요한 핵심 개념임. - 가장 많이 사용되고 있는 반응형 웹 제작 도구는 부트스트랩 프레임워크가 있음. * 고정 그리드 레이아웃은 .. 2021. 4. 29. [CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover) 형식) tag(혹은 id 혹은 class):hover { 디자인 내용 }; 2021. 4. 22. [CSS3] 그림자(shadow) 속성 box-shadow : 그림자를 만드는 속성 형식) box-shadow: * 수평거리 : 그림자의 수평거리(얼마나 떨어져 있는지). 양수값은 오른쪽, 음수값은 왼쪽에 그림자를 만듬. * 수직거리 : 그림자의 수직거리(얼마나 떨어져 있는지). 양수값은 아랫쪽, 음수값은 위쪽에 그림자를 만듬. * 흐림정도 : 그림자의 흐림 정도를 표현함. 기본 값은 해가 진 그림자를 표시. 값이 커질 수록 부드러운 그림자. 음수 사용 불가 * 번짐정도 : 그림자가 번지는 정도를 나타냄. 양수 값은 그림자가 모든 방향으로 퍼짐. 음수 값은 그림자가 모든 방향으로 축소됨. 2021. 4. 22. [CSS3] border선, 사각형 둥글게 만들기 border-radius: 0 20px 0 20px /*모서리가 둥근 사각형*/ 오백년 도읍지를 필마로 돌아드니 산천은 의구한데, 인걸은 간데 없네 어즈버 태평년월이 꿈이런가 하노라 2021. 4. 22. [CSS3] float 속성 float 속성 - 웹 문서의 요소를 떠 있게 하는 방법. - 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성. - 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미. - 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성. - float 속성의 종류 * right : 오른쪽부터 차례로 왼쪽 방향으로 떠 있게 하는 속성. * left : 왼쪽부터 차례로 오른쪽 방향으로 떠 있게 하는 속성. * both : 양쪽에서 어느 쪽으로도 떠 있지 않게 하는 속성 - 해제하는 속성. - float 속성을 사용한 후에는 반드시 해제(clear=both)해 주어야 함. 회사소개 대표인사말 조직도 비 전 오시는 길 사업영역 포탈사이트 시스템 통합 마케팅 웹디자인 고객센터 다운로드 질의/응답 자유게시판 1:1게시판 서울시 .. 2021. 4. 22. 이전 1 2 3 다음
