Web/Styles
[CSS] css 선언 순서
css 선언 순서를 정해놓으면 팀프로젝트로 여러명이 작업을 할때 css가 통일성을 가져서 보기에도 좋고, 운영 유지에도 좋다. 나는 display, width, height, position, margin, padding, font, 꾸밈요소, overflow, z-index + position:relative (position: relative가 마지막인 이유는 타 position의 기준이 되기 때문에 마지막에 넣는 경우가 많아서) 순서로 작업을 했다. 작업을 하다보니 박스부터 디테일하게 들어가는게 좋을 것 같아서 그렇게 하기로 한건데, 다른 큰 회사들은 어떻게 쓰는 지 궁금해졌다. 보통은 큰 회사를 보고 따라가는 사람들이 많기 때문이다. 나도 타 사이트들을 보면서 은연중에 css 순서를 인식했을것이고..
[CSS] 모서리 자르기
HTML 모서리 한개 BUTTON BUTTON BUTTON BUTTON 모서리 두개 BUTTON BUTTON 모서리 여러개 BUTTON CSS body { background: #ddd; } .button { width: 150px; line-height: 40px; text-align: center; margin-bottom: 20px; } .top-left { background: linear-gradient(135deg, transparent 10px, #58a 0); } .top-right { background: linear-gradient(-135deg, transparent 10px, #58a 0); } .bottom-right { background: linear-gradient(-45de..
[CSS] 웹페이지 프린트 설정
프로젝트 진행중, 웹페이지의 어느 부분을 프린트해야했다. 나는 이제까지 웹에서 보여지는 뷰랑 프린트 되는 뷰랑 같다고 생각을 했는데, 그건 내 착각이었다. 프린트 전용 css가 있으며, page 여백을 조절할 수도 있었다. 중요한 건 내가 원하는 부분에서 떨어지고 사이즈가 조절되게 사용하는 것이었다. 하지만 프린트 설정 영역까지 내가 컨트롤 할 수는 없었다. 브라우저 고유 영역이기 때문이다. 이번 프로젝트를 정리하면서 알게된 웹페이지 프린트 설정 부분을 정리해본다. * display: block 처음에 뷰페이지랑 같은 css를 썼더니 프린트 시 다 깨져서 css를 걷어내고 다시 작업을 했다. display: flex로 단을 나누던걸 display:inline-block으로 변경 단은 나눠졌지만 page-..
[CSS] footer 하단에 고정 시키기
컨텐츠 양이 화면보다 길면 괜찮지만 짧을 때 푸터가 컨텐츠 바로 밑에 붙어서 모양이 안이쁠 때가 있다. 푸터는 말그대로 화면 하단에 붙어있어야 푸터 같기 때문이다(?) ㅋㅋㅋㅋㅋ 그럴때를 위해서 footer를 하단에 붙여보자.. display: flex 를 이용하기(ie11이상) https://jsfiddle.net/Kimara/wg8dtaLz/6/ 요점은 감싸는 박스에 display:flex; flex-direction:column; 을 주는 것과, 감싸는 박스의 높이값이 정해져 있어야 한다는 것이다. 그러면 그 전체적인 높이 안에서 footer에 margin-top:auto 를 줘서 위에 마진을 주는 것이다.
[CSS] display:flex 속성
요즘 들어 회사 프로젝트에서 크로스 브라우징을 IE11 이상으로 맞추는걸로 진행되고 있다. 너무 좋다^*^// display: flex 는 기존의 display: inline-block과 float:left의 장점을 섞은 아주 좋은 css다. 꾸준히 써보면서 내 것으로 만들어야지. { display : flex; (가로 정렬) justift-content : flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다.(처음과 끝이 맨 왼쪽, 오른쪽에 붙는다.) space-around: 요소들 주위에 동일한 간격을 둡니다. }..
[CSS] CSS Framework 종류
관리자 페이지나 사이트 제작을 위해 혹은 다양한 CSS/HTML 스타일을 공부하기 위해 다양한 CSS 프레임워크를 배워두면 좋다. 1. 부트스트랩 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, ..
[CSS3] display: flex 정리
감싸는 부모 요소인 container와 각각의 items가 필수이다. container와 items에 적용하는 속성이 구분되어 있다. container => display, flex-flow, flex-direction flex-wrap justify-content align-content align-items items => order flex flex-grow flex-shrink flex-basis align-self container display display : flex display: inline-flex flex-flow : 주축 여러줄묶음 flex-direction : items의 주 축(main-axis)을 설정 flex-direction : row (items를 수평축으로 표시) fl..
[CSS] 기기별 미디어쿼리
디바이스별 미디어 쿼리 정리속성으로 구분 /* 스마트폰 (가로/세로): */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* 스마트폰 (가로): */ @media only screen and (min-width : 321px) { /* Styles */ } /* 스마트폰 (세로): */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPad (가로/세로): */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {..
[CSS] background-attachment:fixed; parallax에 최적화
https://jsfiddle.net/Kimara/fh031Lcx/6/ background-attachment scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 이미지가 움직이지 않는다. parallax에 최적화! local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. background-attachment 배경 이미지의 스크롤 여부를 결정하는 CSS이다. parallax 효과를 낼 때 사용하면 좋다. 애증의 IE에서도 사용 가능! 하지만 IE에서 스크롤을 내리거나 키보드로 내리면 이미지가 덜거덕 거린다. 세..
[SVG] svg stroke animate
CSS 사용버전 ▼ https://jsfiddle.net/Kimara/v7snm2wf/ svg stroke - JSFiddle jsfiddle.net 플러그인 사용버전 ▼ https://jsfiddle.net/Kimara/90x5qb74/7/ Edit fiddle - JSFiddle jsfiddle.net SVG를 이용해서 stroke 애니메이션 효과를 주었다!! CSS로 구현 가능하지만 IE에서 작용이 안되는 단점이 있다.ㅠㅠ IE를 버리지 않는 이상 animate효과를 크롬에서만 볼 수 있다는 뜻인데.. 하지만 세상엔 천재들이 많고요? 구글을 뒤지니 역시 제이쿼리 플러그인이 있다! 내가 쓴건 jQuery DrawSVG 플러그인 인데, 이건 윈도우 스크롤을 할때 애니메이션이 발생하게 할수도 있고, 처음..