html/css

같은형제 끼리 마진이 닿는부분은 더 큰수의 마진을 가진 것이 작은수의 마진을 가진 것의 마진을 잡아먹는다.(곂친다.)

부모와 자식 끼리 마진은 자식이 부모를 뚫고 마진이 나타난다.

각자의 콘텐츠와 마진을 확보하는방법은 블록포맷컨텍스트를 사용한다.

>1. 부모에게 float:left와 width:100%를 준다.

>2. 부모에게 포지션 relative를 주고 자식에게 absolute 블록포맷컨텍스트

>3. 부모에게 display : inline-block과 width : 100%를 준다

>4. 형제와 형제간은 하나의 것에게 float: left/right 와 width를 준다.

vertical-align 과 align 은 MIDDLE을 줄수 있으며 같은줄에 있는것들을 MIDDLE 처리할 수 있음

[NTH-CHILD]

<main> <!--메인컨텐츠-->

<div>
<h3>연합뉴스</h3> main

<p>
<h3>언론사목록</h3>   =>main h3:nth-child(3) 이된다. 왜냐면 <p>도포함하여 카운팅하기때문에 <p>는 (2)가 되기때문
<ul>
<li><img src="./동아일보.png" alt="동아일보"/></li>
<li><img src="./이데일리.png" alt="이데일리"/></li>
</ul>

[NTH-OF-TYPE]

<main> <!--메인컨텐츠-->

<div>
<h3>연합뉴스</h3> main

<p>
<h3>언론사목록</h3>   =>main h3:nth-child(2) 이된다. 왜냐면 <p>를 생략하고 오로지 h3만 카운팅
<ul>
<li><img src="./동아일보.png" alt="동아일보"/></li>
<li><img src="./이데일리.png" alt="이데일리"/></li>
</ul>

구문 전에 span에서 백그라운드 이미지를 쓰면 같은 div나 ul안에서 다음 span에 이전 span의 백그라운드 이미지가 따라온다. 이럴땐 h2를 사용해 블라인드 클래스를 만들어 투명화 하고 span을 붙여쓰면 이전 span의 백그라운드 이미지가 사라지게 된다.

<li class="rank-live">
<h2 class="blind">실시간검색어</h2>
<span>1</span>
<span>박준영</span>

</li>