Inline / Block

<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>

<출력화면>

Inline과 block 차이점:
Inline은 공간에 대한 크기 설정 못함 한줄출력
block는 가능 줄바꿈 일어남

설계도면 작성시 비슷한 유형끼리 묶어서 작성 ex) 사진은 사진끼리 글자는 글자끼리

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/100X50">
			<div>
				
				<h3>박지연</h3>
				<p>다정한 사람</p>
			</div>
		</a>
	</li>
 
</ul>

 <div>
	<h3>박지연</h3>
	<p>다정한 사람</p>
</div>

h3 박지연(프로필이름)과 p 다정한 사람(플필내용)이 같이 보여지는 유형일때 <div>로 묶어 표시하기

https://via.placeholder.com/100X50 : 이미지 크기만 저장해졌을때 쓰면 유용

각각의 리스트들은 동급 : ul li로 표기

실습 뉴스 헤더 만들기
실습이미지

<div>
	<h3>인천 서구 아파트 시장에 무슨 일이</h3>
	<div>
		<!-- 왼쪽 -->
		<div>
			<span>헤럴드 경제</span>
			<span>입력 2021.05.03</span>
			<span>수정 2021.05.03</span>
		</div>

		<!-- 오른쪽 -->
		<div>
			<a href="#"><span>가</span></a>
			<a href="#"><span>나</span></a>
			<a href="#"><span>다</span></a>
		</div>
	</div>
</div>

만든이미지

실습이미지(만들이미지)

		<nav>
			<ul>
				<li><a href="#">Services</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Team</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</div>

	<div>
		<h2>Welcome To Our Studio</h2>
		<h3>IT'S NICE TO MEET YOO </h3>
		<a href="#">TELL ME MORE</a>
	</div>
</header>