-
(31)CSS_CSS텍스트2HTML, CSS 2023. 3. 29. 18:09728x90
- 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><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 텍스트2</title><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><h2>CSS 텍스트2</h2><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><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><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>
'HTML, CSS' 카테고리의 다른 글
(33)CCS_CSS텍스트4 (0) 2023.03.29 (32)CSS_CSS텍스트3 (0) 2023.03.29 (30)CSS_CSS텍스트1 (0) 2023.03.29 (29)CSS_가상선택자 (0) 2023.03.29 (28)CSS_속성선택자 (0) 2023.03.29
