HTML CSS Javascript 프로그래밍
모든 웹페이지 작성에 기본이 되는 HTML CSS Javascript를 이용해 장고 프로젝트의 틀을 만들 것입니다. html 소스코드를 보는 방법은 ctrl + u를 누르시거나 마우스 오른쪽을 클릭한 뒤 페이지 소스를 클릭하면 됩니다. html은 태그로 이루어져 있는 마크업 언어로 작성한 웹페이지를 확인하기 위해서는 보기 > 명령 팔레트 > Live Server : Open with Live Server을 클릭해 웹페이지 상에 나타나는 결과물을 볼 수 있습니다. 이를 더 쉽게 하기 위한 단축키는 ctrl + shift + p입니다.
HTML
emmet을 이용해 html 기본 구성을 빠르게 작성할 수 있습니다.
! + tab 키를 누르고 불필요한 meta 태그들은 삭제합니다.
div > ul > li + tab키를 누르면 div 자식 아래 ul 자식 아래 li를 생성할 수 있습니다.
div > ul + ol + div + tab키를 누르면 div 자식 ul 형제 ol 형제 div를 생성할 수 있습니다.
div > ul > li*3 +tab키를 누르면 div 자식 ul 자식 li를 3개 생성할 수 있습니다.
<br> : 줄 바꿈 태그입니다.
<hr> : 수평선 태그입니다.
Doit 장고 부트스트랩 파이썬 웹 개발의 정석
이미지는 이미지 폴더 안에서 관리해야 합니다.
< img src = "./image/img.jpg" width = "500"px >
현재 자신의 위치에 image 폴더 아래 img.jpg 파일을 불러오는 것입니다.
가로길이를 지정하면 새로 길이가 자동 설정됩니다.
./index.html = index.html 같은 뜻입니다.
CSS
여러 스타일을 적용할 때는 ;로 구분합니다. CSS를 적용하는 방법은 3가지가 있습니다.
1. style 속성을 태그 안에 넣는다.
원하는 태그의 속성으로 style을 넣어주시면 간단하게 css가 적용됩니다.
2. <style> 태그를 <head> 사이에 넣는다.
<style>
nav {background-color: darkgreen; font-size:150%;}
nav a {color:yellow} // 부모가 nav인 a에 대해서 적용함
</style>
3. 별도로 css 파일을 생성해 link 한다.
<link href=“practice.css” rel=“stylesheet” type=“text/css”>
Javascript
브라우저 상에서 동적인 부분을 만들 때 주로 활용된다.
1. <script> 태그는 <head> 사이에 넣는다.
<script type=“text/javascript”>
function doAdd(){
let a = document.getElementById(‘inputA’).value;
let b = document.getElementById(‘inputB’).value;
document.getElementById(“valueA”).innerHTML = a;
document.getElementById(“valueB”).innerHTML = b;
document.getElementById(“valueC”).innerHTML =
Number(a)+Number();
}
function currTime(){
alert(new Date());
}
}
</script>
2. <body> 부분에 구현되는 html 코드를 삽입한다
<button onclick=“currTime()”>현재 시간</button><br>
<label for = “inputA” value=“1” onkeyup=“doAdd()”>a</label>
<input id=“inputA”>
<label for = “inputB” value=“2” onkeyup=“doAdd()”>b</label>
<input id=“inputB”>
<p>
<span id=“valueA”>1</span>+<span id=“valueB”>2</span> =
<span id = “valueC”>3</span>
//innerHTML의 값이 변경된다.
</p>
3. Javascript를 별도의 (. js) 파일에 저장해 사용한다
<script type=“text/javascript” src = “what_time_is_it.js”> </script>
<script type=“text/javascript” src = “doAdd.js”> </script>'Back-End > Django' 카테고리의 다른 글
| [ Django ] 장고 프로젝트의 기본 (4) | 2021.10.25 |
|---|---|
| [ Bootstrap ] 다양한 기능 부트스트랩 위치와 Font Awesome (0) | 2021.10.24 |
| [ Bootstrap ] 부트스트랩 Navbar 나브 바 Container 컨테이너 Grid 그리드 활용 (0) | 2021.10.23 |
| [ Bootstrap ] 부트스트랩 Spacing Row Margin 마진 Padding 패딩 Card Modal 활용 (3) | 2021.10.22 |
| CSS Javascript Bootstrap 부트스트랩 웹사이트 접속 활용 방법 (2) | 2021.10.21 |