1강 요약
1. 웹 브라우저 원리
- 서버에 요청 -> 서버는 HTML, CSS, JS 제공 -> 그대로 보여줌(프론트엔드)
2. HTML : 웹의 뼈대를 잡아주는 구역을 나타내는 코드.
- Head : 페이지의 속성 정보(눈에 안 보이는 필요한 것들을 담는 것)
- Body : 페이지의 내용
- 줄 정렬은 shift + alt + f
3. CSS : HTML을 통해 작성된 뼈대의 속성을 선택해 꾸며주는 코드.
- <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성
4. 자주 쓰는 css
- h1-h6 : 구획 제목
- background-image
- background-size
- background-position color
- width : 너비
- height : 높이
- border-radius : 테두리 둥글게 만드는 속성
- margin : 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정 (바깥 여백)
- padding : 요소의 네 방향 안쪽 여백 영역을 설정 (안쪽 여백)
5. 파일 분리
- 해당이름.css 파일을 같은 폴더에 만들고 head 태그에서 불러오기.
- <link rel="stylesheet" type="text/css" href = "(css파일이름).css">
6. Bootstrap : 현업에서 미리 완성된 부트스트랩을 가져와 쓰는 것.
7. Github : 인터넷에서 코드를 업로드 할 수 있는 사이트
2강 요약
1. Javascript : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
2. 변수 대입( a = 2 )의 의미 : 오른쪽에 있는 것을 왼쪽에 넣는 것
- let으로 변수를 선언 (사칙연산, 문자열 더하기 가능)
3. . 리스트 : 순서를 지켜서 가지고 있는 형태
4. 딕셔너리 : 키(key)-밸류(value) 값의 묶음
5. JQuery : $('#element').hide(); 미리 작성된 Javascript 코드
6. 반복문
- forEach : 리스트 안에 들어 있는 값의 개수만큼 반복.
- fruits.forEach((a) => { console.log(a) })
7. 조건문
- if (조건) { // 조건에 맞다면~ } else { // 아니라면~ }
8. JQuery – append
- append()는 선택한 요소의 내용의 끝에 콘텐트를 추가.
- append( content [, content ] )
- ` `의 사용 : 문자와 변수를 함께 써줄 수 있도록 하는 특수기호
9. 서버-클라이언트 이해하기
- JSON : JavaScript Object Notation : Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷
- Get : 데이터의 조회를 요청
- Post : 데이터의 생성, 변경, 삭제를 요청
10. Fetch
- Api 활용을 통해 자료를 가져올 땐 아래의 코드 사용.
- fetch("api 주소").then(res => res.json()).then(data => { })
11. <div>구역 나누기</div>
문자열 길이 체크하기!
- 개인적으로 내가 출력하는 글자의 길이를 알고 싶을 때가 있을 것이다. 제목이라던가, 부제, 내용을 적을 때 몇 글자가 한 줄에 잡히는지를 보고 싶을 때 쓰는 문법이 없을까 조사하다가 찾은 것이 "문자열의 길이를 반환하는 속성" : .length 이다.
예를 들어
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
body {
font-family: Consolas, monospace;
}
</style>
</head>
<body>
<script>
document.write( '<p>"1234".length : ' + '1234'.length + '</p>' );
document.write( '<p>"".length : ' + ''.length + '</p>' );
document.write( '<p>"한글".length : ' + '한글'.length + '</p>' );
</script>
</body>
</html>라면 값은
| "1234".length : 4 "".length : 0 "한글".length : 2 |
가 된다.
'개발 공부' 카테고리의 다른 글
| 혼공스 Chapter.5 (0) | 2023.03.09 |
|---|---|
| 혼공스 Chapter.4 (0) | 2023.03.08 |
| 혼공스 Chapter.3 (0) | 2023.03.07 |
| 혼공스 Chapter.2 (0) | 2023.03.06 |
| 혼공스 Chapter.1 (0) | 2023.03.06 |
