2021.06.29 HTML-2

65449 단어 개발일지코린이프론트엔드htmlhtml

2일차.
어제는 웹프로그래밍에 아주 필수적인 요소들을 배웠다. 수업에 들어가기 앞서서 어제 했던 내용을 복습하고, Inline/Block 속성을 가진 태그를 한번씩 확인했다. 어제 수업에서 알게된 'w3school' 사이트에 있는 HTML 태그를 a 부터 차례로 연습했다.

알파벳 a, b로 시작하는 태그의 결과를 보면 일단

  • Inline : <a></a> , <abbr></abbr>, <b></b>, <bdi></bdi>, <bdo></bdo>,<body></body>
  • Block : <address></address>, <article></article>, <aside></aside>, <blockquote></blockquote>, <br>
    이렇다. 그중에 <address></address> 태그는 기울여서 나타난다. 이걸 보니 뭔가 신기했다. 그런데 이렇게 모든 태그가 어떤 속성인지 알고 있어야 한다는게... 꽤 어렵다.

오늘 무엇을 배웠지?

실습

카카오톡 친구 리스트 만들어보기

https://developers.kakao.com/docs/latest/ko/kakaotalk-social/common
1. new file-save(kakao.html)
2. 기본 설정
(<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>)
3. 친구 리스트는 '목록' 태그 사용 -> 친구는 동급 정보 -> <ul></ul> -><li></li>
4. 친구 한명에 대한 설명은 <a> 태그 이용해서 클릭하면 원하는 페이지로 넘어 가도록 전체를 감싸고 프로필 사진은 <img> 태그, 이름은 <h3></h3>태그, 상태메세지는 <p></p> 태그로 표현
5. 동일한 형태를 여러번 반복해서 만들때 구분 지을 수 있는 <div></div> 태그를 사용해서 친구 목록을 쉽게 만들 수 있다.

+Tip!
이미지가 정해지지 않은 상태에서 작업할 때, https://via.placeholder.com/150 를 <img scr="">에 입력해 사용하면 편하다!. https://via.placeholder.com/150에서 150말고 원하는 사이즈를 50x50, 100x5 등 원하는 사이즈에 맞춰 적용하면 됨!
  1. 하단의 메뉴 버튼은 <footer></footer>, <nav></nav> 태그로 표현
    <결과>

네이버 홈페이지의 경제부분 만들기

https://www.naver.com/

1. new file-save(naver.html)
2. 기본 설정
(<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>)
3. 동일한 목록이기 때문에 '목록' 태그 사용 -> 기사글은 동급 정보 -> <ul></ul> -><li></li>
4. 클릭하면 원하는 페이지로 넘어가도록 <a></a> 태그로 전체를 감싸고, <img>태그로 원하는 이미지를 삽입할 수 있도록 하고, <div></div>태그로 공간을 구분짓는다.
5. <span></span> 태그로 단어를 적을 수 있는 공간을 만들고 <h3></h3> 태그로 제목을, <p></p> 태그로 본문을, <span></span>태그로 기사 출처를 입력한다.
6. <li></li> 태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정!

+Tip!
<div></div> 태그 안에 <div></div>태그를 만들어 안에 속해있지만 조금은 다른 내용을 입력할 수 있다!

<결과>

다음 홈페이지의 영화부분 만들기

www.daum.net

1. new file-save(daum.html)
2. 기본 설정
(<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>)
3. 큰 부분을 먼저 구분 짓는다. 크게 상단, 하단부분을 <div></div> 태그로 구분짓고 상단부분 중에서도 좌측영역과 우측영역을 동일하게 <div></div> 태그로 구분짓는다.
4. <상단부분 중 좌측 영역> 동급, 여러개의 항목-> <ul>,<li> 태그 사용
클릭하면 원하는 페이지로 넘어가도록 <a></a> 태그로 전체를 감싸고, <img>태그로 원하는 이미지를 삽입할 수 있도록 하고, <p></p> 태그로 그림 아래에 글이 위치하도록 설정한다. -> <li> 태그를 항목 수만큼 반복.
5. <상단부분 중 우측영역1,2> 영역을 <div> 태그로 구분. 각 영역에는 동급, 여러개의 항목-> <ul>,<li> 태그 사용
클릭하면 원하는 페이지로 넘어가도록 <a></a> 태그로 전체를 감싸고, <span></span> 태그로 기사제목을 입력한다. -> <li> 태그를 항목 수만큼 반복.
<결과>

6. <하단부분>은 4번과 동일하게 설정.
<결과>

7. <li></li> 태그 안의 내용만 다를 뿐 계속적으로 반복되므로 이 형태를 복사해서 필요한만큼 붙여넣고 내용 수정!

agency 사이트 상단부분 만들어보기

https://startbootstrap.com/previews/agency

