display의 종류

모든 요소는 딱 한 개의 display 값 가짐,

가질 수 있는 display의 종류는

inline
block
inline-block
flex
list-item
none

등 여러 가지가 있는데, 대부분의 요소들은 inline과 block 중 한 가지

inline display

inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향 & 필요한 만큼의 가로 길이만 차지하는 성향 O

다음 요소들은 기본 display 값이 inline

<span>
<a>
<b>
<i>
<img>
<button>

block display

block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향 & 최대한 많은 가로 길이를 차지하는 성향 O

다음 요소들은 기본 display 값이 block

<div>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<p>
<nav>
<ul>
<li>

inline 요소 → block

i { display: block;

block 요소를 → inline

div { display: inline;

Block 요소 - 가로 길이와 세로 길이를 직접 설정해줄 수 O

inline 요소 - 자동으로 설정 O, 가로, 세로 길이의 개념 X

만약 inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해주고 싶으면 -> inline-block 사용 !

<img> 태그는 inline display

inline과 inline-block 은 텍스트처럼 다룰 수 있음

텍스트 스타일링 -> vertical-align: top; - 이미지 위를 기준으로 정렬, top bottom middle

.container {

text-align: center;

}

사진만 있어도 정렬가능

하지만,

.img {

display: block;

margin-left: auto;

margin-right: auto;

}

를 쓰는 걸 추천 !

링크가 이미지인 경우

</a>

한꺼번에 묶여서 링크인 경우가 있음

</a>

display: block;

color: black;

text-decoration: none;

css 써주면 정상적으로 나옴

* 이미지 버튼

↓html

<!DOCTYPE html>
<html>
<head>
  <title>이미지 버튼</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <h1>Check me out on...</h1>
  
  <div class="sns">
    <a href="https://facebook.com" target="_blank"><img src="images/facebook.png"  width="70px"></a>
    <a href="https://instagram.com" target="_blank"><img src="images/instagram.png" width="70px"></a>
    <a href="https://github.com" target="_blank"><img src="images/github.png" width="70px"></a>
  </div>
</body>
</html>

↓css

body {
  margin: 50px 0;
}

h1 {
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  margin-bottom: 20px;
  text-align: center;
}

.sns {
  text-align: center;
}

.sns a:not(:last-child) {
  margin-right: 20px;
}

↓실행 결과

박스 안에 줄이 하나도 없으면 baseline은 박스 밑으로 설정됨

기본값은 overflow: visible; 인데

hidden, scroll을 하면 박스에 맞춰서 baseline 설정됨

* vertical-align: top; - top bottom middle

* 가로 가운데 정렬

어떤 요소를 가로로 가운데 정렬하려면,

inline 요소

inline 또는 inline-block 요소면 부모 태그에 text-align: center;를 써주면 됩니다.

block 요소

block 요소면 margin-left: auto;, margin-right: auto; 를 쓰면 됨

* 세로 가운데 정렬

- 가짜 요소 더하기

vertical-align: middle; (vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용되기 때문에) 그리고 .info → inline 으로

-> vertical-align: middle;을 설정(요소의 가운데를 부모 요소의 소문자 'x'의 가운데와 맞춤)

-> .info 요소를 완전 가운데로 오게 하려면 우선 소문자 'x'가 가운데로 와야함

-> 세로 길이가 100%인 요소를 만들고, 그 요소에도 vertical-align: middle;

-> 소문자 'x'를 지우고, .helper 요소의 가로 길이를 없앰

->.info의 가로 길이가 100%라면?

<!--html-->
<div class="container">
  <div class="helper"></div>
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>

<!--css-->
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

갑자기 이상한 곳에 위치됨, 사실 .helper 와 .info 요소 사이에 띄어쓰기가 한 칸 있어서, 가로 길이 100%인 .info 요소는 자리 부족으로 다음 줄로 가버린다!

이 문제를 해결하기 위해서는 두 가지 방법이 있습니다.

우선 띄어쓰기를 없애는 방법:

<!--html-->
<div class="container">
  <!-- 스페이스 없애기 -->
  <div class="helper"></div><div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>

<!--css-->
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

띄어쓰기 공간 만큼의 마이너스 여백을 주는 방법:

<!--html-->
<div class="container">
  <div class="helper"></div>
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>

<1--css-->
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;

  /* 이 경우 띄어쓰기는 5~7px 정도였습니다! */
  margin-left: -7px;
}

주의 사항:

어떤 요소에 height: 100%;를 설정하기 위해서는 부모의 height가 설정되어 있어야함, 위 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능!

- line-height로 해결

.info를 인라인 블록으로 설정해주면, line-height 속성을 활용해볼 수도 있다,

부모인 .container에 height와 동일한 line-height를 주자.

line-height 속성은 자식들에게 상속되기 때문에 .info에는 line-height: normal;을 꼭 써야함!

<!--html-->
<!DOCTYPE html>
<div class="container">
  x
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>

<!--css-->
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
  line-height: 400px;
}

