(31)CSS_CSS텍스트2

HTML, CSS

(31)CSS_CSS텍스트2

빠스무 2023. 3. 29. 18:09

728x90

CSS CSS텍스트 2번째 예제
사용하는 태그에 관한 문법 설명은 아래 링크로 가서 확인 가능하다.
https://jm-rograming.tistory.com/54

(15)CSS_기본 문법

CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 ✔ 참고 MDN: https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information a

jm-rograming.tistory.com

p태그의 영어 문장은 lorem을 치면 나온다.

<!DOCTYPE html>

<head>

<style>

p {

border: 3px solid red;

padding: 10px;

margin: 20px;

}

#align-left {text-align: left;}

#align-right {text-align: right;}

#align-center {text-align: center;}

#align-justify {text-align: justify;}

#indent1{text-indent: 20px;}

#indent2{text-indent: 5%;}

.small-line {line-height: 0.7;}

.big-line {line-height: 3;}

.px-line {line-height: 30px;}

.per-line {line-height: 50%;}

</style>

</head>

<body>

<p id = "align-left" class="small-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

<p id = "align-right" class="big-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

<p id = "align-center" class = "px-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

<p id = "align-justify" class="per-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendu s sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

<p id = "indent1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

<p id = "indent2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

<p class="small-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus sed rem qui reprehenderit accusamus ipsum recusandae iure eaque? Enim incidunt ea neque natus quae, hic adipisci excepturi nihil sequi.</p>

</body>

</html>