Helloworld!/CSS 검색 결과

해당 글 31건

[CSS] 자손 선택자, 후손 선택자

선택자 종류중 자손과 후손 선택자가 있다. 자손 선택자의 선택자 형태는 "선택자A > 선택자 B" 처럼 쓰며, 선택자 A의 자손에 위치하는 선택자 B를 선택한다. 후손 선택자의 선택자 형태는 "선택자A 선택자 B" 처럼 쓰며, 선택자 A의 후손에 위치하는 선택자 B를 선택한다. 예를들어 다음과 같이 html 이 작성되 있을 경우 TITLE list 1 list 2 list 3 이때 div 의 자손 선택자는 h1, ul 이며 후손 선택자는 li 들을 말한다. 따라서 h1을 선택할때 .container > h1 { 스타일 } 라고 쓰며 li를 선택할 때는 .container li { 스타일 } 라고 쓰면 선택할수 있다.
Helloworld!/CSS 2015. 7. 9. 16:45

[CSS] 문자열 속성 선택자

1. 선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그를 선택 2. 선택자[속성&=값] : 속성 안의 값이 특정 값으로 끝나는 태그를 선택 3. 선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그 선택 1 선택자에 대한 예는 다음과 같다. 예를 들어 다음과 같이 박스가 1 ~ 5개가 있다. box 1 box 2 box 3 box 4 box 5 이때, 다음과 같이 했을 경우 div[class^=box] { background-color: red } div 중 class 명이 box로 시작하는 div에 백그라운드 색상을 빨강으로 하라는 것이므로, class 가 box_1, box_2, box_3 인 box1, 2, 3만 배경이 빨간색으로 바뀐다. 다음 2 선택자에 대한 예가 다음..
Helloworld!/CSS 2015. 7. 9. 15:55

[CSS] before, after, content

- content 속성은 속성에서 지정한 문자열 또는 이미지를 넣을때 사용 - before 은 요소 내용 앞에 적용 - after 는 요소 내용 뒤에 적용 할 때 사용한다. 예를 들어서, #div 요소 내용 앞에 따옴표를 추가 div:before { content: '“'; } #div 요소 내용 뒤에 따옴표를 추가 div:after { content: '“'; } 만약 이미지를 추가하고 싶다면 다음처럼 사용하면 된다 div:before { content: url( "path/test.png" ); }
Helloworld!/CSS 2015. 6. 30. 11:15

[CSS] box-sizing

#CSS .box-ex1 { width: 500px; margin: 20px auto; } .box-ex2 { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; } #HTML 박스 1 박스 2 box-ex1 보다 box-ex2 가 같은 사이즈의 width 이면서도 사이즈가 훨씬 더 크다. 이유는 padding과 border-width 때문. 이처럼 일정하지 않은 너비값 조절 해법이 만족스럽지 않았던 사람들은 box-sizing 이라는 새로운 CSS 프로퍼티를 만들었다고 한다. 즉, box-sizing를 지정하면 패딩과 테두리가 더는 너비를 늘리지 않도록 할 때 사용된다. 쓰는 방법은 다음과 같다 -webkit-box-sizing: b..
Helloworld!/CSS 2015. 6. 30. 10:39

[CSS] ie에서 background opacity(투명도) 넣는 방법

background:rgb(120, 20, 0); background: transparent\9; background:rgba(120, 20, 0,0.6); //rgb는색상, 0.6이 opacity값임(1에 가까울수록 불투명해지며 0에 가까울수록 투명해진다) filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6c800000,endColorstr=#6c800000); zoom: 1; filter에 startColorstr=#6c800000,endColorstr=#6c800000를 살펴보면시작 그라데이션 색상과끝 그라데이션 색상을 입력받음 6c 가 opacity 값으로써 숫자가 높을수록 불투명해진다 (반대로 당연히 숫자가 작을수록 투명도가 높..
Helloworld!/CSS 2015. 4. 29. 12:04

[CSS] !important 활용

important 사용법 : { 속성 : 속성값 !important; }중요하다는 표시로 어떤 경우에나 이것이 우선 적용 되도록 하고 싶을 때 사용한다. 예를들어서 CSS를 다음과 같이 했을 경우 * { color: #000 !important } .white { color: #fff } Helloworld CSS는 절차지향(순차지향)적인 언어이기때문에 모든 텍스트의 색상을 검정으로 적용하기를 제일 상단에 해놨지만, 제일 하단에 white란 클래스 일경우에는 텍스트 색상을 하얀색으로 적용하라고 제시해놨기 때문에 Helloworld는 하얀색으로 나와야함. 하지만 important를 사용하므로써 (어떤 경우에도 우선 적용되기때문에) Helloworld는 검정색으로 나올것이다.
Helloworld!/CSS 2015. 3. 4. 15:13