본문 바로가기
FastCampus/한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online.

한 번에 끝내는 파이썬 웹 개발 초격차 패키지 80일차

by Dream_World 2021. 11. 25.

웹 &  프론트엔드 기본

퇴근하고 와서 그렇게 피곤함을 오랜만에 느껴본다. 드림핵을 공부하던 와중에 책상에 앉아서 잠들어버렸다. 새벽에 일어났길래 블로그를 해보려고 마음먹고 글쓰기 눌렀지만, 너무 피곤한 나머지 출근을 위해 잠을 선택하게 되었다. 이것도 게으름에 포함되겠지 나 자신을 통제를 못 했으니까 아쉬움이 큰 하루가 지난 것 같다. 이제는 슬슬 체력을 기르기 위해 운동을 해야 할 것이다. 아직도 시간 제약을 이기지 못하여 낭비하는 시간이 많이 있을 것이다. 이러한 시간을 잘 분배해서 효율적으로 사용함으로써 나의 생활 패턴을 유지해야 할 것이다. 컨설팅 업무 자체가 출장 업무도 있는 직무이기에 더욱더 컨트롤을 잘 해야 함을 알 수 있다. 아직은 본사 근무라 내 패턴이 일정할지 모르지만, 출장 근무를 나가게 되면 어떤 상황이 벌어질지도 모른다. 더 분발해야겠다. 드림핵을 통해 웹 진단 실력을 향상할 것이고 인프라는 KISA에서 제공한 가이드를 보면서 더 숙달해야 할 것이다.

 


주요 요소

주요 요소 정리 - 구조 태그

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<div>
			<h1>제목</h1>
			<p>문장</p>
			<img src="이미지" alt="주석" />
		</div>
	</body>
</html>
<div> : 특별한 의미가 없는 구분을 위한 요소. (Division) | 블록 요소
<h1> : 제목을 의미하는 요소. (Heading) | 블록 요소
<p> : 문장을 의미하는 요소. (Paragraph) | 블록 요소
<img> : 이미지를 삽입하는 요소. (Image), src : 삽입할 이미지의 경로, alt : 삽입할 이미지의 이름 | 인라인 요소

 

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<h1>제목1</h1>
		<h2>제목2</h2>
		<h3>제목3</h3>
		<h4>제목4</h4>
		<h5>제목5</h5>
		<h6>제목6</h6>
	</body>
</html>
<h1>~<h6> : 제목을 의미하는 요소. (Heading) 숫자가 작을수록 더 중요한 제목을 정의. | 블록 요소

 

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<ul>
			<li>국어</li>
			<li>영어</li>
			<li>수학</li>
			<li>체육</li>
		</ul>
	</body>
</html>
<ul> : 순서가 필요없는 목록의 집합을 의미. (Unordered List) | 블록 요소
<li> : 목록 내 각 항목. (List Item) | 블록 요소

 

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<a href="https://www.naver.com">NAVER</a>
		<a href="https://www.google.com" target="_blank">Google</a>
	</body>
</html>
<a> : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor) | 인라인 요소, href : 링크 URL, target : 링크 URL의 표시(브라우저 탭)위치

 

<!DOCTYPE html>
<html>
	<head>
		<style>
			span {
				color: red;
			}
		</style>
	</head>
	<body>
		<span>Windows</span>
	</body>
</html>
<span> : 특별한 의미가 없는 구분을 위한 요소. | 인라인 요소
<style> span { color : red; } </style> : span 스타일 (CSS) 추가

 

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		Windows<br/>Server
	</body>
</html>
<br /> : 줄바꿈 요소. (Break) | 인라인 요소

 

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<input type="text" value="id" />
		<input type="text" placeholder="id를 입력하세요!" />
		<input type="text" disabled />
	</body>
</html>
<input> : 사용자가 데이터를 입력하는 요소. | 인라인 - 블록 요소, type : 입력받을 데이터의 타입, value : 미리 입력된 값(데이터), placeholder : 사용자가 입력할 값(데이터)의 힌트, disabled : 입력 요소 비활성화

 

주요 요소 정리 - 구조 태그에 대해서 학습해보는 시간을 가졌다. 태그를 사용하면 늘 정겨울 따름이다. 태그 안에 속성을 잘 활용을 안 해서 그렇지 태그는 평소에도 많이 쓰는 것 중의 하나일 것이다. 인라인 블록 라인 신경 안 쓰고 쓰고 있다는 점과 속성의 뜻도 잘 모르고 무턱대고 쓰는 태그들이 많으리라는 것이다. 정리하듯이 천천히 살펴보는 시간을 가졌으면 한다. 평소에 보고 모르면 바로 구글링하던 모습이 떠오른다. 그래도 이번 강의에서 속성 빼고는 다 알고 있던 부분이라 내용 파악만 하면 숙지 되는 수준이어서 다행였다. _blank, disabled 중 _blank는 흔히 보는데도 몰랐으며 disabled는 본 적이 없다. 굳이 숨기려고 작성까지 하나 싶을 정도로 의아해하긴 하는 부분이 될 것이다.
80일 차는 여기서 마무리하고자 합니다.


패스트캠퍼스 링크 :https://bit.ly/37BpXi

 

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

댓글