210629

JunYeupKwon·2021년 6월 29일

개발일지 대구AI스쿨

대구ai스쿨

목록 보기

3/48

2회차강의

1시간 40분지점부터 플레이

1. 실습

1. 카카오톡 친구목록받기

(https://developers.kakao.com/docs/latest/ko/kakaotalk-social/common)

시작

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
    </html>

기본정보 입력

`<ul><li><a><img><h><p>` 이용해서 기본정보입력

<body>
<ul>
	<li>
		<a href="#">
			<img>
			<h3>Name</h3>
			<p>Comment</p>
		</a>
	</li>
</ul>
</body>

`<div>` 이용해서 감싸서 임의의 공간을 만들기

<body>
<ul>
	<li>
		<a href="#">
			<img>
				<div>
					<h3>Name</h3>
					<p>Comment</p>
			</div>
		</a>
	</li>
</ul>

출력값
- Name
  
  Comment

placeholder

https://via.placeholder.com/150

디자인 작업전 미리 공간잡기

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/100x50">
			<div>
				<h3>Name</h3>
				<p>Comment</p>
			</div>
		</a>
	</li>

출력값
- Name
  
  Comment
링크뒤에 숫자로 크기조절가능

아래하단 메뉴바 `<footer><nav>`

	<footer>
		<nav>
			<ul>
				<li>
					<a href="#">Menu1</a>
				</li>
				<li>
					<a href="#">Menu2</a>
				</li>
				<li>
					<a href="#">Menu3</a>
				</li>
				<li>
					<a href="#">Menu4</a>
				</li>
			</ul>
		</nav>
	</footer>

출력값
- Menu1
- Menu2
- Menu3
- Menu4
하단아래 메뉴니까 footer사용

2-1. naver 경제M 부분

2:00:00부터

시작

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
    </html>

기본정보 입력

`<ul><li><a><img><div>`

   <body>
	<ul>
		<li>
          		<a href="#">
				<img src="">
				<div></div>
			</a>
		</li>
	</ul>>

`<span><h><p>`

<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/150x80">
           		<div>
						<span>경제M</span>
						<h3>Title</h3>
						<p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>	
       				<span>Jun</span>
						<span>-</span>
						<span>Date</span>
					</div>
				</a>
			</li>
		</ul>

출력값
- 경제M
  Title
  
  Hello World Hello World Hello World Hello World Hello World Hello World Hello World
  Jun - Date

2-2. naver레시피 부분

`<div>안에<div>`

<ul>
<li>
	<a href="#">
		<img src="https://via.placeholder.com/200x120">
      		<div>
			<span>[Food] Name</span>
			<h3>Title</h3>
			<p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
      			<div>
				<span>#Tag1</span>
				<span>#Tag2</span>
			</div>
		</div>
	</a>
</li>

출력값
[Food] Name
Title

Hello World Hello World Hello World Hello World Hello World Hello World Hello World

#Tag1 #Tag2

3-1. 다음

항상같으니 스킵

`<div>`를 이용해서 쪼개고 쪼개고

<body>
    <div>
	<!-- left -->
	<div>
		<img src="">
	</div>
	<!-- right -->
	<div>
		<!-- right top -->
		<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>
		<!-- right bottom -->
		<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>
	<li>
		<a href="">
			<img src="">
			<p></p>
		</a>
	</li>
</ul>
</div>
    <div>
    <!-- lefr -->
<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>
	<!-- right -->
	<div>
		<!-- right top -->
		<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>
		<!-- right bottom -->
		<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>

왼쪽 오른쪽쪼개고 왼쪽안에서 또 쪼개고 오른쪽안에서 쪼개고
출력값

3-2. 다음 뉴스

스킵

`<div>`로 쪼개고

<body>
<div>
	<h3>News Title</h3>
	<div>
		<!-- left -->
		<div>
			<span>Name</span>
			<span>Date</span>
			<span>Edit</span>
		</div>
		<!-- right -->
		<div>
			<a href="#"><span>A</span></a>
			<a href="#"><span>B</span></a>
			<a href="#"><span>C</span></a>
		</div>
	</div>
</div>
</body>

출력값

News Title

Name Date Edit

A B C

4. StartBootStrap

스킵

`<header>`

<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>

출력값
- Services
- Portfolio
- About
- Team
- Contact
Welcome To our Studio

It's Nice To Meet you
Tell Me More

5. Helbak

사이트 하단부

<body>
	<footer>
<!-- left -->
		<div>
			<ul>
				<li><a href="#">Menu1</a></li>
				<li><a href="#">Menu2</a></li>
			</ul>
		</div>
<!-- center -->
		<div>
			<a href="#"></a>
		</div>
<!-- right -->
		<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>

출력값
- Menu1
- Menu2
Accepted payment methods

6. KidsGao

스킵

최상단 이미지 부분

<header>
		<div>
			<img src="">
			<img src="">
			<img src="">
			<img src="">
			<img src="">
		</div>
		<div>
			<img src="">
			<img src="">
			<img src="">
		</div>
	</header>

출력값

가운데부분

<div>
		<div>
			<!-- left -->
			<div>
				<img src="">
				<div>
					<img src="">
					<p>자초 어성초 감초를 넣어서
						피부진정 및 항염 효과가 있답니다.</p>
				</div>
			</div>
			<!-- center -->
			<div>
				<img src="">
				<img src="">
			</div>
			<!-- right -->
			<div>
				<img src="">
				<div>
					<img src="">
					<p>풍부한 리브유를 넣어서
						보습 효과도 뛰어나답니다.</p>
				</div>
			</div>
		</div>
	</div>

출력값

자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.

풍부한 리브유를 넣어서 보습 효과도 뛰어나답니다.

2. 학습내용중 어려웠던점.

<div>가 많아지니까 python때처럼 어디가 닫힌게 빠진지 점점 헷갈리는기분, 지금은 단순히 구성을 보고 하는거라 결과값이 텍스트랑 간단하게 출력되서 제대로 된것인지 확인이 어려움

3. 해결법

차츰 수업이 진행되면서 더알게되면 해결되지않을까?

4. 수업소감

흠, 단순히 영상을 보고 따라하고 하면서 하는건데 정말로 잘습득이 될까하는 의문 , 내가 스스로 더하고 다른걸 시도해보고 하여도 정말 내가 익혔단 느낌이 아직까진 없는듯 하다.

JunYeupKwon

이전 포스트

210628 - 오후

다음 포스트

210629

대구ai스쿨

2회차강의

1. 실습

1. 카카오톡 친구목록받기

시작

<ul><li><a><img><h><p> 이용해서 기본정보입력

<div> 이용해서 감싸서 임의의 공간을 만들기

출력값

Name

placeholder

디자인 작업전 미리 공간잡기

출력값

Name

링크뒤에 숫자로 크기조절가능

아래하단 메뉴바 <footer><nav>

출력값

하단아래 메뉴니까 footer사용

2-1. naver 경제M 부분

시작

<ul><li><a><img><div>

<span><h><p>

출력값

Title

2-2. naver레시피 부분

<div>안에<div>

Title

3-1. 다음

항상같으니 스킵

<div>를 이용해서 쪼개고 쪼개고

왼쪽 오른쪽쪼개고 왼쪽안에서 또 쪼개고 오른쪽안에서 쪼개고