1주차
HTML : 뼈대
CSS : 스킨
Javascript : 동작
HTML은 head와 body로 이루어져 있고, 다양한 태그를 통해 웹문서의 구조와 내용을 정의할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>CSS는 head의 style태그 안에 클래스를 정의한 후, 해당 클래스를 HTML 요소에 적용시켜 사용한다.
<head>
<style>
.mytitle{
color:red;
}
</style>
</head>
<body>
<h1 class="mytitle">페이지<h1>
</body>css태그
- div로 구역 나눌 때 항상 background-color로 범위 확인하기
- height,width 높이 너비 조절
- margin 위 오른쪽 아래 왼쪽 auto는 최대값
- 박스 내부 문자열 정렬
display: flex;
flex-direction: column; (or row)
align-items: center;
justify-content: center; - border : 외곽선
- pading : 안쪽 여백
구글폰트
https://fonts.google.com/?subset=korean
부트스트랩
https://getbootstrap.com/docs/5.3/components/buttons/
2주차
Javascript는 head의 script태그 안에 함수를 정의하고, 이를 이벤트로 호출하여 작동한다.
<head>
<script>
function hey(){
let a = 'hello';
console.log(a);
}
</script>
</head>
<body>
<button onclick="hey()">버튼 이름</button>
</body>Javascript 기초 문법
- let : 변수
- const : 상수
- [value,] : list 자료형
- {key:value,} : dictionary 자료형
- if(true){ } : 조건문
- arrayName.foreach(elementName=>{ }); : 반복문
- function name(){ } : 함수
- < button > 버튼 이름 < /button > : html 버튼에 Javascript적용
jQuery CDN
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > < /script >
jQuery
$('#test').함수(); <id="test">: 태그에 함수를 적용해 변경 시킬 수 있다.- `let temp = < p>${변수명}< /p> : (`` 양변에 꺽쇠 사용) 변수에 태그를 넣어 사용 할 수 있다.
- `$('#test').append(temp); : html 코드에 요소 추가
백엔드 개발자