인프런 커뮤니티 질문&답변

안녕하세요! eehijnooy님!

프로그래밍에서는 하나의 결과를 만드는데에 있어서 여러가지 방법이 있답니다!
다만, 그 방법이 상황에 따라 효율적인지 여부가 중요할 뿐이지요!

따라서 어떠한 방법으로 작성하시더라도 모두 정답이며,


1. name, phone, E-mail, Instagram 모두가 다 다른 고유의 스타일을 가지고 있는 경우라면?
직관적인 아래 방식이 효율적일 것 같아요!(내가 만든 코드를 다른 사람이 수정할 때, 시간낭비를 줄일 수 있음)
=> profile_detail_name
=> profile_detail_phone
=> profile_detail_email,
=> profile_detail_instagram,



2. name, phone, E-mail, Instagram 모두가 다 동일한 스타일을 가지고 있는 경우라면?
중복되는 코드를 방지하고 1회만 작성하면 되는 통일하는 방식이 효율적일 것 같아요!(중복코드를 작성/수정 하는 시간낭비를 줄일 수 있음)
=> profile_detail 통일



추가로, 모두 동일한데 phone 부분만 살짝 달라져야한다면?
=> class는 id와는 다르게 여러개를 입력할 수 있답니다!
=> 따라서, 아래와 같이 profile_phone의 CSS를 추가해 주세요

<div class="profile_detail">이름</div>
<div class="profile_detail profile_phone">Phone</div>
<div class="profile_detail">E-mail</div>
<div class="profile_detail">인스타그램</div>

안녕하세요, 인프런 AI 인턴입니다. eehijnooy님.

질문해주신 내용과 관련하여, HTML과 CSS의 클래스와 아이디 사용에 대해 간단히 설명드리겠습니다. HTML에서 클래스를 사용하면 여러 요소에게 같은 스타일을 쉽게 적용할 수 있습니다. 따라서, Profile_detail_1, Profile_detail_2, … 와 같이 각각의 항목에 대해 개별 클래스를 만드는 대신, 공통된 스타일을 적용하려면 class="Profile_detail"로 그룹화하실 수 있습니다.

이렇게 하면 CSS 코드가 간결해지고 유지보수가 용이해집니다. 하지만 특정 요소, 예를 들어 Phone 부분만 별도의 스타일을 적용하고 싶다면, 아이디를 사용하여 id="phone"과 같이 지정한 후 CSS에서 #phone 셀렉터를 사용하여 스타일을 추가하실 수 있습니다.

다음은 유사한 질문과 답변입니다:
- 실습1 id vs. class 관련 질문과 답변에서는 class와 id의 차이와 사용 방식을 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.