├── .DS_Store ├── .gitattributes ├── README.md ├── chapter02 ├── .DS_Store ├── 2-5-button-multi.html ├── 2-5-button-single.html ├── 2-5-mod-1.html ├── 2-5-mod-2.html ├── 2-5-mod-3.html ├── 2-5-mod-4.html ├── 2-5-mod-5.html ├── 2-5-mod-6.html ├── 2-5-mod-7.html ├── 2-5-mod-8.html ├── 2-5.html ├── assets │ ├── .DS_Store │ └── img │ │ ├── .DS_Store │ │ └── elements │ │ ├── .DS_Store │ │ └── persona.jpg └── css │ ├── 2-5-button-multi.css │ ├── 2-5-button-single.css │ ├── 2-5-mod-1.css │ ├── 2-5-mod-2.css │ ├── 2-5-mod-3.css │ ├── 2-5-mod-4.css │ ├── 2-5-mod-5.css │ ├── 2-5-mod-6.css │ ├── 2-5-mod-7.css │ ├── 2-5-mod-8.css │ ├── 2-5.css │ └── style.css ├── chapter03 ├── .DS_Store ├── 3-2-button-2.html ├── 3-2-button-3.html ├── 3-2-button.html ├── 3-3-module-rule-4-ex.html ├── 3-3-module-rule-4.html ├── 3-3-state-form-1.html ├── 3-3-state-navi-1.html ├── 3-3-state-navi-2.html ├── 3-3-state-navi-3.html ├── 3-5-card-modules-2.html ├── 3-5-card-modules.html ├── assets │ ├── .DS_Store │ └── img │ │ ├── .DS_Store │ │ └── elements │ │ ├── .DS_Store │ │ ├── analysis.jpg │ │ ├── code.jpg │ │ └── marketing.jpg └── css │ ├── .DS_Store │ ├── 3-2-button-2.css │ ├── 3-2-button-3.css │ ├── 3-2-button-main-3.css │ ├── 3-2-button.css │ ├── 3-3-base-rule.css │ ├── 3-3-layout-rule-2.css │ ├── 3-3-layout-rule-3.css │ ├── 3-3-layout-rule-4.css │ ├── 3-3-layout-rule.css │ ├── 3-3-module-rule-4-ex.css │ ├── 3-3-module-rule-4.css │ ├── 3-3-state-form-1.css │ ├── 3-3-state-navi-1.css │ ├── 3-3-state-navi-2.css │ ├── 3-3-state-navi-3.css │ ├── 3-5-card-modules-2.css │ ├── 3-5-card-modules.css │ └── style.css ├── chapter04 ├── .DS_Store ├── 4-3-header-2-precss.html ├── 4-3-header-bem.html ├── 4-3-header-precss.html ├── 4-4-footer-bem.html ├── 4-4-footer-precss.html ├── 4-5-content-1-col-bem.html ├── 4-5-content-1-col-precss.html ├── 4-5-content-2-col-bem.html ├── 4-5-content-2-col-precss.html ├── assets │ ├── .DS_Store │ └── img │ │ ├── .DS_Store │ │ ├── elements │ │ └── persona.jpg │ │ └── logo.svg └── css │ ├── .DS_Store │ ├── 4-3-header-2-precss.css │ ├── 4-3-header-bem.css │ ├── 4-3-header-precss.css │ ├── 4-4-footer-bem.css │ ├── 4-4-footer-precss.css │ ├── 4-5-content-1-col-bem.css │ ├── 4-5-content-1-col-precss.css │ ├── 4-5-content-2-col-bem.css │ ├── 4-5-content-2-col-precss.css │ ├── style-wipe.css │ └── style.css ├── chapter05 ├── .DS_Store ├── 5-3-button-arrow-bem.html ├── 5-3-button-arrow-precss-ex.html ├── 5-3-button-arrow-precss.html ├── 5-3-button-bem.html ├── 5-3-button-color-bem.html ├── 5-3-button-color-precss.html ├── 5-3-button-large-bem.html ├── 5-3-button-large-precss.html ├── 5-3-button-precss-ex.html ├── 5-3-button-precss.html ├── 5-3-button-round-bem.html ├── 5-3-button-round-precss.html ├── 5-4-button-icon-expand-bem.html ├── 5-4-button-icon-expand-precss.html ├── 5-4-button-icon-small-bem.html ├── 5-4-button-icon-small-precss-ex.html ├── 5-4-button-icon-small-precss.html ├── 5-5-icon-bem.html ├── 5-5-icon-expand-2-bem.html ├── 5-5-icon-expand-2-precss-ex.html ├── 5-5-icon-expand-2-precss.html ├── 5-5-icon-expand-3-bem.html ├── 5-5-icon-expand-3-precss.html ├── 5-5-icon-expand-bem.html ├── 5-5-icon-expand-precss.html ├── 5-5-icon-precss-ex.html ├── 5-5-icon-precss.html ├── 5-6-label-bem.html ├── 5-6-label-ex-color-bem.html ├── 5-6-label-ex-color-precss.html ├── 5-6-label-ex-link-bem.html ├── 5-6-label-ex-link-precss-ex.html ├── 5-6-label-ex-link-precss.html ├── 5-6-label-precss.html ├── 5-6-label-var-oval-bem.html ├── 5-6-label-var-oval-precss.html ├── 5-7-title-2-bem.html ├── 5-7-title-2-precss-ex.html ├── 5-7-title-2-precss.html ├── 5-7-title-3-bem.html ├── 5-7-title-3-precss-ex.html ├── 5-7-title-3-precss.html ├── 5-7-title-4-bem.html ├── 5-7-title-4-precss-ex.html ├── 5-7-title-4-precss.html ├── 5-7-title-5-bem.html ├── 5-7-title-5-precss-ex.html ├── 5-7-title-5-precss.html ├── 5-7-title-6-bem.html ├── 5-7-title-6-precss-ex.html ├── 5-7-title-6-precss.html ├── 5-7-title-bem.html ├── 5-7-title-ex-precss.html ├── 5-7-title-precss-ex.html ├── 5-7-title-precss.html ├── 5-8-comment-bem.html ├── 5-8-comment-precss.html └── css │ ├── 5-3-button-arrow-bem.css │ ├── 5-3-button-arrow-precss-ex.css │ ├── 5-3-button-arrow-precss.css │ ├── 5-3-button-bem.css │ ├── 5-3-button-color-bem.css │ ├── 5-3-button-color-precss.css │ ├── 5-3-button-expand-bem.css │ ├── 5-3-button-expand-precss.css │ ├── 5-3-button-large-bem.css │ ├── 5-3-button-large-precss.css │ ├── 5-3-button-precss-ex.css │ ├── 5-3-button-precss.css │ ├── 5-3-button-round-bem.css │ ├── 5-3-button-round-precss.css │ ├── 5-4-button-icon-bem.css │ ├── 5-4-button-icon-expand-bem.css │ ├── 5-4-button-icon-expand-precss.css │ ├── 5-4-button-icon-small-bem.css │ ├── 5-4-button-icon-small-precss-ex.css │ ├── 5-4-button-icon-small-precss.css │ ├── 5-5-icon-bem.css │ ├── 5-5-icon-expand-2-bem.css │ ├── 5-5-icon-expand-2-precss-ex.css │ ├── 5-5-icon-expand-2-precss.css │ ├── 5-5-icon-expand-3-bem.css │ ├── 5-5-icon-expand-3-precss.css │ ├── 5-5-icon-expand-bem.css │ ├── 5-5-icon-expand-precss.css │ ├── 5-5-icon-precss-ex.css │ ├── 5-5-icon-precss.css │ ├── 5-6-label-bem.css │ ├── 5-6-label-ex-color-bem.css │ ├── 5-6-label-ex-color-precss.css │ ├── 5-6-label-ex-link-bem.css │ ├── 5-6-label-ex-link-precss-ex.css │ ├── 5-6-label-ex-link-precss.css │ ├── 5-6-label-precss.css │ ├── 5-6-label-var-oval-bem.css │ ├── 5-6-label-var-oval-precss.css │ ├── 5-7-title-2-bem.css │ ├── 5-7-title-2-precss-ex.css │ ├── 5-7-title-2-precss.css │ ├── 5-7-title-3-bem.css │ ├── 5-7-title-3-precss-ex.css │ ├── 5-7-title-3-precss.css │ ├── 5-7-title-4-bem.css │ ├── 5-7-title-4-precss-ex.css │ ├── 5-7-title-4-precss.css │ ├── 5-7-title-5-bem.css │ ├── 5-7-title-5-precss-ex.css │ ├── 5-7-title-5-precss.css │ ├── 5-7-title-6-bem.css │ ├── 5-7-title-6-precss-ex.css │ ├── 5-7-title-6-precss.css │ ├── 5-7-title-bem.css │ ├── 5-7-title-ex-precss.css │ ├── 5-7-title-precss-ex.css │ ├── 5-7-title-precss.css │ ├── 5-8-comment-bem.css │ ├── 5-8-comment-precss.css │ └── style.css ├── chapter06 ├── .DS_Store ├── 6-10-price-bem.html ├── 6-10-price-precss.html ├── 6-10-price-table-bem.html ├── 6-10-price-table-precss.html ├── 6-11-faq-bem.html ├── 6-11-faq-precss-ex.html ├── 6-11-faq-precss.html ├── 6-12-accordion-bem.html ├── 6-12-accordion-precss-ex.html ├── 6-12-accordion-precss.html ├── 6-13-jumbotron-bem.html ├── 6-13-jumbotron-precss-ex.html ├── 6-13-jumbotron-precss.html ├── 6-14-postlist-bem.html ├── 6-14-postlist-precss-ex.html ├── 6-14-postlist-precss.html ├── 6-15-ul-bem.html ├── 6-15-ul-horizon-bem.html ├── 6-15-ul-horizon-precss.html ├── 6-15-ul-nest-bem.html ├── 6-15-ul-nest-precss.html ├── 6-15-ul-precss.html ├── 6-16-ol-bem.html ├── 6-16-ol-nest-bem.html ├── 6-16-ol-nest-precss.html ├── 6-16-ol-precss.html ├── 6-2-media-bem.html ├── 6-2-media-half-bem.html ├── 6-2-media-half-precss.html ├── 6-2-media-precss-ex.html ├── 6-2-media-precss.html ├── 6-2-media-reverse-bem.html ├── 6-2-media-reverse-precss.html ├── 6-3-badge-bem.html ├── 6-3-badge-precss.html ├── 6-3-card-3-col-bem.html ├── 6-3-card-3-col-precss.html ├── 6-3-card-4-col-bem.html ├── 6-3-card-4-col-precss.html ├── 6-3-card-bem.html ├── 6-3-card-link-bem.html ├── 6-3-card-link-precss.html ├── 6-3-card-precss.html ├── 6-4-table-horizontal-bem-ex.html ├── 6-4-table-horizontal-bem.html ├── 6-4-table-horizontal-precss-ex.html ├── 6-4-table-horizontal-precss.html ├── 6-5-table-vertical-bem.html ├── 6-5-table-vertical-precss.html ├── 6-6-table-cross-bem.html ├── 6-6-table-cross-precss.html ├── 6-7-pager-bem.html ├── 6-7-pager-precss-ex.html ├── 6-7-pager-precss.html ├── 6-8-navi-bem.html ├── 6-8-navi-precss.html ├── 6-9-cta-bem.html ├── 6-9-cta-precss.html ├── assets │ ├── .DS_Store │ └── img │ │ ├── .DS_Store │ │ └── elements │ │ ├── .DS_Store │ │ ├── 1000x200.png │ │ ├── analysis.jpg │ │ ├── code.jpg │ │ ├── global.jpg │ │ ├── jumbotron-bg-org.jpg │ │ ├── jumbotron-bg.jpg │ │ ├── marketing.jpg │ │ ├── persona-small.jpg │ │ └── persona.jpg └── css │ ├── 6-10-price-bem.css │ ├── 6-10-price-precss.css │ ├── 6-10-price-table-bem.css │ ├── 6-10-price-table-precss.css │ ├── 6-11-faq-bem.css │ ├── 6-11-faq-precss-ex.css │ ├── 6-11-faq-precss.css │ ├── 6-11-price-table-precss.css │ ├── 6-12-accordion-bem.css │ ├── 6-12-accordion-precss-ex.css │ ├── 6-12-accordion-precss.css │ ├── 6-13-jumbotron-bem.css │ ├── 6-13-jumbotron-precss-ex.css │ ├── 6-13-jumbotron-precss.css │ ├── 6-14-postlist-bem.css │ ├── 6-14-postlist-precss-ex.css │ ├── 6-14-postlist-precss.css │ ├── 6-15-ul-bem.css │ ├── 6-15-ul-horizon-bem.css │ ├── 6-15-ul-horizon-precss.css │ ├── 6-15-ul-nest-bem.css │ ├── 6-15-ul-nest-precss.css │ ├── 6-15-ul-precss.css │ ├── 6-16-ol-bem.css │ ├── 6-16-ol-nest-bem.css │ ├── 6-16-ol-nest-precss.css │ ├── 6-16-ol-precss.css │ ├── 6-2-media-bem.css │ ├── 6-2-media-half-bem.css │ ├── 6-2-media-half-precss.css │ ├── 6-2-media-precss-ex.css │ ├── 6-2-media-precss.css │ ├── 6-2-media-reverse-bem.css │ ├── 6-2-media-reverse-precss.css │ ├── 6-3-badge-bem.css │ ├── 6-3-badge-precss.css │ ├── 6-3-card-3-col-bem.css │ ├── 6-3-card-3-col-precss.css │ ├── 6-3-card-4-col-bem.css │ ├── 6-3-card-4-col-precss.css │ ├── 6-3-card-bem.css │ ├── 6-3-card-link-bem.css │ ├── 6-3-card-link-precss.css │ ├── 6-3-card-precss.css │ ├── 6-4-table-horizontal-bem-ex.css │ ├── 6-4-table-horizontal-bem.css │ ├── 6-4-table-horizontal-precss-ex.css │ ├── 6-4-table-horizontal-precss.css │ ├── 6-5-table-vertical-bem.css │ ├── 6-5-table-vertical-precss.css │ ├── 6-6-table-cross-bem.css │ ├── 6-6-table-cross-precss.css │ ├── 6-7-pager-bem.css │ ├── 6-7-pager-precss-ex.css │ ├── 6-7-pager-precss.css │ ├── 6-8-navi-bem.css │ ├── 6-8-navi-precss.css │ ├── 6-9-cta-bem.css │ ├── 6-9-cta-precss.css │ └── style.css └── chapter07 ├── .DS_Store ├── 7-1-button-horizon-bem.html ├── 7-1-button-horizon-precss-ex.html ├── 7-1-button-horizon-precss.html ├── 7-2-button-cta-bem.html ├── 7-2-button-cta-precss.html ├── 7-2-button-media-bem.html ├── 7-2-button-media-precss.html ├── 7-2-label-postlist-bem.html ├── 7-2-label-postlist-precss.html ├── 7-3-acc-card-cta-bem.html ├── 7-3-acc-card-cta-precss.html ├── 7-3-faq-list-bem.html ├── 7-3-faq-list-precss.html ├── 7-column-precss.html ├── assets ├── .DS_Store └── img │ ├── .DS_Store │ └── elements │ ├── .DS_Store │ ├── analysis.jpg │ ├── code.jpg │ ├── global.jpg │ ├── jumbotron-bg.jpg │ ├── marketing.jpg │ ├── persona-small.jpg │ └── persona.jpg ├── css ├── .DS_Store ├── 7-1-button-horizon-bem.css ├── 7-1-button-horizon-precss-ex.css ├── 7-1-button-horizon-precss.css ├── 7-2-button-cta-bem.css ├── 7-2-button-cta-precss.css ├── 7-2-button-media-bem.css ├── 7-2-button-media-precss.css ├── 7-2-label-postlist-bem.css ├── 7-2-label-postlist-precss.css ├── 7-3-acc-card-cta-bem.css ├── 7-3-acc-card-cta-precss.css ├── 7-3-faq-list-bem.css ├── 7-3-faq-list-precss.css ├── 7-column-precss.css ├── base.css └── style.css └── prepros.config /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 다양한 예제로 배우는 CSS 설계 실전 가이드 2 | ![다양한 예제로 배우는 CSS 설계 실전 가이드](http://image.kyobobook.co.kr/images/book/xlarge/810/x9791190665810.jpg) 3 | 4 | **출판사** 제이펍 5 | **원서명** CSS設計完全ガイド ~詳細解説+実践的モジュール集 (ISBN 9784297111731) 6 | **저자명** 한다 아츠시 7 | **역자명** 김연수 8 | **출판일** 2021년 2월 19일 9 | **페이지** 412쪽 10 | **ISBN** 979-11-90665-81-0 (93000) 11 | 12 | [### 도서 소개 페이지 바로 가기 ###](https://jpub.tistory.com/1127) -------------------------------------------------------------------------------- /chapter02/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter02/.DS_Store -------------------------------------------------------------------------------- /chapter02/2-5-button-multi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 24 | 25 |
13 | 기본 버튼 14 | 기본 버튼(그림자 없음) 15 | 기본 버튼(문자 검정색) 16 | 기본 버튼(그림자 없음, 문자 검정색) 17 | 19 | 색이 다른 버튼 20 | 색이 다른 버튼(그림자 없음) 21 | 색이 다른 버튼(문자 흰색) 22 | 색이 다른 버튼(그림자 없음, 문자 흰색) 23 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter02/2-5-button-single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 24 | 25 |
13 | 기본 버튼 14 | 기본 버튼(그림자 없음) 15 | 기본 버튼(문자 검정색) 16 | 기본 버튼(그림자 없음, 문자 검정색) 17 | 19 | 색이 다른 버튼 20 | 색이 다른 버튼(그림자 없음) 21 | 색이 다른 버튼(문자 흰색) 22 | 색이 다른 버튼(그림자 없음, 문자 흰색) 23 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter02/2-5-mod-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 사용자 체험을 제공합니다. 22 |

23 |

퍼소나란?

24 | 25 | 자사 상품, 서비스의 이상적/상징적인 고객 이미지를 말합니다. 접근할 대상을 명확히 함으로써 효율적인 마케팅을 수행할 수 있습니다. 26 | 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter02/2-5-mod-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 22 | 뛰어넘는 사용자 체험을 제공합니다. 23 |

24 |

퍼소나란?

25 | 26 | 자사 상품, 서비스의 이상적/상징적인 고객 이미지를 말합니다. 접근할 대상을 명확히 함으로써 효율적인 마케팅을 수행할 수 있습니다. 27 | 28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter02/2-5-mod-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 22 | 뛰어넘는 사용자 체험을 제공합니다. 23 |

24 |

퍼소나란?

25 | 26 | 자사 상품, 서비스의 이상적/상징적인 고객 이미지를 말합니다. 접근할 대상을 명확히 함으로써 효율적인 마케팅을 수행할 수 있습니다. 27 | 28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter02/2-5-mod-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 22 | 뛰어넘는 사용자 체험을 제공합니다. 23 |

24 |

퍼소나란?

25 | 26 | 자사 상품, 서비스의 이상적/상징적인 고객 이미지를 말합니다. 접근할 대상을 명확히 함으로써 효율적인 마케팅을 수행할 수 있습니다. 27 | 28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter02/2-5-mod-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 22 | 뛰어넘는 사용자 체험을 제공합니다. 23 |

24 |

퍼소나란?

25 | 26 | 자사 상품, 서비스의 이상적/상징적인 고객 이미지를 말합니다. 접근할 대상을 명확히 함으로써 효율적인 마케팅을 수행할 수 있습니다. 27 | 28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter02/2-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 사용자 체험을 제공합니다. 22 |

23 |

퍼소나란?

24 | 25 | 자사 상품, 서비스의 이상적/상징적인 고객 이미지를 말합니다. 접근할 대상을 명확히 함으로써 효율적인 마케팅을 수행할 수 있습니다. 26 | 27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter02/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter02/assets/.DS_Store -------------------------------------------------------------------------------- /chapter02/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter02/assets/img/.DS_Store -------------------------------------------------------------------------------- /chapter02/assets/img/elements/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter02/assets/img/elements/.DS_Store -------------------------------------------------------------------------------- /chapter02/assets/img/elements/persona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter02/assets/img/elements/persona.jpg -------------------------------------------------------------------------------- /chapter02/css/2-5-button-multi.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | margin: 10px; 7 | background-color: #e25c00; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 18px; 11 | line-height: 1.5; 12 | text-align: center; 13 | text-decoration: none; 14 | transition: 0.25s; 15 | } 16 | 17 | .hp_warning { 18 | background-color: #f1de00; 19 | color: #222; 20 | } 21 | 22 | .hp_bxshNone { 23 | box-shadow: none; 24 | } 25 | 26 | .hp_textBlack { 27 | color: #222; 28 | } 29 | 30 | .hp_textWhite { 31 | color: #fff; 32 | } -------------------------------------------------------------------------------- /chapter02/css/2-5-mod-2.css: -------------------------------------------------------------------------------- 1 | /* 베이스 2 | ======================================== */ 3 | 4 | body { 5 | font-family: sans-serif; 6 | } 7 | 8 | /* 레이아웃 9 | ======================================== */ 10 | 11 | .ly_cont { 12 | max-width: 1200px; 13 | padding-right: 15px; 14 | padding-left: 15px; 15 | margin-right: auto; 16 | margin-left: auto; 17 | } 18 | 19 | /* 모듈 20 | ======================================== */ 21 | 22 | #main span { 23 | color: #555; 24 | font-size: 14px; 25 | } 26 | 27 | #main .bl_module.main-module { 28 | display: flex; 29 | align-items: center; 30 | font-size: 16px; 31 | line-height: 1.5; 32 | } 33 | 34 | #main .bl_module.main-module .image-wrapper { 35 | flex: 1 1 25%; 36 | margin-right: 3.33333%; 37 | } 38 | 39 | #main .bl_module.main-module .image-wrapper img { 40 | width: 100%; 41 | vertical-align: top; 42 | } 43 | 44 | #main .bl_module.main-module .body { 45 | flex: 1 1 68.33333%; 46 | } 47 | 48 | #main .bl_module.main-module .title { 49 | margin-bottom: 10px; 50 | font-size: 18px; 51 | font-weight: bold; 52 | } 53 | 54 | #main .bl_module.main-module .sub-title { 55 | margin-top: 10px; 56 | margin-bottom: 10px; 57 | font-size: 16px; 58 | border-bottom: 1px solid #555; 59 | } -------------------------------------------------------------------------------- /chapter02/css/2-5-mod-5.css: -------------------------------------------------------------------------------- 1 | /* 베이스 2 | ======================================== */ 3 | 4 | body { 5 | font-family: sans-serif; 6 | } 7 | 8 | /* 레이아웃 9 | ======================================== */ 10 | 11 | .ly_cont { 12 | max-width: 1200px; 13 | padding-right: 15px; 14 | padding-left: 15px; 15 | margin-right: auto; 16 | margin-left: auto; 17 | } 18 | 19 | /* 모듈 20 | ======================================== */ 21 | 22 | .bl_module { 23 | display: flex; 24 | align-items: center; 25 | font-size: 16px; 26 | line-height: 1.5; 27 | } 28 | 29 | .bl_module .image-wrapper { 30 | flex: 1 1 25%; 31 | margin-right: 3.33333%; 32 | } 33 | 34 | .bl_module .image-wrapper img { 35 | width: 100%; 36 | vertical-align: top; 37 | } 38 | 39 | .bl_module .body { 40 | flex: 1 1 68.33333%; 41 | } 42 | 43 | .bl_module .title { 44 | margin-bottom: 10px; 45 | font-size: 18px; 46 | font-weight: bold; 47 | } 48 | 49 | .bl_module .sub-title { 50 | margin-top: 10px; 51 | margin-bottom: 10px; 52 | font-size: 16px; 53 | border-bottom: 1px solid #555; 54 | } 55 | 56 | .bl_module .body>span { 57 | color: #555; 58 | font-size: 14px; 59 | } -------------------------------------------------------------------------------- /chapter02/css/2-5-mod-6.css: -------------------------------------------------------------------------------- 1 | /* 베이스 2 | ======================================== */ 3 | 4 | body { 5 | font-family: sans-serif; 6 | } 7 | 8 | /* 레이아웃 9 | ======================================== */ 10 | 11 | .ly_cont { 12 | max-width: 1200px; 13 | padding-right: 15px; 14 | padding-left: 15px; 15 | margin-right: auto; 16 | margin-left: auto; 17 | } 18 | 19 | /* 모듈 20 | ======================================== */ 21 | 22 | .bl_module { 23 | display: flex; 24 | align-items: center; 25 | font-size: 16px; 26 | line-height: 1.5; 27 | } 28 | 29 | .bl_module_imageWrapper { 30 | flex: 1 1 25%; 31 | margin-right: 3.33333%; 32 | } 33 | 34 | .bl_module_imageWrapper img { 35 | width: 100%; 36 | vertical-align: top; 37 | } 38 | 39 | .bl_module_body { 40 | flex: 1 1 68.33333%; 41 | } 42 | 43 | .bl_module_title { 44 | margin-bottom: 10px; 45 | font-size: 18px; 46 | font-weight: bold; 47 | } 48 | 49 | .bl_module_body>span { 50 | color: #555; 51 | font-size: 14px; 52 | } 53 | 54 | .subTitle { 55 | margin-top: 10px; 56 | margin-bottom: 10px; 57 | font-size: 16px; 58 | border-bottom: 1px solid #555; 59 | } -------------------------------------------------------------------------------- /chapter02/css/2-5-mod-7.css: -------------------------------------------------------------------------------- 1 | /* 베이스 2 | ======================================== */ 3 | 4 | body { 5 | font-family: sans-serif; 6 | } 7 | 8 | /* 레이아웃 9 | ======================================== */ 10 | 11 | .ly_cont { 12 | max-width: 1200px; 13 | padding-right: 15px; 14 | padding-left: 15px; 15 | margin-right: auto; 16 | margin-left: auto; 17 | } 18 | 19 | /* 모듈 20 | ======================================== */ 21 | 22 | .bl_media { 23 | display: flex; 24 | align-items: center; 25 | font-size: 16px; 26 | line-height: 1.5; 27 | } 28 | 29 | .bl_media_imageWrapper { 30 | flex: 1 1 25%; 31 | margin-right: 3.33333%; 32 | } 33 | 34 | .bl_media_imageWrapper img { 35 | width: 100%; 36 | vertical-align: top; 37 | } 38 | 39 | .bl_media_body { 40 | flex: 1 1 68.33333%; 41 | } 42 | 43 | .bl_media_title { 44 | margin-bottom: 10px; 45 | font-size: 18px; 46 | font-weight: bold; 47 | } 48 | 49 | .bl_media_body>span { 50 | color: #555; 51 | font-size: 14px; 52 | } 53 | 54 | .subTitle { 55 | margin-top: 10px; 56 | margin-bottom: 10px; 57 | font-size: 16px; 58 | border-bottom: 1px solid #555; 59 | } -------------------------------------------------------------------------------- /chapter02/css/2-5.css: -------------------------------------------------------------------------------- 1 | #main span { 2 | color: #555; 3 | font-size: 14px; 4 | } 5 | #main div.module.main-module { 6 | /* 좌우 가운데 정렬을 위한 설정 */ 7 | max-width: 1200px; 8 | padding-right: 15px; 9 | padding-left: 15px; 10 | margin-right: auto; 11 | margin-left: auto; 12 | /* 모듈에 대한 설정 */ 13 | display: flex; 14 | align-items: center; 15 | font-family: sans-serif; 16 | font-size: 16px; 17 | line-height: 1.5; 18 | } 19 | #main div.module.main-module figure { 20 | flex: 1 1 25%; 21 | margin-right: 3.33333%; 22 | } 23 | #main div.module.main-module img { 24 | width: 100%; 25 | vertical-align: top; 26 | } 27 | #main div.module.main-module div { 28 | flex: 1 1 68.33333%; 29 | } 30 | #main div.module.main-module h2 { 31 | margin-bottom: 10px; 32 | font-size: 18px; 33 | font-weight: bold; 34 | } 35 | #main div.module.main-module h3 { 36 | margin-top: 10px; 37 | margin-bottom: 10px; 38 | font-size: 16px; 39 | border-bottom: 1px solid #555; 40 | } 41 | -------------------------------------------------------------------------------- /chapter03/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/.DS_Store -------------------------------------------------------------------------------- /chapter03/3-2-button-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter03/3-2-button-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | 19 | 20 | -------------------------------------------------------------------------------- /chapter03/3-2-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter03/3-3-module-rule-4-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 문의 메일 보내기 11 | 로그인 12 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /chapter03/3-3-module-rule-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 로그인 11 | 27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /chapter03/3-3-state-form-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapter03/3-3-state-navi-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter03/3-3-state-navi-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter03/3-3-state-navi-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter03/3-5-card-modules.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 웹사이트 제작 13 |
14 |
15 |

웹사이트 제작

16 |

사용자에게 최고의 체험을 제공하는 크리에이티브와 테크놀로지를 만들어 드립니다.

17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /chapter03/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/assets/.DS_Store -------------------------------------------------------------------------------- /chapter03/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/assets/img/.DS_Store -------------------------------------------------------------------------------- /chapter03/assets/img/elements/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/assets/img/elements/.DS_Store -------------------------------------------------------------------------------- /chapter03/assets/img/elements/analysis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/assets/img/elements/analysis.jpg -------------------------------------------------------------------------------- /chapter03/assets/img/elements/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/assets/img/elements/code.jpg -------------------------------------------------------------------------------- /chapter03/assets/img/elements/marketing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/assets/img/elements/marketing.jpg -------------------------------------------------------------------------------- /chapter03/css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter03/css/.DS_Store -------------------------------------------------------------------------------- /chapter03/css/3-2-button-2.css: -------------------------------------------------------------------------------- 1 | #main .btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | margin: 10px; 7 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 8 | font-size: 18px; 9 | line-height: 1.5; 10 | text-align: center; 11 | } 12 | 13 | #main .general { 14 | background-color: #e25c00; 15 | color: #fff; 16 | } 17 | 18 | #main .warning { 19 | background-color: #f1de00; 20 | color: #222; 21 | } -------------------------------------------------------------------------------- /chapter03/css/3-2-button-3.css: -------------------------------------------------------------------------------- 1 | /* 스트럭처 */ 2 | .btn { 3 | display: inline-block; 4 | width: 300px; 5 | max-width: 100%; 6 | padding: 20px 10px; 7 | margin: 10px; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | font-size: 18px; 10 | line-height: 1.5; 11 | text-align: center; 12 | } 13 | 14 | /* 스킨 */ 15 | .general { 16 | background-color: #e25c00; 17 | color: #fff; 18 | } 19 | .warning { 20 | background-color: #f1de00; 21 | color: #222; 22 | } -------------------------------------------------------------------------------- /chapter03/css/3-2-button-main-3.css: -------------------------------------------------------------------------------- 1 | /* 3-2-button-main-3.css */ 2 | /* 스트럭처 */ 3 | #main .btn { 4 | display:inline-block; 5 | width: 300px; 6 | max-width: 100%; 7 | padding: 20px 10px; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | font-size: 18px; 10 | line-height: 1.5; 11 | text-align: center; 12 | } 13 | /* 스킨 */ 14 | .general { /* main의 ID 셀렉터를 삭제함 */ 15 | background-color: #e25c00; 16 | color: #fff; 17 | } 18 | .warning { /* main의 ID 셀렉터를 삭제함 */ 19 | background-color: #f1de00; 20 | color: #222; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /chapter03/css/3-2-button.css: -------------------------------------------------------------------------------- 1 | #main .btn-general { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | margin: 10px; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 18px; 11 | line-height: 1.5; 12 | text-align: center; 13 | } 14 | 15 | #main .btn-warning { 16 | display: inline-block; 17 | width: 300px; 18 | max-width: 100%; 19 | padding: 20px 10px; 20 | background-color: #f1de00; 21 | margin: 10px; 22 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 23 | color: #222; 24 | font-size: 18px; 25 | line-height: 1.5; 26 | text-align: center; 27 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-base-rule.css: -------------------------------------------------------------------------------- 1 | /* 요소형 셀렉터 예시 */ 2 | body { 3 | background-color: #fff; 4 | } 5 | 6 | /* 자녀 셀렉터 예시 */ 7 | a > img { 8 | transition: .25s; 9 | } 10 | 11 | /* 손자 셀렉터 예시 */ 12 | ul li { 13 | margin-bottom: 10px; 14 | } 15 | 16 | /* 유사 셀렉터 예시 */ 17 | a:hover { 18 | text-decoration: underline; 19 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-layout-rule-2.css: -------------------------------------------------------------------------------- 1 | .l-narrow #header { 2 | width: 960px; 3 | } 4 | 5 | .l-narrow #main { 6 | width: 960px; 7 | } 8 | 9 | .l-narrow #footer { 10 | width: 960px; 11 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-layout-rule-3.css: -------------------------------------------------------------------------------- 1 | /* 클래스 셀렉터 예시 */ 2 | .section { 3 | padding-top: 80px; 4 | padding-bottom: 80px; 5 | } 6 | 7 | /* ↓ */ 8 | 9 | .l-section { 10 | padding-top: 80px; 11 | padding-bottom: 80px; 12 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-layout-rule-4.css: -------------------------------------------------------------------------------- 1 | .l-header { 2 | width: 1080px; 3 | margin-right: auto; 4 | margin-left: auto; 5 | background-color: #fff; 6 | } 7 | 8 | .l-main { 9 | width: 1080px; 10 | margin-right: auto; 11 | margin-left: auto; 12 | background-color: #fff; 13 | } 14 | 15 | .l-footer { 16 | width: 1080px; 17 | margin-right: auto; 18 | margin-left: auto; 19 | background-color: #eee; 20 | } 21 | 22 | .l-section { 23 | padding-top: 80px; 24 | padding-bottom: 80px; 25 | } 26 | 27 | /* 가로 폭이 좁아지는 경우 */ 28 | 29 | .l-narrow .l-header { 30 | width: 960px; 31 | } 32 | 33 | .l-narrow .l-main { 34 | width: 960px; 35 | } 36 | 37 | .l-narrow .l-footer { 38 | width: 960px; 39 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-layout-rule.css: -------------------------------------------------------------------------------- 1 | /* ID 셀렉터 예시*/ 2 | #header { 3 | width: 1080px; 4 | margin-right: auto; 5 | margin-left: auto; 6 | background-color: #fff; 7 | } 8 | #main { 9 | width: 1080px; 10 | margin-right: auto; 11 | margin-left: auto; 12 | background-color: #fff; 13 | } 14 | #footer { 15 | width: 1080px; 16 | margin-right: auto; 17 | margin-left: auto; 18 | background-color: #eee; 19 | } 20 | 21 | /* 클래스 셀렉터 예시 */ 22 | .section { 23 | padding-top: 80px; 24 | padding-bottom: 80px; 25 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-module-rule-4-ex.css: -------------------------------------------------------------------------------- 1 | /* 버튼 모듈의 원래 스타일링 */ 2 | 3 | .btn { 4 | display: inline-block; 5 | width: 300px; 6 | padding: 20px 10px; 7 | font-size: 18px; 8 | text-decoration: none; 9 | text-align: center; 10 | transition: 0.25s; 11 | border-width: 0; 12 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); 13 | color: #fff; 14 | background-color: #DD742C; 15 | } 16 | 17 | .btn.btn-small { 18 | width: 80px; 19 | padding-top: 10px; 20 | padding-bottom: 10px; 21 | font-size: 14px; 22 | } 23 | 24 | .btn.btn-long { 25 | width: 160px; 26 | } 27 | 28 | /* 헤더 스타일링 */ 29 | 30 | .l-header { 31 | max-width: 1230px; 32 | margin-right: auto; 33 | margin-left: auto; 34 | border-bottom: 1px solid #ddd; 35 | text-align: right; 36 | } 37 | 38 | .headermenu { 39 | display: flex; 40 | /* display: display-inside; */ 41 | /* justify-content: space-around; */ 42 | justify-content: normal; 43 | } 44 | 45 | li { 46 | flex-grow: 1; 47 | text-align: center; 48 | } 49 | 50 | a { 51 | position: relative; 52 | display: block; 53 | padding: 15px 5px; 54 | border-bottom: 4px solid transparent; 55 | color: #222; 56 | text-decoration: none; 57 | transition: .25s; 58 | } 59 | 60 | 61 | -------------------------------------------------------------------------------- /chapter03/css/3-3-module-rule-4.css: -------------------------------------------------------------------------------- 1 | /* 버튼 모듈의 원래 스타일링 */ 2 | 3 | .btn { 4 | display: inline-block; 5 | width: 300px; 6 | padding: 20px 10px; 7 | font-size: 18px; 8 | text-decoration: none; 9 | text-align: center; 10 | transition: 0.25s; 11 | border-width: 0; 12 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); 13 | color: #fff; 14 | background-color: #DD742C; 15 | } 16 | 17 | /* 헤더 스타일링 */ 18 | 19 | .l-header { 20 | max-width: 1230px; 21 | margin-right: auto; 22 | margin-left: auto; 23 | border-bottom: 1px solid #ddd; 24 | text-align: right; 25 | } 26 | 27 | /* 헤더 안에 배치되었을 때의 버튼 모듈 덮어쓰기 내용 */ 28 | .l-header .btn { 29 | width: 80px; 30 | padding-top: 10px; 31 | padding-bottom: 10px; 32 | font-size: 14px; 33 | } 34 | 35 | .headermenu { 36 | display: flex; 37 | /* display: display-inside; */ 38 | /* justify-content: space-around; */ 39 | justify-content: normal; 40 | } 41 | 42 | li { 43 | flex-grow: 1; 44 | text-align: center; 45 | } 46 | 47 | a { 48 | position: relative; 49 | display: block; 50 | padding: 15px 5px; 51 | border-bottom: 4px solid transparent; 52 | color: #222; 53 | text-decoration: none; 54 | transition: .25s; 55 | } 56 | -------------------------------------------------------------------------------- /chapter03/css/3-3-state-form-1.css: -------------------------------------------------------------------------------- 1 | .inputtext { 2 | border: 1px solid #aaa; 3 | border-radius: 3px; 4 | margin: 15px; 5 | } 6 | 7 | .is-error { 8 | border-color: #D40152; 9 | } 10 | 11 | .is-error::placeholder { 12 | color: #D40152; 13 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-state-navi-1.css: -------------------------------------------------------------------------------- 1 | /* 기본 스타일링 */ 2 | 3 | .tabnav { 4 | display: flex; 5 | } 6 | 7 | .tabnav>li { 8 | border-top: 1px solid #aaa; 9 | border-right: 1px solid #aaa; 10 | border-bottom: 1px solid #aaa; 11 | list-style: none; 12 | } 13 | 14 | .tabnav>li:first-child { 15 | border-left: 1px solid #aaa; 16 | } 17 | 18 | .tabnav>li>a { 19 | display: block; 20 | padding: 10px 30px; 21 | text-decoration: none; 22 | } 23 | 24 | /* 활성화 시 스타일링 */ 25 | 26 | .is-active { 27 | background-color: #0093FF; 28 | } 29 | 30 | .is-active>a { 31 | pointer-events: none; 32 | color: #fff; 33 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-state-navi-2.css: -------------------------------------------------------------------------------- 1 | /* 기본 스타일링 */ 2 | .tabnav { 3 | display: flex; 4 | } 5 | 6 | .tabnav > li { 7 | border-top: 1px solid #aaa; 8 | border-right: 1px solid #aaa; 9 | border-bottom: 1px solid #aaa; 10 | list-style: none; 11 | } 12 | 13 | .tabnav > li:first-child { 14 | border-left: 1px solid #aaa; 15 | } 16 | 17 | .tabnav > li > a { 18 | display: block; 19 | padding: 10px 30px; 20 | text-decoration: none; 21 | } 22 | 23 | .inputtext { 24 | margin-left: 40px; 25 | } 26 | 27 | /* 활성화 시 스타일링 */ 28 | .is-active { 29 | background-color: #0093FF; 30 | } 31 | 32 | .is-active > a { 33 | pointer-events: none; 34 | color: #fff; 35 | } -------------------------------------------------------------------------------- /chapter03/css/3-3-state-navi-3.css: -------------------------------------------------------------------------------- 1 | /* 기본 스타일링 */ 2 | 3 | .tabnav { 4 | display: flex; 5 | } 6 | 7 | .tabnav>li { 8 | border-top: 1px solid #aaa; 9 | border-right: 1px solid #aaa; 10 | border-bottom: 1px solid #aaa; 11 | list-style: none; 12 | } 13 | 14 | .tabnav>li:first-child { 15 | border-left: 1px solid #aaa; 16 | } 17 | 18 | .tabnav>li>a { 19 | display: block; 20 | padding: 10px 30px; 21 | text-decoration: none; 22 | } 23 | 24 | .inputtext { 25 | margin-left: 40px; 26 | } 27 | 28 | /* 활성화 시 스타일링 */ 29 | 30 | .is-active { 31 | background-color: #0093FF; 32 | } 33 | 34 | .is-active>a { 35 | pointer-events: none; 36 | color: #fff; 37 | } 38 | 39 | .is-inputtext-error { 40 | border-color: #D40152; 41 | } 42 | 43 | .is-inputtext-error::placeholder { 44 | color: #D40152; 45 | } 46 | 47 | .is-tabnav-active { 48 | background-color: #0093ff; 49 | } 50 | 51 | .is-tabnav-active>a { 52 | pointer-events: none; 53 | color: #fff; 54 | } -------------------------------------------------------------------------------- /chapter03/css/3-5-card-modules-2.css: -------------------------------------------------------------------------------- 1 | .bl_card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); 3 | font-size: 16px; 4 | line-height: 1.5; 5 | margin-left: 5px; 6 | } 7 | 8 | .bl_3colCardUnit { 9 | display: flex; 10 | } 11 | 12 | /* ◯: 여기에서 자녀 셀렉터를 사용해, 레이아웃 관련 내용을 지정함 */ 13 | 14 | .bl_3colCardUnit>.bl_card { 15 | width: 31.707%; 16 | margin-right: 2.43902%; 17 | } 18 | 19 | .bl_card_imgWrapper { 20 | position: relative; 21 | /* padding-top: 56.25%; */ 22 | padding-top: 50%; 23 | overflow: hidden; 24 | } 25 | 26 | .bl_card_imgWrapper img { 27 | position: absolute; 28 | top: 50%; 29 | width: 100%; 30 | transform: translateY(-50%); 31 | } 32 | 33 | .bl_card_body { 34 | padding: 15px; 35 | } 36 | 37 | .bl_card_ttl { 38 | margin-bottom: 5px; 39 | font-size: 1.125rem; 40 | font-weight: bold; 41 | } 42 | 43 | .bl_card_txt { 44 | color: #777; 45 | } -------------------------------------------------------------------------------- /chapter03/css/3-5-card-modules.css: -------------------------------------------------------------------------------- 1 | .bl_card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | font-size: 16px; 4 | line-height: 1.5; 5 | /* margin: 10px; */ 6 | } 7 | 8 | .bl_card_imgWrapper { 9 | position: relative; 10 | padding-top: 56.25%; 11 | overflow: hidden; 12 | } 13 | 14 | .bl_card_imgWrapper img { 15 | position: absolute; 16 | top: 50%; 17 | width: 100%; 18 | transform: translateY(-50%); 19 | } 20 | 21 | .bl_card_body { 22 | padding: 15px; 23 | } 24 | 25 | .bl_card_ttl { 26 | margin-bottom: 5px; 27 | font-size: 1.125rem; 28 | font-weight: bold; 29 | } 30 | 31 | .bl_card_txt { 32 | color: #777; 33 | } -------------------------------------------------------------------------------- /chapter04/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter04/.DS_Store -------------------------------------------------------------------------------- /chapter04/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter04/assets/.DS_Store -------------------------------------------------------------------------------- /chapter04/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter04/assets/img/.DS_Store -------------------------------------------------------------------------------- /chapter04/assets/img/elements/persona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter04/assets/img/elements/persona.jpg -------------------------------------------------------------------------------- /chapter04/css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter04/css/.DS_Store -------------------------------------------------------------------------------- /chapter04/css/4-5-content-1-col-bem.css: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .media__img-wrapper { 7 | flex: 0 1 27.58333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .media__img { 12 | width: 100%; 13 | } 14 | 15 | .media__body { 16 | flex: 1; 17 | } 18 | 19 | .media__body>*:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .media__title { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .media__text { 30 | /* css-wipe에서는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .media { 35 | display: block; 36 | } 37 | .media__img-wrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } 42 | 43 | .level2-heading { 44 | padding-bottom: 10px; 45 | margin-bottom: 25px; 46 | border-bottom: 4px solid #e25c00; 47 | font-size: 1.75rem; 48 | font-weight: bold; 49 | } 50 | 51 | .content { 52 | max-width: 1230px; 53 | padding: 60px 15px; 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | 58 | .background-color-base { 59 | background-color: #efefef; 60 | } -------------------------------------------------------------------------------- /chapter04/css/4-5-content-1-col-precss.css: -------------------------------------------------------------------------------- 1 | .bl_media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .bl_media_imgWrapper { 7 | flex: 0 1 27.58333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .bl_media_imgWrapper>img { 12 | width: 100%; 13 | } 14 | 15 | .bl_media_body { 16 | flex: 1; 17 | } 18 | 19 | .bl_media_body>*:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .bl_media_ttl { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .bl_media_txt { 30 | /* css-wipe에서는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .bl_media { 35 | display: block; 36 | } 37 | .bl_media_imgWrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } 42 | 43 | .el_lv2Heading { 44 | padding-bottom: 10px; 45 | margin-bottom: 25px; 46 | border-bottom: 4px solid #e25c00; 47 | font-size: 1.75rem; 48 | font-weight: bold; 49 | } 50 | 51 | .ly_cont { 52 | max-width: 1230px; 53 | padding: 60px 15px; 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | 58 | .hp_bgcBase { 59 | background-color: #efefef !important; 60 | } -------------------------------------------------------------------------------- /chapter05/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter05/.DS_Store -------------------------------------------------------------------------------- /chapter05/5-3-button-arrow-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 화살표가 붙은 버튼 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-3-button-arrow-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 화살표가 붙은 버튼 14 |
15 | 화살표가 붙은 버튼 16 |
17 | 화살표가 붙은 버튼 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /chapter05/5-3-button-arrow-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 화살표가 붙은 버튼 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-3-button-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 기본 버튼 11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter05/5-3-button-color-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 기본 버튼 11 |
12 | 색이 다른 버튼 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapter05/5-3-button-color-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 기본 버튼 11 |
12 | 색이 다른 버튼 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapter05/5-3-button-large-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 큰 버튼 11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter05/5-3-button-large-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 기본 버튼 11 |
12 | 큰 버튼 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapter05/5-3-button-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
14 | 기본 버튼 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter05/5-3-button-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 기본 버튼 11 | 12 | 13 | -------------------------------------------------------------------------------- /chapter05/5-3-button-round-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 기본 버튼 11 |
12 | 모서리가 둥근 버튼 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapter05/5-3-button-round-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 기본 버튼 11 |
12 | 모서리가 둥근 버튼 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapter05/5-4-button-icon-expand-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 확대 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-4-button-icon-expand-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 확대 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-4-button-icon-small-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 다운로드 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-4-button-icon-small-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 다운로드 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 파일이름.pdf 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-expand-2-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 돌아가기 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-expand-2-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 돌아가기 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-expand-2-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 돌아가기 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-expand-3-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 돌아가기 12 |
13 | 앞으로 가기 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-expand-3-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 돌아가기 12 |
13 | 앞으로 가기 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-expand-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 파일이름.pdf
12 | 파일이름.xlsx
13 | 파일이름.pptx
14 | 체크 항목 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-expand-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 파일이름.pdf
12 | 파일이름.xlsx
13 | 파일이름.pptx
14 | 체크 항목 15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 파일이름.pdf 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter05/5-5-icon-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 파일이름.pdf 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter05/5-6-label-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | NEWS 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter05/5-6-label-ex-color-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | NEWS 12 |
13 | PRESS RELEASE 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-6-label-ex-color-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | NEWS 12 |
13 | PRESS RELEASE 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-6-label-ex-link-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | NEWS 12 |
13 | NEWS 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-6-label-ex-link-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | F 5 | 6 | 9 | 10 | 11 | 12 | 13 | NEWS    14 | NEWS    15 | NEWS 16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter05/5-6-label-ex-link-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | NEWS 14 |
15 | NEWS 16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter05/5-6-label-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | NEWS 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter05/5-6-label-var-oval-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | NEWS 14 |
15 | NEWS 16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter05/5-6-label-var-oval-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | NEWS 14 |
15 | NEWS 16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter05/5-7-title-2-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /chapter05/5-7-title-2-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /chapter05/5-7-title-3-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter05/5-7-title-3-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter05/5-7-title-3-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter05/5-7-title-4-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter05/5-7-title-4-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter05/5-7-title-4-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter05/5-7-title-5-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 |
26 | 제목 5 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter05/5-7-title-5-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 |
26 | 제목 5 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter05/5-7-title-5-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 |
26 | 제목 5 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter05/5-7-title-6-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 |
26 | 제목 5 27 |
28 |
29 | 제목 6 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter05/5-7-title-6-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 |
26 | 제목 5 27 |
28 |
29 | 제목 6 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter05/5-7-title-6-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 제목 2 18 |

19 |

20 | 제목 3 21 |

22 |

23 | 제목 4 24 |

25 |
26 | 제목 5 27 |
28 |
29 | 제목 6 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter05/5-7-title-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter05/5-7-title-ex-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 미디어 15 |

16 |

17 | 확장 패턴: 반대 위치 18 |

19 |

20 | 배리에이션: 이미지 절반 21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter05/5-7-title-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 |

17 | 페이지 제목 18 |

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter05/5-7-title-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |

14 | 페이지 제목 15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /chapter05/5-8-comment-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | ※ 주석이 들어갑니다. 15 | 16 |
17 |

18 | ※ 주석이 들어갑니다. 19 |

20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter05/5-8-comment-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | ※ 주석이 들어갑니다 15 | 16 |
17 |

18 | ※ 주석이 들어갑니다 19 |

20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter05/css/5-3-button-arrow-bem.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .btn:focus, .btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .btn--arrow-right { 23 | position: relative; 24 | padding-right: 2em; 25 | padding-left: 1.38em; 26 | } 27 | 28 | .btn--arrow-right::after { 29 | content: '\f061'; 30 | position: absolute; 31 | top: 50%; 32 | right: .83em; 33 | font-family: 'Font Awesome 5 Free'; 34 | font-weight: 900; 35 | transform: translateY(-50%); 36 | } 37 | -------------------------------------------------------------------------------- /chapter05/css/5-3-button-arrow-precss.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .el_btn:focus, .el_btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .el_btn.el_btn__arrowRight { 23 | position: relative; 24 | padding-right: 2em; 25 | padding-left: 1.38em; 26 | } 27 | 28 | .el_btn.el_btn__arrowRight::after { 29 | content: '\f061'; 30 | position: absolute; 31 | top: 50%; 32 | right: .83em; 33 | font-family: 'Font Awesome 5 Free'; 34 | font-weight: 900; 35 | transform: translateY(-50%); 36 | } -------------------------------------------------------------------------------- /chapter05/css/5-3-button-bem.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .btn:focus, .btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } -------------------------------------------------------------------------------- /chapter05/css/5-3-button-color-bem.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .btn:focus, .btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .btn--warning { 23 | background-color: #f1de00; 24 | color: #222; 25 | } 26 | 27 | .btn--warning:focus, 28 | .btn--warning:hover { 29 | border-color: #f1de00; 30 | color: #222; 31 | } 32 | -------------------------------------------------------------------------------- /chapter05/css/5-3-button-color-precss.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .el_btn:focus, .el_btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .el_btn.el_btn__yellow { 23 | background-color: #f1de00; 24 | color: #222; 25 | } 26 | 27 | .el_btn.el_btn__yellow:focus, 28 | .el_btn.el_btn__yellow:hover { 29 | border-color: #f1de00; 30 | background-color: #fff; 31 | } 32 | -------------------------------------------------------------------------------- /chapter05/css/5-3-button-expand-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon-btn { 2 | position: relative; 3 | display: inline-block; 4 | padding: .2em .3em; 5 | border: 1px solid currentColor; 6 | color: #e25c00; 7 | text-decoration: none; 8 | transition: .25s; 9 | } 10 | 11 | .before-icon-btn:focus, 12 | .before-icon-btn:hover { 13 | background-color: #e25c00; 14 | color: #fff; 15 | } 16 | 17 | .before-icon-btn::before { 18 | display: inline-block; 19 | margin-right: .5em; 20 | font-family: 'Font Awesome 5 Free'; 21 | font-weight: 900; 22 | } 23 | 24 | .before-icon-btn--download::before { 25 | content: '\f019'; 26 | } 27 | 28 | .before-icon-btn--zoom::before { 29 | content: '\f00e'; 30 | transform: translateY(-6%); 31 | } -------------------------------------------------------------------------------- /chapter05/css/5-3-button-expand-precss.css: -------------------------------------------------------------------------------- 1 | .el_beforeIconBtn { 2 | position: relative; 3 | display: inline-block; 4 | padding: .2em .3em; 5 | border: 1px solid currentColor; 6 | color: #e25c00; 7 | text-decoration: none; 8 | transition: .25s; 9 | } 10 | 11 | .el_beforeIconBtn:focus, 12 | .el_beforeIconBtn:hover { 13 | background-color: #e25c00; 14 | color: #fff; 15 | } 16 | 17 | .el_beforeIconBtn::before { 18 | display: inline-block; 19 | margin-right: .5em; 20 | font-family: 'Font Awesome 5 Free'; 21 | font-weight: 900; 22 | } 23 | 24 | .el_beforeIconBtn.el_beforeIconBtn__download::before { 25 | content: '\f019'; 26 | } 27 | 28 | .el_beforeIconBtn.el_beforeIconBtn__zoom::before { 29 | content: '\f00e'; 30 | transform: translateY(-6%); 31 | } -------------------------------------------------------------------------------- /chapter05/css/5-3-button-large-bem.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .btn:focus, .btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .btn--large { 23 | width: 340px; 24 | padding-top: 25px; 25 | padding-bottom: 25px; 26 | font-size: 1.375rem; 27 | } 28 | 29 | -------------------------------------------------------------------------------- /chapter05/css/5-3-button-large-precss.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .el_btn:focus, .el_btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .el_btn.el_btn__large { 23 | width: 340px; 24 | padding-top: 25px; 25 | padding-bottom: 25px; 26 | font-size: 1.375rem; 27 | } -------------------------------------------------------------------------------- /chapter05/css/5-3-button-precss.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .el_btn:focus, .el_btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } -------------------------------------------------------------------------------- /chapter05/css/5-3-button-round-bem.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .btn:focus, .btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .rounded-btn { 23 | display: inline-block; 24 | width: 236px; 25 | max-width: 100%; 26 | padding: 15px 10px; 27 | background-color: #e25c00; 28 | border: 2px solid transparent; 29 | border-bottom-color: #d40152; 30 | border-radius: 10px; 31 | color: #fff; 32 | font-size: 1.125rem; 33 | text-align: center; 34 | text-decoration: none; 35 | transition: .25s; 36 | } 37 | 38 | .rounded-btn:focus, .rounded-btn:hover { 39 | background-color: #fff; 40 | border-color: currentColor; 41 | color: #e25c00; 42 | } -------------------------------------------------------------------------------- /chapter05/css/5-3-button-round-precss.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .el_btn:focus, .el_btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .el_roundedBtn { 23 | display: inline-block; 24 | width: 236px; 25 | max-width: 100%; 26 | padding: 15px 10px; 27 | background-color: #e25c00; 28 | border: 2px solid transparent; 29 | border-bottom-color: #d40152; 30 | border-radius: 10px; 31 | color: #fff; 32 | font-size: 1.125rem; 33 | text-align: center; 34 | text-decoration: none; 35 | transition: .25s; 36 | } 37 | 38 | .el_roundedBtn:focus, .el_roundedBtn:hover { 39 | background-color: #fff; 40 | border-color: currentColor; 41 | color: #e25c00; 42 | } -------------------------------------------------------------------------------- /chapter05/css/5-4-button-icon-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .before-icon--pdf::before { 10 | content: '\f1c1'; 11 | } 12 | -------------------------------------------------------------------------------- /chapter05/css/5-4-button-icon-expand-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon-btn { 2 | position: relative; 3 | display: inline-block; 4 | padding: .2em .3em; 5 | border: 1px solid currentColor; 6 | color: #e25c00; 7 | text-decoration: none; 8 | transition: .25s; 9 | } 10 | 11 | .before-icon-btn:focus, 12 | .before-icon-btn:hover { 13 | background-color: #e25c00; 14 | color: #fff; 15 | } 16 | 17 | .before-icon-btn::before { 18 | display: inline-block; 19 | margin-right: .5em; 20 | font-family: 'Font Awesome 5 Free'; 21 | font-weight: 900; 22 | } 23 | 24 | .before-icon-btn--download::before { 25 | content: '\f019'; 26 | } 27 | 28 | .before-icon-btn--zoom::before { 29 | content: '\f00e'; 30 | transform: translateY(-6%); 31 | } 32 | -------------------------------------------------------------------------------- /chapter05/css/5-4-button-icon-expand-precss.css: -------------------------------------------------------------------------------- 1 | .el_beforeIconBtn { 2 | position: relative; 3 | display: inline-block; 4 | padding: .2em .3em; 5 | border: 1px solid currentColor; 6 | color: #e25c00; 7 | text-decoration: none; 8 | transition: .25s; 9 | } 10 | 11 | .el_beforeIconBtn:focus, 12 | .el_beforeIconBtn:hover { 13 | background-color: #e25c00; 14 | color: #fff; 15 | } 16 | 17 | .el_beforeIconBtn::before { 18 | display: inline-block; 19 | margin-right: .5em; 20 | font-family: 'Font Awesome 5 Free'; 21 | font-weight: 900; 22 | } 23 | 24 | .el_beforeIconBtn.el_beforeIconBtn__download::before { 25 | content: '\f019'; 26 | } 27 | 28 | .el_beforeIconBtn.el_beforeIconBtn__zoom::before { 29 | content: '\f00e'; 30 | transform: translateY(-6%); 31 | } 32 | -------------------------------------------------------------------------------- /chapter05/css/5-4-button-icon-small-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon-btn { 2 | position: relative; 3 | display: inline-block; 4 | padding: .2em .3em; 5 | border: 1px solid currentColor; 6 | color: #e25c00; 7 | text-decoration: none; 8 | transition: .25s; 9 | } 10 | 11 | .before-icon-btn:focus, 12 | .before-icon-btn:hover { 13 | background-color: #e25c00; 14 | color: #fff; 15 | } 16 | 17 | .before-icon-btn::before { 18 | display: inline-block; 19 | margin-right: .5em; 20 | font-family: 'Font Awesome 5 Free'; 21 | font-weight: 900; 22 | } 23 | 24 | .before-icon-btn--download::before { 25 | content: '\f019'; 26 | } 27 | -------------------------------------------------------------------------------- /chapter05/css/5-4-button-icon-small-precss.css: -------------------------------------------------------------------------------- 1 | .el_beforeIconBtn { 2 | position: relative; 3 | display: inline-block; 4 | padding: .2em .3em; 5 | border: 1px solid currentColor; 6 | color: #e25c00; 7 | text-decoration: none; 8 | transition: .25s; 9 | } 10 | 11 | .el_beforeIconBtn:focus, .el_beforeIconBtn:hover { 12 | background-color: #e25c00; 13 | color: #fff; 14 | } 15 | 16 | .el_beforeIconBtn::before { 17 | display: inline-block; 18 | margin-right: .5em; 19 | font-family: 'Font Awesome 5 Free'; 20 | font-weight: 900; 21 | } 22 | 23 | .el_beforeIconBtn.el_beforeIconBtn__download::before { 24 | content: '\f019'; 25 | } -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .before-icon--pdf::before { 10 | content: '\f1c1'; 11 | } 12 | -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-expand-2-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .before-icon--pdf::before { 10 | content: '\f1c1'; 11 | } 12 | 13 | .before-icon--excel::before { 14 | content: '\f1c3'; 15 | } 16 | 17 | .before-icon--power-point::before { 18 | content: '\f1c4'; 19 | } 20 | 21 | .before-icon--check-square::before { 22 | content: '\f14a'; 23 | } 24 | 25 | .before-icon--chevron-left::before { 26 | content: ''; 27 | width: .375em; 28 | height: .375em; 29 | border-bottom: .125em solid #e25c00; 30 | border-left: .125em solid #e25c00; 31 | transform: rotate(45deg) translateY(-30%); 32 | } -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-expand-2-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_beforeIcon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .el_beforeIcon.el_beforeIcon__chevLeft::before { 10 | content: ''; 11 | width: .375em; 12 | height: .375em; 13 | border-bottom: .125em solid #e25c00; 14 | border-left: .125em solid #e25c00; 15 | /* transform: rotate(0deg) translateY(-30%); */ 16 | transform: rotate(45deg) translateY(-30%); 17 | } 18 | 19 | .el_beforeIcon.el_beforeIcon__pdf::before { 20 | content: '\f1c1'; 21 | } 22 | 23 | .el_beforeIcon.el_beforeIcon__excel::before { 24 | content: '\f1c3'; 25 | } 26 | 27 | .el_beforeIcon.el_beforeIcon__PP::before { 28 | content: '\f1c4'; 29 | } 30 | 31 | .el_beforeIcon.el_beforeIcon__checkSquare::before { 32 | content: '\f14a'; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-expand-2-precss.css: -------------------------------------------------------------------------------- 1 | .el_beforeIcon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .el_beforeIcon.el_beforeIcon__pdf::before { 10 | content: '\f1c1'; 11 | } 12 | 13 | .el_beforeIcon.el_beforeIcon__excel::before { 14 | content: '\f1c3'; 15 | } 16 | 17 | .el_beforeIcon.el_beforeIcon__PP::before { 18 | content: '\f1c4'; 19 | } 20 | 21 | .el_beforeIcon.el_beforeIcon__checkSquare::before { 22 | content: '\f14a'; 23 | } 24 | 25 | .el_beforeIcon.el_beforeIcon__chevLeft::before { 26 | content: ''; 27 | width: .375em; 28 | height: .375em; 29 | border-bottom: .125em solid #e25c00; 30 | border-left: .125em solid #e25c00; 31 | transform: rotate(45deg) translateY(-30%); 32 | } -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-expand-3-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .before-icon--pdf::before { 10 | content: '\f1c1'; 11 | } 12 | 13 | .before-icon--excel::before { 14 | content: '\f1c3'; 15 | } 16 | 17 | .before-icon--power-point::before { 18 | content: '\f1c4'; 19 | } 20 | 21 | .before-icon--check-square::before { 22 | content: '\f14a'; 23 | } 24 | 25 | .before-icon--chevron-left::before { 26 | content: ''; 27 | width: .375em; 28 | height: .375em; 29 | border-bottom: .125em solid #e25c00; 30 | border-left: .125em solid #e25c00; 31 | transform: rotate(45deg) translateY(-30%); 32 | } 33 | 34 | .after-icon::after { 35 | display: inline-block; 36 | margin-left: .3em; 37 | color: #e25c00; 38 | font-family: 'Font Awesome 5 Free'; 39 | font-weight: 900; 40 | } 41 | 42 | .after-icon--chevron-right::after { 43 | content: ''; 44 | width: .375em; 45 | height: .375em; 46 | border-top: .125em solid #e25c00; 47 | border-right: .125em solid #e25c00; 48 | transform: rotate(45deg); 49 | } 50 | -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-expand-3-precss.css: -------------------------------------------------------------------------------- 1 | .el_beforeIcon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .el_beforeIcon.el_beforeIcon__pdf::before { 10 | content: '\f1c1'; 11 | } 12 | 13 | .el_beforeIcon.el_beforeIcon__excel::before { 14 | content: '\f1c3'; 15 | } 16 | 17 | .el_beforeIcon.el_beforeIcon__PP::before { 18 | content: '\f1c4'; 19 | } 20 | 21 | .el_beforeIcon.el_beforeIcon__checkSquare::before { 22 | content: '\f14a'; 23 | } 24 | 25 | .el_beforeIcon.el_beforeIcon__chevLeft::before { 26 | content: ''; 27 | width: .375em; 28 | height: .375em; 29 | border-bottom: .125em solid #e25c00; 30 | border-left: .125em solid #e25c00; 31 | transform: rotate(45deg) translateY(-30%); 32 | } 33 | 34 | .el_afterIcon::after { 35 | display: inline-block; 36 | margin-left: .3em; 37 | color: #e25c00; 38 | font-family: 'Font Awesome 5 Free'; 39 | font-weight: 900; 40 | } 41 | 42 | .el_afterIcon.el_afterIcon__chevRight::after { 43 | content: ''; 44 | width: .375em; 45 | height: .375em; 46 | border-top: .125em solid #e25c00; 47 | border-right: .125em solid #e25c00; 48 | transform: rotate(45deg); 49 | } 50 | -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-expand-bem.css: -------------------------------------------------------------------------------- 1 | .before-icon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .before-icon--pdf::before { 10 | content: '\f1c1'; 11 | } 12 | 13 | .before-icon--excel::before { 14 | content: '\f1c3'; 15 | } 16 | 17 | .before-icon--power-point::before { 18 | content: '\f1c4'; 19 | } 20 | 21 | .before-icon--check-square::before { 22 | content: '\f14a'; 23 | } -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-expand-precss.css: -------------------------------------------------------------------------------- 1 | .el_beforeIcon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .el_beforeIcon.el_beforeIcon__pdf::before { 10 | content: '\f1c1'; 11 | } 12 | 13 | .el_beforeIcon.el_beforeIcon__excel::before { 14 | content: '\f1c3'; 15 | } 16 | 17 | .el_beforeIcon.el_beforeIcon__PP::before { 18 | content: '\f1c4'; 19 | } 20 | 21 | .el_beforeIcon.el_beforeIcon__checkSquare::before { 22 | content: '\f14a'; 23 | } -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_beforeIcon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .el_beforeIcon.el_beforeIcon__pdf::before { 10 | content: '\f1c1'; 11 | } 12 | 13 | .el_beforeIcon.el_beforeIcon__excel::before { 14 | content: '\f1c3'; 15 | } 16 | 17 | .el_beforeIcon.el_beforeIcon__PP::before { 18 | content: '\f1c4'; 19 | } 20 | 21 | .el_beforeIcon.el_beforeIcon__checkSquare::before { 22 | content: '\f14a'; 23 | } -------------------------------------------------------------------------------- /chapter05/css/5-5-icon-precss.css: -------------------------------------------------------------------------------- 1 | .el_beforeIcon::before { 2 | display: inline-block; 3 | margin-right: .3em; 4 | color: #e25c00; 5 | font-family: 'Font Awesome 5 Free'; 6 | font-weight: 400; 7 | } 8 | 9 | .el_beforeIcon.el_beforeIcon__pdf::before { 10 | content: '\f1c1'; 11 | } 12 | -------------------------------------------------------------------------------- /chapter05/css/5-6-label-bem.css: -------------------------------------------------------------------------------- 1 | .label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | -------------------------------------------------------------------------------- /chapter05/css/5-6-label-ex-color-bem.css: -------------------------------------------------------------------------------- 1 | .label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | 10 | .label--warning { 11 | background-color: #f1de00; 12 | color: #000; 13 | } 14 | -------------------------------------------------------------------------------- /chapter05/css/5-6-label-ex-color-precss.css: -------------------------------------------------------------------------------- 1 | .el_label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | 10 | .el_label.el_label__yellow { 11 | background-color: #f1de00; 12 | color: #000; 13 | } -------------------------------------------------------------------------------- /chapter05/css/5-6-label-ex-link-bem.css: -------------------------------------------------------------------------------- 1 | .label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | 10 | .label { 11 | border: 2px solid transparent; 12 | } 13 | 14 | .label--link { 15 | text-decoration: none; 16 | transition: .25s; 17 | } 18 | 19 | .label--link:focus, 20 | .label--link:hover { 21 | background-color: #fff; 22 | border-color: currentColor; 23 | color: #e25c00; 24 | } -------------------------------------------------------------------------------- /chapter05/css/5-6-label-ex-link-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 50px; 4 | padding: .2em .3em; 5 | background-color: #e25c00; 6 | color: #fff; 7 | font-size: .75rem; 8 | font-weight: bold; 9 | } 10 | 11 | .el_label { 12 | display: inline-block; 13 | padding: .2em .3em; 14 | background-color: #e25c00; 15 | color: #fff; 16 | font-size: .75rem; 17 | font-weight: bold; 18 | } 19 | 20 | .el_label { 21 | border: 4px solid transparent; 22 | } 23 | 24 | a.el_label { 25 | border: 4px solid transparent; 26 | text-decoration: none; 27 | transition: .25s; 28 | } 29 | 30 | a.el_label:focus, 31 | a.el_label:hover { 32 | background-color: #fff; 33 | border-color: currentColor; 34 | color: #e25c00; 35 | } -------------------------------------------------------------------------------- /chapter05/css/5-6-label-ex-link-precss.css: -------------------------------------------------------------------------------- 1 | .el_label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | 10 | .el_label { 11 | border: 2px solid transparent; 12 | } 13 | 14 | a.el_label { 15 | text-decoration: none; 16 | transition: .25s; 17 | } 18 | 19 | a.el_label:focus, 20 | a.el_label:hover { 21 | background-color: #fff; 22 | border-color: currentColor; 23 | color: #e25c00; 24 | } -------------------------------------------------------------------------------- /chapter05/css/5-6-label-precss.css: -------------------------------------------------------------------------------- 1 | .el_label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | -------------------------------------------------------------------------------- /chapter05/css/5-6-label-var-oval-bem.css: -------------------------------------------------------------------------------- 1 | .label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | 10 | .rounded-label { 11 | display: inline-block; 12 | padding: .3em .9em; 13 | background-color: #e25c00; 14 | border-radius: 1em; 15 | color: #fff; 16 | font-size: .75rem; 17 | font-weight: bold; 18 | } -------------------------------------------------------------------------------- /chapter05/css/5-6-label-var-oval-precss.css: -------------------------------------------------------------------------------- 1 | .el_label { 2 | display: inline-block; 3 | padding: .2em .3em; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: .75rem; 7 | font-weight: bold; 8 | } 9 | 10 | .el_roundedLabel { 11 | display: inline-block; 12 | padding: .3em .9em; 13 | background-color: #e25c00; 14 | border-radius: 1em; 15 | color: #fff; 16 | font-size: .75rem; 17 | font-weight: bold; 18 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-2-bem.css: -------------------------------------------------------------------------------- 1 | .level1-heading { 2 | /* margin: 30px; */ 3 | padding: 30px 10px; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: 1.75rem; 7 | text-align: center; 8 | } 9 | 10 | .level1-heading__inner { 11 | position: relative; 12 | display: inline-block; 13 | transform: translateY(-20%); 14 | } 15 | 16 | .level1-heading__inner::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -10px; 20 | left: 50%; 21 | width: 80px; 22 | height: 1px; 23 | background-color: currentColor; 24 | transform: translateX(-50%); 25 | } 26 | 27 | .level2-heading { 28 | padding-bottom: 10px; 29 | border-bottom: 4px solid #e25c00; 30 | font-size: 1.75rem; 31 | font-weight: bold; 32 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-2-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | margin: 30px; 3 | padding: 30px 10px; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: 1.75rem; 7 | text-align: center; 8 | } 9 | 10 | .el_lv1Heading > span { 11 | position: relative; 12 | display: inline-block; 13 | transform: translateY(-20%); 14 | } 15 | 16 | .el_lv1Heading > span::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -10px; 20 | left: 50%; 21 | width: 80px; 22 | height: 1px; 23 | background-color: currentColor; 24 | transform: translateX(-50%); 25 | } 26 | 27 | .el_lv2Heading { 28 | margin-right: -7px; 29 | /* margin-top: 100px; */ 30 | margin-right: 30px; 31 | margin-bottom: 20px; 32 | margin-left: 30px; 33 | padding-bottom: 10px; 34 | border-bottom: 4px solid #e25c00; 35 | font-size: 1.75rem; 36 | font-weight: bold; 37 | } 38 | 39 | .el_txt { 40 | margin-bottom: 100px; 41 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-2-precss.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .el_lv1Heading > span { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .el_lv1Heading > span::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .el_lv2Heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-3-bem.css: -------------------------------------------------------------------------------- 1 | .level1-heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .level1-heading__inner { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .level1-heading__inner::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .level2-heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .level3-heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-3-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | margin: 30px; 3 | padding: 30px 10px; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: 1.75rem; 7 | text-align: center; 8 | } 9 | 10 | .el_lv1Heading > span { 11 | position: relative; 12 | display: inline-block; 13 | transform: translateY(-20%); 14 | } 15 | 16 | .el_lv1Heading > span::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -10px; 20 | left: 50%; 21 | width: 80px; 22 | height: 1px; 23 | background-color: currentColor; 24 | transform: translateX(-50%); 25 | } 26 | 27 | .el_lv2Heading { 28 | margin: 30px; 29 | padding-bottom: 10px; 30 | border-bottom: 4px solid #e25c00; 31 | font-size: 1.75rem; 32 | font-weight: bold; 33 | } 34 | 35 | .el_txt { 36 | margin-bottom: 100px; 37 | } 38 | 39 | .el_lv3Heading { 40 | margin: 30px; 41 | padding-bottom: 6px; 42 | border-bottom: 2px solid #e25c00; 43 | font-size: 1.5rem; 44 | font-weight: bold; 45 | } 46 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-3-precss.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .el_lv1Heading > span { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .el_lv1Heading > span::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .el_lv2Heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .el_lv3Heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } 39 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-4-bem.css: -------------------------------------------------------------------------------- 1 | .level1-heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .level1-heading__inner { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .level1-heading__inner::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .level2-heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .level3-heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } 39 | 40 | .level4-heading { 41 | padding-left: 6px; 42 | border-left: 2px solid #e25c00; 43 | font-size: 1.25rem; 44 | font-weight: bold; 45 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-4-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | margin:30px; 3 | padding: 30px 10px; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: 1.75rem; 7 | text-align: center; 8 | } 9 | 10 | .el_lv1Heading > span { 11 | position: relative; 12 | display: inline-block; 13 | transform: translateY(-20%); 14 | } 15 | 16 | .el_lv1Heading > span::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -10px; 20 | left: 50%; 21 | width: 80px; 22 | height: 1px; 23 | background-color: currentColor; 24 | transform: translateX(-50%); 25 | } 26 | 27 | .el_lv2Heading { 28 | margin: 30px; 29 | padding-bottom: 10px; 30 | border-bottom: 4px solid #e25c00; 31 | font-size: 1.75rem; 32 | font-weight: bold; 33 | } 34 | 35 | .el_lv3Heading { 36 | margin: 30px; 37 | padding-bottom: 6px; 38 | border-bottom: 2px solid #e25c00; 39 | font-size: 1.5rem; 40 | font-weight: bold; 41 | } 42 | 43 | .el_lv4Heading { 44 | margin: 30px; 45 | padding-left: 6px; 46 | border-left: 2px solid #e25c00; 47 | font-size: 1.25rem; 48 | font-weight: bold; 49 | } 50 | 51 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-4-precss.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .el_lv1Heading > span { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .el_lv1Heading > span::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .el_lv2Heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .el_lv3Heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } 39 | 40 | .el_lv4Heading { 41 | padding-left: 6px; 42 | border-left: 2px solid #e25c00; 43 | font-size: 1.25rem; 44 | font-weight: bold; 45 | } 46 | 47 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-5-bem.css: -------------------------------------------------------------------------------- 1 | .level1-heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .level1-heading__inner { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .level1-heading__inner::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .level2-heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .level3-heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } 39 | 40 | .level4-heading { 41 | padding-left: 6px; 42 | border-left: 2px solid #e25c00; 43 | font-size: 1.25rem; 44 | font-weight: bold; 45 | } 46 | 47 | .level5-heading { 48 | color: #e25c00; 49 | font-size: 1.125rem; 50 | font-weight: bold; 51 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-5-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | margin:30px; 3 | padding: 30px 10px; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: 1.75rem; 7 | text-align: center; 8 | } 9 | 10 | .el_lv1Heading > span { 11 | position: relative; 12 | display: inline-block; 13 | transform: translateY(-20%); 14 | } 15 | 16 | .el_lv1Heading > span::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -10px; 20 | left: 50%; 21 | width: 80px; 22 | height: 1px; 23 | background-color: currentColor; 24 | transform: translateX(-50%); 25 | } 26 | 27 | .el_lv2Heading { 28 | margin: 30px; 29 | padding-bottom: 10px; 30 | border-bottom: 4px solid #e25c00; 31 | font-size: 1.75rem; 32 | font-weight: bold; 33 | } 34 | 35 | .el_lv3Heading { 36 | margin: 30px; 37 | padding-bottom: 6px; 38 | border-bottom: 2px solid #e25c00; 39 | font-size: 1.5rem; 40 | font-weight: bold; 41 | } 42 | 43 | .el_lv4Heading { 44 | margin: 30px; 45 | padding-left: 6px; 46 | border-left: 2px solid #e25c00; 47 | font-size: 1.25rem; 48 | font-weight: bold; 49 | } 50 | 51 | .el_lv5Heading { 52 | margin: 30px; 53 | color: #e25c00; 54 | font-size: 1.125rem; 55 | font-weight: bold; 56 | } 57 | 58 | 59 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-5-precss.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .el_lv1Heading > span { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .el_lv1Heading > span::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .el_lv2Heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .el_lv3Heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } 39 | 40 | .el_lv4Heading { 41 | padding-left: 6px; 42 | border-left: 2px solid #e25c00; 43 | font-size: 1.25rem; 44 | font-weight: bold; 45 | } 46 | 47 | .el_lv5Heading { 48 | color: #e25c00; 49 | font-size: 1.125rem; 50 | font-weight: bold; 51 | } 52 | 53 | 54 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-6-bem.css: -------------------------------------------------------------------------------- 1 | .level1-heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .level1-heading__inner { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .level1-heading__inner::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .level2-heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .level3-heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } 39 | 40 | .level4-heading { 41 | padding-left: 6px; 42 | border-left: 2px solid #e25c00; 43 | font-size: 1.25rem; 44 | font-weight: bold; 45 | } 46 | 47 | .level5-heading { 48 | color: #e25c00; 49 | font-size: 1.125rem; 50 | font-weight: bold; 51 | } 52 | 53 | .level6-heading { 54 | font-size: 1.125rem; 55 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-6-precss.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .el_lv1Heading > span { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .el_lv1Heading > span::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | 26 | .el_lv2Heading { 27 | padding-bottom: 10px; 28 | border-bottom: 4px solid #e25c00; 29 | font-size: 1.75rem; 30 | font-weight: bold; 31 | } 32 | 33 | .el_lv3Heading { 34 | padding-bottom: 6px; 35 | border-bottom: 2px solid #e25c00; 36 | font-size: 1.5rem; 37 | font-weight: bold; 38 | } 39 | 40 | .el_lv4Heading { 41 | padding-left: 6px; 42 | border-left: 2px solid #e25c00; 43 | font-size: 1.25rem; 44 | font-weight: bold; 45 | } 46 | 47 | .el_lv5Heading { 48 | color: #e25c00; 49 | font-size: 1.125rem; 50 | font-weight: bold; 51 | } 52 | 53 | .el_lv6Heading { 54 | font-size: 1.125rem; 55 | } 56 | 57 | 58 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-bem.css: -------------------------------------------------------------------------------- 1 | .level1-heading { 2 | /* margin: 30px; */ 3 | padding: 30px 10px; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: 1.75rem; 7 | text-align: center; 8 | } 9 | 10 | .level1-heading__inner { 11 | position: relative; 12 | display: inline-block; 13 | transform: translateY(-20%); 14 | } 15 | 16 | .level1-heading__inner::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -10px; 20 | left: 50%; 21 | width: 80px; 22 | height: 1px; 23 | background-color: currentColor; 24 | transform: translateX(-50%); 25 | } 26 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-ex-precss.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .eq_elmTtl { 4 | padding: 15px 20px; 5 | background-color: #d40152; 6 | color: #fff; 7 | font-size: 1.25rem; 8 | text-align: left; 9 | } 10 | 11 | .uq_elmTtl02 { 12 | padding: 10px 20px; 13 | background-color: #e25c00; 14 | color: #fff; 15 | font-size: 1.1rem; 16 | text-align: left; 17 | } 18 | -------------------------------------------------------------------------------- /chapter05/css/5-7-title-precss-ex.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | margin: 120px 30px 30px 30px; 3 | padding: 30px 10px; 4 | background-color: #e25c00; 5 | color: #fff; 6 | font-size: 1.75rem; 7 | text-align: center; 8 | } 9 | 10 | .el_lv1Heading > span { 11 | position: relative; 12 | display: inline-block; 13 | transform: translateY(-20%); 14 | } 15 | 16 | .el_lv1Heading > span::after { 17 | content: ''; 18 | position: absolute; 19 | bottom: -10px; 20 | left: 50%; 21 | width: 80px; 22 | height: 1px; 23 | background-color: currentColor; 24 | transform: translateX(-50%); 25 | } 26 | 27 | .el_lv1HeadingEx { 28 | margin: 30px; 29 | padding: 30px 10px; 30 | background-color: #e25c00; 31 | color: #fff; 32 | font-size: 1.75rem; 33 | text-align: center; 34 | } 35 | 36 | .el_lv1HeadingEx > span { 37 | position: relative; 38 | display: inline-block; 39 | /* transform: translateY(-20%); */ 40 | } 41 | 42 | .el_lv1HeadingEx > span::after { 43 | content: ''; 44 | position: absolute; 45 | bottom: -10px; 46 | left: 50%; 47 | width: 80px; 48 | height: 1px; 49 | background-color: currentColor; 50 | /* transform: translateX(-50%); */ 51 | } -------------------------------------------------------------------------------- /chapter05/css/5-7-title-precss.css: -------------------------------------------------------------------------------- 1 | .el_lv1Heading { 2 | padding: 30px 10px; 3 | background-color: #e25c00; 4 | color: #fff; 5 | font-size: 1.75rem; 6 | text-align: center; 7 | } 8 | 9 | .el_lv1Heading > span { 10 | position: relative; 11 | display: inline-block; 12 | transform: translateY(-20%); 13 | } 14 | 15 | .el_lv1Heading > span::after { 16 | content: ''; 17 | position: absolute; 18 | bottom: -10px; 19 | left: 50%; 20 | width: 80px; 21 | height: 1px; 22 | background-color: currentColor; 23 | transform: translateX(-50%); 24 | } 25 | -------------------------------------------------------------------------------- /chapter05/css/5-8-comment-bem.css: -------------------------------------------------------------------------------- 1 | .caution-text { 2 | color: #d40152; 3 | } 4 | 5 | .note-text { 6 | font-size: .75rem; 7 | } -------------------------------------------------------------------------------- /chapter05/css/5-8-comment-precss.css: -------------------------------------------------------------------------------- 1 | .el_caution { 2 | color: #d40152; 3 | } 4 | 5 | .el_note { 6 | font-size: .75rem; 7 | } -------------------------------------------------------------------------------- /chapter06/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/.DS_Store -------------------------------------------------------------------------------- /chapter06/6-13-jumbotron-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

16 | 귀사의 비즈니스에 적절한 전략을 제안함으로써 17 |
18 | '성과'에 기여하겠습니다. 19 |

20 |
21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter06/6-13-jumbotron-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

16 | 귀사의 비즈니스에 적절한 전략을 제안함으로써 17 |
18 | '성과'에 기여하겠습니다. 19 |

20 |
21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter06/6-15-ul-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-15-ul-horizon-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-15-ul-horizon-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-15-ul-nest-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /chapter06/6-15-ul-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-16-ol-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
    14 |
  1. 15 | 웹 컨설팅 16 |
    2. 17 |
  2. 18 | 디지털 마케팅 지원 19 |
    3. 20 |
  3. 21 | CMS 구축 22 |
    4. 23 |
  4. 24 | CSS 설계 25 |
    5. 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-16-ol-nest-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
    14 |
  1. 15 | 웹 컨설팅 16 |
    2. 17 |
  2. 18 | 디지털 마케팅 지원 19 |
    3. 20 |
  3. 21 | CMS 구축 22 |
    4. 23 |
  4. 24 | CSS 설계 25 |
      26 |
    1. 27 | BEM 28 |
      2. 29 |
    2. 30 | FLOCSS 31 |
      3. 32 |
    3. 33 | PRECSS 34 |
      4. 35 |
    36 |
    5. 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /chapter06/6-16-ol-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
    14 |
  1. 15 | 웹 컨설팅 16 |
    2. 17 |
  2. 18 | 디지털 마케팅 지원 19 |
    3. 20 |
  3. 21 | CMS 구축 22 |
    4. 23 |
  4. 24 | CSS 설계 25 |
    5. 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-2-media-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 사진: 손에 든 스마트폰 13 |
14 |
15 |

16 | 사용자를 고려한 설계로 만족스러운 체험을 17 |

18 |

19 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
20 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 21 | 사용자 체험을 제공합니다. 22 |

23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-2-media-half-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 사진: 손에 든 스마트폰 13 |
14 |
15 |

16 | 사용자를 고려한 설계로 만족스러운 체험을 17 |

18 |

19 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
20 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 21 | 사용자 체험을 제공합니다. 22 |

23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-2-media-half-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 사진: 손에 든 스마트폰 13 |
14 |
15 |

16 | 사용자를 고려한 설계로 만족스러운 체험을 17 |

18 |

19 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
20 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 21 | 사용자 체험을 제공합니다. 22 |

23 |
24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter06/6-2-media-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 사진: 손에 든 스마트폰 13 |
14 |
15 |

16 | 사용자를 고려한 설계로 만족스러운 체험을 17 |

18 |

19 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
20 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 사용자 체험을 제공합니다. 21 |

22 |
23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter06/6-2-media-reverse-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 22 | 사용자 체험을 제공합니다. 23 |

24 |
25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter06/6-2-media-reverse-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 사진: 손에 든 스마트폰 14 |
15 |
16 |

17 | 사용자를 고려한 설계로 만족스러운 체험을 18 |

19 |

20 | 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.
21 | 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 22 | 사용자 체험을 제공합니다. 23 |

24 |
25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter06/6-3-badge-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | New 13 | 14 |
15 | 사진: HTML 코드가 표시된 화면 16 |
17 |
18 |

19 | 웹사이트 구축 20 |

21 |

22 | 사용자에게 최고의 체험을 제공하는 크리에이티브와 테크놀로지를 만들어 드립니다. 23 |

24 |
25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter06/6-3-badge-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | New 13 | 14 |
15 | 사진: HTML 코드가 표시된 화면 16 |
17 |
18 |

19 | 웹사이트 구축 20 |

21 |

22 | 사용자에게 최고의 체험을 제공하는 크리에이티브와 테크놀로지를 만들어 드립니다. 23 |

24 |
25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter06/6-3-card-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 사진: HTML 코드가 표시된 화면 13 |
14 |
15 |

16 | 웹사이트 구축 17 |

18 |

19 | 사용자에게 최고의 체험을 제공하는 크리에이티브와 테크놀로지를 만들어 드립니다. 20 |

21 |
22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter06/6-3-card-link-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 사진: HTML 코드가 표시된 화면 14 |
15 |
16 |

17 | 웹사이트 구축 18 |

19 |

20 | 사용자에게 최고의 체험을 제공하는 크리에이티브와 테크놀로지를 만들어 드립니다. 21 |

22 |
23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter06/6-3-card-link-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 사진: HTML 코드가 표시된 화면 14 |
15 |
16 |

17 | 웹사이트 구축 18 |

19 |

20 | 사용자에게 최고의 체험을 제공하는 크리에이티브와 테크놀로지를 만들어 드립니다. 21 |

22 |
23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter06/6-3-card-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 사진: HTML 코드가 표시된 화면 13 |
14 |
15 |

16 | 웹사이트 구축 17 |

18 |

19 | 사용자에게 최고의 체험을 제공하는 크리에이티브와 테크놀로지를 만들어 드립니다. 20 |

21 |
22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter06/6-4-table-horizontal-precss-ex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
이름홍길동
소속주식회사 24-7／주식회사 제이펍
직종테크니컬 디렉터 / 시니어 엔지니어
특기 분야CSS 설계, HubSpot CMS
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /chapter06/6-4-table-horizontal-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
이름홍길동
소속주식회사 24-7／주식회사 제이펍
직종테크니컬 디렉터 / 시니어 엔지니어
특기 분야CSS 설계, HubSpot CMS
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /chapter06/6-8-navi-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter06/6-9-cta-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
14 |

15 | 편하게 문의주십시오. 16 |

17 |

18 | 당사 서비스나 제품에 관해 궁금한 점은 편하게 문의주십시오.
19 | → 문의하기 20 |

21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter06/6-9-cta-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 |
13 |

14 | 편하게 문의주십시오. 15 |

16 |

17 | 당사 서비스나 제품에 관해 궁금한 점은 편하게 문의주십시오.
18 | → 문의하기 19 |

20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter06/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/.DS_Store -------------------------------------------------------------------------------- /chapter06/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/.DS_Store -------------------------------------------------------------------------------- /chapter06/assets/img/elements/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/.DS_Store -------------------------------------------------------------------------------- /chapter06/assets/img/elements/1000x200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/1000x200.png -------------------------------------------------------------------------------- /chapter06/assets/img/elements/analysis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/analysis.jpg -------------------------------------------------------------------------------- /chapter06/assets/img/elements/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/code.jpg -------------------------------------------------------------------------------- /chapter06/assets/img/elements/global.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/global.jpg -------------------------------------------------------------------------------- /chapter06/assets/img/elements/jumbotron-bg-org.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/jumbotron-bg-org.jpg -------------------------------------------------------------------------------- /chapter06/assets/img/elements/jumbotron-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/jumbotron-bg.jpg -------------------------------------------------------------------------------- /chapter06/assets/img/elements/marketing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/marketing.jpg -------------------------------------------------------------------------------- /chapter06/assets/img/elements/persona-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/persona-small.jpg -------------------------------------------------------------------------------- /chapter06/assets/img/elements/persona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter06/assets/img/elements/persona.jpg -------------------------------------------------------------------------------- /chapter06/css/6-11-faq-bem.css: -------------------------------------------------------------------------------- 1 | .faq { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .faq > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .faq__row { 10 | position: relative; 11 | display: flex; 12 | align-items: flex-start; 13 | box-sizing: content-box; 14 | min-height: 45px; 15 | padding-left: 60px; 16 | } 17 | 18 | .faq__row--question { 19 | margin-bottom: 15px; 20 | font-size: 1.125rem; 21 | font-weight: bold; 22 | } 23 | 24 | .faq__question-text { 25 | padding-top: 12px; 26 | } 27 | 28 | .faq__row--answer { 29 | padding-bottom: 20px; 30 | margin-bottom: 20px; 31 | border-bottom: 1px solid #ddd; 32 | } 33 | 34 | .faq__icon { 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 45px; 39 | height: 45px; 40 | border-radius: 50%; 41 | font-weight: normal; 42 | line-height: 45px; 43 | text-align: center; 44 | } 45 | 46 | .faq__icon--question { 47 | background-color: #e25c00; 48 | color: #fff; 49 | } 50 | 51 | .faq__icon--answer { 52 | background: #efefef; 53 | color: #e25c00; 54 | } 55 | 56 | .faq__answer-body { 57 | padding-top: 12px; 58 | } 59 | 60 | .faq__answer-body>*:last-child { 61 | margin-bottom: 0; 62 | } 63 | 64 | .faq__answer-text { 65 | margin-bottom: 20px; 66 | } -------------------------------------------------------------------------------- /chapter06/css/6-11-faq-precss-ex.css: -------------------------------------------------------------------------------- 1 | .bl_faq { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .bl_faq > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bl_faq_q, .bl_faq_a { 10 | position: relative; 11 | display: flex; 12 | align-items: flex-start; 13 | box-sizing: content-box; 14 | min-height: 45px; 15 | padding-left: 60px; 16 | } 17 | 18 | .bl_faq_q { 19 | margin-bottom: 15px; 20 | font-size: 1.125rem; 21 | font-weight: bold; 22 | } 23 | 24 | .bl_faq_q_txt { 25 | padding-top: 12px; 26 | } 27 | 28 | .bl_faq_a { 29 | padding-bottom: 20px; 30 | margin-bottom: 20px; 31 | border-bottom: 1px solid #ddd; 32 | } 33 | 34 | .bl_faq_icon { 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 45px; 39 | height: 45px; 40 | border-radius: 50%; 41 | font-weight: normal; 42 | line-height: 45px; 43 | text-align: center; 44 | } 45 | 46 | .bl_faq_q .bl_faq_icon { 47 | background-color: #e25c00; 48 | color: #fff; 49 | } 50 | 51 | .bl_faq_a .bl_faq_icon { 52 | background: #efefef; 53 | color: #e25c00; 54 | } 55 | 56 | .bl_faq_a_body { 57 | padding-top: 12px; 58 | } 59 | 60 | .bl_faq_a_body>*:last-child { 61 | margin-bottom: 0; 62 | } 63 | 64 | .bl_faq_a_txt { 65 | margin-bottom: 20px; 66 | } -------------------------------------------------------------------------------- /chapter06/css/6-11-faq-precss.css: -------------------------------------------------------------------------------- 1 | .bl_faq { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .bl_faq > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bl_faq_q, .bl_faq_a { 10 | position: relative; 11 | display: flex; 12 | align-items: flex-start; 13 | box-sizing: content-box; 14 | min-height: 45px; 15 | padding-left: 60px; 16 | } 17 | 18 | .bl_faq_q { 19 | margin-bottom: 15px; 20 | font-size: 1.125rem; 21 | font-weight: bold; 22 | } 23 | 24 | .bl_faq_q_txt { 25 | padding-top: 12px; 26 | } 27 | 28 | .bl_faq_a { 29 | padding-bottom: 20px; 30 | margin-bottom: 20px; 31 | border-bottom: 1px solid #ddd; 32 | } 33 | 34 | .bl_faq_icon { 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 45px; 39 | height: 45px; 40 | border-radius: 50%; 41 | font-weight: normal; 42 | line-height: 45px; 43 | text-align: center; 44 | } 45 | 46 | .bl_faq_q .bl_faq_icon { 47 | background-color: #e25c00; 48 | color: #fff; 49 | } 50 | 51 | .bl_faq_a .bl_faq_icon { 52 | background: #efefef; 53 | color: #e25c00; 54 | } 55 | 56 | .bl_faq_a_body { 57 | padding-top: 12px; 58 | } 59 | 60 | .bl_faq_a_body>*:last-child { 61 | margin-bottom: 0; 62 | } 63 | 64 | .bl_faq_a_txt { 65 | margin-bottom: 20px; 66 | } -------------------------------------------------------------------------------- /chapter06/css/6-13-jumbotron-bem.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 768px) { 2 | .only-lg { 3 | display: none; 4 | } 5 | } 6 | 7 | .jumbotron { 8 | height: calc(69.44444vw + -233.33333px); 9 | background-position: center center; 10 | background-size: cover; 11 | } 12 | 13 | .jumbotron__inner { 14 | position: relative; 15 | max-width: 1230px; 16 | height: 100%; 17 | margin-right: auto; 18 | margin-left: auto; 19 | } 20 | 21 | .jumbotron__title { 22 | position: absolute; 23 | top: 50%; 24 | left: 0; 25 | padding: 40px; 26 | background-color: rgba(0, 0, 0, .75); 27 | color: #fff; 28 | font-size: calc(3.704vw - 8.444px); 29 | line-height: 1.5; 30 | transform: translateY(-50%); 31 | } 32 | 33 | @media screen and (min-width: 1200px) { 34 | .jumbotron { 35 | height: 600px; 36 | } 37 | 38 | .jumbotron__title { 39 | font-size: 2.25rem; 40 | } 41 | } 42 | 43 | @media screen and (max-width: 768px) { 44 | .jumbotron { 45 | height: 300px; 46 | } 47 | 48 | .jumbotron__title { 49 | left: 50%; 50 | width: 90%; 51 | padding: 15px; 52 | font-size: 1.25rem; 53 | text-align: center; 54 | transform: translate(-50%, -50%); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /chapter06/css/6-13-jumbotron-precss.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 768px) { 2 | .lg_only { 3 | display: none !important; 4 | } 5 | } 6 | 7 | .bl_jumbotron { 8 | height: calc(69.44444vw + -233.33333px); 9 | background-position: center center; 10 | background-size: cover; 11 | } 12 | 13 | .bl_jumbotron_inner { 14 | position: relative; 15 | max-width: 1230px; 16 | height: 100%; 17 | margin-right: auto; 18 | margin-left: auto; 19 | } 20 | 21 | .bl_jumbotron_ttl { 22 | position: absolute; 23 | top: 50%; 24 | left: 0; 25 | padding: 40px; 26 | background-color: rgba(0, 0, 0, .75); 27 | color: #fff; 28 | font-size: calc(3.704vw - 8.444px); 29 | line-height: 1.5; 30 | transform: translateY(-50%); 31 | } 32 | 33 | @media screen and (min-width: 1200px) { 34 | .bl_jumbotron { 35 | height: 600px; 36 | } 37 | 38 | .bl_jumbotron_ttl { 39 | font-size: 2.25rem; 40 | } 41 | } 42 | 43 | @media screen and (max-width: 768px) { 44 | .bl_jumbotron { 45 | height: 300px; 46 | } 47 | 48 | .bl_jumbotron_ttl { 49 | left: 50%; 50 | width: 90%; 51 | padding: 15px; 52 | font-size: 1.25rem; 53 | text-align: center; 54 | transform: translate(-50%, -50%); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /chapter06/css/6-14-postlist-bem.css: -------------------------------------------------------------------------------- 1 | .vertical-posts { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .vertical-posts__item { 6 | padding-top: 15px; 7 | padding-bottom: 15px; 8 | border-bottom: 1px solid #ddd; 9 | } 10 | 11 | .vertical-posts__item:first-child { 12 | padding-top: 0; 13 | } 14 | 15 | .vertical-posts__header { 16 | margin-bottom: 10px; 17 | } 18 | 19 | .vertical-posts__date { 20 | font-size: .875rem; 21 | } 22 | 23 | .vertical-posts__title { 24 | text-decoration: none; 25 | } 26 | 27 | .vertical-posts__title:focus, 28 | .vertical-posts__title:hover { 29 | text-decoration: underline; 30 | } 31 | -------------------------------------------------------------------------------- /chapter06/css/6-14-postlist-precss.css: -------------------------------------------------------------------------------- 1 | .bl_vertPosts { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .bl_vertPosts_item { 6 | padding-top: 15px; 7 | padding-bottom: 15px; 8 | border-bottom: 1px solid #ddd; 9 | } 10 | 11 | .bl_vertPosts_item:first-child { 12 | padding-top: 0; 13 | } 14 | 15 | .bl_vertPosts_header { 16 | margin-bottom: 10px; 17 | } 18 | 19 | .bl_vertPosts_date { 20 | font-size: .875rem; 21 | } 22 | 23 | .bl_vertPosts_ttl { 24 | text-decoration: none; 25 | } 26 | 27 | .bl_vertPosts_ttl:focus, 28 | .bl_vertPosts_ttl:hover { 29 | text-decoration: underline; 30 | } 31 | -------------------------------------------------------------------------------- /chapter06/css/6-15-ul-bem.css: -------------------------------------------------------------------------------- 1 | .bullet-list { 2 | /* css-wipeではスタイリングなし */ 3 | } 4 | 5 | .bullet-list > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bullet-list__item { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bullet-list__item::before { 16 | content: ''; 17 | position: absolute; 18 | top: .5em; 19 | left: 0; 20 | display: block; 21 | width: .4em; 22 | height: .4em; 23 | background-color: #e25c00; 24 | border-radius: 50%; 25 | } 26 | -------------------------------------------------------------------------------- /chapter06/css/6-15-ul-horizon-bem.css: -------------------------------------------------------------------------------- 1 | .bullet-list { 2 | /* css-wipeではスタイリングなし */ 3 | } 4 | 5 | .bullet-list > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bullet-list__item { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bullet-list__item::before { 16 | content: ''; 17 | position: absolute; 18 | top: .5em; 19 | left: 0; 20 | display: block; 21 | width: .4em; 22 | height: .4em; 23 | background-color: #e25c00; 24 | border-radius: 50%; 25 | } 26 | 27 | .bullet-list--horizontal { 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: space-between; 31 | margin-bottom: -10px; 32 | } 33 | 34 | .bullet-list--horizontal .bullet-list__item { 35 | flex: calc(50% - 5px); 36 | margin-right: 10px; 37 | } 38 | 39 | .bullet-list--horizontal .bullet-list__item:nth-of-type(even) { 40 | margin-right: 0; 41 | } 42 | -------------------------------------------------------------------------------- /chapter06/css/6-15-ul-horizon-precss.css: -------------------------------------------------------------------------------- 1 | .bl_bulletList { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .bl_bulletList > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bl_bulletList > li { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bl_bulletList > li::before { 16 | content: ''; 17 | position: absolute; 18 | top: .5em; 19 | left: 0; 20 | display: block; 21 | width: .4em; 22 | height: .4em; 23 | background-color: #e25c00; 24 | border-radius: 50%; 25 | } 26 | 27 | .bl_bulletList.bl_bulletList__horiz { 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: space-between; 31 | margin-bottom: -10px; 32 | } 33 | 34 | .bl_bulletList.bl_bulletList__horiz > li { 35 | flex: calc(50% - 5px); 36 | margin-right: 10px; 37 | } 38 | 39 | .bl_bulletList.bl_bulletList__horiz > li:nth-of-type(even) { 40 | margin-right: 0; 41 | } 42 | -------------------------------------------------------------------------------- /chapter06/css/6-15-ul-nest-bem.css: -------------------------------------------------------------------------------- 1 | .bullet-list { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .bullet-list > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bullet-list__item { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bullet-list__item::before { 16 | content: ''; 17 | position: absolute; 18 | top: .5em; 19 | left: 0; 20 | display: block; 21 | width: .4em; 22 | height: .4em; 23 | background-color: #e25c00; 24 | border-radius: 50%; 25 | } 26 | 27 | .bullet-list--horizontal { 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: space-between; 31 | margin-bottom: -10px; 32 | } 33 | 34 | .bullet-list--horizontal .bullet-list__item { 35 | flex: calc(50% - 5px); 36 | margin-right: 10px; 37 | } 38 | 39 | .bullet-list--horizontal .bullet-list__item:nth-of-type(even) { 40 | margin-right: 0; 41 | } 42 | 43 | .child-bullet-list { 44 | padding-left: 1.5em; 45 | margin-top: 10px; 46 | list-style-type: circle; 47 | } 48 | 49 | .child-bullet-list > *:last-child { 50 | margin-bottom: 0; 51 | } 52 | 53 | .child-bullet-list__item { 54 | margin-bottom: 10px; 55 | } 56 | -------------------------------------------------------------------------------- /chapter06/css/6-15-ul-nest-precss.css: -------------------------------------------------------------------------------- 1 | .bl_bulletList { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .bl_bulletList > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bl_bulletList > li { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bl_bulletList > li::before { 16 | content: ''; 17 | position: absolute; 18 | top: .5em; 19 | left: 0; 20 | display: block; 21 | width: .4em; 22 | height: .4em; 23 | background-color: #e25c00; 24 | border-radius: 50%; 25 | } 26 | 27 | .bl_bulletList.bl_bulletList__horiz { 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: space-between; 31 | margin-bottom: -10px; 32 | } 33 | 34 | .bl_bulletList.bl_bulletList__horiz > li { 35 | flex: calc(50% - 5px); 36 | margin-right: 10px; 37 | } 38 | 39 | .bl_bulletList.bl_bulletList__horiz > li:nth-of-type(even) { 40 | margin-right: 0; 41 | } 42 | 43 | 44 | 45 | .bl_bulletList ul { 46 | padding-left: 1.5em; 47 | margin-top: 10px; 48 | list-style-type: circle; 49 | } 50 | 51 | .bl_bulletList ul > *:last-child { 52 | margin-bottom: 0; 53 | } 54 | 55 | .bl_bulletList ul > li { 56 | margin-bottom: 10px; 57 | } 58 | 59 | -------------------------------------------------------------------------------- /chapter06/css/6-15-ul-precss.css: -------------------------------------------------------------------------------- 1 | .bl_bulletList { 2 | /* css-wipe에는 스타일링 없음 */ 3 | } 4 | 5 | .bl_bulletList > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bl_bulletList > li { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bl_bulletList > li::before { 16 | content: ''; 17 | position: absolute; 18 | top: .5em; 19 | left: 0; 20 | display: block; 21 | width: .4em; 22 | height: .4em; 23 | background-color: #e25c00; 24 | border-radius: 50%; 25 | } 26 | -------------------------------------------------------------------------------- /chapter06/css/6-16-ol-bem.css: -------------------------------------------------------------------------------- 1 | .order-list { 2 | counter-reset: order-list; 3 | } 4 | 5 | .order-list > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .order-list__item { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .order-list__item::before { 16 | content: counter(order-list) '. '; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | color: #e25c00; 21 | font-weight: bold; 22 | counter-increment: order-list; 23 | } 24 | -------------------------------------------------------------------------------- /chapter06/css/6-16-ol-nest-bem.css: -------------------------------------------------------------------------------- 1 | .order-list { 2 | counter-reset: order-list; 3 | } 4 | 5 | .order-list > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .order-list__item { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .order-list__item::before { 16 | content: counter(order-list) '. '; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | color: #e25c00; 21 | font-weight: bold; 22 | counter-increment: order-list; 23 | } 24 | 25 | 26 | .child-order-list { 27 | margin-top: 10px; 28 | counter-reset: child-order-list; 29 | } 30 | 31 | .child-order-list > *:last-child { 32 | margin-bottom: 0; 33 | } 34 | 35 | .child-order-list__item { 36 | position: relative; 37 | padding-left: 1em; 38 | margin-top: 10px; 39 | } 40 | 41 | .child-order-list__item::before { 42 | content: counter(child-order-list) '. '; 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | color: #e25c00; 47 | counter-increment: child-order-list; 48 | } 49 | -------------------------------------------------------------------------------- /chapter06/css/6-16-ol-nest-precss.css: -------------------------------------------------------------------------------- 1 | .bl_orderList { 2 | counter-reset: bl_orderList; 3 | } 4 | 5 | .bl_orderList > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bl_orderList > li { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bl_orderList > li::before { 16 | content: counter(bl_orderList) '. '; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | color: #e25c00; 21 | font-weight: bold; 22 | counter-increment: bl_orderList; 23 | } 24 | 25 | .bl_orderList ol { 26 | margin-top: 10px; 27 | counter-reset: bl_childOrderList; 28 | } 29 | 30 | .bl_orderList ol > *:last-child { 31 | margin-bottom: 0; 32 | } 33 | 34 | .bl_orderList ol > li { 35 | position: relative; 36 | padding-left: 1em; 37 | margin-top: 10px; 38 | } 39 | 40 | .bl_orderList ol > li::before { 41 | content: counter(bl_childOrderList) '. '; 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | color: #e25c00; 46 | counter-increment: bl_childOrderList; 47 | } 48 | -------------------------------------------------------------------------------- /chapter06/css/6-16-ol-precss.css: -------------------------------------------------------------------------------- 1 | .bl_orderList { 2 | counter-reset: bl_orderList; 3 | } 4 | 5 | .bl_orderList > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | 9 | .bl_orderList > li { 10 | position: relative; 11 | padding-left: 1em; 12 | margin-bottom: 10px; 13 | } 14 | 15 | .bl_orderList > li::before { 16 | content: counter(bl_orderList) '. '; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | color: #e25c00; 21 | font-weight: bold; 22 | counter-increment: bl_orderList; 23 | } 24 | -------------------------------------------------------------------------------- /chapter06/css/6-2-media-bem.css: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .media__img-wrapper { 7 | flex: 0 1 27.58333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .media__img { 12 | width: 100%; 13 | } 14 | 15 | .media__body { 16 | flex: 1; 17 | } 18 | 19 | .media__body > *:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .media__title { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .media__text { 30 | /* css-wipe에는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .media { 35 | display: block; 36 | } 37 | .media__img-wrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /chapter06/css/6-2-media-half-bem.css: -------------------------------------------------------------------------------- 1 | .half-media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .half-media__img-wrapper { 7 | flex: 0 1 48.33333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .half-media__img { 12 | width: 100%; 13 | } 14 | 15 | .half-media__body { 16 | flex: 1; 17 | } 18 | 19 | .half-media__body > *:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .half-media__title { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .half-media__text { 30 | /* css-wipe에서는 스탕일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .half-media { 35 | display: block; 36 | } 37 | .half-media__img-wrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } -------------------------------------------------------------------------------- /chapter06/css/6-2-media-half-precss.css: -------------------------------------------------------------------------------- 1 | .bl_halfMedia { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .bl_halfMedia_imgWrapper { 7 | flex: 0 1 48.33333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .bl_halfMedia_imgWrapper>img { 12 | width: 100%; 13 | } 14 | 15 | .bl_halfMedia_body { 16 | flex: 1; 17 | } 18 | 19 | .bl_halfMedia_body > *:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .bl_halfMedia_ttl { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .bl_halfMedia_txt { 30 | /* css-wipe에서는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .bl_halfMedia { 35 | display: block; 36 | } 37 | .bl_halfMedia_imgWrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } -------------------------------------------------------------------------------- /chapter06/css/6-2-media-precss-ex.css: -------------------------------------------------------------------------------- 1 | .bl_media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .bl_media_imgWrapper { 7 | flex: 0 1 27.58333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .bl_media_imgWrapper > img { 12 | width: 100%; 13 | } 14 | 15 | .bl_media_body { 16 | flex: 1; 17 | } 18 | 19 | .bl_media_body > *:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .bl_media_ttl { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .bl_media_txt { 30 | /* css-wipe에는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .bl_media { 35 | display: block; 36 | } 37 | .bl_media_imgWrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } 42 | 43 | .bl_media.bl_media__rev { 44 | flex-direction: row-reverse; 45 | } 46 | 47 | .bl_media__rev .bl_media_imgWrapper { 48 | margin-right: 0; 49 | } 50 | 51 | .bl_media__rev .bl_media_body { 52 | margin-right: 3.33333%; 53 | text-align: right; 54 | } 55 | 56 | @media screen and (max-width: 768px) { 57 | .bl_media__rev .bl_media_body { 58 | margin-right: 0; 59 | } 60 | } -------------------------------------------------------------------------------- /chapter06/css/6-2-media-precss.css: -------------------------------------------------------------------------------- 1 | .bl_media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .bl_media_imgWrapper { 7 | flex: 0 1 27.58333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .bl_media_imgWrapper>img { 12 | width: 100%; 13 | } 14 | 15 | .bl_media_body { 16 | flex: 1; 17 | } 18 | 19 | .bl_media_body>*:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .bl_media_ttl { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .bl_media_txt { 30 | /* css-wipe에는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .bl_media { 35 | display: block; 36 | } 37 | .bl_media_imgWrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } -------------------------------------------------------------------------------- /chapter06/css/6-2-media-reverse-bem.css: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .media__img-wrapper { 7 | flex: 0 1 27.58333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .media__img { 12 | width: 100%; 13 | } 14 | 15 | .media__body { 16 | flex: 1; 17 | } 18 | 19 | .media__body>*:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .media__title { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .media__text { 30 | /* css-wipe에는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .media { 35 | display: block; 36 | } 37 | .media__img-wrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } 42 | 43 | .media--reverse { 44 | flex-direction: row-reverse; 45 | } 46 | 47 | .media--reverse .media__img-wrapper { 48 | margin-right: 0; 49 | } 50 | 51 | .media--reverse .media__body { 52 | margin-right: 3.33333%; 53 | text-align: right; 54 | } 55 | 56 | @media screen and (max-width: 768px) { 57 | .media--reverse .media__body { 58 | margin-right: 0; 59 | } 60 | } -------------------------------------------------------------------------------- /chapter06/css/6-2-media-reverse-precss.css: -------------------------------------------------------------------------------- 1 | .bl_media { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .bl_media_imgWrapper { 7 | flex: 0 1 27.58333%; 8 | margin-right: 3.33333%; 9 | } 10 | 11 | .bl_media_imgWrapper>img { 12 | width: 100%; 13 | } 14 | 15 | .bl_media_body { 16 | flex: 1; 17 | } 18 | 19 | .bl_media_body>*:last-child { 20 | margin-bottom: 0; 21 | } 22 | 23 | .bl_media_ttl { 24 | margin-bottom: 10px; 25 | font-size: 1.125rem; 26 | font-weight: bold; 27 | } 28 | 29 | .bl_media_txt { 30 | /* css-wipe에는 스타일링 없음 */ 31 | } 32 | 33 | @media screen and (max-width: 768px) { 34 | .bl_media { 35 | display: block; 36 | } 37 | .bl_media_imgWrapper { 38 | margin-right: 0; 39 | margin-bottom: 20px; 40 | } 41 | } 42 | 43 | .bl_media.bl_media__rev { 44 | flex-direction: row-reverse; 45 | } 46 | 47 | .bl_media__rev .bl_media_imgWrapper { 48 | margin-right: 0; 49 | } 50 | 51 | .bl_media__rev .bl_media_body { 52 | margin-right: 3.33333%; 53 | text-align: right; 54 | } 55 | 56 | @media screen and (max-width: 768px) { 57 | .bl_media__rev .bl_media_body { 58 | margin-right: 0; 59 | } 60 | } -------------------------------------------------------------------------------- /chapter06/css/6-3-badge-bem.css: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | } 4 | 5 | .card__img-wrapper { 6 | position: relative; 7 | padding-top: 56.25%; 8 | overflow: hidden; 9 | } 10 | 11 | .card__img { 12 | position: absolute; 13 | top: 50%; 14 | width: 100%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | .card__body { 19 | padding: 15px; 20 | } 21 | 22 | .card__body > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .card__title { 27 | margin-bottom: 5px; 28 | font-size: 1.125rem; 29 | font-weight: bold; 30 | } 31 | 32 | .card__text { 33 | color: #777; 34 | } 35 | 36 | .card__badge { 37 | position: relative; 38 | } 39 | 40 | .card__badge::after { 41 | content: ''; 42 | position: absolute; 43 | z-index: 1; 44 | top: 0; 45 | left: 0; 46 | width: 0; 47 | height: 0; 48 | border-width: 3.75rem 3.75rem 0 0; 49 | border-style: solid; 50 | border-color: #e25c00 transparent transparent transparent; 51 | } 52 | 53 | .card__badge-text { 54 | position: absolute; 55 | z-index: 2; 56 | top: .5rem; 57 | left: .3125rem; 58 | color: #fff; 59 | font-size: .875rem; 60 | font-weight: bold; 61 | transform: rotate(-45deg); 62 | } 63 | 64 | -------------------------------------------------------------------------------- /chapter06/css/6-3-badge-precss.css: -------------------------------------------------------------------------------- 1 | .bl_card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | } 4 | 5 | .bl_card_imgWrapper { 6 | position: relative; 7 | padding-top: 56.25%; 8 | overflow: hidden; 9 | } 10 | 11 | .bl_card_imgWrapper > img { 12 | position: absolute; 13 | top: 50%; 14 | width: 100%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | .bl_card_body { 19 | padding: 15px; 20 | } 21 | 22 | .bl_card_body > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .bl_card_ttl { 27 | margin-bottom: 5px; 28 | font-size: 1.125rem; 29 | font-weight: bold; 30 | } 31 | 32 | .bl_card_txt { 33 | color: #777; 34 | } 35 | 36 | .bl_card_badge { 37 | position: relative; 38 | } 39 | 40 | .bl_card_badge::after { 41 | content: ''; 42 | position: absolute; 43 | z-index: 1; 44 | top: 0; 45 | left: 0; 46 | width: 0; 47 | height: 0; 48 | border-width: 3.75rem 3.75rem 0 0; 49 | border-style: solid; 50 | border-color: #e25c00 transparent transparent transparent; 51 | } 52 | 53 | .bl_card_badge_txt { 54 | position: absolute; 55 | z-index: 2; 56 | top: .5rem; 57 | left: .3125rem; 58 | color: #fff; 59 | font-size: .875rem; 60 | font-weight: bold; 61 | transform: rotate(-45deg); 62 | } 63 | 64 | -------------------------------------------------------------------------------- /chapter06/css/6-3-card-3-col-bem.css: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | } 4 | 5 | .card__img-wrapper { 6 | position: relative; 7 | padding-top: 56.25%; 8 | overflow: hidden; 9 | } 10 | 11 | .card__img { 12 | position: absolute; 13 | top: 50%; 14 | width: 100%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | .card__body { 19 | padding: 15px; 20 | } 21 | 22 | .card__body > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .card__title { 27 | margin-bottom: 5px; 28 | font-size: 1.125rem; 29 | font-weight: bold; 30 | } 31 | 32 | .card__text { 33 | color: #777; 34 | } 35 | 36 | .cards { 37 | display: flex; 38 | flex-wrap: wrap; 39 | } 40 | 41 | .cards--col3 { 42 | margin-bottom: -30px; 43 | } 44 | 45 | .cards--col3 > .cards__item { 46 | width: 31.707%; 47 | margin-right: 2.43902%; 48 | margin-bottom: 30px; 49 | } 50 | 51 | .cards--col3 > .cards__item:nth-of-type(3n) { 52 | margin-right: 0; 53 | } 54 | 55 | @media screen and (max-width: 768px) { 56 | .cards--col3 { 57 | margin-bottom: -20px; 58 | } 59 | 60 | .cards > .cards__item { 61 | width: 100%; 62 | margin-right: 0; 63 | margin-bottom: 20px; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /chapter06/css/6-3-card-bem.css: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | } 4 | 5 | .card__img-wrapper { 6 | position: relative; 7 | padding-top: 56.25%; 8 | overflow: hidden; 9 | } 10 | 11 | .card__img { 12 | position: absolute; 13 | top: 50%; 14 | width: 100%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | .card__body { 19 | padding: 15px; 20 | } 21 | 22 | .card__body > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .card__title { 27 | margin-bottom: 5px; 28 | font-size: 1.125rem; 29 | font-weight: bold; 30 | } 31 | 32 | .card__text { 33 | color: #777; 34 | } 35 | -------------------------------------------------------------------------------- /chapter06/css/6-3-card-link-bem.css: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | } 4 | 5 | .card__img-wrapper { 6 | position: relative; 7 | padding-top: 56.25%; 8 | overflow: hidden; 9 | } 10 | 11 | .card__img { 12 | position: absolute; 13 | top: 50%; 14 | width: 100%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | .card__body { 19 | padding: 15px; 20 | } 21 | 22 | .card__body > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .card__title { 27 | margin-bottom: 5px; 28 | font-size: 1.125rem; 29 | font-weight: bold; 30 | } 31 | 32 | .card__text { 33 | color: #777; 34 | } 35 | 36 | .card--link { 37 | display: block; 38 | color: currentColor; 39 | text-decoration: none; 40 | transition: .25s; 41 | } 42 | 43 | .card--link .card__title, 44 | .card--link .card__text { 45 | transition: .25s; 46 | } 47 | 48 | .card--link:focus, 49 | .card--link:hover { 50 | opacity: .75; 51 | } 52 | 53 | .card--link:focus .card__title, 54 | .card--link:focus .card__text, 55 | .card--link:hover .card__title, 56 | .card--link:hover .card__text { 57 | color: #e25c00; 58 | text-decoration: underline; 59 | } 60 | -------------------------------------------------------------------------------- /chapter06/css/6-3-card-link-precss.css: -------------------------------------------------------------------------------- 1 | .bl_card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | } 4 | 5 | .bl_card_imgWrapper { 6 | position: relative; 7 | padding-top: 56.25%; 8 | overflow: hidden; 9 | } 10 | 11 | .bl_card_imgWrapper > img { 12 | position: absolute; 13 | top: 50%; 14 | width: 100%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | .bl_card_body { 19 | padding: 15px; 20 | } 21 | 22 | .bl_card_body > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .bl_card_ttl { 27 | margin-bottom: 5px; 28 | font-size: 1.125rem; 29 | font-weight: bold; 30 | } 31 | 32 | .bl_card_txt { 33 | color: #777; 34 | } 35 | 36 | a.bl_card { 37 | display: block; 38 | color: currentColor; 39 | text-decoration: none; 40 | transition: .25s; 41 | } 42 | 43 | a.bl_card .bl_card_ttl, 44 | a.bl_card .bl_card_txt { 45 | transition: .25s; 46 | } 47 | 48 | a.bl_card:focus, 49 | a.bl_card:hover { 50 | opacity: .75; 51 | } 52 | 53 | a.bl_card:focus .bl_card_ttl, 54 | a.bl_card:focus .bl_card_txt, 55 | a.bl_card:hover .bl_card_ttl, 56 | a.bl_card:hover .bl_card_txt { 57 | color: #e25c00; 58 | text-decoration: underline; 59 | } 60 | -------------------------------------------------------------------------------- /chapter06/css/6-3-card-precss.css: -------------------------------------------------------------------------------- 1 | .bl_card { 2 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 3 | } 4 | 5 | .bl_card_imgWrapper { 6 | position: relative; 7 | padding-top: 56.25%; 8 | overflow: hidden; 9 | } 10 | 11 | .bl_card_imgWrapper > img { 12 | position: absolute; 13 | top: 50%; 14 | width: 100%; 15 | transform: translateY(-50%); 16 | } 17 | 18 | .bl_card_body { 19 | padding: 15px; 20 | } 21 | 22 | .bl_card_body > *:last-child { 23 | margin-bottom: 0; 24 | } 25 | 26 | .bl_card_ttl { 27 | margin-bottom: 5px; 28 | font-size: 1.125rem; 29 | font-weight: bold; 30 | } 31 | 32 | .bl_card_txt { 33 | color: #777; 34 | } 35 | -------------------------------------------------------------------------------- /chapter06/css/6-4-table-horizontal-bem-ex.css: -------------------------------------------------------------------------------- 1 | .horizontal-table { 2 | border: 1px solid #ddd; 3 | } 4 | 5 | .horizontal-table__inner { 6 | width: 100%; 7 | } 8 | 9 | .horizontal-table__header { 10 | width: 20%; 11 | padding: 15px; 12 | background-color: #efefef; 13 | border-bottom: 1px solid #ddd; 14 | font-weight: bold; 15 | vertical-align: middle; 16 | } 17 | 18 | .horizontal-table__text { 19 | padding: 15px; 20 | border-bottom: 1px solid #ddd; 21 | } 22 | 23 | .horizontal-table__row:last-child .horizontal-table__header, 24 | .horizontal-table__row:last-child .horizontal-table__text { 25 | border-bottom-width: 0; 26 | } 27 | 28 | @media screen and (max-width: 768px) { 29 | .horizontal-table--md-scroll { 30 | border-right-width: 0; 31 | overflow-x: auto; 32 | } 33 | .horizontal-table--md-scroll .horizontal-table__header, 34 | .horizontal-table--md-scroll .horizontal-table__text { 35 | white-space: nowrap; 36 | } 37 | .horizontal-table--md-scroll .horizontal-table__text { 38 | border-right: 1px solid #ddd; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /chapter06/css/6-4-table-horizontal-bem.css: -------------------------------------------------------------------------------- 1 | .horizontal-table { 2 | border: 1px solid #ddd; 3 | } 4 | 5 | .horizontal-table__inner { 6 | width: 100%; 7 | } 8 | 9 | .horizontal-table__header { 10 | width: 20%; 11 | padding: 15px; 12 | background-color: #efefef; 13 | border-bottom: 1px solid #ddd; 14 | font-weight: bold; 15 | vertical-align: middle; 16 | } 17 | 18 | .horizontal-table__text { 19 | padding: 15px; 20 | border-bottom: 1px solid #ddd; 21 | } 22 | 23 | .horizontal-table__row:last-child .horizontal-table__header, 24 | .horizontal-table__row:last-child .horizontal-table__text { 25 | border-bottom-width: 0; 26 | } 27 | -------------------------------------------------------------------------------- /chapter06/css/6-4-table-horizontal-precss-ex.css: -------------------------------------------------------------------------------- 1 | .bl_horizTable { 2 | border: 1px solid #ddd; 3 | } 4 | 5 | .bl_horizTable table { 6 | width: 100%; 7 | } 8 | 9 | .bl_horizTable th { 10 | width: 20%; 11 | padding: 15px; 12 | background-color: #efefef; 13 | border-bottom: 1px solid #ddd; 14 | font-weight: bold; 15 | vertical-align: middle; 16 | } 17 | 18 | .bl_horizTable td { 19 | padding: 15px; 20 | border-bottom: 1px solid #ddd; 21 | } 22 | 23 | .bl_horizTable tr:last-child th, 24 | .bl_horizTable tr:last-child td { 25 | border-bottom-width: 0; 26 | } 27 | 28 | @media screen and (max-width: 768px) { 29 | .bl_horizTable.bl_horizTable__mdScroll { 30 | border-right-width: 0; 31 | overflow-x: auto; 32 | } 33 | .bl_horizTable.bl_horizTable__mdScroll th, 34 | .bl_horizTable.bl_horizTable__mdScroll td { 35 | white-space: nowrap; 36 | } 37 | .bl_horizTable.bl_horizTable__mdScroll td { 38 | border-right: 1px solid #ddd; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /chapter06/css/6-4-table-horizontal-precss.css: -------------------------------------------------------------------------------- 1 | .bl_horizTable { 2 | border: 1px solid #ddd; 3 | } 4 | 5 | .bl_horizTable table { 6 | width: 100%; 7 | } 8 | 9 | .bl_horizTable th { 10 | width: 20%; 11 | padding: 15px; 12 | background-color: #efefef; 13 | border-bottom: 1px solid #ddd; 14 | font-weight: bold; 15 | vertical-align: middle; 16 | } 17 | 18 | .bl_horizTable td { 19 | padding: 15px; 20 | border-bottom: 1px solid #ddd; 21 | } 22 | 23 | .bl_horizTable tr:last-child th, 24 | .bl_horizTable tr:last-child td { 25 | border-bottom-width: 0; 26 | } 27 | -------------------------------------------------------------------------------- /chapter06/css/6-7-pager-bem.css: -------------------------------------------------------------------------------- 1 | .pager { 2 | display: flex; 3 | overflow-x: auto; 4 | } 5 | 6 | .pager__inner { 7 | display: flex; 8 | margin-right: auto; 9 | margin-left: auto; 10 | } 11 | 12 | .pager__inner > *:last-child { 13 | margin-right: 0; 14 | } 15 | 16 | .pager__item { 17 | margin-right: 15px; 18 | } 19 | 20 | .pager__link { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | width: 40px; 25 | height: 40px; 26 | border: 1px solid currentColor; 27 | color: #e25c00; 28 | text-decoration: none; 29 | transition: .25s; 30 | } 31 | 32 | .pager__link:focus, 33 | .pager__link:hover { 34 | background-color: #e25c00; 35 | color: #fff; 36 | opacity: .75; 37 | } 38 | 39 | .pager__link--active { 40 | background-color: #e25c00; 41 | color: #fff; 42 | pointer-events: none; 43 | } 44 | -------------------------------------------------------------------------------- /chapter06/css/6-7-pager-precss.css: -------------------------------------------------------------------------------- 1 | .bl_pager { 2 | display: flex; 3 | overflow-x: auto; 4 | } 5 | 6 | .bl_pager_inner { 7 | display: flex; 8 | margin-right: auto; 9 | margin-left: auto; 10 | } 11 | 12 | .bl_pager_inner > *:last-child { 13 | margin-right: 0; 14 | } 15 | 16 | .bl_pager_inner > li { 17 | margin-right: 15px; 18 | } 19 | 20 | .bl_pager_link { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | width: 40px; 25 | height: 40px; 26 | border: 1px solid currentColor; 27 | color: #e25c00; 28 | text-decoration: none; 29 | transition: .25s; 30 | } 31 | 32 | .bl_pager_link:focus, 33 | .bl_pager_link:hover { 34 | background-color: #e25c00; 35 | color: #fff; 36 | opacity: .75; 37 | } 38 | 39 | .bl_pager_link.is_active { 40 | background-color: #e25c00; 41 | color: #fff; 42 | pointer-events: none; 43 | } 44 | -------------------------------------------------------------------------------- /chapter06/css/6-8-navi-bem.css: -------------------------------------------------------------------------------- 1 | .tab-navigation__inner { 2 | display: flex; 3 | align-items: center; 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | margin-bottom: -10px; 7 | } 8 | 9 | .tab-navigation__link { 10 | display: inline-block; 11 | padding-right: 30px; 12 | padding-bottom: 10px; 13 | padding-left: 30px; 14 | margin-bottom: 10px; 15 | border-bottom: 4px solid #efefef; 16 | color: #777; 17 | text-decoration: none; 18 | transition: .25s; 19 | } 20 | 21 | .tab-navigation__link:focus, 22 | .tab-navigation__link:hover { 23 | border-bottom-color: currentColor; 24 | color: #e25c00; 25 | opacity: .75; 26 | } 27 | 28 | .tab-navigation__link--active { 29 | border-bottom-color: currentColor; 30 | color: #e25c00; 31 | pointer-events: none; 32 | } 33 | 34 | @media screen and (max-width: 768px) { 35 | .tab-navigation { 36 | overflow-x: auto; 37 | } 38 | 39 | .tab-navigation__inner { 40 | flex-wrap: nowrap; 41 | justify-content: flex-start; 42 | margin-bottom: 0; 43 | white-space: nowrap; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /chapter06/css/6-8-navi-precss.css: -------------------------------------------------------------------------------- 1 | .bl_tabNav_inner { 2 | display: flex; 3 | align-items: center; 4 | flex-wrap: wrap; 5 | justify-content: center; 6 | margin-bottom: -10px; 7 | } 8 | 9 | .bl_tabNav_link { 10 | display: inline-block; 11 | padding-right: 30px; 12 | padding-bottom: 10px; 13 | padding-left: 30px; 14 | margin-bottom: 10px; 15 | border-bottom: 4px solid #efefef; 16 | color: #777; 17 | text-decoration: none; 18 | transition: .25s; 19 | } 20 | 21 | .bl_tabNav_link:focus, 22 | .bl_tabNav_link:hover { 23 | border-bottom-color: currentColor; 24 | color: #e25c00; 25 | opacity: .75; 26 | } 27 | 28 | .bl_tabNav_link.is_active { 29 | border-bottom-color: currentColor; 30 | color: #e25c00; 31 | pointer-events: none; 32 | } 33 | 34 | @media screen and (max-width: 768px) { 35 | .bl_tabNav { 36 | overflow-x: auto; 37 | } 38 | 39 | .bl_tabNav_inner { 40 | flex-wrap: nowrap; 41 | justify-content: flex-start; 42 | margin-bottom: 0; 43 | white-space: nowrap; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /chapter06/css/6-9-cta-bem.css: -------------------------------------------------------------------------------- 1 | .cta-area { 2 | padding: 30px; 3 | background-color: rgba(221, 116, 44, .05); 4 | border: 1px solid #e25c00; 5 | text-align: center; 6 | } 7 | 8 | .cta-area > *:last-child { 9 | margin-bottom: 0; 10 | } 11 | 12 | .cta-area__title { 13 | padding-bottom: 10px; 14 | margin-top: -6px; 15 | margin-bottom: 40px; 16 | border-bottom: 1px solid currentColor; 17 | color: #e25c00; 18 | font-size: 1.5rem; 19 | font-weight: bold; 20 | } 21 | -------------------------------------------------------------------------------- /chapter06/css/6-9-cta-precss.css: -------------------------------------------------------------------------------- 1 | .bl_cta { 2 | padding: 30px; 3 | background-color: rgba(221, 116, 44, .05); 4 | border: 1px solid #e25c00; 5 | text-align: center; 6 | } 7 | 8 | .bl_cta > *:last-child { 9 | margin-bottom: 0; 10 | } 11 | 12 | .bl_cta_ttl { 13 | padding-bottom: 10px; 14 | margin-top: -6px; 15 | margin-bottom: 40px; 16 | border-bottom: 1px solid currentColor; 17 | color: #e25c00; 18 | font-size: 1.5rem; 19 | font-weight: bold; 20 | } 21 | -------------------------------------------------------------------------------- /chapter07/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/.DS_Store -------------------------------------------------------------------------------- /chapter07/7-1-button-horizon-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapter07/7-1-button-horizon-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapter07/7-2-button-cta-bem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
14 |

15 | 편하게 문의주십시오. 16 |

17 |

18 | 당사 서비스나 제품에 관해 궁금한 점은 편하게 문의주십시오. 19 |

20 | 문의하기 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter07/7-2-button-cta-precss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 | 13 |
14 |

15 | 편하게 문의주십시오. 16 |

17 |

18 | 당사 서비스나 제품에 관해 궁금한 점은 편하게 문의주십시오. 19 |

20 | 문의하기 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter07/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/.DS_Store -------------------------------------------------------------------------------- /chapter07/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/.DS_Store -------------------------------------------------------------------------------- /chapter07/assets/img/elements/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/.DS_Store -------------------------------------------------------------------------------- /chapter07/assets/img/elements/analysis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/analysis.jpg -------------------------------------------------------------------------------- /chapter07/assets/img/elements/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/code.jpg -------------------------------------------------------------------------------- /chapter07/assets/img/elements/global.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/global.jpg -------------------------------------------------------------------------------- /chapter07/assets/img/elements/jumbotron-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/jumbotron-bg.jpg -------------------------------------------------------------------------------- /chapter07/assets/img/elements/marketing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/marketing.jpg -------------------------------------------------------------------------------- /chapter07/assets/img/elements/persona-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/persona-small.jpg -------------------------------------------------------------------------------- /chapter07/assets/img/elements/persona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/assets/img/elements/persona.jpg -------------------------------------------------------------------------------- /chapter07/css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jpub/CSSMethGuide/cfb94a2e29841396d3b939be1156cda7b601b979/chapter07/css/.DS_Store -------------------------------------------------------------------------------- /chapter07/css/7-1-button-horizon-bem.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .btn:focus, .btn:hover { 17 | background-color: #fff; 18 | border-color: currentColor; 19 | color: #e25c00; 20 | } 21 | 22 | .btn--warning { 23 | background-color: #f1de00; 24 | color: #222; 25 | } 26 | 27 | .btn--warning:focus, 28 | .btn--warning:hover { 29 | border-color: #f1de00; 30 | color: #222; 31 | } 32 | 33 | .horizontal-btn-list { 34 | display: flex; 35 | justify-content: center; 36 | } 37 | 38 | .horizontal-btn-list > *:last-child { 39 | margin-right: 0; 40 | } 41 | 42 | .horizontal-btn-list__item { 43 | flex: 1 1 0; 44 | max-width: 300px; 45 | margin-right: 20px; 46 | } 47 | 48 | .horizontal-btn-list__btn { 49 | display: inline-flex; 50 | align-items: center; 51 | justify-content: center; 52 | width: 100%; 53 | height: 100%; 54 | } -------------------------------------------------------------------------------- /chapter07/css/7-1-button-horizon-precss.css: -------------------------------------------------------------------------------- 1 | .el_btn { 2 | display: inline-block; 3 | width: 300px; 4 | max-width: 100%; 5 | padding: 20px 10px; 6 | background-color: #e25c00; 7 | border: 2px solid transparent; 8 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 9 | color: #fff; 10 | font-size: 1.125rem; 11 | text-align: center; 12 | text-decoration: none; 13 | transition: .25s; 14 | } 15 | 16 | .el_btn:focus, 17 | el_btn:hover { 18 | background-color: #fff; 19 | border-color: currentColor; 20 | color: #e25c00; 21 | } 22 | 23 | .el_btn.el_btn__yellow { 24 | background-color: #f1de00; 25 | color: #222; 26 | } 27 | 28 | .el_btn.el_btn__yellow:focus, 29 | .el_btn.el_btn__yellow:hover { 30 | border-color: #f1de00; 31 | background-color: #fff; 32 | } 33 | 34 | .bl_horizBtnList { 35 | display: flex; 36 | justify-content: center; 37 | } 38 | 39 | .bl_horizBtnList > *:last-child { 40 | margin-right: 0; 41 | } 42 | 43 | .bl_horizBtnList > li { 44 | flex: 1 1 0; 45 | max-width: 300px; 46 | margin-right: 20px; 47 | } 48 | 49 | .bl_horizBtnList .el_btn { 50 | display: inline-flex; 51 | align-items: center; 52 | justify-content: center; 53 | width: 100%; 54 | height: 100%; 55 | } 56 | -------------------------------------------------------------------------------- /chapter07/css/7-2-button-cta-bem.css: -------------------------------------------------------------------------------- 1 | /* button */ 2 | .btn { 3 | display: inline-block; 4 | width: 300px; 5 | max-width: 100%; 6 | padding: 20px 10px; 7 | background-color: #e25c00; 8 | border: 2px solid transparent; 9 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 10 | color: #fff; 11 | font-size: 1.125rem; 12 | text-align: center; 13 | text-decoration: none; 14 | transition: .25s; 15 | } 16 | 17 | .btn:focus, 18 | .btn:hover { 19 | background-color: #fff; 20 | border-color: currentColor; 21 | color: #e25c00; 22 | } 23 | 24 | /* CTA */ 25 | .cta-area { 26 | padding: 30px; 27 | background-color: rgba(221, 116, 44, .05); 28 | border: 1px solid #e25c00; 29 | text-align: center; 30 | } 31 | 32 | .cta-area > *:last-child { 33 | margin-bottom: 0; 34 | } 35 | 36 | .cta-area__title { 37 | padding-bottom: 10px; 38 | margin-top: -6px; 39 | margin-bottom: 40px; 40 | border-bottom: 1px solid currentColor; 41 | color: #e25c00; 42 | font-size: 1.5rem; 43 | font-weight: bold; 44 | } 45 | 46 | /* new */ 47 | .cta-area__text { 48 | margin-bottom: 40px; 49 | } 50 | -------------------------------------------------------------------------------- /chapter07/css/7-2-button-cta-precss.css: -------------------------------------------------------------------------------- 1 | /* cta */ 2 | .bl_cta { 3 | padding: 30px; 4 | background-color: rgba(221, 116, 44, .05); 5 | border: 1px solid #e25c00; 6 | text-align: center; 7 | } 8 | 9 | .bl_cta > *:last-child { 10 | margin-bottom: 0; 11 | } 12 | 13 | .bl_cta_ttl { 14 | padding-bottom: 10px; 15 | margin-top: -6px; 16 | margin-bottom: 40px; 17 | border-bottom: 1px solid currentColor; 18 | color: #e25c00; 19 | font-size: 1.5rem; 20 | font-weight: bold; 21 | } 22 | 23 | /* button */ 24 | .el_btn { 25 | display: inline-block; 26 | width: 300px; 27 | max-width: 100%; 28 | padding: 20px 10px; 29 | background-color: #e25c00; 30 | border: 2px solid transparent; 31 | box-shadow: 0 3px 6px rgba(0, 0, 0, .16); 32 | color: #fff; 33 | font-size: 1.125rem; 34 | text-align: center; 35 | text-decoration: none; 36 | transition: .25s; 37 | } 38 | 39 | .el_btn:focus, 40 | .el_btn:hover { 41 | background-color: #fff; 42 | border-color: currentColor; 43 | color: #e25c00; 44 | } 45 | 46 | /* button-cta-new */ 47 | .bl_cta_txt { 48 | margin-bottom: 40px; 49 | } -------------------------------------------------------------------------------- /chapter07/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #222; 3 | font-family: sans-serif; 4 | line-height: 1.5; 5 | } 6 | 7 | a { 8 | color: #0069ff; 9 | } 10 | 11 | img { 12 | max-width: 100%; 13 | vertical-align: top; 14 | } --------------------------------------------------------------------------------