첫 주말 20210905

24666 단어 개발자JavaScript부트캠프htmlJavaScript

·개발자 수업 후 첫 토요일

-사실 많은 것을 하려고 했지만, 생각처럼 하지 못한 것이 너무 많다.
우선, 부모님의 일을 완전히 안 도와드릴 수는 없는 상황이기 때문에(아직 경제적으로 부모님께 완전 독립하지는 못했기 때문에 일을 주말이나 학원이 끝난 시간에 도와드리기로 했다.) 일을 해야 했다. 그리고 나서는 크게 새로운 것을 연습해보지는 못했다. 다만, 앞으로 javascript를 배우면 form형식을 자주 사용할 것이라고 생각했기 때문에, form형식을 좀 더 찾아보고 사용되는 것들을 익혀봤다. 그리고 그 중에서 버튼에 이미지를 한번 넣어보고 싶다는 생각을 했다.
-아주아주 간단하게 포토샵으로 버튼 비스무리한 이미지를 만들었다.

그리고 사이트를 블록으로 나누고, 메뉴를 만든 후에, 오른쪽에 로그인 창을 만들고, 확인 버튼에 이미지를 넣어서 채워보려고 했다.

<!DOCTYPE html>
<html>
 <head>
 	<meta charset="UTF-8">
	<script>
		function SY(ss){
						document.write(ss+" "+"환영합니다.");
		}
	</script>
	<style>
		html, body{margin: 0; padding: 0; height: 100%;}
		.header{width: 100%; height: 12%;}
		.nav{width: 10%; height: 73%; float: left; background: #fad3cf;}
		.section{width: 70%; height: 73%; float: left; background: #ceefe4;}
		.aside{width: 20%; height: 73%; float: left; background: #fad3cf;}
		.footer{width: 100%; height: 15%; clear: both; background: #8ac6d1;}
		
		ul{background: #fae3d9; text-align: center; margin: 5px 200px;}
		li{display: inline-block; font-size: 30px; margin: 0 40px; padding: 0px 20px;}
		a{text-decoration: none; color: gray;}
		li:hover{background: #ffb6b9; color: white;}
		a:hover{background: #ffb6b9; color: white;}
		.welcomediv{margin-left: 44%; font-size: 20px;}
		iframe{width: 99.5%; height: 99%;}
		legend{text-align: center;}
		form{border: 3px solid black;}
		#bt1{width: 25%; height: 20%;}

	</style>
 </head>
 
 <body>
	
	<header class="header">
		<div class="welcomediv">
			<script>
				SY("선영님");
			</script>
		</div>

		<ul>
			<li><a href="http://www.daum.net">메뉴1</a></li>
			<li><a href="http://www.naver.com">메뉴2</a></li>
			<li><a href="http://www.icia.co.kr" target="if1">메뉴3</a></li>
			<li><a href="http://www.incheon.go.kr">메뉴4</a></li>
			<li><a href="http://www.seoul.go.kr">메뉴5</a></li>
		</ul>
		<hr>

	</header>

		<nav class="nav">
			
		</nav>

			<section class="section">
				<iframe src="" name="if1">
				</iframe>
			</section>

				<aside class="aside">

					<form>
						<legend>로그인</legend>
						아이디:<br>
						<input type="text" autofocus placeholder="아이디를 입력하세요."><br>
						비밀번호:<br>
						<input type="password"><br><br>
						<input type="image" src="./button_1.png" id="bt1" alt="확인"><input type="reset" value="취소">

					</form>
				</aside>
	
		<footer class="footer">
		</footer>
	

 </body>

</html>

-아직 크기를 잘 조절하는 방법을 잘 모르겠다. px의 크기를 어느정도 줘야 하는지도 잘 모르겠고, %로 주는 것도 어느정도 줘야하는지 모르겠어서 자꾸 숫자를 바꿔서 해보고 있다. 어느정도 지나면 익숙해지는지 아니면 따로 정해진 비율이나 방법이 있는 것인지 궁금하다. 또 이게 내 화면에서만 적당한 크기이고 다른 화면에서는 바뀌는 것인가 싶기도 해서 아직 확실한 것이 없는 것 같다.

결과는 다행히 원하는 곳에 원하는 버튼을 넣는 데는 성공했다. 아직 그 버튼으로 무엇을 할 수 있는지까지는 배우지 않았지만, 그래도 폼 형식의 다양한 기능들을 추가로 배울 수 있었고, 또 사용도 해봐서 좋았다.

·정해지지 않은 주말

-스케줄이 정해지지 않은 시간을 어떻게 보내야 하는지에 좀 더 고민해봐야 할 것 같다. 아직 배운 것이 그렇게 많지 않아서 그런지는 잘 모르겠지만, 당장 오늘은 그렇게 만족할 만큼 내가 무엇인가를 했나? 싶은 토요일이었다.

  1. 파이팅하자
  2. 좀 더 스스로 공부하는 사람이 되자.
  3. 정해지지 않은 주말도 스스로 정해서 꼭 무엇인가를 하기!
  4. 주말에도 벨로그 깃허브는 빼먹지 말자!!!
구글 뉴스 스크래퍼 [전체 HTML에서 한글단어만 추출]
기본적인 Table View 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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