k

CSS를 적용할때... class 와 id 사용~

<div id="이름">
#이름 { 넣고 싶은 속성을 전부 넣음 }

<div class="이름1 이름2 이름3">
.이름1 {}
.이름2 {}
.이름3 {}

요즘 CSS를 만들다가 이 부분을 id로 한 다음에 밑에 class 로도 작업해 보고 있네요..
이 두가지 ㅡㅡ; 속도나 차이점이 있을까요??

페이지에 형태를 딱 하나 밖에 없을때는 id
중복된 형태를 띨때는 class 를 쓰는데
요즘 폰트 속성이나, block 의 border, float 속성 같은 경우는 중복이 너무 많아서 class로 작업중인데
과연 다 만들고 나서 후회 할까바 걱정이네용...... 아 고민이네용 ㅡㅡ;;;;
|

댓글 11개

흠 앞뒤 코드는 모르겠지만... 가시밭길을 가시는 것 같은데요? ㅠㅠ
아래 댓글에 달아주셨네요. class의 재사용에 관한 내용입니다.
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번이 좋을지 적당히 섞어서 써야 겠지만, 그 적당히라는게 어렵네용 ㅠ
1번처럼 쓰고 계실까봐 가시밭길을 가시는 것 같다고 썼던 것입니다.
2번이 좋습니다. 글로 설명드릴 실력은 안 되어서 자세한 설명은 생략하겠습니다. ㅠㅠ
ㅎㅎ 2번이 역시 좋군요 만들기에도 2번이 참 편하더라구용~~
근데 ㅠㅠ;; 실력이 딸리는지 자꾸 이름이 중복되구 엉키구 ㅠㅠ
멀티클래스 경우 지운아빠님이 말씀하신대로 가시밭길이 될 수도 있습니다 x(
다만

디자인의 가이드가 확실해진 상태에서
사용할 컴포넌트의 마크업과 css 를 완성하고 프로젝트를 진행하다가

약간의 수정이 들어가는 변형 컴포넌트가 생길 경우 ( 섹션의 성격이 약간 다를 경우 디자인에서 원하는 것이라던지 하는 경우가 발생하겠죠 )
이때 베이스 컴포넌트를 사용하면서 멀티클래스로 약간의 수정을 해 주는 것은 만들면서도 편하고 즐거울 수 있을 거 같습니다.
(백엔드 개발에서 클래스를 상속받아 확장하는 개념처럼요)

--

2번으로 시작을 하고. 필요할때 1번을 이용 ;p
저도 많이 관심이 있는 분야네요.. ^^

일단 id 를 사용하는 경우가 더 빠른 것은 사실이고요..
클래스 정도까지는, 코드 재사용성을 통한 css 절약이 있으니, 잘 사용하면 이득이라 생각합니다.

몇몇 글에서 봤는데,
div#id { }, #id div span a {} 등
#id 를 사용하는 경우, 다른 일반 tag 실렉터와 같이 사용하는 것은 속도면에서 안좋다고 하네요.
그리고 특히 [...] 형태의 실렉터는, 개발자의 편리를 위해서 속도를 희생하는 것이라고 지적하더군요.. ^^
ㅎㅎㅎ class 절약이 좋은것 같긴 한데 이것도 또 하다가 보니 ㅡㅡ;;
재사용 용? class가 너무 많이 생기기도 하는것 같고... 좌절입니당 ㅠㅠ
환경이 되시면, less나 sass를 사용해보시는 것도 방법이라 생각합니다.
css 코딩이 한결 편해질 것 같아서요.. ^^
처음 할때는 css를 계획적으로(?) 작성하게 되는다 어느순간 막코딩이 되네요.
상황에 따라 다름ㅇㅅㅇ
반응형할때 1번섞어주면 좋음
제이쿼리 명령어와 같이 쓸땐 id 로 중복처리할때 사용하구요 저는

class를 자주 씁니다.

하지만 한 페이지에 코드 섞인 부분이 있을까봐 나뉘어질땐

상단 id 안에 클래스와 하단 id안에 클래스로 구분짓습니다 ㅎ..

id='body'

#body .good {

id='tail'

#tail .good {
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12년 전 조회 9,828
12년 전 조회 3,120
12년 전 조회 5,312
12년 전 조회 7,956
12년 전 조회 3,141
12년 전 조회 4,410
12년 전 조회 2,142
12년 전 조회 2,804
12년 전 조회 2,673
12년 전 조회 2,865
12년 전 조회 4,855
12년 전 조회 2,649
12년 전 조회 3,355
12년 전 조회 2,780
12년 전 조회 2,478
13년 전 조회 2,914
13년 전 조회 3,668
13년 전 조회 2,868
13년 전 조회 2,689
13년 전 조회 3,245
13년 전 조회 1.6만
13년 전 조회 2,513
13년 전 조회 2,304
13년 전 조회 4,124
13년 전 조회 1만
13년 전 조회 2,688
13년 전 조회 2,644
13년 전 조회 3,071
13년 전 조회 2,544
13년 전 조회 2,691
13년 전 조회 4,971
13년 전 조회 2,929
13년 전 조회 3,575
13년 전 조회 2,565
13년 전 조회 2,755
13년 전 조회 4,482
13년 전 조회 2,319
13년 전 조회 2,810
13년 전 조회 3,118
13년 전 조회 3,564
13년 전 조회 3,661
13년 전 조회 4,104
13년 전 조회 2,574
13년 전 조회 2,587
13년 전 조회 5,969
13년 전 조회 3,037
13년 전 조회 3,197
13년 전 조회 7,066
13년 전 조회 4,743
13년 전 조회 3,688
13년 전 조회 2,863
13년 전 조회 5,042
13년 전 조회 4,060
13년 전 조회 3,733
13년 전 조회 3,423
13년 전 조회 3,098
13년 전 조회 3,083
13년 전 조회 2,837
13년 전 조회 3,961
13년 전 조회 3,268
13년 전 조회 2,889
13년 전 조회 3,978
13년 전 조회 3,193
13년 전 조회 3,787
13년 전 조회 5,000
13년 전 조회 2,763
13년 전 조회 3,718
13년 전 조회 2,569
13년 전 조회 3,061
13년 전 조회 3,671
13년 전 조회 3,321
13년 전 조회 6,126
13년 전 조회 4,237
13년 전 조회 4,419
13년 전 조회 2,795
13년 전 조회 1만
13년 전 조회 4,937
13년 전 조회 2,997
13년 전 조회 2,888
13년 전 조회 4,267
13년 전 조회 7,004
13년 전 조회 4,990
13년 전 조회 2,911
13년 전 조회 1.5만
13년 전 조회 2,801
13년 전 조회 2,221
13년 전 조회 5,270
13년 전 조회 2,742
13년 전 조회 1.1만
13년 전 조회 2,402
13년 전 조회 2,580
13년 전 조회 4,849
13년 전 조회 2,451
13년 전 조회 3,367
13년 전 조회 5,284
13년 전 조회 2,651
13년 전 조회 2,548
13년 전 조회 6,940
13년 전 조회 3,038
13년 전 조회 2,350