오랜만에 HTML & CSSFront-end/HTML & CSS2021. 3. 1. 15:17
Table of Contents
실습 사이트
JS Bin
Sample of the bin:
jsbin.com
막히는 게 있어서 다시 CSS를..
CSS Selctors
div, span으로 html태그(노드)들을 Boxing할 수 있다.
div는 block레벨 (한줄 다먹기)
span은 inline레벨이다 (한줄의 태그의 공간만큼만 먹기)
cascading은..
css의 속성을 찾을때 우선순위를 두는 것..
개발자가 작성한 .css 파일을 찾고 없으면 브라우저에 정의된 것을 작성..
아래는 *, 태그, 클래스, id에 따른 우선순위
1. id (#id)
2. 클래스 (.class)
3. 태그 (Tag)
4. 전역 (*)
인 것을 확인할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol>
<li id="special" class="lili">First</li>
<li class="lili">Secode</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red">red</div>
<div class="blue">blue</div>
<a href="naver.com">Naver</a>
<a href="googlenaver.com">Google</a>
<a>Empty</a>
</body>
</html>
* {
color: green;
}
li {
color: blue;
}
.lili {
color: red;
}
#special {
color: pink;
}
.red {
width: 100px;
heght: 100px;
background: red;
}
.blue {
width: 100px;
heght: 100px;
background: blue;
}
button:hover {
color: red;
background: beige;
}
a[href$="naver.com"] {
color: purple;
}
a[href] : 모든 href를 가진 태그
a[href=""]
a[href^=""] : 시작할때
inline: 태그내의 내용을 중요시
inline-block: css의 속성을 더 중요시
: 둘다 한줄에 여러개 들어감
display
다른 비유
inline : 물건
inline-block : 한줄에 여러개 들어갈 수 있는 상자
block: 한줄당 하나만 들어가는 상자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Block Level -->
<div>123o435341879564389756wervasd</div>
<div>2</div>
<div>3</div>
<!-- Inline Level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>div {
width: 80px;
height: 80px;
margin: 20px;
background: pink;
display: inline-block;
}
span {
width: 80px;
height: 80px;
margin: 20px;
background: yellow;
display: block;
}
Position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<article class="container">
<div></div>
<div class="box">I'm Box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</aritcle>
</body>
</html>
div {
width: 80px;
height: 80px;
margin: 20px;
background: pink;
/* display: inline-block; */
}
.container {
background: beige;
left: 20px;
top: 20px;
position: relative; /* 기본값 static */
}
.box {
background: red;
}
'Front-end > HTML & CSS' 카테고리의 다른 글
| HTML 중 중요한것.. input태그의 disabled 속성 (0) | 2021.03.07 |
|---|---|
| CSS 정리 (0) | 2020.10.15 |
@philo0407 :: Philo의 다락방
hi hello... World >< 가장 아름다운 하나의 해답이 존재한다
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
