HTML 단락 너비
웹 페이지의 스타일을 지정하는 데 사용되는 언어를 CSS(Cascading Style Sheets)라고 합니다. 화면, 종이 또는 기타 미디어에 HTML 구성 요소가 어떻게 표시되어야 하는지 설명합니다.
많은 작업이 CSS를 통해 저장됩니다. 한 번에 여러 웹 페이지의 디자인을 제어할 수 있습니다. CSS 파일에서는 외부 스타일시트가 유지됩니다.
HTML의 단락 요소 <p>
HTML 단락은 <p> 요소로 표시됩니다. 첫 줄 들여쓰기와 빈 줄은 일반적으로 시각적 미디어에서 단락을 제한하는 데 사용되지만 HTML 단락은 사진이나 양식 필드와 같은 관련 자료의 구조적 그룹일 수 있습니다.
단락이라고 하는 블록 수준 구성 요소는 </p> 태그를 끝내기 전에 다른 단락이 처리되면 자동으로 닫힙니다.
CSS width 속성을 사용하여 HTML에서 너비가 다른 단락 설정
width CSS 속성은 요소의 너비를 결정합니다. 기본적으로 콘텐츠 영역의 너비를 결정합니다. 그러나 box-sizing이 border-box로 설정되면 테두리 영역의 너비를 결정합니다.
<!DOCTYPE html>
<html>
<body>
<p style="">
<center><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9j5SfZTDxwimaSsWWsHv0xxjX5TY7j-z4PA&usqp=CAU"></center>
</p>
<p style="max-width:500px;">
<font size="+2">
<center><b>Arraying: Web and Java Developer.</b> </font>
<br>
<i>I'm Arraying, hello. I work with Minevelop as a web and Java developer. My areas of expertise include web development, plugin setup, and small yet complicated Spigot plugins.
<br><br>Since I started operating servers when I was eleven or twelve, I have accumulated a wealth of knowledge.
<br>Enjin: http://www.dev.com/profile/73763
<br>Email: array@dev.com</i>
</center>
</p>
<p style="">
<br>
<br>
<center><img src="https://cdn.dribbble.com/users/2131993/screenshots/15628387/media/13377c0dfb5e4adbfec1d646f20c9206.png?compress=1&resize=400x300"></center>
</p>
<p style="max-width:500px;">
<font size="+2">
<center><b>DomThePotato: Lead Java Developer.</b></font>
<br>
<i>I'm Dom, also known as DomThePotato, and I work at Minevelop as the company's primary Java developer. I specialise on plugins for utilities and everything else outside minigames. I can handle any request because I have more than 1.5 years of experience! experienced file administrator and backend manager.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat0.397375/
<br>Enjin: http://www.enjin.com/profile/783804080
<br>Email: domthepotato@mindev.com</i>
</center>
</p>
</body>
</html>
<div> 요소를 사용하여 HTML에서 동일한 너비로 단락 설정
페이지의 자료 블록은 블록 수준 요소 <div>를 사용하여 정의됩니다. 블록을 선언하는 것 외에도 <div>는 아무 것도 수행하지 않습니다. 예를 들어, 다음 코드는 두 단락을 포함하는 <div> 요소를 생성합니다.
<p> 구성 요소는 </div> 내에 포함될 수 있음을 기억하십시오.
예제 코드:
<!DOCTYPE html>
<html>
<style>
{
text-align:center;
}
#custom
{
width : 1100px;
}
</style>
<div id="custom">
<p style="">
<center><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9j5SfZTDxwimaSsWWsHv0xxjX5TY7j-z4PA&usqp=CAU"></center>
</p>
<p style="max-width:500px;">
<font size="+2">
<center><b>Arraying: Web & Java Developer.</b></font>
<br>
<i>I'm Arraying, hello. I work with Minevelop as a web and Java developer. My areas of expertise include web development, plugin setup, and small yet complicated Spigot plugins.
<br><br>Since I started operating servers when I was eleven or twelve, I have accumulated a wealth of knowledge.
<br>Enjin: http://www.dev.com/
</div>
<div id="custom">
<p>
<p style="">
<br>
<br>
<center><img src="https://cdn.dribbble.com/users/2131993/screenshots/15628387/media/13377c0dfb5e4adbfec1d646f20c9206.png?compress=1&resize=400x300" ></center>
</p style="max-width:500px;">
<font size="+2">
<center><b>DomThePotato: Lead Java Developer.</b>
</font>
<br>
<i>I'm Dom, also known as DomThePotato, and I work at Minevelop as the company's primary Java developer. I specialise on plugins for utilities and everything else outside minigames. I can handle any request because I have more than 1.5 years of experience! experienced file administrator and backend manager.
<br><br>Spigot: https://www.spigotmc.org/members/domthepotat0.397375/
<br>Enjin: http://www.enjin.com/profile/783804080
<br>Email: domthepotato@mindev.com</i>
</center>
</p>
</div>
</html>
결론
<div>를 사용하여 width, padding, margin 및 기타 속성을 할당할 수도 있습니다. 단락 스타일에서 사용할 수 있는 div에 대해 id를 설정할 수 있습니다.
<div> 태그에서 id=" "를 사용할 수 있으며 동일한 ID를 가진 단락에 대해 동일한 너비를 가질 수 있습니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn