style 태그
<!-- 디자인.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS에서 주석을 달 때에는 <!--가 아닌 이걸로 사용 */
/* CSS 디자인 하는 태그 style 태그 만들기 */
/* 참고로 마침표 역활로 ; 를 한다. */
body{
/*배경색*/
background-color: lightcoral;
}
p{
/*글자색*/
color:cornsilk;
}
</style>
</head>
<body>
<h2>CSS - 스타일 (디자인하기)</h2>
<p>내가 만든 html 태그에 글자색 변경, 정렬, 여백주는 디자인</p>
<p>위의 style 태그 안에 있는 CSS언어는 HTML언어와 다르다. </p>
<ul>
<li>구조 잡는 HTML 언어</li>
<li>꾸미는 CSS 언어</li>
<li>움직이는 JavaScript 언어</li>
</ul>
</body>
</html>ul태그 디자인수정
ul 태그에 나오는 점이 싫습니다.
제거도 디자인이기에 style 태그 안에서 해야합니다.
ul{
/*ul 디자인 (맨 앞 점 삭제)*/
list-style: none;
/*ul 디자인 (글자 배경색 지정)*/
background-color:darkkhaki;
}를 추가 합니다.
<!-- 디자인.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS에서 주석을 달 때에는 <!--가 아닌 이걸로 사용 */
/* CSS 디자인 하는 태그 style 태그 만들기 */
/* 참고로 마침표 역활로 ; 를 한다. */
body{
/*배경색*/
background-color: lightcoral;
}
p{
/*글자색*/
color:cornsilk;
}
ul{
/*ul 디자인 (맨 앞 점 삭제)*/
list-style: none;
/*ul 디자인 (글자 배경색 지정)*/
background-color:darkkhaki;
}
</style>
</head>
<body>
<h2>CSS - 스타일 (디자인하기)</h2>
<p>내가 만든 html 태그에 글자색 변경, 정렬, 여백주는 디자인</p>
<p>위의 style 태그 안에 있는 CSS언어는 HTML언어와 다르다. </p>
<ul>
<li>구조 잡는 HTML 언어</li>
<li>꾸미는 CSS 언어</li>
<li>움직이는 JavaScript 언어</li>
</ul>
</body>
</html>높이와 너비
<!-- 디자인2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>디자인2 - 높이와 넓이</h3>
<h4>오늘의 추천 집들이 구경해 보세요.</h4>
<!-- 인터넷에서 마우스 오른쪽 클릭해서 "이미지 주소 복사" -->
<img src="https://image.ohousecdn.com/i/bucketplace-v2-development/uploads/projects/cover_images/160455620200336937.jpg?w=1920&h=600&c=c" alt="">
<p>시공없이 최소한의 스타일링한 25평 아파트</p>
</body>
</html>사진이 너무크다.
style 태그로 조율하자.
300개 픽셀로 크기 지정해서 줄이자.
<style>
img{
width: 500x;
}
</style>
auto
높이를 크기에 맞춰 자동으로 맞추게 해주자.
<style>
img{
width: 1000px;
height: auto;
}
</style>글씨 정렬
text-align
center
<style>
body{
/*글씨를 가운데 정렬*/
text-align: center;
}
</style>
<!-- 디자인2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 1000px;
height: auto;
}
body{
/*글씨를 가운데 정렬*/
text-align: center;
}
</style>
</head>
<body>
<h3>디자인2 - 높이와 넓이</h3>
<h4>오늘의 추천 집들이 구경해 보세요.</h4>
<!-- 인터넷에서 마우스 오른쪽 클릭해서 "이미지 주소 복사" -->
<img src="https://image.ohousecdn.com/i/bucketplace-v2-development/uploads/projects/cover_images/160455620200336937.jpg?w=1920&h=600&c=c" alt="">
<p>시공없이 최소한의 스타일링한 25평 아파트</p>
</body>
</html>
데이터기반 스토리텔링을 통해 인사이트를 얻습니다.