Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

CSS 실무테크닉

11.323 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

×