TIL

인라인 스타일을 유지해야 하는 경우

특정 <hr>에만 다른 스타일을 적용해야 한다면 인라인 스타일을 유지하거나, 별도의 클래스 이름을 추가해서 관리할 수 있습니다.

 

 

HTML:

<hr class="custom-hr">

 

CSS:

.custom-hr {
    border: none;
    border-top: 2px dashed #000;
    margin: 30px 0;
}

결론적으로, 공통적으로 사용하는 스타일은 CSS로, 특정 스타일만 인라인 스타일로 적용하는 것이 최적의 방법입니다.

 

+ custom-hr 이거 하나 써버렸으면 다른것도 커스텀 하고 싶을땐 어떻게 적용하는지? 궁금했는데

 

만약 <hr> 태그를 여러 개 사용하고 각각 다른 스타일을 적용하고 싶다면, 각 <hr>에 고유한 클래스 이름을 부여하거나, 공통 클래스에 추가적인 스타일을 덮어쓸 수 있다.

 

방법 1: 고유한 클래스 이름을 부여

각각의 <hr>에 서로 다른 클래스를 부여합니다.

 

HTML

<hr class="custom-hr-1">
<hr class="custom-hr-2">
<hr class="custom-hr-3">

 

 

CSS

/* 첫 번째 hr 스타일 */
.custom-hr-1 {
    border: none;
    border-top: 2px solid #ff6347; /* 토마토 색상 */
    margin: 20px 0;
}

/* 두 번째 hr 스타일 */
.custom-hr-2 {
    border: none;
    border-top: 1px dashed #4682b4; /* 파란색 점선 */
    margin: 30px 0;
}

/* 세 번째 hr 스타일 */
.custom-hr-3 {
    border: none;
    border-top: 3px double #32cd32; /* 연두색 이중선 */
    margin: 40px 0;
}

이렇게 진행하는 방법이 있고,

 

 

방법 2: 공통 클래스와 추가 스타일 결합

공통적으로 사용되는 스타일을 class="custom-hr"로 작성하고, 추가적인 스타일은 class 속성에 더 붙여서 처리합니다.

 

HTML

<hr class="custom-hr thick-line">
<hr class="custom-hr dashed-line">
<hr class="custom-hr double-line">

 

 

CSS

/* 공통 스타일 */
.custom-hr {
    border: none;
    margin: 20px 0;
}

/* 두꺼운 선 */
.thick-line {
    border-top: 3px solid #333;
}

/* 점선 */
.dashed-line {
    border-top: 1px dashed #888;
}

/* 이중선 */
.double-line {
    border-top: 2px double #555;
}

결과: HTML에서 custom-hr는 공통 스타일로 적용되고, 추가 클래스(thick-line, dashed-line, double-line)로 스타일을 구분하는 방법이 있다.

 

 

방법 3: 인라인 스타일 사용 (특별한 경우)

특정 상황에서 한 번만 사용되는 스타일이라면, 인라인 스타일을 쓸 수도 있습니다.

 

HTML

<hr style="border-top: 4px groove #aaa; margin: 20px 0;">
<hr style="border-top: 2px dotted #f00; margin: 10px 0;">

 

추천 방법

• 재사용 가능한 스타일: class 속성으로 스타일 관리 (방법 1, 2).
• 단일/특별한 경우: 인라인 스타일로 작성.

CSS로 관리하면 유지보수와 확장성이 더 좋아지므로, 가능하면 인라인 스타일보다는 클래스 관리를 권장한다.