학습한 내용
Inline / Block
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
html 태그에서 가장 중요한 내용입니다. 웹사이트 레이아웃 작업에 영향을 미치는 요소이기 때문에 어떤 태그가 Inline요소인지 Block요소인지 꼭 알아두어야 합니다.
동일한 태그를 연달아 기입을 했을 때
Inline요소
- 줄바꿈 현상이 일어나지 않습니다.
- X축으로 정렬이 됩니다.
- 공간을 만들지 못합니다.
- 상하 배치작업이 불가능합니다.
Block요소
- 줄바꿈 현상이 일어납니다.
- Y축으로 정렬이 됩니다.
- 공간을 만들 수 있습니다.
- 상하 배치작업이 가능합니다.
학습한 내용을 바탕으로 작성한 결과물
- 카카오
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/100x50
">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
</ul>
<footer>
<nav>
<ul>
<li>
<a href="#">메뉴1</a>
</li>
<li>
<a href="#">메뉴2</a>
</li>
<li>
<a href="#">메뉴3</a>
</li>
<li>
<a href="#">메뉴4</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>- 네이버
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 레시피 -->
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x120">
<div>
<span>[푸드클래스] 승현경 요리 연구가</span>
<h3>바삭하고 고소한 브런치</h3>
<p>잘 구운 페이스티리 속에 부드럽고 진한 소스와 치즈가 듬뿍!</p>
<div>
<span>#오븐요리</span>
<span>#베사멜소스</span>
</div>
</div>
</a>
</li>
</ul>
</body>
</html>
- 뉴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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>
</body>
</html>- agency
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<div>
<h1>
<a href="#">
<img src="">
</a>
</h1>
<nav>
<ul>
<li><a href="#">Service</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 you</h3>
<a href="#">Tell Me More</a>
</div>
</header>
</body>
</html>학습한 내용 중 어려웠던 점 또는 해결못한 것들
작업을 하면서도 잠깐 사이에 제가 어느 부분을 작업하고 수정하고 있었는지 잊어버리는 경우가 많았습니다. 그리고 작성하고 있던 부분의 위, 아래 부분들과 중복되거나 헷갈리는 경우가 많았습니다.
해결방법 작성
큰 틀을 만들고 여러 부분으로 나눠놓을때 부분적인 것들 모두에 주석을 달고, 충분히 간격을 띄어놓음으로써 보다 보기 쉽게 작업을 할 수 있었습니다.
학습 소감
실제로 작업을 하고 크롬으로 네이버, 다음 등의 사이트를 검사를 통해서 작성된 소스를 봤을때 제가 배워서 실습한 것에서 기본틀은 크게 벗어나지 않아서 할 수 있다는 느낌이 조금은 들었습니다. 마치 건물을 세워 올릴때 뼈대를 먼저 구축해서 하나씩 쌓아 올라간다는 느낌이 많이 들었습니다.
