✏️사용 프로그램
🔎 Pycharm Professional
https://www.jetbrains.com/pycharm/download/
Download PyCharm: Python IDE for Professional Developers by JetBrains
Download the latest version of PyCharm for Windows, macOS or Linux.
www.jetbrains.com
🔎 JetBrains
JetBrains Account
account.jetbrains.com
🔎 AWS
Amazon Web Services Sign-In
대체 인증 방법을 사용하여 로그인 멀티 팩터 인증(MFA) 디바이스 분실, 손상 또는 고장 시에는 대체 인증 팩터를 사용하여 로그인할 수 있습니다. 이 계정으로 등록된 이메일과 전화를 사용하여
signin.aws.amazon.com
풀스택 과정에서 배울꺼를 그림으로 나타내면 다음과 같다. 이 그림은 완주 후 보면 이해가 된다.
처음에는 설명해줘도 잘 이해가 되지 않았다.
📌 코드정렬 CTRL + ALT + L
📌 들여쓰기 TAB
📌 주석 CTRL + /
✏️코딩은 무언갈 외워서 하는게 아니다.
코드를 왜 이럴까? 왜 괄호일까? 이런거에 집착하는건 좋지 않은 해석방법이다.
통으로 이런 경우에는 이런식으로 쓰는구나! 하는게 좋다고 한다.
🔎 HTML은 뼈대, CSS는 꾸미기!
HTML은 구역과 텍스트를 나타내는 코드이고
CSS는 잡은 구역을 꾸며주는 것
HTML 코드 내에 CSS파일을 불러와서 적용한다.
보통 CSS를 잘 사용할 줄 아는 것과 이쁘게 만드는 것은 다른영역이므로 웹디자이너나 퍼블리셔에게 의존하게 된다고 한다.
✏️head안에는 페이지 속성 정보를, body안에는 페이지 내용을 담는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html> - div태그 : 묶어서 한번에 옮길 때
- p : 문단 paragraph약자
- <li> bullet point!1 </li> : bullet point ●
- h1 제목, h2 소제목, h3~h6
- span태그 : 특정 글자만
- a 태그 : 하이퍼링크
- img태그 : 이미지 삽입
- button태크 : 버튼
- textarea 태크 : 텍스트
- hr : 가로선
🔎 배경관련
background-color
background-image
background-size
🔎 사이즈
width
height
🔎 폰트
font-size
font-weight
font-famliy
color
🔎 간격
margin 바깥 여백
padding 안쪽 여백
🔎 폰트
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
🔎 Bootstrap
예쁜 CSS 모음집
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
🔎 JS
JavaScript
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
서버는 클라이언트에게 HTML+CSS+JS을 줍니다.
모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고 모든 웹서버는 HTML+CSS+JS를 주게 되어 있습니다.
<script>~</script> 내에 자바스크립트를 작성합니다.
✏️ "마우스 오른쪽 클릭 → 검사 → console"
console.log(변수);페이지를 통해 빠르게 자바스크립트를 테스트해 볼 수 있다
'풀스택 개발일지' 카테고리의 다른 글
| 👨💻 [풀스택] 3주차 숙제 (0) | 2022.07.15 |
|---|---|
| 👨💻 [풀스택] 3-6. 패키지 설치 오류 (0) | 2022.07.15 |
| 👨💻 [풀스택] Python, 크롤링, mongoDB (0) | 2022.07.15 |
| 👨💻 [풀스택] jQuery, Ajax (0) | 2022.07.15 |
| 👨💻 [풀스택] 1주차 숙제 (0) | 2022.07.14 |
댓글