1. 학습내용
1. Inline vs Block
html에서 가장 중요한 내용
html 태그는 크게 Inline요소와 Block요소로 나뉘어져있다(입문단계)
1. Inline
글자가 한줄로 출력되고 공간을 만들지 못한다.
margin-top(좌표설정속성) 사용시 움직임이 없다. 즉 상하배치작업을 할 수 없다.(padding도 동일)
2. Block
글자가 줄바꿈되면서 y축으로 정렬됨, 공간을 만들수 있다.(예제 - css사용)
margin-top 사용시 움직임이 있다. 즉 상하배치작업 가능(padding 동일)
간단하게 구별하는 방법(css없이)
동일한 태그를 연달아 기입시 줄바꿈 현상이 안일어나면 Inline, 일어나면 Block
html
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
css
<style>
span {
width: 300px;
height: 300px;
background-color: yellow;
margin-top: 100px;
margin-bottom: 100px;
padding-top: 100px;
padding-bottom: 100px;
}
h1 {
width: 300px;
height: 300px;
background-color: yellow;
margin-top: 100px;
margin-bottom: 100px;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
2. Make kakao screen(basic)
친구들사이(동급) - ul사용
설계도면을 만들때 2가지를 고려하여야하는데 1. 컨텐츠를 옮길때 옮기는횟수 자체를 얼마나 줄일 수 있는지(css관련), 2. 비슷한 성격을 가진 content를 한공간에 감싸고있는지(밑에 예시는 이미지가 한개고 글자가 두개니까 div로 글자를 감쌈)
실무팁 : img에 그림을 디자이너가 작업을 덜했다 그럴때 img에 https://via.placeholder.com/150를 넣어준다. 150에 50x50이나 수치를 변경하면 그에 맞는 사진이 들어간다.
설계도면만 짠거지만 이 설계도면을 소홀히하면 건물을 다시 지어야할수도있다.(반복적 연습)
html
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/100x50">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/100x50">
<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>
3. Naver Menu Practice
단어로 표기된 것 - span, 동일한 성격 가지고있어서 div태그로 묶음
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/100x80">
<div>
<span>경제M</span>
<h3>부회장님의 취미생활</h3>
<p>Hello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello World</p>
<span>머니그라운드</span>
<span>-</span>
<span>4일 전</span>
</div>
</a>
</li>
</ul>
서랍장(div)안에 또다른 서랍장(div)가능
보여지는 레이아웃의 디자인은 전부다 css에서 제어한다
<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>
4. daum 화면 설계도면만들기(basic)
div로 상단과 하단의 영역을 나누어준다
어떤 부분에서 header를 써야하고 footer, nav를 써야하는지 헷갈린다면 일단 div태그를 사용해서 작성한다는 생각으로 도면을 작성
<!-- 위쪽 -->
<div>
<!-- 왼쪽 -->
<div>
<a href="#">
<img src="https://via.placeholder.com/200x120">
</div>
<!-- 오른쪽 -->
<div>
<!-- 오른쪽 상단-->
<div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<!-- 오른쪽 하단-->
<div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
<!-- 아래쪽 -->
<div>
<ul>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
<li>
<a href="">
<img src="">
<p></p>
</a>
</li>
</ul>
</div>
역할이 다른 list면 ul-li태그를 사용하지않고 span을 사용
<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>
5. agency 사이트 header 만들어보기
<header>
<div>
<h1>
<a href="#">
<img src="smartbootrap.png">
</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>
6. helbak 사이트의 하단만들기
<footer>
<!-- 왼쪽 -->
<div>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
</div>
<!-- 중앙 -->
<div>
<a href="#"></a>
</div>
<!-- 오른쪽 -->
<div>
<p>Accpeted payment methods</p>
<ul>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
</footer>
2. 학습한 내용 중 어려웠던 점
어제보다 분량이 적어 복습할 시간이 많아 그렇게 어렵지는 않았지만 저번에 배운 selection 부분이나 article 부분을 직접 실습해본 경험이 없어서 설계도면을 짤때 어느 곳에 배치해야할지 감이 잘 안잡혔다.
3. 해결방법
아직 해결된 사항은 아니지만 선생님께서 알려주신 여러 사이트들을 둘러보며 많은 페이지 소스를 보며 비교해가면서 익숙해질수 밖에 없는 것 같다.
4. 학습소감
하나하나 만들어가는 기쁨이 뭔지 알게 되었다. 아직 많이 부족하다고 느끼지만 계속 이 공부를 할 수 있겠다 라는 자신감이 붙었고 그리고 멋진 나만의 홈페이지를 만들어보고싶다고 생각하게 되었다.
매우 긍정적인 개발자