728x90
300x250
SMALL
오늘은 Front-end의 영역에 대해 공부하는 시간입니다.
html과 css는 간단하면서도 실습 과정 중 결과가 바로 눈에 보이기 때문에 즐겁게 공부하였던 적이 있습니다.
java script 역시 마찬가진데, 그 기억을 되살려 이번 강의도 복습차원에서 열심히 듣겠습니다 :)
7강. HTML+CSS+JS 찍어 먹어보기
'웹프론트의 근간 HTML+CSS+JS의 기초지식을 배운다.'
HTML
<!--
<태그 속성 = 값 속성 값>
태그가 동작되는 영역
</태그>
HTML : 웹 사이트의 뼈대
CSS : 웹 사이트의 모양
JS : 웹 사이트의 동적 처리 (클릭, 스크롤, 키보드...)
-->
<html>
<!-- 문서의 정보를 담는 영역 -->
<head>
<title>안녕 실습!</title>
<head>
<!-- 문서의 본문을 담는 영역 -->
<body>
<p>여기는 본문!</p>
</body>
</html><head>
<title>제목</title>
<style>
<link rel="stylesheet" type="text/css" href=".css파일 명"/>
</style>
</head>
html파일에 style 코드들이 많아져 관리 수정에 어려움을 겪지 않도록,
따로 .css 파일을 생성하여 관리한다.
그리고 html 파일에서 link를 이용하여 .css 파일과 연결시켜주어 작동할 수 있도록 한다.
CSS
.content{
white-space: pre-wrap;
background-color: brown;
}
JS
<script>
let a = "안녕"
const b = "반가워"
alret(a)
</script>
a의 경우 변수이기 때문에 새로운 값이 재할당이 가능하다.
하지만 b의 경우 상수이기 때문에 새로운 값을 할당 시 에러 발생
// 방법 1
function func_name() {
}
// 방법 2 (화살표 함수)
const func_const_name = ()=>{
}
JS를 활용하여 동적 처리 진행할 버튼 생성
<button id="btn">버튼</button>
let btn = document.getElementById("btn")
btn.addEventListener("click", ()=>{
alert("알람창 생성");
})alert 대신 content.style.backgroundColor="red";
작성하게 되면 배경 색이 적용되며 작동 됨
728x90
300x250
LIST
'BootCamp > 베어유:Django' 카테고리의 다른 글
| BEAR-U : Django (9) (0) | 2023.12.11 |
|---|---|
| BEAR-U : Django (8) (0) | 2023.12.11 |
| BEAR-U : Django (6) (0) | 2023.12.10 |
| BEAR-U : Django (5) (2) | 2023.12.09 |
| BEAR-U : Django (4) (0) | 2023.12.09 |