HTML, CSS
HTML은 뼈대, CSS는 꾸미기
- HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드
웹의 전반을 HTML을 통해 작성할 수 있다- CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드
HTML내의 style 속성으로 꾸미기가 가능하지만, HTML 코드 내에 CSS 파일을 불러와 적용하는 방법도 가능
HTML 기초
HTML은 head와 body로 구성됨
- head안에는 페이지 속성 정보, body 안에는 페이지의 내용을 담음
- head 안에 들어가는 대표적 요소: meta, script, link, title 등
→ 페이지 속성 정의 혹은 필요한 스크립트를 불러옴
→ 눈에 안 보이는 필요한 것들을 담는 것- body 안에 들어가는 대표적 요소: div, p, ul, li, h1, h2, span 등
⁂ 코드 정렬: Shift + Alt + F (윈도우)
간단히 로그인 페이지 구현해보기
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type='text'/></p>
<p>PW: <input type='text'/></p>
<button>로그인하기</button>
</body>CSS 기초
HTML 부모 자식 구조 살펴보기
- html 태그는 "누가 누구 안에 있는지"가 가장 중요
CSS 사용 방법
- head 태그 안에 style 로 공간을 만들어 작성
- 클래스명 가리킬 때는 . | id 가리킬 때는 #
오늘 사용한 CSS
- 배경 관련: background-color, background-image, background-size
- 사이즈: width, height
- 폰트: font-size, font-weight, font-family, color
- 간격: margin, padding
자주 쓰이는 CSS
div는 박스 형태
margin은 바깥 여백, padding은 안쪽 여백
<style>
.클래스명 {
background-color: 색상;
width: 가로길이;
height: 세로길이;
border-radius: 모서리둥글게;
color: 글자색상;
text-align: 글자위치;
padding: 위 오른쪽 아래 왼쪽;
background-image: url('해당 url');
background-position: 배경 위치;
background-size: 배경 크기;
}
</style>화면을 가운데로 가져오려면?
박스를 씌우고 → 양쪽 여백을 조정하자 !
전체 div를 만들고, width를 주고, margin을 auto로
구글 폰트 사용하기
- google font 사이트
- selected families의 Use on the web의 import 탭
- style 태그 사이에 있는 코드 복사해서 style 태그 안에 붙여넣기
- CSS rules to specify families 탭의 코드 복사해 전체적용 *{ } 에 넣기
주석 달기 (단축키: Ctrl + /)
주석을 붙여놓으면 브라우저/컴퓨터가 읽지 않으므로
개발자 본인 혹은 동료를 위해 붙여두는 것
- 필요 없어진 코드 삭제 대한 임시로 동작 정지를 원할 경우
- 코드에 대한 간단한 설명을 붙여두고 싶은 경우
CSS 파일 분리
style 태그 사이가 너무 길어지면 보기 어려우므로 파일을 분리함
style.css 파일을 html 파일과 같은 폴더에 만들고, head 태그에서 불러옴<link rel='stylesheet' type='text/css' href='css파일이름.css'>
부트스트랩(Bootstrap) - 예쁜 CSS 모음집
남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서,
bootstrap 적용은 CSS 파일 분리와 원리가 동일함
1) 부트스트랩 써보기 (카드 사용하기)
- 원하는 부분 붙여넣기
- 이미지 넣고, 개수 조절하기
- 코멘트 달기: p 태그 활용. class를 줘서 회색 글씨로
- 별점 넣기: 마찬가지로 p 태그 활용
2) 부트스트랩 써보기 (포스팅박스 사용하기)
- 먼저 큰 박스 만들기
→ 그림자 효과: box-shadow: 0px 0px 3px 0px gray;
→ 안쪽으로 띄우기: padding: 20px;- 영화 URL
→ Forms의 Floating Labels- 코멘트 URL
→ Forms의 Floating Lables의 Textareas 참고- 기록하기, 닫기 버튼
→ Button 두 개를 묶을 div를 만들어 display: flex 주기
Github 으로 웹 페이지 배포해보기
Github는 인터넷에서 코드를 업로드 할 수 있는 사이트
동시에 이 코드를 배포해 마치 홈페이지처럼 접속 가능
- 저장소 생성
→ Create Repository를 선택
→ 저장소 이름을 적고, public 선택, Create Repository 선택- 파일 업로드하기
→ Upload Exsiting Files 선택
→ finder 혹은 윈도우 탐색기에서 index.html 파일을 업로드
(html은 파일 이름이 index여야 함)- 배포하기
→ 저장소에서 settings -> Pages 찾아 선택
→ Deploy from a branch 선택
→ Branch Name을 main으로 설정하고 save
(❁´◡`❁)