211223_THU
1-1.
- 내가 보는 페이지만 내 마음대로 바꿀 수 있다.
- 새로고침을 하면 원상복귀 된다.
- 내가 보고 있는 페이지는 사실 인터넷과 상관이 없다.
- 브라우저의 역할
- 서버에게 요청한다. (서버의 API 한테)
- 결과물을 받아서 그려준다. (결과물: HTML, CSS, JS)
- HTML: 뼈대
- CSS: 꾸미기
- JavaScript: 동적 변화
- 데이터만 요청/받는 경우: JSON 형식
1-2.
- PyCharm 설치
1-3.
- HTML: 문서 형태의 뼈대
- <title></title>: 브라우저 탭에 나타나는 웹페이지의 이름
- <head></head>: <body> 말고 모든 것 (i.e. CSS, JS, og ...)
- <body></body>: 웹페이지의 본문
- <div></div>: 구역을 나눔
- <p></p>: 문단을 나눔
- <ul><li></li><li></li></ul>: bullet point
- <h1~6></h1~6>: 제목 1~6 (<h1></h1> 정도는 하나 있으면 좋음)
- <span></span>: 특정 글자를 꾸밀 때 사용
- <a href=""></a>: 하이퍼링크
- <img src="">: 이미지 링크
- <input type="(text)">: 박스 형태의 input 태그
- <button></button>: button
- <textarea></textarea>: 두 줄 이상의 박스 형태의 text 태그
- <hr>: 가로선1-4.
- shift + tab: 줄 한 칸 당기기
- cmd + opt + l: 줄 정리
1-5.
- 부모 태그 & 자식 태그
<div>
<div> -> 하위 태그 (button) 의 부모 태그; 속성을 주면, 자식 태그에 영향을 끼침
<button></button> -> 상위 태그의 자식 태그
</div>
</div>- CSS: HTML 태그에 명찰을 달아주고, 그 명찰을 head 태그 안의 style 태그 내부에서 지칭하여 꾸며준다.
<head>
<style>
.mytitle {
}
</style>
</head>
<body>
<h1 class="mytitle"></h1>
</body>1-6.
- (), {}, [], "", ,, ., 등에 연연하지 말자
- 자주 사용되는 CSS
- background-color:
- width:
- height:
- color:
- text-align:
- div 태그에 이미지 삽입할 때 쓰이는 3가지 CSS
- background-image: url("");
- background-size: cover;
- background-position: center;
- border-radius: (모서리 둥근 정도)
- padding: (inside space)
- margin: top, right, bottom, left (outside space)
- margin: auto (가운데 정렬) -> 안될 경우, 박스가 아니라 글 속성이기 때문에 -> 'display: block' 사용 후 적용
- CSS 중첩: class에 띄어쓰기로 적용
<button class = "mybtn red-font" -> .mybtn과 .red-font 둘 다 적용됨1-7.
- 구글 한글 폰트: https://fonts.google.com/?subset=korean
1. link href="" 복사 후 title 밑에 붙혀넣기
2. font-family: '' 복사 후 style 내 * {} 에 붙혀넣기 - cmd + /: 코딩 주석 처리
- CSS 는 다른 파일에 따로 관리하고 head 태그 안에서 불러서 적용:
<link rel="stylesheet" type="text/css" href= "(css 파일 이름).css">1-8.
- Bootstrap: CSS 모음집(https://getbootstrap.com/docs/4.0/components/alerts/)
- 기본 템플릿:
<!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>
</head>
</html>
개발되는 중입니다.