목록web/css (27)
Rainbow
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bfAuC6/btqOn0dl2xH/gQ04xvnszOinDpoMKJxnXk/img.png)
텍스트 효과 text-shadow : 4px 4px 20px blue; (가로, 세로, 그림자 길이, 색상 ) 테두리와 배경 box-shadow : 4px 4px 20px red; ( 가로, 세로, 그림자 길이, 색상 ) 그라디언트 크롬 background: -webkit-linear-gradient(top, bottom, left, right,(진행방향)(deg각도) white, gray); 익스플로러 background: -ms-linear-gradient(top, blue, white); 파이어폭스 background: -moz-linear-gradient(top, blue, white); 오페라 background: -o-linear-gradient(top, blue, white); 텍스트에쓴 영..
가상 클래스(pseudo class) 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다. 예를 들어, 가 있다고 가정하겠습니다. 이 에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요? 가상 클래스가 없다면 이런 과정을 거치게 됩니다. 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다. p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다. p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다. 여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없습니다. 어쩔 수 없이 다른 언어를 사용해야 하는데, 이는 개발 비용이 들..
HTML: Hyper Text Markup Language HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다. 부모와 자식 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다. 자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다. 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 조상과 자손 조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다. 정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다. 조상 요소는 그 요소를 포함하는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dMKy6M/btqMwnhJwjy/WslDZSzP61iD0MAxKhlll1/img.png)
1. CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 먼저 CSS에서 스타일이 어떤 방식으로 정의되는지 알아봅시다. 1.1 Rule Set Rule Set(Rule)은 HTML페이지 안의 특정 요소들을 어떻게 렌더링(Rendering) 할 것인지 브라우저에게 알려주는 CSS 문장입니다. 스타일 규칙이라고도 불리는 이 문장은 스타일에 관한 규칙들을 집합처럼 나타냅니다. [그림 1] Rule Set 이런 문장들을 한군데에 모으면 스타일 시트(Style Sheet)를 이루게 되어, 많은 수의 스타일 규칙들을 관리하기 쉬워집니다. 1.2 선택자(Selector) 위쪽 [그림 1]을 다시 보시면, Rule Set..
SS의 자주 사용되는 속성 속성:값형태로 사용되며 여러 속성을 줄 때는 세미콜론(;)으로 구분한다. 구글크롬의 개발자모드(f12)를 사용하면 쉽다. width , height width(가로길이), height(세로길이)를 의미한다. inline 요소에서는 적용되지 않는다. 값의 단위 auto -> 기본값, 브라우저가 계산한 너비 px -> 픽셀 % -> 부모 요소에 상대적인 너비 initial -> 기본값으로 초기화 inherit -> 부모 요소로부터 상속 받은 값 margin, padding margin은 바깥쪽 여백, padding은 안쪽 여백을 의미한다. 두 속성 모두 방향을 지정할 수 있다. width,height 속성과 마찬가지로 px, auto 등 값을 사용한다. ex ) margin:10p..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kBcfV/btqNmdznbT7/gyKvsWJ8a7WdkWK8cOZoKk/img.png)
[html5 &CSS] css 포지셔닝 box.. : 네이버블로그 (naver.com) [html5 &CSS] css 포지셔닝 boxsizing: content-box/ border-box #052 안녕하세요. 스마트대막리지 월터입니다. [html5 &CSS] css 포지셔닝 boxsizing: content-box/ bord... blog.naver.com 가. css 포지셔닝 boxsizing: content-box/ border-box (1) content-box -width 속성 값을 콘텐츠 영역 너비값으로 사용하는 것 기본 값- default 값임. (2) border-box width 속성값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용 #box1 {..