1.학습한 내용
- 태그의 종류
Inline : 상하 배치 작업을 할수 없다.
(줄바꿈 현상이 일어나지 않는다.)
Block : 상하 배치 작업이 가능하다.
(줄바꿈 현상이 일어난다.)
margin-top과 margin-bottom의 정의 (CSS 속성이지만, 나옴)
(https://images.velog.io/images/yeonsuhong5684/post/d19df2d4-7f65-4f3e-82f7-0adc76910216/image.png) - 실습 순서
(시간순대로) 카카오톡, 네이버, 다음, 뉴스, agency (영문 실습 사이트), kidsgao(강사님이 참여한 어린이 식품 사이트) , helbak (덴마크 쇼핑몰) - 실습 내용
카카오톡
코드를 입력하세요
<!DOCTYPE html>
<html>
<head>
<!-- meta 태그는 웹 브라우저에 보이지 않지만 웹 문서와 관련된 정보를
지정할때 사용.
meta 태그에서 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로
인코딩을 처리하기 때문에 한글이 깨질 수도 있음.
아래 문구를 꼭 적어 주는것이 좋음
head태그는 웹 문서의 정보를 담는다
cf. header 태그는 말 그대로 헤더 영역을 의미한다. 사이트 전체의 헤더도 있지만, 특정 영역의 헤더도 있다 사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입.
-->
<meta charset="utf-8">
</head>
<body>
<!-- ul : 순서 없는 목록의 시작과 끝을 나타냄
li : 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냄 -->
<ul>
<li>zkz
<a href="#">
<div>
<h3>강혜원</h3>
<p>다정한 사람</p>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>최예나</h3>
<p>장난끼 많은 사람</p>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>조유리</h3>
<p>노래 잘하는 사람</p>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>김민주</h3>
<p>애잔한 사람</p>
</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>
<!--nav 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. 흔히 내비게이션을 만들때 사용. nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함될수도 있고 독립해서 사용할 수도 있다. -->
</body>
</html>
**네이버
**naver.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/150*80">
<div>
<span>연예M</span>
<h3>아이즈원 재결합 하는것인가?</h3>
<p>IZ permanent IZ permanent IZ permanent IZ permanent IZ permanent IZ permanent IZ permanent IZ permanent IZ permanent </p>
<span>연예계뉴스plant</span>
<span>-</span>
<span>2일전</span>
</div>
</a>
</li>
</ul>
-->
<!-- 레시피 -->
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/200*120">
<div>
<span>[푸드클래스] 송현경 요리 연구가</span>
<h3>바삭하고 고소한 브런치</h3>
<p>잘 구운 페스트리 속에 부드럽고 진한 소스와 치즈가 듬뿍</p>
<div>
<span>#오픈요리</span>
<span>#간장소스</span>
</div>
</div>
</a>
</li>
</ul>
</body>
</html>
**다음**
daum.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<!-- 왼쪽 -->
<div>
<img src="">
</div>
<!-- 오른쪽 -->
<div>
<!-- 오른쪽 상단 -->
<div>
<ul>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
</ul>
</div>
<!-- 오른쪽 하단 -->
<div>
<ul>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
</ul>
</div>
</div>
<div>
<!-- 왼쪽 -->
<div>
<img src="">
</div>
<!-- 오른쪽 -->
<div>
<!-- 오른쪽 상단 -->
<div>
<ul>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
</ul>
</div>
<!-- 오른쪽 하단 -->
<div>
<ul>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></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>
<!-- 오른쪽 -->
<div>
<!-- 오른쪽 상단 -->
<div>
<ul>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
</ul>
</div>
<!-- 오른쪽 하단 -->
<div>
<ul>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
<li><a herf="#"></a></li>
</ul>
</div>
</div>
</body>
</html>
**뉴스**
news.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>
<a href="#"><span>원 </span></a>
</div>
</div>
</div>
</body>
</html>
**agency**
agency.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-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's nice to meet you</h3>
<a href="#">Tell me more</a>
</div>
</header>
</body>
</html>
**kidsgao**
Kidsgao
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<header>
<div>
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
<div>
<img src="">
<img src="">
<img src="">
</div>
</header>
-->
<!-- 항아리 부분 설계 도면 작업 -->
<div>
<div>
<!-- 왼쪽 -->
<div>
<img src="">
<div>
<img src="">
<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
</div>
</div>
<!-- 중앙 -->
<div>
<img src="">
<img src="">
</div>
<!-- 오른쪽 -->
<div>
<img src="">
<div>
<img src="">
<p>풍부한 올리브유를 넣어서 보습 효과도 뛰어나답니다.</p>
</div>
</div>
</div>
</body>
</html>
**helbak**
helbak.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<footer>
<!-- 왼쪽 -->
<div>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
</div>
<!-- 중앙 -->
<div></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> ```
# 2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들
이미지 삽입을 할때 사이즈 크기를 조절하기 위해 sublime text에서 *를 사용하여 ×를 나타내는줄 알았으나, *사용으로는 먹히지 않는것 같다. 이 부분을 좀더 찾아보아야할것 같다.
3. 해결방법 작성
# 서칭과 동영상 반복으로 해결못할 경우 강사님께 질문할 생각이다. 그전에 직접 찾아서 해결하는 것이 좋을것 같다.
4.학습 소감
이외에 웹페이지의 설계 도면을 짜는 방식 자체가 익숙하지 않은데, 잘못하다가는 사상누각이 될수도 있다는 생각이 든다. 진도가 조금은 빠른편이었는데, 오늘은 그래도 강의가 적어서 복습할 시간이 많은 것 같다. 부지런하게 복습해야 할 것같다.
일단 하는 개발자