일지 쓰기가 너무 귀찮았다!
너무 졸리다
어제 늦게 자서 그런지...
어떤 강의인가
비개발자를 위한, 웹개발 종합반
말 그대로 비개발자가 코딩을 이해하고 익숙해지기 위한 수업과정이다.
- 1주차 수업 목표는 다음과 같다
- 서버와 클라이언트의 역할에 대해 이해한다.
- HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
- Javascript 기초 문법을 익힌다.
HTML은 프레임, CSS는 장식, Javascript는 움직임이라고 간략하게 설명 가능
A. 몇 개의 태그를 통해 기본 구조를 짜는 방법을 익혔다.
(01_example.html 파일 참고)
B. CSS기초
a) ~ 안에 로 공간을 만들어 작성합니다.
b) .클래스명 {}
c) 자주 쓰이는 CSS는 01_login.html 파일 참고
C. 폰트, 주석, 파일분리
a) 폰트는 구글 폰트에서 찾아서 사용
b) " 부분은 ~ 아래에 붙여넣음"
c) CSS rules to specify families 부분은
<style> * { 이 부분에 넣어서 사용
}
d) 주석
단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)
1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
e) CSS 파일 분리
<style> ~ </style> 부분이 너무 길어지면, 보기가 어려움
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
D. 부트스트랩
a) 부트스트랩 시작 템플릿을 넣고 시작해야함
```
<!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>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
```ㅇ
b) 부트스트랩 컴포넌트에서 필요한 걸 찾아서 자기 필요에 따라 편집해서 사용
* 줄을 잘 맞춰야 잘 정리해서 사용할 수 있다.
E. 퀴즈 <포스팅 박스 완성하기>
- 부트스트랩 컴포넌트 페이지에서 forms를 참고하세요!
- 가운데로 가져오려면 똑같이 width, margin를 활용합니다.
- 경계선을 둥글게 그리는 방법을 찾기 위해 다음을 구글링해봅니다.
- border
- border-radius
- 경계선과 내부 요소의 간격은 padding으로 조절하는게 좋습니다.
※ 참고
복사해오는 내용 중 form 태그(
form태그를 div 태그(
→
태그 안에 버튼이 있으면, 자동으로 새로고침이 됩니다.→ 우리는 이 기능을 안 쓸거라, 추후 충돌 방지를 위해 미리 바꿔두는 것입니다!
마치며
HTML, CSS 맞보기.
내일은 퀴즈 풀이를 보며 시작해서 Javascript 연습 및 일지 작성까지 해야겠다.
