A story only I don't know

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 요소의 자손 요소 중 모든 F 요소 선택 1 E > F E 요소의 자식 요소 중 F 요소 선택 2 E + F 형제 요소 중 E 요소 바로 뒤에 있는 F 요소 한개 선택 2 E ~ F 형제 요소 중 E 요소 뒤에 있는 F 요소 모두 선택 3 속성 선택자 태그의 속성에 따른 선택자 입니다. 대괄호([]) 사이에 속성을 넣어서 선택합니다. 서식 설명 CSS레벨 E[attr] E 요소 중 'attr' 속성이 포함된 요소 선택 2 E[attr="val"] E 요소 중 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 선택 2 E[attr~="val"] E 요소 중 'attr' 속성의 값에 'val'이(공백으로 구분) 포함되는 요소 선택 2 E[attr^="val"] E 요소 중 'attr' 속성의 값이 'val...

웹디자인을 하다보면 input 이나 textarea 등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input 이나 textarea 에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline 은 border 와 흡사한 방식으로 css 로 핸들링을 할 수 있습니다. 그래서 그냥 focus 되는 영역의 outline 의 두께를 0 으로 만들면 됩니다. 주로 input 이나 textarea , button 요소에 생기기 때문에 해당 요소의 focus 를 0 으로 처리하면 됩니다. textarea:focus { outline: none; } button:focus { outline: none; } input:focus { outline: none; } 유의 사항 outline 요소는 border 요소와 흡사한데... border 의 경우 두께에 따라 넓이나 높이에 영향을 미치는 반면 outline 는 두께에 상관없이 넓이나 높이에 영향을 미치지 않습니다. 예를들어 전체 1280px 의 넓이 중.. sidebar 영역 의 넒이가 280px 본문영역 의 넓이가 1000px 테두리(border) 의 두께가 1px 이라면.. 전체 넓이 1280px 에 테두리 두께를 더해서 총 넓이는 1284px 가 됩니다. 하지만 outline 으로 테두리를 표시한다면 그냥 1280px 이 됩니다. outline 은 그냥 레이아웃 위에 레이어 로 위치한다고 보면 됩니다. 그렇다고 레이아웃 계산이 쉽다고 outline 을 border 대신 사용하지는 않습니다. outline 은 그냥 참고로 볼 때만 주로 사용되기 때문입...

웹디자인을 하다보면 input 이나 textarea 등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input 이나 textarea 에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline 은 border 와 흡사한 방식으로0 css 로 핸들링을 할 수 있습니다. 그래서 그냥 focus 되는 영역의 outline 의 두께를 0 으로 만들면 됩니다. 주로 input 이나 textarea , button 요소에 생기기 때문에 해당 요소의 focus 를 0 으로 처리하면 됩니다. textarea:focus { outline: none; } button:focus { outline: none; } input:focus { outline: none; } 유의 사항 outline 요소는 border 요소와 흡사한데... border 의 경우 두께에 따라 넓이나 높이에 영향을 미치는 반면 outline 는 두께에 상관없이 넓이나 높이에 영향을 미치지 않습니다. 예를들어 전체 1280px 의 넓이 중.. sidebar 영역 의 넒이가 280px 이고 본문영역 의 넓이가 1000px 이고 테두리(border) 의 두께가 1px 이라면.. 전체 넓이 1280px 에 테두리 두께를 더해서 총 넓이는 1284px 가 됩니다. 하지만 outline 으로 테두리를 표시한다면 그냥 1280px 이 됩니다. outline 은 그냥 레이아웃 위에 레이어 로 위치한다고 보면 됩니다. 그렇다고 레이아웃 계산이 쉽다고 outline 을 border 대신 사용하지는 않습니다. outline 은 그냥 참고로 볼 때만 주로 사용됩니다.

처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고... 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport 를 설정해 줘야 합니다. meta viewport 의 width 를 device-width 로 지정하고 initial-scale 을 1 로 설정을 해 줘야 합니다. width=device-width : 화면의 넓이를 디바이스(단말기)의 넓이로 지정 initial-scale=1 : 기본 사이즈를 1로 지정하겠다고 선언 <meta name="viewport" content="width=device-width, initial-scale=1"> 이렇게 설정하면 다양한 크기의 화면에서도 보기에 편한 텍스트 크기와 레이아웃을 유지해 줍니다. 미디어쿼리 지정 기본설정을 했으면 이번에 다양한 크기(해상도)의 디바이스에 따라 CSS 가 다르게 적용될 수 있게 미디어쿼리(Media Query)를 지정해야 합니다. Breakpoints는 부트스트랩(Bootstrap)을 참조하였으며 그에 해당하는 미디어쿼리는 아래와 같이 가로 해상도에 따라 5가지로 구분할 수 있습니다. 반응형 웹개발에 있어서 고려해야 할 점이 있는데 모바일 퍼스트 로 개발을 할 것이냐 하는 것입니다. 모바일 퍼스트 개발은 화면 구현 시 먼저 모바일 화면을 기준으로 디자인(CSS)을 하고 차츰 태블릿 화면, 데스트탑 화면으로 디자인을 구현하는 것을 말합니다. 반응형 웹개발 시 근래의 추세는 모바일 퍼스트 로 개발하는 추세이긴 합니다만 상황에 따라서 ...

이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '...'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함 text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함 white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능) 멀티라인 글자수 제한 멀티라인에 대해서 글자수를 제한하는 방법은 아래와 같습니다. <p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다.&nbsp; 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p> .txt_post { overflow: hidden; text-ove...