CSS-Inline

임재헌·2023년 3월 24일
CSS

목록 보기
2/23
<!DOCTYPE html>

<html lang="ko">

<head>

<title> Inline_css </title>

</head>

<body>


<h3> Inline css</h3>

<!-- style="속성";값; 속성;값-->

<div style="width: 200px;height: 150px;background-color:blanchedalmond">


</div>

<div style="width: 100px; /* 가로크기*/

height: 100px; /*세로크기*/

/*속성 한개 주석*/

--background-color: blueviolet;"></div>

<br>

<div style="width: 100%; height: 100px; background-color: hotpink;"></div>

<div style="width: 50%; height: 100px; background-color: crimson;"></div>


<!-- 참조 https://www.w3schools.com/css/css_background.asp -->


<!-- 배경 관련 스타일 -->

<div style="width: 300pt;

height: 300pt;

background-image:url(../images/coffee.png) ;

background-repeat: no-repeat;

background-position: right bottom

background-size: 20% 20%; /*가로 세로*/"></div>

<hr>


<!-- 참조 https://www.w3schools.com/css/css_text.asp -->
<!-- 텍스트 관련 스타일-->

<div style=" width: 300px;height: 300px;

background-color: azure;

color: aquamarine;

text-decoration: underline;/*밑줄*/

text-indent: 50px;/* 들여쓰기*/

text-shadow: 3px 2px blue; /*그림자 수평 수직 파랑*/

letter-spacing: -3px;/* 글자간격*/

line-height: 20px;/*줄간격*/

word-spacing: 10px;/*단어 간격*/">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel faucibus eros, vel porta ipsum. Nam nisl nisl, rhoncus id dolor ac, placerat vulputate ex. Nam non iaculis ex, eget ornare leo. Curabitur dignissim vehicula dui mattis gravida. Cras ultrices, eros a tristique ullamcorper, ipsum felis vestibulum lorem, malesuada finibus nisl turpis a orci. Donec vitae laoreet lectus. Nam vulputate metus sed tortor venenatis finibus. Sed finibus vel lorem et tincidunt.
</div>

</body>

</html>
임재헌
이전 포스트
CSS-기본문법

다음 포스트
CSS-Inline

CSS

CSS-기본문법

CSS-Internal CSS

0개의 댓글
