|
|
|
13-04-05
|
조회 7,198
|
|
|
|
13-04-05
|
조회 6,584
|
|
|
|
13-04-04
|
조회 4,081
|
|
|
|
13-04-02
|
조회 4,153
|
|
|
|
13-04-02
|
조회 6,119
|
|
|
|
13-04-02
|
조회 7,037
|
|
|
|
13-04-02
|
조회 7,414
|
|
|
|
13-04-02
|
조회 4,533
|
|
|
|
13-04-01
|
조회 4,030
|
|
|
|
13-04-01
|
조회 3,683
|
|
|
|
13-04-01
|
조회 3,647
|
|
|
|
13-03-31
|
조회 5,726
|
|
|
|
13-03-31
|
조회 5,865
|
|
|
|
13-03-31
|
조회 4,184
|
|
|
|
13-03-29
|
조회 5,675
|
|
|
|
13-03-28
|
조회 4,383
|
|
|
|
13-03-28
|
조회 1.1만
|
|
|
|
13-03-28
|
조회 4,543
|
|
|
|
13-03-28
|
조회 6,741
|
|
|
|
13-03-28
|
조회 9,227
|
|
|
|
13-03-28
|
조회 4,353
|
|
|
|
13-03-27
|
조회 5,671
|
|
|
|
13-03-27
|
조회 3,326
|
|
|
|
13-03-26
|
조회 4,087
|
|
|
|
13-03-25
|
조회 4,078
|
|
|
|
13-03-24
|
조회 4,088
|
|
|
|
13-03-24
|
조회 6,256
|
|
|
|
13-03-24
|
조회 3,973
|
|
|
|
13-03-23
|
조회 4,748
|
|
|
|
13-03-23
|
조회 4,124
|
|
|
|
13-03-23
|
조회 3,765
|
|
|
|
13-03-23
|
조회 4,537
|
|
|
|
13-03-22
|
조회 5,017
|
|
|
|
13-03-21
|
조회 4,363
|
|
|
|
13-03-21
|
조회 4,002
|
|
|
|
13-03-21
|
조회 4,655
|
|
|
|
13-03-21
|
조회 1.8만
|
|
|
|
13-03-21
|
조회 3,850
|
|
|
|
13-03-21
|
조회 3,600
|
|
|
|
13-03-20
|
조회 5,708
|
|
|
|
13-03-20
|
조회 1.2만
|
|
|
|
13-03-20
|
조회 4,294
|
|
|
|
13-03-20
|
조회 3,818
|
|
|
|
13-03-20
|
조회 4,303
|
|
|
|
13-03-20
|
조회 3,858
|
|
|
|
13-03-20
|
조회 3,934
|
|
|
|
13-03-20
|
조회 6,116
|
|
|
|
13-03-20
|
조회 4,181
|
|
|
|
13-03-20
|
조회 4,794
|
|
|
|
13-03-20
|
조회 3,715
|
|
|
|
13-03-19
|
조회 4,146
|
|
|
|
13-03-19
|
조회 5,854
|
|
|
|
13-03-18
|
조회 3,550
|
|
|
|
13-03-18
|
조회 4,276
|
|
|
|
13-03-18
|
조회 4,558
|
|
|
|
13-03-17
|
조회 5,086
|
|
|
|
13-03-16
|
조회 4,966
|
|
|
|
13-03-16
|
조회 5,427
|
|
|
|
13-03-14
|
조회 3,959
|
|
|
|
13-03-14
|
조회 4,006
|
|
|
|
13-03-14
|
조회 7,200
|
|
|
|
13-03-14
|
조회 4,384
|
|
|
|
13-03-14
|
조회 4,636
|
|
|
|
13-03-13
|
조회 8,381
|
|
|
|
13-03-13
|
조회 6,140
|
|
|
|
13-03-13
|
조회 5,137
|
|
|
|
13-03-12
|
조회 4,253
|
|
|
|
13-03-11
|
조회 6,602
|
|
|
|
13-03-11
|
조회 5,602
|
|
|
|
13-03-11
|
조회 5,166
|
|
|
|
13-03-10
|
조회 4,767
|
|
|
|
13-03-10
|
조회 4,537
|
|
|
|
13-03-10
|
조회 4,443
|
|
|
|
13-03-10
|
조회 4,227
|
|
|
|
13-03-09
|
조회 5,144
|
|
|
|
13-03-08
|
조회 4,629
|
|
|
|
13-03-08
|
조회 4,224
|
|
|
|
13-03-08
|
조회 5,284
|
|
|
|
13-03-08
|
조회 4,387
|
|
|
|
13-03-08
|
조회 5,008
|
|
|
|
13-03-07
|
조회 6,319
|
|
|
|
13-03-07
|
조회 3,893
|
|
|
|
13-03-07
|
조회 5,156
|
|
|
|
13-03-05
|
조회 3,803
|
|
|
|
13-03-04
|
조회 4,256
|
|
|
|
13-03-03
|
조회 5,043
|
|
|
|
13-03-03
|
조회 4,630
|
|
|
|
13-03-03
|
조회 7,499
|
|
|
|
13-03-03
|
조회 5,507
|
|
|
|
13-03-03
|
조회 5,794
|
|
|
|
13-03-03
|
조회 4,246
|
|
|
|
13-03-03
|
조회 1.1만
|
|
|
|
13-03-03
|
조회 6,265
|
|
|
|
13-03-01
|
조회 4,151
|
|
|
|
13-03-01
|
조회 4,024
|
|
|
|
13-03-01
|
조회 5,593
|
|
|
|
13-03-01
|
조회 8,335
|
|
|
|
13-03-01
|
조회 6,337
|
|
|
|
13-02-28
|
조회 4,358
|
|
|
|
13-02-28
|
조회 1.7만
|
댓글 11개
1.
.fs-11 {font-size:11px;}
.fw-b {font-weight:bold;}
<span class="fs-11 fw-b">
2.
#name {font-size:11px;font-weight:bold;}
<span id="name">
그냥 예로 보여드리는데 과연 효율상 1번이 좋을지 아니면 2번이 좋을지 적당히 섞어서 써야 겠지만, 그 적당히라는게 어렵네용 ㅠ
2번이 좋습니다. 글로 설명드릴 실력은 안 되어서 자세한 설명은 생략하겠습니다. ㅠㅠ
근데 ㅠㅠ;; 실력이 딸리는지 자꾸 이름이 중복되구 엉키구 ㅠㅠ
다만
디자인의 가이드가 확실해진 상태에서
사용할 컴포넌트의 마크업과 css 를 완성하고 프로젝트를 진행하다가
약간의 수정이 들어가는 변형 컴포넌트가 생길 경우 ( 섹션의 성격이 약간 다를 경우 디자인에서 원하는 것이라던지 하는 경우가 발생하겠죠 )
이때 베이스 컴포넌트를 사용하면서 멀티클래스로 약간의 수정을 해 주는 것은 만들면서도 편하고 즐거울 수 있을 거 같습니다.
(백엔드 개발에서 클래스를 상속받아 확장하는 개념처럼요)
--
2번으로 시작을 하고. 필요할때 1번을 이용 ;p
일단 id 를 사용하는 경우가 더 빠른 것은 사실이고요..
클래스 정도까지는, 코드 재사용성을 통한 css 절약이 있으니, 잘 사용하면 이득이라 생각합니다.
몇몇 글에서 봤는데,
div#id { }, #id div span a {} 등
#id 를 사용하는 경우, 다른 일반 tag 실렉터와 같이 사용하는 것은 속도면에서 안좋다고 하네요.
그리고 특히 [...] 형태의 실렉터는, 개발자의 편리를 위해서 속도를 희생하는 것이라고 지적하더군요.. ^^
재사용 용? class가 너무 많이 생기기도 하는것 같고... 좌절입니당 ㅠㅠ
css 코딩이 한결 편해질 것 같아서요.. ^^
반응형할때 1번섞어주면 좋음
class를 자주 씁니다.
하지만 한 페이지에 코드 섞인 부분이 있을까봐 나뉘어질땐
상단 id 안에 클래스와 하단 id안에 클래스로 구분짓습니다 ㅎ..
id='body'
#body .good {
id='tail'
#tail .good {