줄바꿈을 사용하지 않고도 HTML 요소에 줄 바꿈을 추가할 수 있습니다. <br> 유사 요소를 사용하여. 의사 요소는 요소의 특정 부분에 스타일을 지정하는 데 사용됩니다. 여기서는 ::after를 사용하여 HTML 요소의 스타일을 지정하여 줄 바꿈을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ::after With \a</title>
</head>
<style>
span {
padding: 1px 8px;
}
span::after {
content: '\a';
white-space: pre;
}
</style>
<body>
<div>
<span>Dumbledore</span>
<span>McGonagall</span>
<span>Snape</span>
<span>Trelawney</span>
</div>
</body>
</html>
위의 코드에서 의사 요소 ::after를 사용합니다. 범위의 텍스트 줄 뒤에 캐리지 리턴("\a"로 표시)을 추가하려면 각 인라인 요소(범위로 표시)에서 ::after 이 경우 우리가 사용할 수 있는 콘텐츠 속성과 공백 속성이 있습니다.
'content' 속성은 범위에 주입하려는 항목을 설명합니다. white-space 속성은 공백을 보존할지 여부를 알려줍니다. 이 특정 속성을 해제해도 범위의 인라인 블록 특성을 방해하지 않습니다. 따라서 이를 재정의하려면 이 특정 속성을 추가해야 합니다.
스타일과 레이아웃을 점점 더 엉망으로 만들면서 위의 솔루션이 반드시 최상의 솔루션은 아니라는 것을 알게 될 것입니다. 어떤 종류의 패딩과 배경도 추가하면 이러한 CSS 속성이 배경이 재생되는 위치를 엉망으로 만드는 경향이 있음을 알 수 있습니다. 요점을 보여주는 아래 코드 예제를 참조하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line Break</title>
</head>
<style>
span {
padding: 1px 8px;
background: pink;
}
span::before {
content: "\A";
white-space: pre;
}
</style>
<body>
<div>
<p>Professor <span>Dumbledore</span></p>
<p>Professor <span>McGonagall</span></p>
<p>Professor <span>Snape</span></p>
<p>Professor <span>Trelawney</span></p>
</div>
</body>
</html>
이와 유사한 결과를 제공하는 다른 솔루션이 있습니다. 배경이 이전 줄에서 시작된 다음 다음 줄의 올바른 배경에 텍스트가 있는 캐리지 리턴을 수행합니다. CSS 속성 box decoration break: clone 비슷한 결과를 얻기 위해 위의 스팬 클래스에 추가할 수 있지만 실제로 원하는 결과를 제공하지는 않습니다.
<p>와 같은 블록 수준 요소 사용 또는 <div> 매력적인 솔루션입니다. 그러나 다른 표시 값을 사용하려는 경우는 어떻습니까? 그러면 테이블 레이아웃 옵션이 나타납니다.
코드 편집기의 스팬 CSS 선택기에서 속성을 삭제하고 display:table로 바꿉니다. 이것을 사용하면 코드가 더 깔끔해질 뿐만 아니라 정보를 표시하는 데 필요한 레이아웃을 정확하게 제공합니다. 우리는 전통적인 의미의 테이블 레이아웃을 사용하지 않지만 작업을 완료하는 데 필요한 것을 정확히 제공합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.