CSS
CSS는 HTML을 꾸며주는 언어이며 HTML 태그를 하나씩 하나씩 꾸며준다.
HTML에 CSS를 적용하는 방법 3가지
인라인(inline): HTML 태그 안에 작성
ex)<h1 style="color: red;">contents</h1>내부 스타일 시트: HTML 문서 안에 같이 작성(Head 부분)외부 스타일 시트: HTML 문서 밖에 작성(다른 파일)
*HTML 태그 하나 or 한쌍을 element라고 부른다.
인라인으로 작성하기
태그 내부에 style 속성을 지정하여 사용한다.
<h1 style="color: rgb(255, 0, 0);
text-align: center;">Login</h1>하나의 속성에서 여러 요소를 지정할 때는 세미콜론(;)으로 구분하고,
크기를 지정할 때의 단위는 px을 사용한다.
저번 포스트의 코드를 수정해서, 인라인 형식으로 ID 칸, PW칸, 버튼칸의 글자크기와 칸의 크기를 조절해보았다.
인라인으로 작성하면, 태그 하나마다 일일이 모든 속성을 작업해야 하므로 잘 사용되지 않는 방식이다.
내부 스타일 방식으로 작성하기
작성방법은 코드의 위치만 바뀔 뿐 인라인과 비슷하다.
HEAD 부분에서 작성을 할건데 style 태그를 작성하고,
어떤 element들을 꾸며줄건지 지정을 해야한다.
예를 들어, 내가 모든 h1 태그를 꾸미고 싶을 때 다음과 같이 작성한다.
<head>
<style>
h1 {
color: rgb(255, 0, 0);
text-align: center;
}
</style>
</head>내부 스타일을 작성하다보면 여러개의 태그에 각각 다른 속성을 부여하거나, 같은 속성을 부여하고자 할 때 의문점이 생긴다. 예를 들어 h1태그를 2개 사용하는데, 두 h1이 각각 다른 속성을 가지고 싶게 만들고 싶다.
이때는 태그에 class="이름" 또는 id = "이름" 속성을 작성한다.
class는 같은 클래스에 똑같은 CSS 효과를 주고 싶을 때 사용한다.
class를 내부 스타일 시트에 작성할땐,. 을이용한다.
id는 태그마다 따로따로 효과를 주고 싶을 때 사용한다.
id를 내부 스타일 시트에 작성할땐, # 을 이용한다.
인라인으로 작성했던 문장을 class와 id를 이용한 내부 스타일로 바꾸어서 작성해보겠다.
ID input과 PW input의 font-size가 25px로 동일하기 때문에, ID input과 PW input을 동일한 class로 묶어서 작성하고, 버튼 input에는 id를 지정해서 따로 속성을 설정해보겠다.
-
내부 스타일 영역 (HEAD)
-
태그 영역 (BODY)
-
결과
인라인 방식으로 작성한 결과와 내부 스타일로 작성한 결과가 완전히 같음을 알 수 있다.
하지만, 내부 스타일 방식으로 작성하는 편이 한눈에 보기에도 더 깔끔하고 유지ㆍ보수가 쉽다.
외부 스타일 방식으로 작성하기
외부스타일은 현재 HTML파일이 아닌, 아예 새로운 파일에서 작성한다.
이 파일의 확장자는 .css 이며, CSS 작성방법은 내부스타일과 완전히 동일하다.
따라서 작성한 내부스타일을 복사해서 외부스타일 방식으로 작성해보겠다.
1. 내부스타일에서 작성한 내용을 그대로 복사해서 .css 파일에 작성한다.
2. HTML의 Head 영역에 <link>태그를 이용하여 파일간 연결을 한다.
link 태그에는 rel과 href 옵션이 들어간다.
<link rel="stylesheet" href="파일.css">rel은 relation을 의미하며, 다양한 속성이 있다.
rel에 지정할 수 있는 속성
우리는 스타일 시트로 사용할 외부 파일을 불러올 것이므로 stylesheet로 지정했다.
 link |  css 파일 |
