<div id="이름">
#이름 { 넣고 싶은 속성을 전부 넣음 }
<div class="이름1 이름2 이름3">
.이름1 {}
.이름2 {}
.이름3 {}
요즘 CSS를 만들다가 이 부분을 id로 한 다음에 밑에 class 로도 작업해 보고 있네요..
이 두가지 ㅡㅡ; 속도나 차이점이 있을까요??
페이지에 형태를 딱 하나 밖에 없을때는 id
중복된 형태를 띨때는 class 를 쓰는데
요즘 폰트 속성이나, block 의 border, float 속성 같은 경우는 중복이 너무 많아서 class로 작업중인데
과연 다 만들고 나서 후회 할까바 걱정이네용...... 아 고민이네용 ㅡㅡ;;;;
#이름 { 넣고 싶은 속성을 전부 넣음 }
<div class="이름1 이름2 이름3">
.이름1 {}
.이름2 {}
.이름3 {}
요즘 CSS를 만들다가 이 부분을 id로 한 다음에 밑에 class 로도 작업해 보고 있네요..
이 두가지 ㅡㅡ; 속도나 차이점이 있을까요??
페이지에 형태를 딱 하나 밖에 없을때는 id
중복된 형태를 띨때는 class 를 쓰는데
요즘 폰트 속성이나, block 의 border, float 속성 같은 경우는 중복이 너무 많아서 class로 작업중인데
과연 다 만들고 나서 후회 할까바 걱정이네용...... 아 고민이네용 ㅡㅡ;;;;
댓글 11개
12년 전
흠 앞뒤 코드는 모르겠지만... 가시밭길을 가시는 것 같은데요? ㅠㅠ
kiplayer
12년 전
아래 댓글에 달아주셨네요. 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.
.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번이 좋을지 적당히 섞어서 써야 겠지만, 그 적당히라는게 어렵네용 ㅠ
12년 전
1번처럼 쓰고 계실까봐 가시밭길을 가시는 것 같다고 썼던 것입니다.
2번이 좋습니다. 글로 설명드릴 실력은 안 되어서 자세한 설명은 생략하겠습니다. ㅠㅠ
2번이 좋습니다. 글로 설명드릴 실력은 안 되어서 자세한 설명은 생략하겠습니다. ㅠㅠ
kiplayer
12년 전
ㅎㅎ 2번이 역시 좋군요 만들기에도 2번이 참 편하더라구용~~
근데 ㅠㅠ;; 실력이 딸리는지 자꾸 이름이 중복되구 엉키구 ㅠㅠ
근데 ㅠㅠ;; 실력이 딸리는지 자꾸 이름이 중복되구 엉키구 ㅠㅠ
lainfox
12년 전
멀티클래스 경우 지운아빠님이 말씀하신대로 가시밭길이 될 수도 있습니다 x(
다만
디자인의 가이드가 확실해진 상태에서
사용할 컴포넌트의 마크업과 css 를 완성하고 프로젝트를 진행하다가
약간의 수정이 들어가는 변형 컴포넌트가 생길 경우 ( 섹션의 성격이 약간 다를 경우 디자인에서 원하는 것이라던지 하는 경우가 발생하겠죠 )
이때 베이스 컴포넌트를 사용하면서 멀티클래스로 약간의 수정을 해 주는 것은 만들면서도 편하고 즐거울 수 있을 거 같습니다.
(백엔드 개발에서 클래스를 상속받아 확장하는 개념처럼요)
--
2번으로 시작을 하고. 필요할때 1번을 이용 ;p
다만
디자인의 가이드가 확실해진 상태에서
사용할 컴포넌트의 마크업과 css 를 완성하고 프로젝트를 진행하다가
약간의 수정이 들어가는 변형 컴포넌트가 생길 경우 ( 섹션의 성격이 약간 다를 경우 디자인에서 원하는 것이라던지 하는 경우가 발생하겠죠 )
이때 베이스 컴포넌트를 사용하면서 멀티클래스로 약간의 수정을 해 주는 것은 만들면서도 편하고 즐거울 수 있을 거 같습니다.
(백엔드 개발에서 클래스를 상속받아 확장하는 개념처럼요)
--
2번으로 시작을 하고. 필요할때 1번을 이용 ;p
12년 전
저도 많이 관심이 있는 분야네요.. ^^
일단 id 를 사용하는 경우가 더 빠른 것은 사실이고요..
클래스 정도까지는, 코드 재사용성을 통한 css 절약이 있으니, 잘 사용하면 이득이라 생각합니다.
몇몇 글에서 봤는데,
div#id { }, #id div span a {} 등
#id 를 사용하는 경우, 다른 일반 tag 실렉터와 같이 사용하는 것은 속도면에서 안좋다고 하네요.
그리고 특히 [...] 형태의 실렉터는, 개발자의 편리를 위해서 속도를 희생하는 것이라고 지적하더군요.. ^^
일단 id 를 사용하는 경우가 더 빠른 것은 사실이고요..
클래스 정도까지는, 코드 재사용성을 통한 css 절약이 있으니, 잘 사용하면 이득이라 생각합니다.
몇몇 글에서 봤는데,
div#id { }, #id div span a {} 등
#id 를 사용하는 경우, 다른 일반 tag 실렉터와 같이 사용하는 것은 속도면에서 안좋다고 하네요.
그리고 특히 [...] 형태의 실렉터는, 개발자의 편리를 위해서 속도를 희생하는 것이라고 지적하더군요.. ^^
kiplayer
12년 전
ㅎㅎㅎ class 절약이 좋은것 같긴 한데 이것도 또 하다가 보니 ㅡㅡ;;
재사용 용? class가 너무 많이 생기기도 하는것 같고... 좌절입니당 ㅠㅠ
재사용 용? class가 너무 많이 생기기도 하는것 같고... 좌절입니당 ㅠㅠ
12년 전
환경이 되시면, less나 sass를 사용해보시는 것도 방법이라 생각합니다.
css 코딩이 한결 편해질 것 같아서요.. ^^
css 코딩이 한결 편해질 것 같아서요.. ^^
12년 전
처음 할때는 css를 계획적으로(?) 작성하게 되는다 어느순간 막코딩이 되네요.
12년 전
상황에 따라 다름ㅇㅅㅇ
반응형할때 1번섞어주면 좋음
반응형할때 1번섞어주면 좋음
돼지코구뇽
12년 전
제이쿼리 명령어와 같이 쓸땐 id 로 중복처리할때 사용하구요 저는
class를 자주 씁니다.
하지만 한 페이지에 코드 섞인 부분이 있을까봐 나뉘어질땐
상단 id 안에 클래스와 하단 id안에 클래스로 구분짓습니다 ㅎ..
id='body'
#body .good {
id='tail'
#tail .good {
class를 자주 씁니다.
하지만 한 페이지에 코드 섞인 부분이 있을까봐 나뉘어질땐
상단 id 안에 클래스와 하단 id안에 클래스로 구분짓습니다 ㅎ..
id='body'
#body .good {
id='tail'
#tail .good {
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6630 |
차가운바람
|
11년 전 | 1159 | |
| 6629 | 11년 전 | 1153 | ||
| 6628 |
put777
|
11년 전 | 639 | |
| 6627 |
 HackYa |
12년 전 | 692 | |
| 6626 | 12년 전 | 1614 | ||
| 6625 |
 Terrorboy |
12년 전 | 714 | |
| 6624 |
미켈란젤로의왼손
|
12년 전 | 474 | |
| 6623 |
Terrorboy |
12년 전 | 1039 | |
| 6622 | 12년 전 | 1374 | ||
| 6621 |
차가운바람
|
12년 전 | 626 | |
| 6620 | 12년 전 | 730 | ||
| 6619 |
Terrorboy |
12년 전 | 963 | |
| 6618 | 12년 전 | 1738 | ||
| 6617 | 12년 전 | 637 | ||
| 6616 |
차가운바람
|
12년 전 | 887 | |
| 6615 | 12년 전 | 2853 | ||
| 6614 | 12년 전 | 613 | ||
| 6613 |
강명구베드로
|
12년 전 | 526 | |
| 6612 |
 BlueAngel |
12년 전 | 424 | |
| 6611 | 12년 전 | 1202 | ||
| 6610 | 12년 전 | 1017 | ||
| 6609 | 12년 전 | 3678 | ||
| 6608 |
HackYa |
12년 전 | 827 | |
| 6607 | 12년 전 | 690 | ||
| 6606 | 12년 전 | 565 | ||
| 6605 | 12년 전 | 449 | ||
| 6604 | 12년 전 | 969 | ||
| 6603 |
geektoo
|
12년 전 | 689 | |
| 6602 | 12년 전 | 834 | ||
| 6601 | 12년 전 | 358 | ||
| 6600 | 12년 전 | 400 | ||
| 6599 | 12년 전 | 533 | ||
| 6598 | 12년 전 | 932 | ||
| 6597 | 12년 전 | 925 | ||
| 6596 | 12년 전 | 405 | ||
| 6595 | 12년 전 | 777 | ||
| 6594 | 12년 전 | 4572 | ||
| 6593 | 12년 전 | 2578 | ||
| 6592 | 12년 전 | 826 | ||
| 6591 | 12년 전 | 581 | ||
| 6590 |
HackYa |
12년 전 | 1386 | |
| 6589 | 12년 전 | 755 | ||
| 6588 |
GINUSSOFT
|
12년 전 | 5125 | |
| 6587 | 12년 전 | 6205 | ||
| 6586 | 12년 전 | 1041 | ||
| 6585 | 12년 전 | 802 | ||
| 6584 | 12년 전 | 450 | ||
| 6583 |
HackYa |
12년 전 | 982 | |
| 6582 | 12년 전 | 865 | ||
| 6581 | 12년 전 | 838 | ||
| 6580 | 12년 전 | 615 | ||
| 6579 |
알랑가몰라
|
12년 전 | 919 | |
| 6578 | 12년 전 | 1324 | ||
| 6577 | 12년 전 | 1496 | ||
| 6576 |
경dragon
|
12년 전 | 763 | |
| 6575 | 12년 전 | 1876 | ||
| 6574 | 12년 전 | 677 | ||
| 6573 | 12년 전 | 973 | ||
| 6572 |
 jakekwak |
12년 전 | 1658 | |
| 6571 |
CTOMAN
|
12년 전 | 1953 | |
| 6570 | 12년 전 | 1725 | ||
| 6569 | 12년 전 | 1883 | ||
| 6568 | 12년 전 | 2399 | ||
| 6567 | 12년 전 | 1025 | ||
| 6566 |
lainfox
|
12년 전 | 1525 | |
| 6565 | 12년 전 | 3653 | ||
| 6564 |
제주프라이스
|
12년 전 | 1530 | |
| 6563 | 12년 전 | 1574 | ||
| 6562 |
프로프리랜서
|
12년 전 | 1344 | |
| 6561 |
프로프리랜서
|
12년 전 | 964 | |
| 6560 |
프로프리랜서
|
12년 전 | 1216 | |
| 6559 |
프로프리랜서
|
12년 전 | 1133 | |
| 6558 |
프로프리랜서
|
12년 전 | 1347 | |
| 6557 |
프로프리랜서
|
12년 전 | 1965 | |
| 6556 |
프로프리랜서
|
12년 전 | 1515 | |
| 6555 |
프로프리랜서
|
12년 전 | 1357 | |
| 6554 |
프로프리랜서
|
12년 전 | 3884 | |
| 6553 |
프로프리랜서
|
12년 전 | 1504 | |
| 6552 | 12년 전 | 840 | ||
| 6551 |
왕초보sasa
|
12년 전 | 1534 | |
| 6550 |
왕초보sasa
|
12년 전 | 628 | |
| 6549 |
왕초보sasa
|
12년 전 | 901 | |
| 6548 | 12년 전 | 1300 | ||
| 6547 | 12년 전 | 1184 | ||
| 6546 | 12년 전 | 5156 | ||
| 6545 | 12년 전 | 2514 | ||
| 6544 |
AnnieK
|
12년 전 | 1775 | |
| 6543 |
베르무트7
|
12년 전 | 623 | |
| 6542 |
오늘도망했다
|
12년 전 | 2231 | |
| 6541 | 12년 전 | 817 | ||
| 6540 | 12년 전 | 1129 | ||
| 6539 | 12년 전 | 846 | ||
| 6538 |
senseme
|
12년 전 | 3368 | |
| 6537 | 12년 전 | 776 | ||
| 6536 | 12년 전 | 3663 | ||
| 6535 | 12년 전 | 1344 | ||
| 6534 | 12년 전 | 1623 | ||
| 6533 | 12년 전 | 2241 | ||
| 6532 |
냐옹이사범
|
12년 전 | 2305 | |
| 6531 | 12년 전 | 565 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기