와.. 두 애들 잠자는 시간을 노려서 강의 듣기 은근 빡세다.
암튼 이틀만에 1주차 강의듣기/숙제제출 성공.
:: 1주차 수업 목표
- 서버와 클라이언트의 역할에 대해 이해.
- HTML, CSS의 기초 지식을 이해.
"부트스트랩" 활용하기 - Javascript 기초 문법.
:: 준비작업 | 필수 프로그램 설치
-
Pycharm Professional 설치.
https://www.jetbrains.com/pycharm/download/ -
JetBrains 회원가입.
-
AWS 가입.
AWS는 개인에게 클라우드 환경의 가상서버를 제공. 기본 사양의 서버(EC2)를 1년 동안 무료로 사용가능
:: HTML과 CSS의 개념 _HTML은 뼈대, CSS는 꾸미기!
HTML 기초 | HTML은 크게 head와 body로 구성.
- head안에는 페이지의 속성 정보
head안에 들어가는 대표적인 요소들: meta, script, link, title 등페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. - body 안에는 페이지의 내용
<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>
-
외울 필요 없음. 대신 내게 필요한 것들은 찾아서 사용하거나, 찾기 쉽게 계속 업데이트 하기.
-
정렬은 중요!
Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능
CSS 기초 |
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성.
class="mytitle"를 가리킬 때, .mytitle { ... } 라고 써야 함.배경관련
background-color
background-image
background-size
background-positon
사이즈
width
height
폰트
font-size
font-weight
font-family color
간격
margin | 바깥 여백
padding | 안쪽 여백
테두리
border-radius
그 밖에..
:: 구글웹폰트 활용하기
https://fonts.google.com/?subset=korean
:: 주석 달기
주석은 언제?
필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
코드에 대한 간단한 설명을 붙여두고 싶을 때 사용.
주석은 브라우저/컴퓨터가 읽지 않음.
즉, 개발자 본인 또는 동료를 위해 붙여두는 것.
단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + /(슬래시):: CSS 파일 분리 | style 부분이 너무 길어지면 파일을 별도로 저장해서 불러오게 하는 것이 가능.
style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
:: 부트스트랩(bootstrap) | 예쁜 CSS 모음집(개이득)
부트스트랩 컴포넌트 5.0
https://getbootstrap.com/docs/5.0/components/buttons/
부트스트랩이란? 예쁜 CSS를 미리 모아둔 것
(CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.)
#코드줍줍
이미지 어둡게 하기 | linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
1주차 숙제 | 예시화면을 보고, 부트스트랩 또는 템플릿을 활용해서 팬명록의 메인 페이지를 완성하기
https://juhlsuh.github.io/homework/
- 개발 진행 및 완료상황. 무엇을 더 하면 좋을지.
팬명록을 만들라 했는데, 딱히 생각나는 가수가 없어서(있다해도, 팬페이지 만들정도는 아니라.. 차라리 드라마 덕질을 하자고 마음을 먹고 나의 해방일지드라마 어록모음 페이지를 만들었다. - 업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용
타이틀 부분 높이가 준비한 이미지들과 맞지 않아서 높이를 조정해서 낮추고, 어록페이지 폭은 대폭 확대했다.
작업을 하고 나니, 텍스트가 많지 않은 세번째 카드의 폭이 위의 텍스트가 많은 다른 카드 부분과 폭이 달랐다. card 부분에 width: 100%; 으로 설정해서 문제 해결 함.
.card {
margin-top: 10px;
max-width: 900px;
width: 100%;
}
.mycards {
max-width: 1000px;
width: 95%;
margin: 20px auto 0px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}-
오늘 새로 배운 내용
모바일에 맞춰 폭을 조절하는 방법 max-width활용. -
참고할 만한 레퍼런스들
부트스트랩 사이트 정말 마음에 든다.+ㅅ+ -
특이사항(아이디어, 메모 등)
- 지시사항 및 고객 요구사항(숙제?)
숙제의 가이드라인과 내가 구현하고 싶은 페이지가 달라서.. 과연 이 숙제는 통과 될 것인가.. 하는 의문이 더 큼. - 회고(반성 또는 피드백 받은 것)
아직 뭐가 뭔지 모름. - To-do list
아직 계획 없음.
와.. 개발일지 쓰는 것도 빡시다... 내용정리하고, 가독성 좋게 정리해야하고..
그나저나 자바스크립트 어쩌나... 아 몰라 일단 2회차 수업들어보자.
