[2.2] Learning CSS
Classes
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
margin: 20px;
}
.btn{
padding: 5px 10px;
border-radius: 5px;
}
.teal {
background-color: teal;
}
.tomato{
background-color: tomato;
color: white;
}
</style>
<head>
<body>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
<span class="btn tomato">hello</span>
<span class="btn teal">hello</span>
</body>
</head>Inline block
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
margin: 20px;
}
div {
display: inline-block;
width: 50px;
height: 50px;
background-color: teal;
margin-right: 10px;
}
</style>
<head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</head>Flextbox part one
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: stretch;
}
div {
width: 50px;
background-color: teal;
}
#second {
background-color: yellow;
}
</style>
<head>
<body>
<div></div>
<div id="second"></div>
<div></div>
</body>
</head>Flexbox Part two
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
}
div {
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
color: white;
width: 300px;
height: 300px;
background-color: teal;
}
#second {
background-color: yellow;
}
</style>
<head>
<body>
<div>1</div>
<div id="second">2</div>
<div>3</div>
</body>
</head>
Fixed
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 20px;
}
div {
width: 300px;
height: 300px;
color: white;
background-color: teal;
}
#green{
position: fixed;
opacity: 0.2;
}
#different {
background-color: wheat;
width: 350px;
}
</style>
<head>
<body>
<div id="green"></div>
<div id="different"></div>
</body>
</head>Relative Absolute
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 20px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.green{
background-color: teal;
width: 100px;
height: 100px;
position: absolute;
bottom: 10px;
left: 10px;
}
</style>
<head>
<body>
<div>
<div class="green">
</div>
</div>
</body>
</head>Pseudo Selectors part one
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
span{
background-color: tomato;
}
span:nth-child(3n+1) {
background-color: teal;
}
</style>
<head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</head>Combinator
p > span (include)
p + span (not include, next)
p ~ span (바로 뒤에 오지 않을 때)
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
padding: 5px;
border-radius: 10px;
background-color: yellowgreen;
}
p span {
color: white;
}
div > span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>Lorem ipsum dolor sit amet... blah blah blah
<span>inside</span>
</p>
</div>
</body>
</html>Pseudo Selectors part Two
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
padding: 5px;
border-radius: 10px;
background-color: yellowgreen;
}
input {
border: 1px solid wheat;
}
input:required{
border-color: tomato;
}
input[placeholder~="name"] {
background-color: thistle;
}
</style>
</head>
<body>
<div>
<form>
<input type="text" placeholder="First name"/>
<input type="text" placeholder="Last name"/>
<input type="password" required placeholder="password"/>
</form>
</div>
</body>
</html>Active/Focus/Hover
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
input:focus {
background-color: tomato;
}
</style>
</head>
<body>
<div>
<input type="text" />
<input type="text" />
</div>
</body>
</html>Visited
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
a:visited {
color: pink;
}
</style>
</head>
<body>
<div>
<a href="https://www.naver.com">Go to NAVER</a>
</div>
</body>
</html>Visited - color
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
a:visited {
color: pink;
}
a:hover {
color: teal
}
a:focus {
color: turquoise
}
</style>
</head>
<body>
<div>
<a href="https://www.naver.com">Go to NAVER</a>
</div>
</body>
</html>Drag background color change
<html lang="kr">
<head>
<title>Home - My first website.</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
p::selection {
background-color:yellowgreen
}
</style>
</head>
<body>
<p>dkjkfjkajfkaf</p>
</body>
</html>Author And Source
이 문제에 관하여([2.2] Learning CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peng0code/2.2-Learning-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