|---|
Javascript
CSS의 3가지 작성방식에 대해 알아보았으므로, Javascript(JS)에 대해 알아본다.
자바스크립트는 특정 HTML 요소를 선택하여 동작을 지정해 줄 수 있다.
ex) 글자 변경 , 버튼을 비활성화, 버튼의 색깔
HTML에 JS를 적용하는 방법도 마찬가지로 3가지가 존재한다.
- 인라인
- 내부스크립트
- 외부스크립트
CSS와 같은 방식이지만, JS에서는 몇몇 차이점이 존재한다.
인라인 방식으로 작성하기
JS 인라인 방식은 사용자와 상호작용이 있을 때의 동작만 지정할 수 있다는 제약이 있다.
ex) 버튼을 클릭, 키보드를 입력
JS를 인라인 방식으로 작성하려면, on~~~ 의 속성을 사용한다.
ex)
<input type="button" value="login" onclick="alert('내용')">alert가 아닌 사용자 지정 함수를 쓰고 싶다면, Body의 최하단에 script 태그를 작성하여 JS 스크립트를 작성할 수 있다.
<script>
function myFunction(){
alert("clicked 1")
alert("clicked 2")
alert("clicked 3")
}
</script>
그러고 난 뒤, onclick 에 해당 함수를 입력해주면 된다.
<input id="btn_login" type="button" value="Login" onclick="myFunction()">내부 스크립트 방식으로 작성하기
CSS 의 내부스타일에서 tag / .class / #id 로 지정해서 사용했던 것처럼,
JS에서도 특정 항목을 지정해서 값을 받아올 수 있다.
id : document.getElementById('아이디')
class : document.getElementByClassName('클래스이름')
tag : document.getElementByTagName('태그이름')
먼저 ID input의 값을 불러와보겠다.
-
먼저, ID input에 id를 부여한다. ( 'txt_id' )
-
script에서 document.getElementById('아이디')를 이용해서 값을 불러온다.
이때, 우리는 해당 input의 value를 가져올 것이므로, .value를 작성해주는 것을 잊지 않도록 한다.
이제 이 함수를 onclick 속성에 지정해주면, ID에 입력한 value가 alert로 출력되는것을 확인할 수 있다.
하지만, ID칸에 아무것도 입력하지 않으면 빈 팝업창이 출력되기 때문에, 조건문을 사용하여 메시지를 출력하도록 하겠다.
ID란이 빈 칸일때, 지정한 글자가 출력되는 것을 볼 수 있다.
외부 스크립트 방식으로 작성하기
CSS에서 외부 스타일 방식으로 했던 이유와 똑같이, script가 너무 길어지면 보기가 불편하므로 외부 스크립트를 생성하여 작성한다.
방식도 똑같다.
1. .js 확장자 파일 생성
2. js파일에 script 내용 옮기기
3. 연결 - HTML파일의 HEAD 부분에 <script></script> 태그 사용
ex)
<script type="text/javascript" src="login.js"></script>src는 소스코드를 의미하며, js파일의 이름을 넣으면 되고,
type에는 javascript를 사용기 때문에, text/javascript를 입력한다.
JS 추가 내용
JS에서 변수는 var, let, const로 선언이 가능하다.
var 의 특징으로는 변수의 재선언이 가능하고, 값의 재할당이 가능하다.
let 의 특징으로는 변수의 재선언이 불가능하고, 값의 재할당이 가능하다.
const 의 특징으로는 변수의 재선언이 불가능하고, 값의 재할당도 불가능하다.
또한, 스코프라는 개념도 존재하는데
var은 function scope라고 해서, 함수내부 이외에 var을 통해 변수를 선언할 경우 전역 변수가 된다. 예시는 다음과 같다.
for (var i = 0 ; i < 10 ; i++){
}
console.log(i) // 10 출력이렇게 var을 이용할 경우 전역변수가 너무 많이 생겨서 이름이 겹칠 수 있고
var의 특징인 변수의 재선언을 해도 오류가 아니기 때문에
원하는 결과가 나오지 않는 경우가 발생할 수 있으므로 사용을 하지 않는 편이 좋다.
