엘리먼트의 부모/자식/형제 관계와 텍스트

<div>잘가세요.</div>
<section>안녕하세요.</section>

div {
  /* 글자의 두께 조절 */
  font-weight:normal;
  font-weight:bold;
  /* 기본폰트의 3배 */
  font-size:3rem;
  font-size:140px;
  /* 자간조절 */
  letter-spacing:-10px;
  color:#787878;
}

section {
  font-size:10rem;
  /*
  rgba 함수의 인자
  인자 1(red) : 0 ~ 255 까지 넣어서 실험
  인자 2(green) : 0 ~ 255 까지 넣어서 실험
  인자 3(blue) : 0 ~ 255 까지 넣어서 실험
  인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
  */
  color:rgba(255,0,0,0.5);
}

 

실행 화면

 

<!-- 나를 감싸는 엘리먼트 : 부모 엘리먼트 -->
<!-- 내가 감싸는 엘리먼트 : 자식 엘리먼트 -->
<!-- 같은 부모를 둔 엘리먼트 : 형제 엘리먼트 -->

<!-- nav의 부모 엘리먼트 -->
<div>
  <!-- div의 자식 엘리먼트 -->
  <!-- 막내 nav엘리먼트의 인접 형 -->
  <nav></nav>
  <!-- div의 자식 엘리먼트 -->
  <!-- 첫째 nav엘리먼트의 인접 동생 -->
  <nav></nav>
</div>

<!-- 너비가 지정되지 않았다면, 최대한 늘어난다. -->
<div>
  안녕
</div>
<section>
  잘가
</section>

div, section{
  font-size:5rem;
  background-color:pink;
}

section{
  background-color:green;
}

실행 화면

 

<!--
높이가 지정되지 않았다면, 최소한으로 줄어든다.
-->

<section>안녕</section>
<div>잘가</div>

section, div {
  background-color:red;
  font-size:10rem;
}

div {
  background-color:green;
  font-size:13rem;
}

실행 화면

 

<!--
무조건 한줄에 하나씩 나온다.
-->
<div>안녕</div>
<section>잘가</section>

div, section {
  font-size:5rem;
  border:10px solid red;
  width:300px;
}

실행 화면

 

<!-- 너비가 지정되지 않았다면, 최소한으로 줄어난다. -->
<div>
  안녕
</div>
<section>
  잘가
</section>

div, section {
  font-size:5rem;
  background-color:pink;
  display:inline-block;  
}

section {
  background-color:green;
}

실행 화면

 

<!--
높이가 지정되지 않았다면, 최소한으로 줄어든다.
-->

<section>안녕</section>
<div>잘가</div>

section, div {
  background-color:red;
  font-size:10rem;
  display:inline-block;
}

div {
  background-color:green;
  font-size:3rem;
  
}

실행 화면

 

<!--
최대한 한줄에 여러개가 나온다.
-->
<div>안녕</div>
<section>잘가</section>

div, section {
  font-size:5rem;
  border:10px solid red;
  width:550px;
  display:inline-block;
}

실행 화면

 

 

display 속성 정리

종류	inline-block, inline	block	none
너비	너비가 설정되어 있지 않다면 최소한으로 줄어든다.	너비가 설정되어 있지 않다면 최대한으로 넓어진다.	없어진다.
높이	높이가 설정되어 있지 않다면 최소한으로 줄어든다.	높이가 설정되어 있지 않다면 최소한으로 줄어든다.	없어진다.
본질	글자화	블록화	-
line 사용	한 줄에 최대한 여러개가 나온다.	한 줄을 무조건 혼자 쓴다.	-
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를 사용해서 정렬	-

 

예외

• a, span 엘리먼트는 기본적으로 display가 inline이다.
• img 엘리먼트는 기본적으로 display가 inline-block이다.
• inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.