CSS

it/programming

CSS 스타일태그 들의 우선순위

연산자에서의 곱연산(×), 합연산(+), 차연산(-), 분연산(÷) 의 곱ㆍ분연산 우선조건 이나논리연산자의 && || !! 처럼 CSS에도 우선순위가 있다. 그럼 우선 CSS의 적용 우선 순위를 알아보자 . 0. !importantex) red { color : red !important; } 1. Style : style="color:red;"ex) 2. ID : #type { color: red; }ex) #red { color:red; } 3. class : .contents { color:red; }ex) .red { color:red; } 4. 조건 : P B { color:red; }ex) red .color { color:red; } 5. 타입 : B { color:red; }ex) red ..

it/programming

CSS의 position 속성이란?

w3school의 position 예제파일 CSS의 position 속성이란, div나 각종 요소들의 포지션, 즉 위치를 지정하는 속성이다.총 다섯가지의 속성을 가지고 있는데 해당요소를 A, 감싸고있는 테두리를 B로 볼때 static / 기본 position, 위치설정이 적용되지 않는다.absolute / 전체 페이지를 기준으로 A의 위치가 지정된다.fixed / 전체 페이지를 기준으로 지정되며, 스크롤이 내려가도 그 위치에 고정된다.relative / B를 기준으로 A의 위치가 지정된다.inherit / 부모창을 기준으로 A의 위치가 지정된다. 으로 이루어져 있다.여기서 inherit 는 좀 특이한 경우로, 팝업창에 적용되는 position이다.부모요소의 position을 그대로 상속받아 자식창에 적용..

it/programming

이미지 크기 해상도에 맞추기

CSS img{ max-width:90%;height:auto; } max-width 수치를 화면에 적당히 맞춰주시면 됩니다.% 는 원래 이미지 크기에 비례합니다.

it/programming

이미지없이 css로 둥근 테두리 (모서리) 구현하기

출처 ▷ http://www.html.it/articoli/nifty/index.html 서핑 중 되게 쓸만한걸 찾았네요, 그리고 바로 적용했습니다 ! CSS .rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} .r3{margin: 0 2px} .r4{margin: 0 1px; height: 2px} HTML 원작자는 둥근 모서리를 위해 태그를 활용하였다고합니다. 인라인요소이고, 보다 짧기 때문이죠.이 태그는 float요소에도 활용이 가능하며, 크기도 조절가능합니다. 예제 - http://hsol.tistory.com

it/programming

이제부터 웹프밍 언어에 대한건 여따 올릴게여

티스토리하다보니깐알아낸 태그, 발견해낸 정보등을 어따 메모해둬야나중에 쓸수 있겠음 ㅇㅇ 태그정보도 올림

it/information

html 과 css를 연동하여 버튼에 이펙트 주기 ( css이벤트 )

블로그를 만지작거리다가 독학한 지식이기 때문에 정확하지 않을수도 있습니다. 하지만 제 블로그엔 제대로 적용됬습니다^^ 이번에 만든 블로그 배너에 마우스를 올리면 볼록 볼록 솟아오르는데요 , 신기하죠 ㅎㅎ 이게 알고보니 되게 간단한거였어요. 알다싶이 티스토리 블로그에는 skin.html 과 sytle.css가 있습니다. html은 레이아웃 , 이벤트 , 전체 골격 등을 구성한다면 css는 디자인, 레이아웃, 살덩어리 를 구성한다고 생각하면 쉽습니다. 여담이였고 일단 html 의 개념을 알아야합니다. 일종의 테두리인데, 를 쓴 예로써 이런게 있죠. 이 기능을 활용하면 쉬운 분류가 가능할 뿐만아니라 각각의 기능을 나눌수도 있더군요. 그럼 먼저, 자신이 사용할 의 id, 그리고 안의 문자를 ..

반응형
훈솔
'CSS' 태그의 글 목록