의사 요소를 사용하여
줄바꿈 반환을 사용하지 않고도 HTML 요소에 줄 바꿈을 추가할 수 있습니다. 의사 요소는 요소의 특정 부분을 모델링하는 데 사용됩니다. 여기에서는 줄 바꿈을 추가하기 위해 HTML 요소의 스타일을 지정하기 위해:: after를 사용할 것입니다.
위 코드에서 :: after
의사 요소를 사용합니다. 각 인라인 요소(범위로 표시)에서 텍스트 범위 줄 뒤에 캐리지 리턴("a"로 표시)을 추가합니다. 이 경우 :: after
에는 사용할 수 있는 content 속성과 공백 속성이 있습니다.
"content" 속성은 지속 시간에 삽입하려는 항목을 설명합니다. 여백 속성은 여백을 보존해야 하는지 여부를 알려줍니다. 이 특정 속성을 비활성화하면 베이의 인라인 잠금 기능을 방해하지 않습니다. 따라서 이를 대체하기 위해 이 특정 속성을 추가해야 합니다.
스타일과 레이아웃을 더 많이 사용하면서 위의 솔루션이 반드시 최상의 솔루션은 아님을 알게 될 것입니다. 배경과 함께 어떤 종류의 패딩을 추가하면 이러한 CSS 속성이 배경이 들어오는 위치에서 희미해지는 경향이 있음을 알 수 있습니다. 요점을 설명하는 아래 샘플 코드를 참조하십시오.
교수 덤블도어
McGonagall 교수
교수 불량
교수 Trelawney