음... 개발일지... 어떻게 써야하지? 9기 분께서 다른 9기분 개발일지를 보여주시긴 했는데, 보긴 봤어도 아직 개발일지를 어떻게 써야할지 잘 모르겠다. 일단 배웠던거 까먹지 않게 정리하는 용도로 쓰다보면 좀 더 잘 쓰는 법을 알게 되겠지?
1. 자꾸만 까먹게 되는 단축키
shift + tab : 들여쓰기 취소
ctrl + / : 해당 내용 주석으로 바꾸기
2. html은 뼈대, css는 꾸미기
자바스크립트는 프로그래밍 언어 중 하나
3. 수업 때 사용했던 코드
color: white; // 글씨색
width: 300px; // 너비
height: 200px; // 높이
background-image: url('http://이미지링크'); // width와 height로 지정해준 영역에 들어갈 배경 그림
background-position: center; // 배경 그림이 한가운데 오도록
background-size: cover; // 배경 그림 크기를 지정해준 영역에 맞추기
border-radius: 10px; // 테두리 두께는 10px
text-align: center; // 글씨 가운데정렬
padding-top: 40px; //상단 안쪽에 여백 주기
margin과 padding 차이
margin은 바깥 여백을, padding은 안쪽 여백을 나타낸다.
+ 내일 자고 일어나서 해볼 것.
padding도 padding: 20 30 50 10; 으로 되나 실험해보기. -> 된다
20 30 50 10 이게 순서대로 위아래오른왼 어디에 해당되는지 실험해보기. -> 위오른아래왼 (시계방향)
margin: 10px auto; 가 뭔지 다시 해보기. -> 위에만 10px 여백 주고 나머지는 자동
display: block; 뭐였는지 다시 해보기. -> 정해준 영역이 마치 블록처럼 하나로 인식되고
블록 외 부분은 자동으로 줄바꿈 된다.
display: inline 은 줄바꿈 없이 전부 한줄에 표시됨
display: inline-block 은 블록들이 전부 한줄에 표시
4. 수업 때 사용했던 코드 2
<head>
<script>
function order(){
alert('주문이 완료되었습니다!');
}
</script>
</head>
<body>
<button type="button" onclick="order()">주문하기</button>
</body>
// <head> </head> 사이에 <script> </script> 를 입력하고, 그 사이에 자바스크립트 함수 입력하기.
// onclick="order()" -> 버튼을 누른다(onclick)는 것은 'order()'에 쓰인대로 하겠다는 뜻
// function order() -> order()가 어떻게 실행될 것인지
// alert -> 말풍선 띄우기
5. <html> </html> 에 들어가는 것
<link href="주소">
6. <style> </style> 에 들어가는 것
문서를 꾸며주는 것들.
* {
font-family: 'Nanum Gothic', sans-serif;
} // -> 이 코드에 쓰인 * 는 문서 전체에 적용된다는 뜻.
.클라스명 {
font: red;
} // -> class="클라스명" 이 들어간 곳에 적용
7. 자바스크립트 사용법 몇가지..
크롬 개발자도구 창 띄우기 (자바스크립트 입력용)
f12 또는 우클릭-검사 -> console 탭
여기선 console.log()가 출력하는 역할 한다.
let 으로 변수 선언. 한번 선언한 뒤엔 let 없이 그냥 입력해서 값 변경할 수 있다.
let a = 10 -> 10이라는 정보를 갖고 있는 a라는 변수 선언
a = '에이' -> a에 담겨있던 정보를 10에서 '에이'로 변경
변수명은 띄어쓰기나 특수문자 쓰는거 불가능.
대신 camel case(oneApple 같이 중간에 대문자) 나 snake case(one_apple 같은 언더바)로 구분
리스트는 순서대로 값이 들어가있는 목록.
딕셔너리는 키(key) : 밸류(value)의 묶음.
리스트와 딕셔너리를 조합해서 쓴다.
추가할 땐 .push 를 쓰는데 나중에 좀 더 연습해보기;
자바스크립트 반복문
for (let i = 0; i < 100; i++){ -> 0 값을 넣어 i라는 변수 선언 ; i가 100보다 작을 동안; 반복될때마다 i에 1 더하기
console.log(i); -> i를 출력. 반복될때마다 i값이 출력되므로 0부터 99까지 출력된다.
}
8. 유용한 링크들
구글 웹폰트 : https://fonts.google.com/?subset=korean
부트스트랩(예쁜 css 모음집) 컴포넌트 : https://getbootstrap.com/docs/4.0/components/alerts/
9. 코드 검색할 때 쉽게 하는 법
찾고 싶은 내용 + w3schools 또는 mdn 검색해보기.
예) css border w3schools
css border mdn
10. 마지막으로 1주차를 끝내며 느꼈던 것들
- 1주차는 그렇게 어렵지 않았다. 맛보기 느낌?
- 과제할 땐 조금 힘들었다... 코드가 어려워서(x) 과제로 쓸 이미지에 공백이 있었는데 내가 그걸 몰라서(o)
- 시야를 넓히자...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 생각할 수록 어이없어
'스파르타코딩클럽 > 내일배움단' 카테고리의 다른 글
| 스파르타코딩클럽 내일배움단 웹개발 종합반 후기 (0) | 2021.11.21 |
|---|---|
| 웹종 5주차 (0) | 2021.11.16 |
| 내일배움단 웹개발 4주차 (0) | 2021.11.16 |
| 내일배움단 웹개발 3주차 (0) | 2021.11.14 |
| 내일배움단 웹개발 2주차 (0) | 2021.11.14 |