오늘도공대생

http://uirepublic.net/free-website-templates/free-clothing-fashion-website

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..

안녕하세요 RWDB 입니다~ 😀이번에 공유해드릴 소스는 디자인의 분위기를 잡을 때 효율적인 작업을 도와줄질감배경들의 무료 다운로드를 제공해주는 URL 입니다!!빈티지한 종이에서부터 거칠거나 옛스러운 나무재질, 트렌디한 수채화 및 페인트의텍스쳐까지 다양한 질감배경을 다루고 있습니다~ 지금부터 몇가지 프리 텍스쳐제공 URL 을 소개해드리겠습니다!! 12 Presentation Background Curved Wood배경을 입체적으로 커브시켜 나무 질감으로 매료시키는 고화질 12매를 수록하고 있습니다~프리젠 테이션 및 제품 배경 디자인으로 유용하겠네요 10 Grunge Stained Paper Textures빈티지 풍의 디자인을 구성할 수 있는 종이 질감 소재 10장이 수록되어 있습니다!5 Distressed..

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; }첫 번째 값수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.두 번째 값수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.세 번..