Written by django-style
on 2021-10-20

HTML CSS Javascript 프로그래밍

728x90

모든 웹페이지 작성에 기본이 되는 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개 생성할 수 있습니다.

: 줄 바꿈 태그입니다.

: 수평선 태그입니다.

728x90

Doit 장고 부트스트랩 파이썬 웹 개발의 정석

이미지는 이미지 폴더 안에서 관리해야 합니다.

< img src = "./image/img.jpg" width = "500"px >

현재 자신의 위치에 image 폴더 아래 img.jpg 파일을 불러오는 것입니다.

가로길이를 지정하면 새로 길이가 자동 설정됩니다.

./index.html = index.html 같은 뜻입니다.

728x90

CSS

여러 스타일을 적용할 때는 ;로 구분합니다. CSS를 적용하는 방법은 3가지가 있습니다.

1. style 속성을 태그 안에 넣는다.

원하는 태그의 속성으로 style을 넣어주시면 간단하게 css가 적용됩니다.

nav {background-color: darkgreen; font-size:150%;} nav a {color:yellow} // 부모가 nav인 a에 대해서 적용함

3. 별도로 css 파일을 생성해 link 한다.

728x90

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()); } }

2. 부분에 구현되는 html 코드를 삽입한다

현재 시간 a b 1+2 = 3 //innerHTML의 값이 변경된다.

3. Javascript를 별도의 (. js) 파일에 저장해 사용한다

728x90

from http://psy-er.tistory.com/49 by ccl(A) rewrite - 2021-10-20 15:27:03

Top