▶ 프로그램
- Pycharm Professional
- JetBrains
- PyCharm Professional
- Aws
▶ 단축키
- 코드 자동 정렬 :
Ctrl+Alt+L - 코드 들여쓰기 :
Tab - 주석 (메모/미사용 코드) :
Ctrl+/
( * 주석입력 안되는 경우 :Ctrl+Shift)
▶ HTML (뼈대)
- 코드스니펫 : 코드 일부 발췌를 의미
- 기초 태그 (코드스니펫으로 사용하기)
[구역 태그]
- 구역 : <div> </div>
- 문단 : <p> </p>
[구역 내 태그]
- 제목 태그 : <h1~h6> </h1~h6>
- 가로선 : <hr>
- 특정 글자 꾸미기 : <span style="color:red">글자</span>
- 하이퍼링크 : <a href="http://naver.com/"> </a>
- 이미지 삽입 : <img src="이미지 주소" />
- 입력 필드 삽임 : <input type="text" />
- 버튼 삽입 : <button> </button>
- 텍스트 입력 영역 삽입 : <textarea> </textarea>▶ CSS (꾸미기)
- 꾸미고자 하는 코드에 class 이름 입력 : class="이름"
- head > title 하단 style 코드입력
- style 코드 내 class 이름 불러오기 : .이름 {}
(class 이름을 불러올 때, 반드시 '.' 입력하기)
[배경관련]
- background-color
- background-image
- background-size
- background-position
[사이즈]
- width : 가로 크기
- height : 세로 크기
[폰트]
- font-size : 글자 크기
- font-weight : 글자 가로 크기
- font-famliy
- color : 글자 색상
[간격]
- margin : 내 외부 여백 (거리?)
(* px 입력 순서 : 위 > 오른쪽 > 아래 > 왼쪽 )
- padding : 내부 여백
[그 외]
- border : 테두리
- border-radius : 테두리 둥근정도
- 전체를 가운데로 가져올 때,
- 가운데로 맞출 구간을 구역(div)으로 나눈다.
- 구역 설정된 부분을 이름(class)을 설정한다.
- style 코드에 꾸미고자하는 이름을 불러오고 구역의 범위를 색상으로 표시해 어느정도 비중으로 차지하는지 확인한다.
- 여백(margin)을 auto로 주게되면 원하는 구역을 가운데로 가져올 수 있다.
- 버튼을 가운데로 설정하는 법
(HTML의 경우, 글속성과 박스속성이 있는데..
글 속성은 가로, 세로의 기준이 없기에 박스속성으로 바꾸어 가운데로 강제로 이동 시켜줘야 한다.)
하여 위와 같이 설정해주고 마지막에 display: block 을 통해 강제로 박스속성으로 바꾸어 준다.
- 중첩 스타일 설정
class에 이름 두개 붙이기!
▶ 폰트 넣기
-
원하는 폰트 코드스니펫
(위치 : title 밑에 폰트 붙이기 / style 밑에 * {} 내부에 폰트 css 붙이기)- 여기서 '*' 은 전체 적용을 의미함
▶ 파일 분리
- 새로운 스타일 시트 만들기
- head 코드에 아래 내용 코드스니펫 하기
- (css파일 이름)을 스타일 이름으로 설정해주기.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
▶ 부트스트랩
-
부트스트랩은 아래 코드 템플릿으로 시작하기
<!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>▶ CSS Border Style (테두리 스타일)
코딩시작!!