ddodoi 님의 블로그
2주차-파트03: 웹 서비스의 이해2 본문
Chapter1. CSS란?
CSS란?
Cascasding Style Sheets의 약자로, HTML을 꾸며주는 언어이다. 문서를 통째로 한번에 꾸며주는 것이 아니라, HTML태그를 하나하나 꾸며준다.
HTML에 CSS를 적용하는방법은 다음과 같이 3가지가 있다.
-인라인(inline):HTML태그 안에 같이 작성한다.
-내부 스타일 시트(internal style sheet): HTML문서 안에 같이 작성한다.
-외부 스타일 시트(external style sheet): HTML문서 밖에 작성하고 연결한다.
1) 인라인
우리는 먼저 인라인 방법에 대해 알아볼것이다. 어제 만든 로그인 화면에 css를 추가하여 스타일에 변화를 줘보자.
2) 내부 스타일 시트
스타일 태그를 head태그 안에 모아두자.
내부스타일 시트에서는 특정 태그를 찾을 때 다음과 같은 기능을 이용한다.
- style시트로 빼서 태그 이름 불러주기
- class 이름으로 찾기
- id이름으로 찾기
먼저 h1태그에 있던 스타일 속성을 다음과 같이
①style시트로 빼서 태그 이름을 불러주는 방법이 있다.
②만약 다른태그에서 동일 속성의 스타일을 쓴다면 class를 사용하여 묶어준다.
여기서는 아이디와 비번을 받는 태그들이 같은 스타일을 사용하므로 둘의 클래스 이름을 login_inputs으로 두겠다.
그 다음 스타일 태그안에 class를 불러와야한다. 불러오는 형식은 .클래스이름{}로 대괄호 안에 스타일 속성을 적으면 된다. 원래의 body태그안에 있던 스타일 속성은 지워준다.
③id값을 준다.
버튼 태그에 id값을 주자. id이름은 btn_login이다.
그 다음 head태그안에 #아이디이름{}으로 태그를 주고 안에 스타일 속성을 적어준다. 원래 body의 버튼태그에 있는 스타일 속성은 지워준다.
모두 잘 적용되는 것을 확인할 수 있다.
3) 외부 스타일 시트
HTML문서와 CSS를 분리하는 방법이다. 가장 깔끔하기 때문에 현업에서 가장 많이 쓰인다. 실습으로 해보자.
먼저 login.css파일을 만들어준다.
그다음 내부 스타일 시트때 <style>태크 안에 있던 것들을 그대로 복붙하여 login.css에 넣어준다. 원래 style태그 사이에 있던 것들은 삭제한다.
그러나 이상태로는 스타일 속성이 적용되지 않는다. html파일과 css파일을 연결 시켜주는 작업이 필요하다.
잘 적용된것을 볼 수 있다.
-HTML파일에서 주석 작성-
<!--주석작성-->
-CSS파일에서 주석 쓰기-
/*주석작성*/
Chapter2. Javascript의 이해
Javascript는 특정 HTML요소를 선택하여 제어할 수 있는 *스크립트 언어이다. 최근에는 백엔드 언어로도 각광받고 있다.
HTML에 Javascript를 적용하는 방법은 다음과 같이 3가지가 있다. 이는 css적용하는 방법과 같다.
-인라인(inline): 사용자와의 상호작용이 있을 때만 가능하다. 예를 들어, 버튼클릭 or 키보드를 눌렀을 때
-내부 스타일 시트(internal style sheet): HTML문서 안에 같이 작성한다.
-외부 스타일 시트(external style sheet): HTML문서 밖에 작성하고 연결한다.
※스크립트 언어란?
독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 "(프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하는 스크립트 역할을 하는 언어". 최근 빠르게 발전하는 런타임 환경 덕분에 스크립트 언어 만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있다.
1) 인라인
사용자와의 상호작용이 있을 때만 적용가능하므로 버튼 클릭 기능을 추가해보자.
버튼 태그에 onclick="alert('출력하고싶은 내용')" 을 추가해줬다. onclick는 버튼 클릭 이벤트가 일어났을때의 상황을 말한다. alert는 팝업창을 띄우는 함수이다. 즉, 버튼 클릭이 일어나면 팝업창을 띄우겠단 뜻이다.
login버튼을 누르니 알림과 함께 clicked! 가 출력된다.
2) 내부 스크립트
내부스크립트를 들어가기 전에 먼저 함수라는 개념을 익혀야 한다.
-함수-
함수란, 특정 기능을 수행하는 코드 덩어리이다. 우리는 함수를 다음과 같이 정의한다.
내부스크립트를 이용하여 함수를 작성하려면 <body>태그 안에 <script>함수작성</script>을 해야한다. 자바 스크립트 안에서는 다음과 같은 주석만 이용할수 있다.
/*주석내용*/
//주석내용
이제 자바스크립트로 함수를 작성하는 실습을 해보자. 버튼을 클릭하면 팝업창에 1,2,3(팝업창이 3번 뜨도록)이 뜨도록 하는 함수를 만들어 주었다.
버튼을 클릭하면 1~3까지 팝업창이 뜬다.
3) 외부 스크립트
자바스크립트에서 외부 스크립트를 만들려면 css때와 같이 자바스크립트 파일을 따로 만들어주면 된다. 자바스크립트 파일 login.js를 만들어보자.
이제 script안의 내용을 그대로 복사하여 login.js파일에 복붙하고 원래 html파일에 있는 script태그와 그 안의 내용들은 모두 지워주자.
이제 html파일과 js파일을 서로 연결시켜주는 작업이 필요하다. html파일의 head부분에
추가해준다.
실행시키면 작동이 잘 되는 것을 확인할 수 있다.
Javascript에서는 특정 태그를 찾을 때 다음과 같은 기능을 이용한다.
- id로 찾기: document.getElementById('아이디')
- class 이름으로 찾기: document.getElementsByClassName('클래스 이름')
- tag이름을 찾기: document.getElementsByTagName('태그이름')
여기서 .은 "~중에서"또는 "~의(of)"를 의미한다.
여기서 document는 해당 문서(html문서)를 말하는 것이다.
①id로 찾기
로그인창에서 id값을 입력하면 입력한 id값이 팝업창으로 뜨게 하는 함수를 만드는 실습을 해보자.
먼저 버튼태그의 onclick이벤트가 일어나면 popId란 함수가 불려오도록 하고 이 함수를 만들러 가보자.
Id칸에서 입력 받아온 문자를 팝업창에 그대로 띄워야 하기 때문에 일단 해당 Id입력창이 어떤 태그인지 알아야한다. 따라서 id입력태그에 고유의 id인 "txt_id" 를 줬다.
그다음 popId함수에서 document.getElementById('txt_id')에 .value를 붙여 id창에서 입력받은 값을 불러와준다.
잘 작동한다.
이번에는 popID함수에 조건문을 사용하여
ID칸이 빈 상태에서 로그인 버튼을 누르면 -> 팝업창에 '아이디를 입력해주세요.'문구가 뜨도록
ID칸이 비지 않은 상태에서 로그인 버튼을 누르면 -> 팝업창에 ID칸에 입력한 문자가 뜨도록
기능을 바꿔보자.
-조건문(if문)-
조건에 따라 다른 결과를 선택할 수 있게 해준다.
함수부분을 자세히 보자.
document.getElementById('txt_id').value==""는 id입력칸이 비어있을 때를 의미한다. 이 조건은 다음과 같이 바꿔 쓸 수도 있다.!document.getElementById('txt_id').value
실행시켜보면 잘 작동한다.
Chapter3. 변수
위에서는 id값과 함수를 이용하여 지정을 해줬었다. 그러나 필요할 때마다 매번 document.getElementById('txt_id').value를 치는 것은 상당히 번거로운 일이다. 이때 우리는 변수를 이용하여 코드를 단순화 시킬 수 있다.
변수는 데이터를 담는 상자로 생각해도 된다.
자바스크립트에서는 다음과 같이 변수를 정의하고 사용한다.
let 상자이름= 상자에 담을 데이터;(숫자, 문자, element,...)
이제 변수를 이용하여 아까의 코드를 단순화 시켜보자.
let userId= document.getElementById('txt_id').value 로 변수를 선언 후, document.getElementById('txt_id').value를 userId로 바꾸어 주면 아까와 똑같이 실행이 된다.
Chapter4. 변수2
자바스크립트에서 변수를 선언할 때는 사실 let뿐만 아니라 var, const도 이용할 수 있다. 이 세개의 차이를 알아보자.
1. var 변수명
var은 최근에 들어서는 안 쓰이는 변수 선언 방법이다. 초기에는 var만 존재하고 let과 const가 없었으며 var이 let과 const의 역할 모두를 하고 있었다.
2. let 변수명
let과 const의 비교를 위해 compareVariable()함수를 만들어준다. 이 함수는 로그인 버튼을 누르면 작동할 함수이다.
let으로 선언된 변수는 블록 스코프로 { }안을 벗어날 수 없다. 따라서 compareVariable함수 밖에서 num1이 쓰일 경우 오류가 발생한다.
이제 let으로 num1을 선언하고 그 값을 10으로 준다. 이후 num1을 20으로 바꿔주고 팝업창이 num1의 값을 출력하도록 한다.
num1값이 잘 출력되는 모습을 확인할 수 있다.
3. const 변수명
이제 const에 대해 알아보자. const는 let과 다르게 한번 변수를 선언하면 그 후에 값을 바꿀 수가 없다. 함수 compareVariable에 새로운 변수 const num2 = 30을 추가하고 그 값을 출력하도록 해보자. const는 블록 스코프로 { }안을 벗어날 수 없다. 따라서 함수 compareVariable밖에서 num2가 선언되면 오류가 발생한다.
num2의 값이 30으로 잘 출력된다.
그러나 이번에는 num2의 값을 20으로 바꾸는 과정을 추가해보자.
다시 로그인 버튼을 아무리 눌러봐도 팝업창이 뜨지 않는다. 컴퓨터에서 num2값을 20으로 새로 바꾸라는 과정에서 오류가 나서 팝업창을 띄우지 못하는 것이다.
'웹풀스택 일일정리' 카테고리의 다른 글
| 2주차-파트06: 데이터 베이스 (1) | 2024.08.27 |
|---|---|
| 2주차-파트04: 쇼핑몰 프로젝트 (0) | 2024.08.27 |
| 2주차-파트02: 웹 서비스의 이해1 (0) | 2024.08.22 |
| 2주차 파트-01: 협업 TOOL (0) | 2024.08.22 |
| 1주차-파트06: 브랜치 (0) | 2024.08.20 |