<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<header>
		<div><!--header의 상단부분-->
			<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><!--header의 중간부분-->
			<h2>Welcome To Our Studio!</h2>
			<h3>IT'S NICE TO MEET YOU</h3>
			<a href="#">TELL ME MORE</a>
		</div>
	</header>

</body>
</html>

▼ 결과

Welcome To Our Studio!

IT'S NICE TO MEET YOU

TELL ME MORE

helbak 사이트의 하단부분 만들어보기

https://www.helbak.com/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<footer>
		<!--왼쪽-->
		<div>
			<ul>
				<li><a href="#">이용약관</a></li>
				<li><a href="#">쿠키</a></li>
			</ul>
		</div>
		<!--중앙-->
		<div>
			<a href="#"></a>
		</div>
		<!--오른쪽-->
		<div>
			<p>Accepted payment methods</p>
			<ul>
				<li><img src="https://via.placeholder.com/30"></li>
				<li><img src="https://via.placeholder.com/30"></li>
				<li><img src="https://via.placeholder.com/30"></li>
				<li><img src="https://via.placeholder.com/30"></li>
				<li><img src="https://via.placeholder.com/30"></li>
			</ul>
		</div>

	</footer>
</body>
</html>

▼ 결과

Accepted payment methods

kidsgao 사이트 중 부분 만들어보기

http://sisikiller.dothome.co.kr/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<header>
		<div><!--구름에 있는 동물들과 움직이는 동물4마리-->
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
		</div>
		<div><!--구름과 잠자리-->
			<img src="https://via.placeholder.com/200">
			<img src="https://via.placeholder.com/200">
			<img src="https://via.placeholder.com/80">
		</div>
	</header>
	<div>
		<div><!--두번째 사진-->
			<div><!--왼쪽-->
				<img src="https://via.placeholder.com/100">
				<div>
					<img src="https://via.placeholder.com/200x50">
					<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
				</div>
			</div>
			<div><!--중앙-->
				<img src="https://via.placeholder.com/100">
				<img src="https://via.placeholder.com/500x500">
			</div>
			<div><!--오른쪽-->
				<img src="https://via.placeholder.com/100">
				<div>
					<img src="https://via.placeholder.com/200x50">
					<p>~풍부한 올리브유를 넣어서 보습 효과도 뛰어나답니다.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

▼ 결과

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

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

스스로 해보기

Youtube 웹사이트 중간부분 만들어보기

<body>
	<div><!--상단-->
		<ul>
			<li>
				<a href="#">
					<div><img src="https://via.placeholder.com/160x120"></div>
					<div>
						<div>
							<img src="https://via.placeholder.com/50">
							<span>[유로 2020]16강전|스페인VS크로아티아-H/L</span>
						</div>
						<div>
							<p>tvN SPORTS</p>
							<span>조회수 49만회</span>-<span>7시간전</span>
						</div>
					</div>
				</a>
			</li>
			<li>
				<a href="#">
					<div><img src="https://via.placeholder.com/160x120"></div>
					<div>
						<div>
							<img src="https://via.placeholder.com/50">
							<span>듣기만 해도 설레는 19990~20000년 발라드모음 우리가 사랑했던 추억...</span>
						</div>
						<div>
							<p>K-POP 발라드 모음-PlayList</p>
							<span>조회수 15만회</span>-<span>3주전</span>
						</div>
					</div>
				</a>
			</li>
		</ul>
	</div>
(실제로 8개 코드를 다 적었으나 부피만 차지해서 일지에는 지워버림.)

유튜브는 썸네일로 표현하고 있다가 마우스를 갖다대면 영상으로 짧게 변환하여 재생하는데, 이걸 어떻게 표현하는지는 몰라서 그냥 이미지로 대체 했다. 8개 영상을 상단과 하단부분으로 구분짓고 한 영상을 사진부분과 제목부분으로 구분지었다. 제목부분도 아이콘과 영상제목이 있는 영역, 업로더와 조회수 및 게시시간이 있는 영역을 구분지었다.

실제로 어떻게 했는지 확인해봤다...
<ul></ul> 태그는 사용하지 않고 8개 영상을 <div></div> 태그를 사용해 표현했다. 그리고 제목부분을 나처럼 상단, 하단으로 구분짓지 않고 아이콘이있는 좌, 글자가 있는 우로 나눠서 표현했다.

