1-4. Quiz_간단한 로그인 페이지 만들어보기
shift + tab : 앞으로 정렬
ctl + alt + L : 코드 자동정렬
<p>를 이용하면 자동으로 줄바꿈이 됨.
1-5. CSS 기초
HTML 부모-자식 구조 살펴보기
감싸고 있는 태그(부모태그)의 내용이 바뀌면, 그 안에 있는 태그(자식태그) 내용물도 바뀜.
CSS 기초
css는 <head>안에 <style>을 만들어 그 안에 작성.
<h1 class="mytitle"> = h1태그에 mytitle이라는 이름의 클래스를 줌.
<style>안에 .mytitle { color: red; } 이런식으로 꾸밀 내용을 적어야함.
1-6. 자주 쓰이는 CSS 연습하기
<div>는 얼만큼의 공간을 차지하는지 배경색을 줘서 체크할 수 있고,
tab을 눌러서 <body>보다 한 칸 앞에 있는게 보기에 좋음.
text-align: center; 중앙정렬 (text성질의 요소=inline요소)
background-color: 색깔; 배경색
color: 색깔; 폰트색
다음 세가지는 보통 같이 쓰임.
background-image: url("url") 배경이미지
background-size: cover; 배경사이즈
background-position: center; 배경위치
border-radius: @px; 모서리 둥근정도를 @px 만큼 줌.
여백에는 안쪽 여백(padding), 바깥 여백(margin)이 있음.
margin: auto; 박스속성의 내용(blcok요소)을 가운데로 (양쪽 여백을 동등하게 줌).
html은 글속성(<a>,<span 등>과
박스속성(<p>,<div>,h@ 등 가로,세로 개념이 존재)이 있음
display: block; 글속성을 박스속성으로 강제로 변경.
클래스의 중첩 : class="클래스이름1 클래스이름2"
1-7. 폰트, 주석, 파일분리
구글 웹폰트 입히기: 구글폰트사이트 - 원하는 폰트 클릭 -
select this style 클릭 - link태그와 css 복사 - <head>와 *{ }안에 붙여넣기
* { css } = 해당 내용을 모든 태그에 적용.
주석: 사람은 읽을 수 있지만 컴퓨터는 못읽음.
개발자 본인 또는 동료를 위해 붙여두는 것! 언어마다 모양이 다름. 단축키는 ctrl + /
<style>부분의 내용은 css파일로 분리 가능.
분리된 파일은 <head>에 <link rel="stylesheet" type="text/css" href = "(css파일이름).css">로 연결해야됨.
1-8. 부트스트랩, 예쁜 CSS 모음집
부트스트랩: 다른사람들이 만들어놓은 예쁜 css를 모아둔 것.
부트스트랩을 이용할 때는 항상 기본 부트스트랩 시작 템플릿을 가지고 시작해야함.
부트스트랩의 내용으로만으로 부족할 때는 내가 만든 커스텀 css와 부트스트랩 css를 함께 이용.
부트스트랩 컴포넌트4.0: https://getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
부트스트랩 시작 템플릿 :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
</head>
<body>
<!-- 여기에 부트스트랩 컴포넌트에서 복사한 코드 붙여넣기 -->
</body>
</html>
1-9. Bootstrap(부트스트랩)을 써보자!
파이참에서 적은코드 왼쪽에 -를 클릭하면 해당 태그를 접을 수 있음.
이미지 가져오기: 이미지 검색 후 원하는 이미지 마우스 오른쪽 클릭 - 이미지 주소 복사
내용 가운데 정렬: <body>안의 태그들을 <div class="wrap">로 묶어주고
<head>안의 <style>에 .wrap { width: @px; margin: auto; }
1-10. Quiz_함께 만든 페이지를 발전시켜보세요!
font-weight: bold; 폰트굵기 굵게.
모르는 것은 구글링!
1-11. Quiz_나홀로메모장의 포스팅박스를 완성하기!
MDN, w3Schools, TCP School : 구글링 할 때 참고 사이트
margin: 값1, 값2, 값3, 값4; 위부터 시계방향으로 값을 줄 수 있음.
'개발일지' 카테고리의 다른 글
| [스파르타코딩클럽/웹개발 종합반] 6일차. 3-6 ~ 3-13 강의 (Python, 크롤링, mongoDB) (0) | 2022.02.13 |
|---|---|
| [스파르타코딩클럽/웹개발 종합반] 5일차. 2-11 ~ 3-5 강의 (Python) (0) | 2022.02.11 |
| [스파르타코딩클럽/웹개발 종합반] 4일차. 2-3 ~ 2-10 강의 (jQuery, Ajax, API) (0) | 2022.02.10 |
| [스파르타코딩클럽/웹개발 종합반] 3일차. 1-12 ~ 2-2 강의 (Javascript) (0) | 2022.02.09 |
| [스파르타코딩클럽/웹개발 종합반] 1일차. 0-1 ~ 1-3 강의 (HTML, CSS, Javascript) (0) | 2022.02.08 |
