오늘은 본캠프 2일차이다.
그래서 오늘은 사전캠프 때 내일배움카드가 늦게 발급이 되어서 강의를 듣지 못했던 웹개발 종합반 강의를 들어보았다.
웹개발 종합반은 html 부터 javadcript까지의 기초적인 강의가 들어있었다.
하지만 뉴비인 나는 거의 다 처음 보기 때문에 한 번에 이해가 잘 되지 않아 두 번 이상 돌려보느라 시간이 많이 늦어졌다.
게다가 아직 맥os에 익숙해지지 못해 시간이 더욱더 오래 걸렸다.
Today I Learned
- html
- css
- 구글 폰트 가져오기
- 부트스트랩 가져오기
- html 태그
<div></div> : 구역분리
<h1></h1> : 제목
-h1~h6 까지 사용
<span></span> : 일부 글자를 꾸밀 때 사용
<p> </p> : 구획분리
<button></button> : 버튼 만들기
<style></style> : class 등이 붙었을 때 꾸미기
width : 가로
height : 세로
background-color : 구역 뒷배경 색 입히기
color : 글씨 색 입히기
text-align : 텍스트 가운데로 정렬
padding : 안쪽 여백
margin : 바깥쪽 여백 (시계방향으로 위 오른쪽 아래 왼쪽 순서 "auto는 끝까지 민다" 라는 느낌)
border-radius : 모서리 둥글게 만들기
* : 모든 태그
background-image: url('');
background-position: center;
background-side: cover;
이미지 첨부 항상 세줄 같이 넣기
폰트 적용하기
1. 구글폰트
2. 원하는 폰트 고르기
3. "get font" -> "<> Get embed code"
4. @import 선택 후 <style></style> 사이에 있는 코드 복사
5. vscode <style> 맨 윗부분에 붙여넣기
6. * {} 사용 후 {}사이에 css 복사 붙여넣기
부트스트랩 적용하기
1. title 아래 부트스트랩 CDN 붙여넣기
2. https://getbootstrap.com/docs/5.3/components/buttons/ 부트스트랩 링크 들어가서 원하는 디자인 고르기
3. 디자인 고른 후 <body> 아래 붙여넣기
이렇게만 해도 다른 사람이 미리 만들어둔 아름다운 버튼을 가져올 수 있다.
색상 바꾸기
첫 번째 노란색 밑줄은 색상을 뜻하고 두 번째 노란색 밑줄은 버튼안에 들어가는 문구를 뜻한다
첫 번째 밑줄 부분에 원하는 색상으로 수정하면 색상이 바뀌고 두 번째 밑줄 부분에 원하는 문구를 넣으면 문구가 바뀐다.
단축키
option + shift + f = html 줄 맞추기
어려웠던 것
오늘도 역시 어려웠던 것은 12시간 내내 앉아서 집중을 하는것이었다.
그리고 항상 많이 봐왔던 html도 처음부터 하니까 어렵고 힘들었는데 두세 번 보고 til 정리하다 보니 눈에 더 들어오는 느낌이 있었다.
html 배우면서 제일 많이 들었던 소리가 외울 필요 없다. 자주 쓰는 건 보다 보면 외워지고 코드는 항상 찾아서 따라 치면 되니까 겁먹지 말라고 하셨다. 처음에 딱 html 배울 때는 진짜 막막하고 어려웠는데 천천히 따라 하면서 바로바로 결과물이 나오니까 오히려 흥미가 생기고 재미있었다. 그리고 오늘도 매니저님과 면담시간이 생겼는데 사실 부트캠프는 대학 4년치 공부할 내용을 4개월에 압축시켜 둔 것이라 진짜 마음먹고 하루에 최소 14시간 이상은 매달려야 된다고 하셨다. 이런 얘기를 들을 때마다 겁이 나고 걱정이 앞서지만 내가 선택했는데 어쩌겠누....
'TIL' 카테고리의 다른 글
| 10/8 Java 문법 종합반 1주차 (3) | 2024.10.08 |
|---|---|
| 10/2 미니프로젝트 (4) | 2024.10.02 |
| 9/30 본캠프 첫날 (2) | 2024.09.30 |
| 9/23 사전캠프 면담 (1) | 2024.09.23 |
| 뉴비의 사전캠프 첫날 (1) | 2024.09.19 |