C-log

CSS:Layout의 집착(2) 본문

💅CSS

CSS:Layout의 집착(2)

4:Bee 2023. 3. 20. 20:38
728x90

div와 span의 차이 : HTML5 - display

 먼저 div는 존재만으로도 css가 바로 적용이된다. 하지만 span의 경우 다르다. 입력된 값이 있어야 적용된다. 여기서 span은 div보다 한번더 번거로운 과정을 거친다. 그것은 바로 display때문이다.

 div는 display가 기본적으로 block이다. block으로 설정되어 있으면(되어 있는 div) width와 height값이 적용되지만 그렇지 않은 span같은 경우 display의 속성을 변경해주어야 한다.

inline과 block의 차이

 inline은 앞서 말했든 태그 안에 값이 들어가 있어야하며 값이 들어가 있을 땐 한줄, 세로로 적용된다. 여기서 inline-block은 inline의 속성처럼 한줄, 세로로 block들을 배치하는 것이다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./app.css">
  <title>CSS</title>
</head>

<body>
  <!-- Block-level -->
  <!-- div는 display가 block인것이다. -->
  <div></div>
  <div></div>
  <div></div>

  <!-- Inline-level -->
  <!-- span은 안에 내용이 있어야 표기가 된다. -->
  <!-- span은 inline이기에 한줄에 동시에 여러개 -->
  <span>1</span>
  <span>2</span>
  <span>3</span>
</body>

</html>
div,
span {
  width: 80px;
  height: 80px;
  margin: 20px;
  /* border: solid 1px; */
}

div {
  background-color: tomato;
  display: inline-block;
  /* display: inline-block; */
  /* display: inline; */
  /* inline으로 설정하면 안보이지만 내용을 기입하면 span처럼 다시 등장한다. */
  /* block은 원하는 크기 지정 대로 글자가 들어간다. */
  /* inline-block은 한 줄에 상자가 들어가는 것 */
}

span {
  background-color: teal;
  /* display: block; */
}

내가 원하는 위치로 : CSS - position

relative는 현재 자신의 위치에서 left,top의 값이 적용되며 움직인다. absolute는 자신(object)이 가장 가까운 위치의 박스에서 left,top값이 적용된다. fixed는 widnow를 기준으로 위치가 적용이된다. sticky는 스크롤해도 설정된 자신의 위치는 고정된 상태로 있다. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./app.css">
  <title>CSS</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>
  </article>


</body>

</html>
div {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  background: tomato;
}

/* 상자의 포지션 바꾸기 */
/* position은 기본적으로 position static이다. */
/* 그래서 position을 relative로 변경해야 한다. */
.container {
  background: #a8dadc;
  left: 20px;
  top: 20px;
  position: relative;
}

.box {
  background: #1d3557;
  left: 20px;
  top: 20px;
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

/* relatvie는 원래 내가 있는 위치에서 변경을 한다. */
/* absolute는 담겨있는 상자 안에서 가장까운 박스(container)안에서 위치변경이 가능하다 */
/* fixed는 window를 기준으로 움직인다. */
/* sticky는 스크롤 할 때 원래 있는 자리에서 고정된다. */
728x90
저작자표시

'💅CSS' 카테고리의 다른 글

CSS의 집착  (0) 2023.06.07
'💅CSS' Related Articles more
Comments