⚠️ 해당 게시글은 모던애자일 팀원이 준비한 테크톡 내용을 스크랩했습니다.
출처 : 모던애자일 3기 이하람 블로그
2022.01.06 - HTML, CSS, JavaScript
lami.tistory.com
HTML, CSS, JS
HTML, CSS, JS를 웹에서만 사용하는 것은 아니다.
React Native ⇒ 모바일
Electron ⇒ 데스크톱 애플리케이션
HTML, CSS, JS를 비유해보자.
- HTML: 뼈
- CSS: 옷과 피부
- JS: 움직일 수 있게 해주는 뇌와 근육
HTML
- Hypertext Markup Language
- 웹페이지가 어떻게 구조화되어 있는지 브라우저에게 알려주는 마크업 언어
- HTML은 여러 개의 element로 구성되어 있음
- 태그를 많이 사용하면 각각 무슨 역할인지 알기 어려움 ⇒ 시맨틱 태그를 이용하자.
element란
시맨틱 구조
HTML 구조
<!DOCTYPE html>: 최신버전의 html을 사용한다는 선언<html lang=”ko”>: html의 시작을 알리는 태그,lang=”ko”를 명시해서 한국어로 보여진다는 것을 알려줌<head>: 사용자에게 보이지 않는 웹의 정보를 적는 곳<body>: 사용자에게 보여지는 곳
CSS
- Cascading Style Sheets
- Cascading : ‘폭포처럼 떨어져 내리는’
HTML과 CSS 연결하기
)
결과
위 기본 코드에서 style을 연결해보자.
1. 인라인 스타일
)
2. 내부 스타일
)
3. 외부 스타일
)
만약 앞에서 했던 효과들을 동시에 적용한다면?
- 정답CSS는 Cascading 방식이기 때문에 위에서부터 적용되고 최종적으로 제일 아래에 있는 인라인 스타일이 적용된다.
JS
- JavaScript
- 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
HTML과 JS 연결하기
1. 인라인
2. 내부
3. 외부
body태그의 끝 부분에 js 파일 연결하기- 실행 순서 : html 파일 → js 파일 다운/실행
head태그에 js 파일 연결하기- 실행 순서: html 파일 → js 파일 다운/실행 → 남은 html 파일
script태그에async속성 사용하기- 실행 순서: js 파일의 크기나 다운로드 속도에 따라 다름
script태그에defer속성 사용하기 ⇒ 제일 많이 쓰이는 방법- 실행 순서: html 파일 → js 파일 선언한 순서대로
코드 보기
// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script defer src="index.js"></script>
</head>
<body>
<div>
<input type="text" />
<button>버튼</button>
</div>
</body>
</html>// style.css
body {
width: 100%;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
width: 400px;
height: 200px;
background-color: rgb(103, 195, 231);
}
input {
border: none;
background-color: antiquewhite;
width: 200px;
height: 40px;
margin-bottom: 20px;
font-size: 15px;
}
button {
border: none;
border-radius: 10px;
width: 200px;
height: 40px;
cursor: pointer;
font-size: 20px;
}// index.js
const btn = document.querySelector('button');
const input = document.querySelector('input');
btn.addEventListener('click', () => {
alert(input.value);
});
최근댓글