.info {
  background-color: lime;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

* 내비게이션 바 로고 (★★★★ 어려워)

<!--html-->
<!DOCTYPE html>
<html>
<head>
  <title>코드잇</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <div id="navbar">
    <a id="logo" href="#">
      <img src="images/logo.png" height="25">
    </a>
  </div>
    
  <div class="hero-header">
    <div class="info">
      <h1><b>코딩</b>, 스펙이 아니라 <b>필수</b>입니다.</h1>
      <h2>코드잇은 코딩을 통해 생각하는 법을 가르칩니다.</h2>
      <a href="#">더 알아보기</a>
    </div>
  </div>
</body>
</html>


<!--css-->
body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
}

#navbar {
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50);
  height: 60px;
}

#logo {
  font-family: serif;
  float: left;
  line-height: 60px;
}

#logo img {
  vertical-align: middle;
}

.hero-header {
  background-image: url("../images/hero_image.jpg");
  background-size: cover;
  background-position: center center;
  height: 670px;
  text-align: center;
  
  line-height: 670px;
}

.hero-header .info {
  line-height: normal;
  
  display: inline-block;
  vertical-align: middle;
}

.hero-header .info h1 {
  font-size: 36px;
  margin: 0;
  margin-bottom: 13px;
  color: white;
  font-weight: 400;
}

.hero-header .info h2 {
  font-size: 16px;
  margin: 0;
  margin-bottom: 60px;
  color: white;
  font-weight: 400;
}

.hero-header .info a {
  font-size: 14px;
  background-color: white;
  color: #464273;
  padding: 10px 40px;
  text-decoration: none;
  border-radius: 5px;
}

저작자표시

'coding study' 카테고리의 다른 글

코드잇 코딩캠프 7기 (6/23 ~ ) - 28일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 신문광고, 그리드 연습) (0)	2021.07.20
코드잇 코딩캠프 7기 (6/23 ~ ) - 27일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 해변의 몽숭이, 명언, 우표 붙이기) (0)	2021.07.19
코드잇 코딩캠프 7기 ( 6/23 ~ ) - 23일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - CSS 최적화) (0)	2021.07.15
코드잇 코딩캠프 7기 ( 6/23 ~ ) - 22일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 마우스오버) (0)	2021.07.14
코드잇 코딩캠프 7기 ( 6/23 ~ ) - 21일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 코딩의 민족) (0)	2021.07.13

또밥 또바기

코드잇 코딩캠프 7기 (6/23 ~ ) - 24일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 이미지버튼, 내비게이션 바 로고)

display의 종류

inline display

block display

inline 요소 → block

block 요소를 → inline

inline과 inline-block 은 텍스트처럼 다룰 수 있음

* 이미지 버튼

* vertical-align: top; - top bottom middle

* 가로 가운데 정렬

inline 요소

block 요소

* 세로 가운데 정렬

- 가짜 요소 더하기

- line-height로 해결

* 내비게이션 바 로고 (★★★★ 어려워)

'coding study' 카테고리의 다른 글

티스토리툴바

코드잇 코딩캠프 7기 (6/23 ~ ) - 24일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 이미지버튼, 내비게이션 바 로고)

display의 종류

inline display

block display

inline 요소 → block

block 요소를 → inline

inline과 inline-block 은 텍스트처럼 다룰 수 있음

* 이미지 버튼

* vertical-align: top; - top bottom middle

* 가로 가운데 정렬

inline 요소

block 요소

* 세로 가운데 정렬

- 가짜 요소 더하기

- line-height로 해결

* 내비게이션 바 로고 (★★★★ 어려워)

'coding study' 카테고리의 다른 글

'coding study' Related Articles

티스토리툴바