▼ 수정

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
		<div><!--영상 한 개-->
			<div><!--썸네일-->
				<a href="#">
					<img src="https://via.placeholder.com/160x120">
				</a>
			</div>
			<div>	
				<div><!--아이콘-->
					<a href="#">	
						<img src="https://via.placeholder.com/50">
					</a>
				</div>				
				<div><!--제목부분-->
					<div><!--영상제목-->
						<a href="#">
							<span>[유로 2020]16강전|스페인VS크로아티아-H/L</span></a>
					</div>			
					<div><!--업로더, 조회수, 게시된 시간-->
						<a href="#">
							<p>tvN SPORTS</p>
							<span>조회수 49만회</span>-<span>7시간전</span></a>
					</div>
				</div>
			</div>
		</div>
		<div><!--영상 한 개-->
			<div><!--썸네일-->
				<a href="#">
					<img src="https://via.placeholder.com/160x120">
				</a>
			</div>
			<div>	
				<div><!--아이콘-->
					<a href="#">	
						<img src="https://via.placeholder.com/50">
					</a>
				</div>				
				<div><!--제목부분-->
					<div><!--영상제목-->
						<a href="#">
							<span>듣기만 해도 설레는 19990~20000년 발라드모음 우리가 사랑했던 추억...</span></a>
					</div>			
					<div><!--업로더, 조회수, 게시된 시간-->
						<a href="#">
							<p>K-POP 발라드 모음-PlayList</p>
							<span>조회수 15만회</span>-<span>3주 전</span></a>
					</div>
				</div>
			</div>
		</div>	
</body>
</html>

이렇게 적으니 코드가 더 길어지지만 더 세세하게 기능을 줄 수 있고 무엇보다 배치도 실제로 웹사이트에서 보이는 것과 유사하다.

(오른쪽의 빨간 체크 부분이 수정 후 결과)

무엇이 어려웠지?

친구 목록을 만들 때 모든 글자들이 하이퍼링크 처리되어있어서 왜 그렇지 하고 의문이 들었다. 바보같이... <a>태그의 기능이 하이퍼링크인것을 잊고... 이걸 기억해내느라 30분을 뭐 때문인지 알아본다고, 어제 배운 <nav> ,<ul>, <li>,<div> 태그를 다시 찾아서 일일이 확인해봤다...
그 이후로는 잘 구분해서 태그를 사용했다. 만들어 보고 싶은 웹페이지 형태는 많은데 혼자서 페이지를 설계할때 아는 코드가 없어서 내가 하고 있는 것이 맞게 구현하고 있는 것인지 의문이 많이 들었다.

어떻게 해결했지?

또, 수업 따라가면서 <div></div> 태그만 쓰나..? 어제 배운건 엄청 많았는데 하고 생각하고 있었는데, 아직은 어디에 공간을 구분짓고 만들때, 어떤 태그를 써야할지 잘 모르는게 당연하다고 하시면서 일단은 <div></div> 태그로 먼저 설계를 여러번 해보는게 좋을거라고 말씀하셨다!
다음 홈페이지의 영화부분을 만들때는 강의를 일시정지하고 먼저 만들어봤다. 그래서 내가 만든것과 선생님이 만드시는것을 비교했는데, 다 똑같고 하나만 달랐다. 글을 적는 태그 <p></p>태그와 <span></span>태그.. 나는 <span></span> 태그로 상단부분의 좌측영역을 구성했는데 선생님은 <p></p>태그로 구성하셨다. 그 이유가 궁금해서 <p></p>, <span></span>태그의 차이점을 찾아봤다.

위의 7개 항목은 <p></p> 태그로, 아래 7개 항목은 <span></span> 태그로 설정해봤다. 그랬더니 확실히 그 차이를 알게되었다. Inline/Block 속성의 차이. <p></p>는 block 속성이기 때문에 사진 아래에 글을 위치하게(줄바꿈)하고 싶을 때 사용하고, 그와 상관없이 위치하고 싶을때는 Inline 속성인 <span></span> 태그를 사용할것. (배웠고 복습도 했고 연습도 했는데 왜 바로 유추하지 못했을까..ㅠ)

혼자서 연습하면서 태그를 올바르게 쓰고 있는지 구현을 잘 하고 있는지 확신이 들지 않을때 일단은 구현해보고 웹사이트의 html 태그를 확인해서 비교했다. 비교하는게 굉장히 귀찮고 꼼꼼하게 살펴봐야할 작업이지만 내가 옳게 구현하고 있다는 것을 확인했을 때 느끼는 쾌감은 이 귀찮은 작업도 하게 만든다.

그래서?

어제보다 훨씬 재미있다. 아는것이 많을 수록 더 즐거울것 같은 느낌이 든다. 내가 원하는 설계를 코드로 설정하면 바로 시각적으로 나타나고 기능도 제대로 작동하는 것을 보니 정말 신기하다. 아는 만큼 보인다고 이제는 홈페이지나 앱들이 예사로 보이지는 않는다. 이 구조는 어떻게 설계를 했는지 궁금하고 비교적 간단한 구조는 설계를 예상해보기도 한다. 또, 원하는 페이지를 설계해보고 실제 코드와 비교해보면서 어떻게 다른지 알아가는 시간도 버겁지만 꽤 재미있다.

리액트 헷갈리는 개념 2 - state hook 사용하기 (TIL#02)
C#교과서 마스터하기 24. 생성자(Constructor)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage