css 실무테크닉

Author 김문정

Last Update 2015.11.14

클리어보스 :: 아홉번째웹표준오리엔테이션

CSS 실무테크닉

Del 태그의 취소선과 폰트 색이 다르게

Path : PageDate 2015-11-14 3클리어보스아홉번째웹표준오리엔테이션

del {color:#f00;}del span {color:#333;}

Del 태그의취소선과 폰트색이 다르게

Markup

<del><span>텍스트</span></del>

CSS

Del 태그의 취소선과폰트색이 다르게

이미지 마우스 오버시 안쪽으로 border 생성


이미지마우스 오버시 안쪽으로 border 생성

a {display:inline-block;}a:hover {border:5px solid red; overflow:hidden;}a:hover img {margin:-5px;}

특징

- margin 수치 : border-width값만큼 상하좌우 여백(margin)을 당겨오는 원리이기때문에 margin 수치를 border-width 수치와동일한값으로 맞춰줄것

- overflow:hidden : margin으로 상하좌우당겨졌기 때문에이미지가 a링크 위로덮혀졌기때문에넘친 이미지를잘라낸다.

Markup

<a href="#"><img src="images/temp01.png" /></a>

CSS

이미지마우스 오버시안쪽으로 border 생성


이미지마우스 오버시 안쪽으로 border 생성

특징

- IE8 이상에서만사용가능

Markup

<a href="#"><img src="images/temp01.png" /></a>

CSS

이미지마우스 오버시안쪽으로 border 생성

a {display:inline-block; position:relative;}a:hover:after {content:""; width:106px; height:83px; border:5px solid red; position:absolute; left:0; top:0;}

둥근 투명 마스크


대체방법 :: border-radius

- CSS3 속성인 border-radius를 사용하면둥근투명 마스크를사용할수있다.

- 단 IE9 이상부터지원

둥근투명 마스크

특징

- 모든브라우저에서 사용가능한방법

- 다양한형태의 투명마스크사용가능

- 배경에패턴이 들어간경우이방법은사용할 수없다.

.profile {position:relative; width:182px; height:182px;}

.profile .mask {position:absolute; left:0; top:0; background:url("images/bg_mask01.png") 0 0 no-repeat; width:100%; height:100%;}

.profile img {width:100%; height:100%;}

Markup

<a href="#" class="profile"><img src="images/temp01.png" /><span class="mask"></span></a>

CSS

둥근투명 마스크

이미지 / 텍스트 형태의 레이아웃


<div class="wrap"><img src="images/temp03.png" /><p>메이플 최초 몬스터 직업, 슈퍼스타 핑크빈</p>

</div>

이미지 / 텍스트형태의 레이아웃

Markup

이미지 / 텍스트 형태의레이아웃


.wrap {width:320px; margin:0 auto; background-color:#eee; padding:10px; zoom:1;}

.wrap img {float:left; padding-right:10px;}

.wrap p {}

.wrap:after {content:""; display:block; clear:both;}

CSS

방법1. float 활용1

특징

- float를 해제해줘야 함

- 글이길어질경우 float의 특성상아래로흐른다.

이미지 / 텍스트 형태의레이아웃 > 방법1. float 활용1




.wrap img {float:left;}

.wrap p {float:right; width:190px;}


CSS

특징

- float를 해제해줘야 함

- 텍스트(p)에 고정너비값이필요하다.

- 글이길어질경우 텍스트(p)의너비값만큼 밑으로내려온다.



방법3. padding과 position 활용

.wrap {width:180px; min-height:100px; position:relative; background-color:#eee; padding:10px 10px 10px 140px;}

.wrap img {position:absolute; left:10px; top:10px;}

.wrap p {}

CSS

특징

- 이미지를포지션으로 띄우고이미지의 너비만큼부모에여백(padding-left)을 주는방법

- ie7에서 포지션버그가발생한다.

- min-height값 필수

이미지 / 텍스트 형태의레이아웃 > 방법3. padding과 position 활용



.wrap img {float:left;}

.wrap p {overflow:hidden;}



CSS


CSS 우선순위에 따른 계산방법


CSS 우선순위에따른 계산방법

선택자 예시 점수

전체 선택자 * 0

태그 선택자 ul 1

가상 선택자 :first-child 1

클래스 선택자 .wrap 10

속성 선택자 [type=checkbox] 10

아이디 선택자 #header 100

인라인 스타일 style=“” 1000

!important !important 최우선

점수표

CSS 우선순위에따른 계산방법 > 점수표


예시 점수 계산방법

* {} 0 전체(1) = 0

li {} 1 태그(1) = 1

li:first-line {} 2 태그(1) + 가상(1) = 2

ul li {} 2 태그(1) + 태그(1) = 2

ul ol+li {} 3 태그(1) + 태그(1) + 태그(1) = 3

h1 + *[rel=up] {} 11 태그(1) +

ul ol li.red {} 13 태그(1) + 태그(1) + 태그(1) + 클래스(10) = 13

li.red.level {} 21 태그(1) + 클래스(10) + 클래스(10) = 21

style=“” 1000 인라인(1000) = 1000

.sith {} 10 클래스(10) = 10

div p.sith {} 12 태그(1) + 태그(1) + 클래스(10) = 12

#sith 100 아이디(100) = 100

body #darkside .sth p {} 112 태그(1) + 아이디(100) + 클래스(10) + 태그(1) = 112

예시

CSS 우선순위에따른 계산방법 > 예시

CSS 호출방법에 따른 속도


<div style="width:200px;"></style>

<link href="default.css" type="text/css" rel="stylesheet" />

@import url('default.css');

CSS 호출방법

CSS 호출방법에따른 속도 > CSS 호출방법

외부스타일시트

인라인스타일시트

<style type="text/css">div {width:200px;}

</style>

내부스타일시트

- 태그에직접적용하는 방법

- html 문서내에적용하는 방법

- 외부에있는스타일시트를 불러오는 방법

http://www.w3schools.com/

http://www.w3.org/wiki/HTML

http://www.w3.org/wiki/CSS

http://caniuse.com/

http://www.w3schools.com/

http://www.w3.org/wiki/HTML

http://www.w3.org/wiki/CSS

http://caniuse.com/

THANK YOU

css 실무테크닉

Technology