Dev Log #2 - 6월 29일
오늘 학습한 내용
1. Inline요소와 Block요소
- Inline: 글자가 한 줄로 병렬 되는 것
- Block: 글자가 줄 바꿈 되어 나타나는 것
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
⭕️ 결과물
- Inline: 공간에 대한 크기를 설정할 수 없다.
- Block: 공간에 대한 크기를 설정할 수 있다.
🚨 공간에 대한 크기 설정은 아래 css값을 설정해서 주었다.
<style>
span {
width: 300px;
height: 300px;
background-color: yellow;
}
h1 {
width: 300px;
height: 300px;
background-color: yellow;
}
⭕️ 결과물
- margin은 오브젝트로 옮기고자 할때 사용하는 속성, 좌표 설정을 할때 사용하는 속성이다.
- Inline: 상하 배치 작업을 할 수 없다.
- Block: 상하 배치 작업을 할 수 있다. margin-top, margin-bottom, padding-top, padding-bottom을 사용 할 수 있다.
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;
}
⭕️ 결과물
2. 실습01_카카오 친구 리스트 화면 설계 도면
-
디자이너가 아직 디자인 작업 중에 있다면 https://placeholder.com/ 사이트를 이용해서 이미지를 미리 삽입해놓고 후에 수정한다.(실무 꿀팁!)
-
div: 서랍장 역할, 클라이언트의 수정 요청 시 조금 더 효율적으로 수정 가능하다.
-
각각 동급의 내용은 ul, li 태그로 처리한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
</head>
<body>
<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>
<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>
</body>
</html>
⭕️ 결과물
3. 실습02_네이버 경제M 화면 설계 도면
- 저번 수업에 배웠던 학습 내용을 기준으로 작성한 것
- 틀은 카카오 친구 리스트 실습 틀이랑 거의 비슷 함.
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
</head>
<body>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>참 열심히 살았는데 4.5억뿐인 무주택자의 호소</h3>
<p>이분에게 해줄 조언은 단 한 가지다. 열심히 살았다는 그 에너지를 총동원하여 지금이라도 열심히 임장을 다녀라. 더는 늦기 전에. 그리고 어서 내 집을 마련하도록 하라. 열심히 살았지만 내 집 한 채 없다는 것</p>
<span>레이달리오</span>
<span>-</span>
<span>1개월 전</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>금리 20% 적금 보유한 송은이, 티끌모아 태산 가능했던 과거 금리는?</h3>
<p>'티끌모아 태산'이라는 말은 이제 먹히지 않는 말인 것 같습니다. 아주 적은 금리로 인해 아무리 모아도 늘어날 생각을 하지 않아 답답하기만 하죠. 때문에 많은 분들이 주식이나 코인 등의 다른 재테크로 눈길을</p>
<span>꿀팁연구소</span>
<span>-</span>
<span>6일 전</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>아파트 구입이 어려워지자 전문가들이 사라고 권한 뜻밖의 재테크</h3>
<p>박스권 탈출 가능성 주목 건설주 파헤치기최근 조정 국면에 들어갔지만 건설사 주식은 작년 4분기부터 좋은 흐름을 보이는 중이다. 이 같은 상승세에 힘입어 10년 째 횡보했던 건설사 주식도 박스권을 탈피</p>
<span>비비드콘텐츠</span>
<span>-</span>
<span>3주일 전</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>경제M</span>
<h3>'국내 최초' 찬사받았지만 한순간 사라진 기업</h3>
<p>[MONEYGROUND 디지털뉴스팀] 시대가 빠르게 변하면서 기술도 급속도로 성장하고 있다. 이에 추억의 뒤안길로 간 전국을 강타했던 인기 기업들도 다수 보이는데, 청소년들 사이에서 큰 열풍을 끌고 왔던</p>
<span>머니그라운드</span>
<span>-</span>
<span>2개월 전</span
</div>
</a>
</li>
</ul>
</body>
</html>
⭕️ 결과물
4. 실습03_네이버 레시피 화면 설계 도면
- 네이버 경제M 틀과 유사함.
ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150x80">
<div>
<span>[푸드클래스]송현경 요리연구가</span>
<h3>쌀로 만든 달콤한 디저트, 라이스푸딩</h3>
<p>시나몬 파우더와 메이플 시럽으로 달콤함을 채운 이색 디저트 만드는 법</p>
<div>
<span>#프랑스가정식</span>
<span>#디저트</span>
</div>
</div>
</a>
</li>
</ul>
⭕️ 결과물
5. 실습04_다음 설계 도면
- 구역 설정을 할 때에는 바깥 쪽에서 안쪽으로 한다는 느낌을 가질 것
- 큰틀을 먼저 설정하고 작은 틀 설정 할 것
- 먼저 상단, 하단 큰 틀을 나누고 상단에서 이미지 영역 네개를 왼쪽으로 묶고 텍스트 영역을 오른쪽으로 묶었다. 또 텍스트 영역 부분을 상단, 하단으로 나누어 처리했다다.
<!-- 상단 영역->
<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>
<!-- 오른쪽 -->
<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>
<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>
</div>
6. 실습05_다음 뉴스 설계 도면
- 병렬하는 내용이 성격이 다르면 ul, li태그를 사용하지 않고 span 태그를 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
</head>
<body>
<div>
<h3>하반기 수도권 집값, 역대급 상승 오나</h3>
<p>종 선행지표 줄줄이 급등</br>
'매수우위지수' 다시 100 위로</br>
'KB부동산전망지수' 120 넘어</br>
경매 낙찰가율 119% 사상최고</p>
<div>
<!-- 왼쪽 -->
<div>
<span>헤럴드경제</span>
<span>입력 2021.06.29 11:30</span>
<span>수정 2021.06.29. 11:30</span>
</div>
<!-- 오른쪽 -->
<div>
<a href=""><span>가</span></a>
<a href=""><span>나</span></a>
<a href=""><span>다</span></a>
</div>
</div>
</div>
</body>
</html>
⭕️ 결과물
7. 실습06_agency bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
</head>
<body>
<header>
<div>
<h1>
<a href="#"><img src=""></a>
</h1>
<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' Nice to Meet you</h3>
<a href="#">Tell me more</a>
</div>
</header>
</body>
</html>
- 개발자 도구를 통해서 화면이 어떻게 짜여있는 지 눈에 확인할 것
- 정보를 사용할 때 이용하는 태그, 공간을 사용할 때 이용하는 태그를 이용해서 일부 페이지를 실습해보았다.
8. 실습07_Helbak
- 덴마크 쇼핑몰
- footer 영역을 만들어 봄
- 디자인이 되어있는대로 왼쪽에서부터 작업 진행
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
</head>
<body>
<footer>
<!-- 왼쪽 -->
<div>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴1</a></li>
</ul>
</div>
<!-- 중앙 -->
<div>
<a href="#"><img src=""></a>
</div>
<!-- 오른쪽 -->
<div>
<p>Accepted 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>
</body>
</html>
9. 실습08_Kids Gao
-
상단영역의 설계도면 작업 진행
📌 Kids Gao
-
제일 상단에서 잠자리 부분 나오는 곳 까지
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
</head>
<body>
<header>
<div>
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
<div>
<img src="">
<img src="">
<img src="">
</div>
</header>
</body>
</html>
- 씨앗이 내려와서 자초,여성초,감초 텍스트 있는 부분까지
<div>
<div>
<!-- 왼쪽 -->
<div>
<img src = "">
<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
</div>
<!-- 중앙 -->
<div>
<img src = "">
<img src = "">
</div>
<!-- 오른쪽 -->
<div>
<img src = "">
<p>빵의 표면을 촉촉하게 해주는 글리세린과 오메가-9지방산이 풍부한 올리브유를 넣어서 보습 효과도 뛰어나답니다.</p>
</div>
</div>
</div>
오늘의 학습 후기(어려웠던 점, 개선할 점)
오늘은 웹 사이트 공간에 대한 설계 도면을 직접 실습해보는 시간을 가졌다.🙌 오늘 학습을 통해 레이아웃을 구성하기에 앞서 어떻게 짤 것인지 고민하는 것이 중요하다는 것을 느꼈다. 건축물도 초기 설계가 잘못되면 문제가 되듯이 웹을 제작 할때에도 마찬가지 임을 알게 되었다. 이제 개발자 도구를 통해 자주 방문하는 웹 사이트의 레이아웃, 공간 배치가 어떻게 되어있는 지 확인하는 습관을 가지도록 해야겠다! 오늘은 강사님의 코드를 보고 하나 하나 작업하는 환경이어서 어려웠던 점은 크게 없었다ㅎㅎ 내일도 열심히 수업을 듣고 기록하는 것을 목표로 해야겠다!😊 그리고 무엇보다 중요한 복습도 함께 할 것⭐️
Author And Source
이 문제에 관하여(Dev Log #2 - 6월 29일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@juhuii/Dev-Log-2-6월-29일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)