> Inline & Block

html은 inline 과 block 로 나눠진다.

Inline

-> 한 줄로 정렬되는 것

Block
-> 줄바꿈이 일어나면서 Y축으로 정렬되는 것

차이점

inline요소는 공간을 만들수 없지만, block 는 공간의 크기를 만들 수 있다.

ex1)

Inline InlineInline

ex2)

Block

Block

Block

inline은 상하 배치작업이 불가능하고, block는 상하 작업이 가능하다

좌표설정할때 넣는 속성 코드

margin-top
margin-bottom
padding-top
padding-bottom

중요

설계도면 작업 할때 내가 사용한 태그가 inline, block 중 어떤 태그가 사용되었는지
공간작업을 배치 할 수 있는지 꼭 공부하기!
w3schools.com/tags/default.asp

--구분하는방법--

동일한 태그를 연달아 기입했을 때 줄바꿈 현상이 일어나지 않으면 inline, 일어나면 block으로 구분 가능

설계도면을 짤때 고려할 점

1. 나중에 컨텐츠를 옮길때 옮기는 횟수를 얼마나 줄일 수 있는지(css관련)

2. 비슷한 성격(이미지는 이미지,글자는 글자끼리 묶어내는 것)을 가진 컨텐츠를 한 공간에 감싸고 있는지

카카오톡 친구목록 설계도면 실습

코드설명

div태그는 임의 에 공간을 만들 때 사용

이름과 글자 오른쪽으로 옮겨 주세요 했을때 div태그에 h3와 p 태그를 감싸 오른쪽으로 옮기면 된다

##꿀팁@!##

만약에이미지를 넣었는데
이미지 사진을 안 넣었을때 이미지 크기가 50*50이면 이미지 공간을 미리세팅하고 이미지 파일을 세팅 하면 되니깐
https://placeholder.com/ 여기 사이트에서
밑 부분 사이트 주소 복사 붙여 넣기 하기

이미지 크기 바꾸는 법 100*50 (첫번째 숫자가 가로 두번째가 높이)

결과물

• 

  정윤돌

  나는 멋쟁이

• 정윤돌

  나는 멋쟁이

• 정윤돌

  나는 멋쟁이

사이트 하단 부분

footer , footer<nav 이용해서 ul,li 태그 이용!

<footer>
	<nav>
		<ul>
			<li>
				<a href="#">메뉴1</a>
			</li>
			<li>
				<a href="#">메뉴2</a>
			</li>
			<li>
				<a href="#">메뉴3</a>
			</li>
		</ul>
	</nav>
</footer>

카카오 친구목록 뿐만아니라 다양한 사이트의 상단,중앙,하단 부분을 나눠 직접 실습해봄