style을 통해서 div,p,body... 부분의 배경색, 글자색을 수정할 수 있다.
<style type = "text/css">
body{
background-color : blue;
}
div{
color:pink;
}
p{
color: red;
font-size: 50px;
}
style에 p 태그에 색상을 선택하면 모든 p태그에 적용이 된다. 이때 id 와 class를 사용하면 원하는 곳에 원하는 스타일을 적용할 수 있다.
<style type="text/css">
p{
color:red
}
#testid{
color:blue
}
</style>
</head>
<body>
<p>안녕하세요</p>
<p>반갑습니다!!!!</p>
<p id="testid">여기만 적용해볼까요?</p>
<style type="text/css">
div {
border: 1px solid red;
padding: 100px;
margin: 100px;
}
</style>
아래처럼 target값을 넣어주면 링크를 클릭할 떄 새로운 탭에서 해당 내용을 띄어준다.
<a href="https://www.naver.com" target="_blank">네이버 바로가기</a>
table, list 에도 스타일을 적용할 수 있다.
<table>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
<style>
a{
color: green;
}
table , td , th{
border: 1px solid black;
}
ul{
list-style-type: upper-latin;
}
</style>
width 에 비율을 넣어서 현재 화면 크기에 비례해서 스타일을 설정해줄 수 있다. 또한 float:left 설정을 통해서 바로 옆에 위치시킬 수도 있다.
<style>
div{
width: 50%;
background-color: pink;
}
</style>
<style>
div{
width: 50%;
background-color: pink;
float: left;
}
</style>
@media를 사용하면 창 크기가 500px가 되었을때 다르게 설정할 수 있다.
@media(max-width:500px) {
body{
background-color: black;
}
}