2022/01/17 - 01/18
17일은 0주차, 18일은 1주차
HTML의 기본 개념과 구동원리 등을 네이버 해킹을 통해 배웠다.
매일 보는 페이지에 개발지 툴이 숨겨져 있는지는 몰랐는데, 신기했다.
프론트엔드는 처음이라 기대 반 설렘반..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>이런거 첨에 보면서 강의 들었는데 첨엔 당최 뭔소린지 몰랐지만, 예제? 퀴즈? 이런거 풀면서 익혀나갔다. 나름 재밌는듯
일단 배운걸 손 안에 들오는 작은 노트에 적는 편이라 옮겨 적어보자면,
HTML = 뼈대
CSS = 꾸미기 (색, 굵기 등)
JavaScript = 움직이기 (이동)
HTML
html 문서형태 기반 - <> : 태그, </> 닫는 태그
div 태그
묶어서 옮김 (많이 씀, 구역 묶기)
p 태그
문단 (paragraph의 약자)
h1 태그
제목 - 하나씩은 있어야 함
span 태그
글자 색 바꾸기 등, 부분적으로 글자 수정할 때 쓰임
a 태그
하이퍼링크
img 태그
<img src></src> 이미지
hr 태그
가로선
단축키
ctrl + alt + L = 줄 정리
ctrl + A = 전체 묶기 (전체 하이라이트)
CSS
초록색 div - button의 부모
= 이건 아마 예제로 푼거 때문에 그런듯 싶음...
여기서 필요한 코드 가져올 수 있음. = https://getbootstrap.com/
버튼이나 이런거 가져와서 웹페이지 꾸밀 수 있음.
(부트스트랩 컴포넌트 4.0 )
이미지 조정 : padding, margin
padding : 안쪽 공간
margin : 바깥 공간
margin-top
margin-left
ex) margin : 0px auto 20px auto
- 위에는 0px만큼 공간을 띄고 아래는 20px만큼 공간을 띄우며, 양옆은 균등조절(작업물이 가운데에 위치함)
폰트 굵기 : font-weight
= 구글링에 익숙해질것. 코드 외울 필요없음.
글꼴
title 밑에 link href= ~ 이거 붙여넣기
+style에 *{} 해서 font-family 붙여 넣기
이 모든건 https://fonts.google.com/?subset=korean에서 볼 수 있음!
w3schools, mdn
구글링시 모르는 css 코드 찾아볼때 유용한 사이트
= 명확하게 정리 잘 돼서 나와 있음 (시간절약 가능)
Q) 길이 줄이고, 가운데로 설정하고 싶을때?
- width px설정, margin auto 설정
내가만든 로그인 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.mytitle {
background-color: aquamarine;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg ");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.wrap {
width: 300px;
margin: auto;
}
.mybtn {
width: 100px;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn"> 로그인하기</button>
</div>
</body>
</html>1주차 총정리
- keep
- 단축키 활용해서 코드 수시로 정리하기
- ctrl + S = 저장 잘하자 (인생은 어떻게 될지 모르는 것)
- 구글링 잘하기
- problem
-
너무 느림
: 아직 처음이라 미숙한 점도 있겠지만, 너무너무 느림.. 영타가 문제인거 같진 않은데, 2019년에 들었던 파이썬 강의가 생각남.. 울면서 따라갔지만 재밌었던.. -
차례대로 못하고 중구난방으로 이쪽저쪽을 횡단하며 코드 만듬;
: head에 들어갈 부분, body에 들어갈 부분 나눠서 차근차근 하기
이러면 빠뜨릴 가능성이 높고, 코드 길어지면 어디에 적을지 찾는 것도 힘듬
- 모든 코드를 혼자 찾으려고 애쓰지 말기
: border 코드 안찾고 해보겠다고 난리쳤다가 몇분이 흘렀는지 기억해라
- try
- 집에서 혼자 연습해보기
- 스온스 하기전에 미리 조금 듣기
- 2주 전에 끝내고, SQL 강의 듣기
= 잘하고 있다..! 힘을 내렴... 첫주라 이렇게 힘든거겠지
