티스토리 뷰
[예제로 배우는] CSS의 이해
- CSS란 : HTML울 꾸며주는 언어, 문서를 통째로 한번에 꾸며주는 것이 아니라, HTML태그를 하나하나 꾸며줍니다.
- HTML에 CSS를 적용하는 방법 3가지
1) 인라인 : HTML태그 안에 같이 작성 , 사용자와의 상호작용이 있을 때만 가능. 예를 들어, 버튼을 클릭 했을때, 키보드를 눌렀을때.
2) 내부 스타일 시트 : HTML 문서 안에 같이 작성
3) 외부 스타일 시트: HTML 문서 밖에 작성 후 연결
HTML태그 한쌍(<태그>텍스트</태그>또는 하나(<태그/>)을 우리는 element라고 부르기도 합니다.
1) 인라인 방법
- style = " 원하는 디자인 내용;"
2) 내부 스타일 시트
: css끼리 html끼리 모여있음
-장점 : 수정이 쉽다.
3) 외부 스타일 시트
: html을 문서 밖으로 빼냄
- html파일에 <link rel="stylesheet" href="login.css"> 작성 후 연결
* 주석
- html =
- css = </*주석 내용*/>
[예제로 배우는] javascript의 이해
- jacascript란 : 특정 html요소를 선택하여 제어할 수 있는 스크립트 언어.최근에는 백엔드 언어로도 각광받음.
ex) 글자를 바꿀 수 있음.버튼을 비활성화 할 수 있음. 버튼의 색깔을 바꿀 수 있음.
스크립트 언어란 : 독립적인 프로그램을 개발 할 수 있는 프로그래밍 언어가 아닌 (프로그램 내부의 구성 요소 중 하나로)프로그램을 제어하는 스크립트 역할을 하는 언어이다. 최근 빠르게 발전하는 런타임 환경 덕분에 스크립트 언어 만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있음.
- < 넣을함수 onclick="alert('팝업에 띄울 내용')">
- ==> 버튼이 클릭이 되면 alert 안에 있는 함수가 나옴
함수
함수란, 특정 기능을 수행하는 코드 덩어리
funtion 함수 이름(){
/*이 공간에 함수가 할 일을 코드로 작성*/
}
myfunction 함수 사용
특정 태그(element)를 찾는 방법
javascript에서는 특정 태그를 찾을 때 다음과 같은 기능을 이용합니다.
- id로 찾기 : document.getElementByld('아이디')
- class 이름으로 찾기 : document.getElementByClassName('클래스이름')
- tag 이름으로 찾기 : document.getElementByTagName('태그 이름')
- 마지막에 .value
조건문
- 만약 아이디 칸이 비어 있다면?
만약 아이디 칸이 비어있다면, 아이디를 입력해달라고 팝업창에 띄운다. 아니라면, 입력된 아이디를 팝업창에 띄운다.
= if(아이디 칸이 비어있다면){
아이디를 입력해달라고 팝업창에 띄운다.
}
else{
입력된 아이디를 팝업창에 띄운다.
}
- if문 : 조선에 따라 다른 결과를 선택할 수 있게 해줌.
**class = 중복을 없애줌
변수
변수 : 데이터(값)을 담아두는 상자, 담아두고 이름을 붙여줌
let 상자 이름 = 상자에 담을 데이터(숫자, 문자, element,...);
변수2 & 외부 스크립트
var vs let vs const --차이
var은 요즘 안씀
let은 상자 안에 값이 들어가면 상자 안의 값을 계속 바꿀 수 있음(쓸수록 갱신)
const는 상자 안에 값이 들어가면 그대로, 값을 바꿀 수 없음