평소에 개발쪽을 배워보고 싶다는 관심이 많았지만 현재 직장을 다니고 있어서 쉽게 배울 엄두가 나지 않았습니다.
유튜브를 보고 공부하기에는 뭔가 집중력도 부족하고 의욕이 안생기더라구요.
그런데 우연히 스파르타 코딩클럽에서 국비지원 강의가 된다는 광고를 보고 냉큼 결제를 해서 수강을 했습니다.!
스파르타 코딩클럽에서 개발일지를 주차별로 작성을 하라는데, 뭔가 의욕도 생기고 해서 개발일지를 작성을 해보려고 합니다.!
웹개발 종합반 1주차 개발일지
HTML - 뼈대
-문서 형태를 기반
head, title, body 태그로 구성되어 있다.
head - body 말고 나머지 필요한 태그들이 다 들어가 있음. 구글 엔진 퍼가요, CSS, Javascript 등이 들어가 있다.
CSS - 예쁘게 꾸미는거
Javascript - 움직이는 모션, 클릭하면 이동하는 것
PyCharm
-파이썬을 쓰기에 가장 편한 Tool
단축키
ctrl + alt + L = 코드의 줄 정렬을 해준다.
tab - 자동 뛰어쓰기 밑 정리
웹 페이지에서 주소, 탭에들어가는 아이콘, 링크 공유등 윗 부분은 head 영역잉고
나머지 부분은 body 부분이다.
html 주요 태그
<div> 디비전 태그
<P>
<h1> - 제목을 나타내는 태그. 페이지마다 하나씩 꼭 써주는게 좋다.
<span> - 특정 글씨만 꾸밀 때 사용
<a> - 하이퍼링크
<img> 이미지 넣기
<class> 해당 코드에 이름 또는 명찰을 붙여줌
margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백을 - div에 색깔을 넣고, 직접 사용해서 차이를 비교해보세요!
* - *를 앞에 붙이면 모든 태그에 적용이 된다.
ctrl + / = 주석처리를 할 수 있다.
중첩 : cart-text에 여기만 적용을 추가로 하고 싶은때 뛰고 하나더 붙이면 중첩이 된다.
<p class="card-text comment">여기에 코멘트 들어갑니다.</p>
CSS의 내용이 너무 길어지면 코드를 보는게 불편하니 CSS 만의 파일을 따로 만들고, 그 부분을 불러와서 적용을 시킬 수있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.mytitle {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 20px;
}
.wrap{
width: 300px;
margin: auto;
padding-top: 150px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요.</h5>
</div>
<p> ID: <input type="text"/></p>
<p> PW: <input type="text"/></p>
<button> 로그인하기</button>
</div>
</body>
</html>
<유용한 사이트>
구글 웹 폰트
-폰트의 경우 구글 웹폰트 사이트를 통해 많이 사용한다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
css MDN
https://developer.mozilla.org/ko/docs/Web/CSS
CSS: Cascading Style Sheets | MDN
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌
developer.mozilla.org
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Javascript
<script>
function hey(){
alert('안녕!!');
}
</script><p class="lead">
<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅 박스 열기</a>
</p>
alert = 경고창
<변수>
let a(변수) = let 뒤에 임의 이름을 설정을 해두어 a=5 a+3= 8을 만드는 등 하는 기능이다.
let 뒤에 이름을 설정을 할때는 누가봐도 알아볼만한 이름으로 설정을 해둔다.
<자료형>
let a_list = ['수박,'참외','배','포도']
a_llist[0] = 수박
let a_dict = {'name':'bob','age':27}
undefined
a_dict['bob']
undefined
a_dict['name']
'bob'
a_dict['height']=180
180
<함수>
정해진 동작을 한다.
function sum(num1,num2){
return num1+num2
}
let result = sum(2,3)
result
5
return = 해당 값을 실행한 결과가 표기 되는것.
if
if (age>24){
console.log('성인입니다')
} else{
console.log('청소년입니다')
}
and = &&
or = ||(\\)
<반복문>
for (let i = 0; i<scores.length; i++){
console.log(scores[i])
}
for (let i = 0; i< mise_list.length; i++){
let gu_name = mise_list[i]['MSRRGN_NM']
let gu_mise = mise_list[i]['IDEX_NM']
console.log(gu_name,gu_mise)
}
'유용한 정보' 카테고리의 다른 글
| 해외송금 하고 싶은데 어디서 해야할까? (은행, 핀테크)(베트남 송금, 미국송금 ...) (0) | 2023.01.08 |
|---|---|
| 2023 외국인 연말정산 월세 공제 필요서류 (0) | 2023.01.02 |
| 미니 건조기 추천 (미니건조기 추천, 먼지제거, 고양이털 제거) (0) | 2022.02.27 |
| 외국인도 연말정산 월세공제 받을 수 있을까? 가능합니다.! (0) | 2022.02.24 |
| 갤럭시 버즈 프로 쿠팡 구매 오픈! (로켓배송, 5%할인) (0) | 2021.01.17 |