오늘도공대생

CSS3에서는 :nth-child(n) 선택자를 사용하여 여러 개의 항목이 일렬로 나열되어 있는 경우, class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용할 수 있습니다.Markup 첫번째 글 두번째 글 세번째 글 네번째 글 다섯번째 글 여섯번째 글 일곱번째 글 여덟번째 글 1. 원하는 자식을 숫자로 선택할 수 있습니다. · 다섯번째 글 선택하기– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자‘를 써줍니다..list li:nth-child(5) { background-color: #ffff00; } Welcome to Html5Around on html5around.com · 3의 배수로 선택하기– 선택하고자..

[HTML/CSS] CSS만 사용해서 텍스트 드래그 방지하는 방법드래그 방지의 필요성? 많은 분께서 드래그 방지 하면 불펌방지를 떠올리실 거라 생각합니다. 하지만, 사실상 불펌방지는 드래그 방지만으로 막을 수 있는 것이 아닐 뿐더러, 애초에 불펌방지라는 말 자체가 이상하기도 합니다. 누구나 볼 수 있으며 정보 공유를 목적으로 하는 블로그에서 불펌방지라니... 아무튼, 제가 이 글을 쓰는 목적은 쓸데없는 드래그로 의도한 디자인이 망쳐지는 경우를 방지하기 위함입니다. 예를 들어, 사이드메뉴를 예쁘게 만들어 색상 조합도 완벽하게 디자인해놨는데 메뉴를 클릭하다 실수로 드래그라도 하면 영 보기 좋지 않은 색상으로 드래그된 채 색상 조합이 다 망쳐지게 되죠. 바로 이럴 때 드래그 방지를 하면 됩니다. 드래그 방지 ..

placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.다음은 꾸미기 전의 input과 textarea입니다.12345678910111213141516171819202122232425262728 ::placeholder 선택자로 글자 색과 모양을 바꿔보겠습니다.12345678input::placeholder { color: red; font-style: italic..

blur효과를 배경이미지에만 적용하는 방법입니다.-webkit-filter: blur(6px)를 적용하면 Element내부요소까지 죄다 흐려지는 바람에 배경에만 적용할 수 있는 방법을 찾다가이번에도 codepen의 도움을 받았습니다.(IE에서는 제가 어딘가 잘못한건지 적용이 안되고, 크롬에서는 정상작동합니다.) 현재 화면크기가 태블릿크기 이상일 때 보이는 상단바 배경에 적용되어 있습니다. 원래는 이런 선명한 이미지입니다. Fastboot 1.6.1에서 바로 적용하려면조건style로 Background를 준 개체 또는 그 하위개체여야합니다.해당 개체의 z-index가 1이상이어야합니다. 적용 방법1. 적용할 Element에 bgBlur class를 추가해줍니다.이때 흐림효과를 적용할 Element는 반드시..

input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다.:focus 선택자를 이용해서 없앨 수 있습니다.123input:focus { outline: none;}iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다.이를 없애는 방법은 다음과 같이 스타일링하는 것입니다.1234input { -webkit-appearance: none; border-radius: 0px;​} 가변폭 검색 폼 만들기웹브라우저 가로폭이 변할 때 같이 크기가 변하는 가변폭 검색 폼 예제입니다.12345678910111213141516171819202122232425262728293031323334353637383940 CSS 초기..

박스 주위에 그림자 적용시에 box-shadow 속성을 사용합니다. 입체적으로 보이는 모양이 보기에도 좋아보입니다.box-shadow 속성아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다..shadow { -moz-box-shadow: 3px 3px 3px 3px #999; -webkit-box-shadow: 3px 3px 3px 3px #999; box-shadow: 3px 3px 3px 3px #999; }첫 번째 값수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.두 번째 값수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.세 번..

웹 제작 시 메뉴부분을 이미지가 아닌 텍스트로 처리하거나 일부 텍스트를 이미지처럼 두어 마우스 드래그를 막을 필요가 종종 있습니다. 이런 경우 유용하게 쓰이는 CSS로서, 보통 따로 class를 선언해두고 필요 시 해당 태그에 class를 달아주는 방법을 주로 사용하죠. 바로 아래 경우처럼요. 드래그를 할 수 없습니다. 드래그를 할 수 있습니다. 아래는 결과 텍스트입니다.no-drag class / onselectstart 를 사용한 결과와 아무것도 사용하지 않은 결과입니다. ------------------------------>>드래그를 할 수 없습니다. [no-drag 사용]>>드래그를 할 수 없습니다. [onselectstart 사용] >>드래그를 할 수 있습니다.------------------..

코딩을 하다보면 width의 크기가 초과되는 경우들이 종종 발생하곤 한다. 이는 전체 크기에서 border의 크기는 제외되기 때문인데 이를 포함시키면 간단히 해결된다. display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;

Cool CSS 3D effect that you should not miss! Light up your ideas for web design with 10 handpicked 3D CSS examples. Source code is available at: https://redstapler.co/10-stunning-css... Follow us on Facebook: https://www.facebook.com/theRedStapler Website: http://redstapler.co/ Twitter: https://twitter.com/redStapler_twit