1. HTML
1) 클라이언트와 서버의 관계
- 클라이언트 : 똑똑 naver.com 자료좀 주세요
- 서버 : 자료 줄게요
- 준비해둔 자료 : HTML, CSS, JS
HTML : 뼈대
CSS : 꾸미기
JS : 움직이기
- 준비해둔 자료 : HTML, CSS, JS
2) HTML의 기본
- html:5 약어로 html문서의 큰 틀을 바로 작성
- html에서 가장 중요한 부분!
<head>: 제목, 아이콘, css, js 등
<body>: 뼈대 태그
(태그 : 꺽새 <>)
- 태그를 전부다 외우는 것은 불 가 능!!
(google 검색과 bootstrap을 적극 활용할 것!!)
💡 새롭게 알게된 정보!
- Visual Studio Code 에서 태그를 드래그하면 클릭해서 옮기는게 가능하다!
- html:5 만 입력하면 html 작성하는 기본 뼈대가 자동으로 작성된다!
- 줄바꿈 하고싶을 때
<br>만 썼는데
<p>태그로 구역을 지정해도 알아서 아랫줄로 옮겨짐
2. CSS
1) CSS란?
- HTML 꾸미기!
- 어떤걸 디자인 바꾸고 싶을땐 그걸 '지칭'할 수 있어야 함
(이름을 알아야 'ㅇㅇㅇ'을 빨간색으로 바꿔줘 등 작업을 수행할 수 있음)
-> html태그 안에 class 사용
(해당 태그의 내용들은 지정한 class 속성대로 디자인해줘!)
-
head 안에
<style>태그 넣고 그 안에 class 모아놓기 -
양식 : 태그 안에 class=""
ex)<h1 class="mytitle">
2) CSS 사용방법
① head 안에 style태그 넣기
② sytle태그 영역 안에 class로 지정할 이름 입력
- 양식
.class이름 {
항목: 값;
}- 'class이름'에 지정할 class 이름 기입
- {} 안에는 어떻게 꾸미고 싶은지 내용 기입
- 내용 기입 후 ;(세미콜론) 필수
③ body 내에 class 지정할 태그 안에 class 기입
- 양식 : <태그 class="이름">
3) css에 사용되는 다양한 속성들
- width : 가로
- height : 세로
- text-align : 텍스트 정렬
- padding : 안쪽 여백
(안쪽 위쪽 여백 : padding-top) - margin : 바깥쪽 여백
- border : 가장자리 선
(border-radius : 모서리 둥글게)
(border: 1px solid white;
-> 선굵기, 실선, 색) - box-shadow : 박스 바깥 그림자
(box-shadow: 0px 0px 3px 0px;
-> 순서 : 오른쪽, 아래쪽, 바깥쪽 옅은, 바깥쪽 진한 그림자)
*px(픽셀) : 웹에서 쓰이는 길이의 단위
4) 이미지 넣을때 항상 같이 다니는 CSS 속성 3총사!
background-image: url('');
background-position: center;
background-size: cover;
5) div 구역 설정하여 가운데정렬하기
- 가운데정렬 = 양쪽 여백이 같다
(내 밖으로의 여백(margin)을 끝까지 밀기!)
(끝까지 민다 = auto)
margin: 위px 오른쪽px 아래px 왼px;
(시계방향)
6) 웹폰트 사용하기
① google fonts 검색 후 실행
(https://fonts.google.com/?subset=korean¬o.script=Kore)
② 언어 korean 변경
③ 원하는 폰트 클릭 후 두께 설정(보통 Regular 400)
④ 오른쪽 상단 아이콘 클릭
⑤ import 선택
⑥ <style>사이의 코드 복사
⑦ VSC style 태그 첫줄에 붙여넣기
⑧ 아랫줄에 아래 내용 작성
* {
}
( * : 모든 태그에 적용함 이란 뜻)
⑨ { } 안에 웹폰트 코드 중 두번째(CSS rules to...) 코드 복사하여 붙여넣기
💡
** 웹폰트의
- 첫번째 코드 : 폰트를 가져오겠다
- 두번째 코드 : 폰트를 적용하겠다
7) 가운데 정렬 4총사!
- 안에 있는 내용물 가로/세로 정렬하기
- display flex
- 4줄만 기억하면 됨!
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
=> 가로 세로 모두 가운데로 정렬됨
- 여기서 direction을 column(세로 정렬)이냐 row(가로 정렬)냐만 바꾸면 됨
- column : enter느낌 생각하면 됨
- row : enter 안쳐진 가로작성 느낌
💡 새롭게 알게된 정보!
-
.mytitle > button {
}
-> mytitle class 안에 있는 button에 대한 속성 부여 -
Alt + B : html을 웹페이지로 열기
Alt + Shift + F : 자동 들여쓰기 맞춤 -
내가 만든 웹페이지 > 마우스 우클릭 '검사' > 바꿔보고 싶은 영역 클릭 후 Styles > element.style { } 이 부분을 수정해보고 바로 확인하기 가능!
(어디에 class 적용해야할지 헷갈릴 때 해보기 좋은 방법)
3. bootstrap
-
bootstrap이란 : 누군가 예쁘게 만들어놓은 라이브러리를 모아둔 것
(예쁜 CSS를 미리 모아둔 것 !) -
bootstrap(CSS 꾸러미) import 하는 법!(가져오는법)
-> bootstrap CDN을 head 안에, title 밑에 넣어줄것
link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"
(위 링크를 <>안에 넣어 title 밑에 넣어주기)
- 참고할 bootstrap 꾸러미 사이트
https://getbootstrap.com/
📖 공부 중 스스로 깨달은 점 📖
1. div태그가 많아질 수록 들여쓰기에 유의할 것!
- 강의 내용을 따라가던 중 강의에선 나지 않는 오류가 발생하여 원인을 찾아보니 코드를 복붙하던 중
<div class="">이 부분을 전체에 묶어줘야 하는데 항목별로 전부 복붙하는 바람에 class가 적혀있지 않던 항목에서 오류가 난 것이었다.
2. div태그에 class 적용했다면 div 영역이 어디까지 설정되어 있는지 확인해볼 것!
- 위와 같은 맥락
