IT이야기 2018. 5. 20.
CSS3의 선택자 정리
Front-end개발을 한다고 하면서 CSS3를 사용하는데.. 주로 사용하는 선택자들은 쉽게 사용하는데.. 많이 사용하지 않는 선택자에 대해서는 가끔씩 잊어버리거나 사용법을 잊어버리는 경우가 있습니다. 그래서 항상 참조할 수 있게 간단히 정리를 해 보려고 합니다. 선택자는 크게 기본 선택자, 속성 선택자, 상태 선택자로 나눌수 있습니다. 기본 선택자 CSS3를 다루기 위해서는 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS레벨 * 모든 요소 선택 2 E 태그명이 E인 요소 선택 1 #myIDname id 속성값이 "myIDname"인 모든 요소 선택 1 .myClassname class 속성값이 "myClassname"인 모든 요소 선택 1 E, F 모든 E 요소와 모든 F 요소 선택 1 E F E..
IT이야기 2018. 5. 19.
크롬에서 input, textarea, button에 생기는 파란색 테두리 없애는 방법
웹디자인을 하다보면 input이나 textarea등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input이나 textarea에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline은 border와 흡사한 방식으로 css로 핸들링을 할 수 있습니다. 그래서 그냥 focus되는 영역의 outline의 두께를 0으로 만들면 됩니다. 주로 input이나 textarea, button 요소에 생..
IT이야기 2018. 5. 19.
CSS에서 ellipsis('...')를 처리하는 방법
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '…'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. 통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다 .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는..
IT이야기 2018. 5. 19.
반응형웹에 대한 미디어쿼리의 사용
처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고… 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해 줘야 합니다. meta viewport의 width를 device-width로 지정하고 initial-scale을 1로 설정을 해 줘야 합니다. width=device-width : 화면의 넓이를 디바이스(단말기)..
IT이야기 2018. 5. 18.
CSS로 그럴듯한 버튼효과를 내보자
별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 코드설명 HTML HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다. BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 CSS .btn의 설정으로 기본형태를 정의합니다. 아래쪽에 있는 transition과 color속성이 중요하다 할 수 있습니다. .btn { display:block; width:200px; height:40px; line-height:40px; border:1px #3399dd solid;; ..
