1주차의 1~11강에 해당하는 내용

오늘 내가 배운 것:

1) 로그인페이지 만들기
2) 부트스트랩 써서 나홀로 링크 메모장 만들기

-HTML은 head와 body로 구성, head는 페이지의 속성정보를, body는 페이지의 내용을 담는다.

-head: meta, script(함수), link(글꼴 등), title(페이지 제목) 등
-body: 필요한 것은 그때 그때 찾아쓰자!

스파르타코딩클럽 | HTML 기초

나는 문단이에요

• bullet point!1
• bullet point!2

<!-- 구역 내 콘텐츠 태그들 -->
<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>

-자동정렬은 ctrl+alt+L

-단락을 지정해 줄 때에는

id:

와 같은 식으로

-원하는만큼의 구역을

로 묶어주고 class를 지정한 후 css로 꾸밀 수 있다! 꾸밀때에는 ~ 안에 만들고 .name{ 어떻게 꾸미는지 } 써줄것
ex. background-image, background-size, background-position,
width, height,
font-size, font-weight, font-family, color,
margin, padding
border, border-radius
text-align 등

-여백을 둘 때 margin: auto 가 먹히지 않는 경우! 속성이 text여서 안먹히는 것일 수 있다(버튼 등): text-align: center 하거나 display: block으로 설정 후 margin: auto 하면 됨

-구글웹폰트 입히기: 구글폰트에서 select this style, 링크 복사해서 ~ 에 복붙, 에는 css 복사해서 넣어준다=> 모든 폰트에 적용하는 경우 style에 *{font family: } 넣어주면 편함

-주석달기: 드래그해서 ctrl+/

-부트스트랩: ppt 템플릿과 비슷한 것. 예쁜거 떼와서 내맘대로 적용가능!

-부트스트랩 시작 템플릿

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

이걸로 시작해보죠!

-부트스트랩에서 따오는 내용 중

~ 이 있으면 로 바꾸기!