CSS 실무테크닉

10.634 Aufrufe

Veröffentlicht am

클리어보스에서 진행한 9번째 웹표준 오리엔테이션 발표자료입니다.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

CSS 실무테크닉

  1. 1. Author 김문정 Last Update 2015.11.14 클리어보스::아홉번째웹표준오리엔테이션 CSS 실무 테크닉
  2. 2. Del 태그의 취소선과 폰트 색이 다르게
  3. 3. Path : PageDate 2015-11-14 3클리어보스 아홉번째 웹표준 오리엔테이션 del {color:#f00;} del span {color:#333;} Del 태그의 취소선과 폰트 색이 다르게 Markup <del><span>텍스트</span></del> CSS Del 태그의 취소선과 폰트 색이 다르게
  4. 4. 이미지 마우스 오버시 안쪽으로 border 생성
  5. 5. Path : PageDate 2015-11-14 5클리어보스 아홉번째 웹표준 오리엔테이션 이미지 마우스 오버시 안쪽으로 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 생성
  6. 6. Path : PageDate 2015-11-14 6클리어보스 아홉번째 웹표준 오리엔테이션 이미지 마우스 오버시 안쪽으로 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;}
  7. 7. 둥근 투명 마스크
  8. 8. Path : PageDate 2015-11-14 8클리어보스 아홉번째 웹표준 오리엔테이션 대체방법 :: 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 둥근 투명 마스크
  9. 9. 이미지 / 텍스트 형태의 레이아웃
  10. 10. Path : PageDate 2015-11-14 10클리어보스 아홉번째 웹표준 오리엔테이션 <div class="wrap"> <img src="images/temp03.png" /> <p>메이플 최초 몬스터 직업, 슈퍼스타 핑크빈</p> </div> 이미지 / 텍스트 형태의 레이아웃 Markup 이미지 / 텍스트 형태의 레이아웃
  11. 11. Path : PageDate 2015-11-14 11클리어보스 아홉번째 웹표준 오리엔테이션 .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
  12. 12. Path : PageDate 2015-11-14 12클리어보스 아홉번째 웹표준 오리엔테이션 방법2. float 활용2 .wrap {width:320px; margin:0 auto; background-color:#eee; padding:10px; zoom:1;} .wrap img {float:left;} .wrap p {float:right; width:190px;} .wrap:after {content:""; display:block; clear:both;} CSS 특징 - float를 해제해줘야 함 - 텍스트(p)에 고정 너비값이 필요하다. - 글이 길어질 경우 텍스트(p)의 너비값만큼 밑으로 내려온다. 이미지 / 텍스트 형태의 레이아웃 > 방법2. float 활용2
  13. 13. Path : PageDate 2015-11-14 13클리어보스 아홉번째 웹표준 오리엔테이션 방법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 활용
  14. 14. Path : PageDate 2015-11-14 14클리어보스 아홉번째 웹표준 오리엔테이션 .wrap {width:320px; margin:0 auto; background-color:#eee; padding:10px; zoom:1;} .wrap img {float:left;} .wrap p {overflow:hidden;} .wrap:after {content:""; display:block; clear:both;} 방법4. float 활용3 CSS 이미지 / 텍스트 형태의 레이아웃 > 방법4. float 활용3
  15. 15. CSS 우선순위에 따른 계산방법
  16. 16. Path : PageDate 2015-11-14 16클리어보스 아홉번째 웹표준 오리엔테이션 CSS 우선순위에 따른 계산방법 선택자 예시 점수 전체 선택자 * 0 태그 선택자 ul 1 가상 선택자 :first-child 1 클래스 선택자 .wrap 10 속성 선택자 [type=checkbox] 10 아이디 선택자 #header 100 인라인 스타일 style=“” 1000 !important !important 최우선 점수표 CSS 우선순위에 따른 계산방법 > 점수표
  17. 17. Path : PageDate 2015-11-14 17클리어보스 아홉번째 웹표준 오리엔테이션 예시 점수 계산방법 * {} 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 우선순위에 따른 계산방법 > 예시
  18. 18. CSS 호출방법에 따른 속도
  19. 19. Path : PageDate 2015-11-14 19클리어보스 아홉번째 웹표준 오리엔테이션 <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 문서 내에 적용하는 방법 - 외부에 있는 스타일시트를 불러오는 방법
  20. 20. Path : PageDate 2015-11-14 20클리어보스 아홉번째 웹표준 오리엔테이션 <link rel='stylesheet' type='text/css' href=‘no-import.css'> <link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='b.css'> <link>와 @import 선언방법에 따른 속도 CSS 호출방법에 따른 속도 > <link>와 @import @import <link rel='stylesheet' type='text/css' href='import.css‘> in import.css @import url('a.css'); @import url('b.css'); <link> @import와 <link> 속도 - 우선 link된 파일을 받고, 그 다음 안에 @import된 스타일 시트를 받는다. - <link>의 경우, 파일을 병렬로 같이 받습니다.
  21. 21. http://www.w3schools.com/ http://www.w3.org/wiki/HTML http://www.w3.org/wiki/CSS http://caniuse.com/
  22. 22. THANK YOU

×