Front-end/HTML & CSS

오랜만에 HTML & CSS

philo0407 2021. 3. 1. 15:17
실습 사이트

jsbin.com

 

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;
}