if문의 기본구조는 if(조건문) 이다. 위 코드에서는 논리연산자인 &&(AND) 연산자를 사용했다. 조건문안의 코드를 풀어보자면 score 의 값이 100과 같거나 이하이고 90과 같거나 클때 true를 반환한다. 위 코드에서는 이러한 코딩을 통해 A~D 까지의 점수등급을 나누었고 마지막으로 0 이하인 점수는 없으므로 else로 예외처리를 해주었다. 하지만 위 코드를 더 간결하게 최적화를 할 수 있다. 최적화를 한 결과는 아래 코드와 같다.
let score = 90;
if(score <=100 && score >= 90){
console.log("A 입니다");
}
else if(score >=70){
console.log("B 입니다");
}
else if(score >= 40){
console.log("C 입니다");
}
else if(score >= 0){
console.log("D 입니다");
}
else{
console.log("잘못된 점수입니다");
}
//위 코드의 결과로 "A 입니다" 가 출력
위 코드에서 달라진 점은 조건문이 짧아졌다는 점이다. 이러한 코딩이 가능한 경우는 아래의 조건문들을 else if로 연결했기 때문이다. else if문은 if 뒤에 올 수 있으며 if 문이 false 값으로 처리되어 실행되지 못했을경우 else if문의 조건문을 살펴보기 때문이다.
즉, 초기 if문에서 100 ~ 90의 점수대를 조건문으로 세웠기 때문에 다음 else if 문으로 내려오는 값은 무조건 90 이하의 값이 오기 때문이다. 이를 이용하여 조건문을 보다 간결히 세울 수 있다.
그리고 if 문과 else if문에 조건식에 만족하지 않을경우 else 문의 실행코드가 실행되기 때문에 else 문은 주로 오류가 나는 것을 방지하는 예외처리로 사용기도 한다.
연산자는 컴퓨터한테 여러가지 계산을 하기 위해 사용된다. Js에는 여러가지의 연산자들이 많지만 이번엔 그중에서 많이 사용되고 꼭 알아야할 연산자 3부류에대해 알아보도록 하겠다.
산술연산자
산술연산자는 우리가 흔히 쓰는 계산기의 역활을 하는 연산자이다. 산술연사자의 종류는 아래와 같다.
+
더하기
-
빼기
*
곱하기
/
나누기
%
나머지
살면서 산술기호는 많이 봤을테지만 % 기호는 처음 볼것이다. % 연산은 나눗셈을 한 결과의 몫이 아닌 나머지값이 결과로 출력되는 연산자이다.
let plus = 6 + 2; //덧셈
let minus = 6 - 2; //뺄셈
let multi = 6 * 2; //곱셈
let divide = 6 / 2; //나눗셈
let remain = 6 % 2; //나머지 연산
console.log(plus, minus,multi, divide, remain);
// "8 4 12 3 0" 출력
산술연산자를 사용할때 매우 주의해야할 점이 있다. 산술연산자는 string 타입의 데이터를 number 타입 데이터와 같이 사용할때 데이터타입의 변환이 일어난다는것이다. 아래의 예제를 통해 알아보자.
let a = 1 + "1"; // "11" 출력
let b = 1 + "만원"; // "1만원" 출력
let c = 1 - "1"; // 0 출력
let d = 10 + "10"; //"1010" 출력
let e = a + 1; //"111" 출력
console.log(a,b,c,d,e);
변수 a 에서는 number 타입 1과 string 타입 1을 더했다. 그 결과 2라는 값이 아니라 11 이라는 string 값이 출력되었다. e 변수에서는 a값에 number 타입의 1을 더했지만 string 타입으로 변환되어 "111" 이 출력되는것을 볼 수 있다.
하지만 또 반면에 변수 c 를 보면 number 타입 1에서 string 타입의 1을 뺀결과 number 타입의 0 이 출력된것을 볼 수 있다.
필자가 말한 주의해야할 점은 자동 타입변환이다. 이는 사용하는것에따라 편리할 수 있지만 반면에 코드에서 에러를 내는 주요원인이 될 수 있기 때문에 주의해야한다.
비교연산자
비교연산자는 두개의 피연산자를 서로 비교하는 연산자이다. 비교연산자의 종류는 아래와 같다.
>
왼쪽 피연산자 값이 더 크면 true 반환
<
오른쪽 피연산자 값이 더 크면 ture 반환
>=
왼쪽 피연산자 값이 더 크거나 같으면 ture 반환
<=
오쪽 피연산자 값이 더 크거나 같으면 ture 반환
==
양쪽 피연산자가 서로 같으면 ture 반환
===
양쪽 피연산자의 타입과 값이 모두 같으면 true 반환
!=
양쪽 피연산자가 서로 다르면 ture 반환
!==
양쪽 피연산자의 타입 또는 값이 다르면 true 반환
let a = 6 > 2; //true
let b = 6 < 2; //false
let c = 6 >= 6; //true
let d = 6 <= 6; //true
let e = 6 == "6"; //true
let f = 6 === "6"; //false
let g = 6 != "6"; //false
let h = 6 !== "6"; //true
console.log(a,b,c,d,e,f,g,h);
//"true false true true true false true false" 출력
상당히 직관적인 > , < 와 같은 비교연산자와 달리 ==, === 와 같은 비교연산자는 이 둘의 차이가 무엇인지 잘 와닿지 않을 수 있다. 이를 위해 예제를 간단히 풀이하자면 위 예제에선 number 타입의 6 과 string 타입의 6 두가지를 비교한것이다. 하지만 == 연산자에선 true 가 반환되고 === 연산자에선 false 연산자가 반환되었다. 이둘의 차이점은 타입변환의 시행 유무에 있다. == 연산자는 타입변환이 일어나 이 둘의 값이 같기 때문에 true 가 반환되고 === 연산자는 타입변환이 일어나지 않아 이 둘의 데이터 타입이 다르기 때문에 false가 반환된것이다.
논리연산자
논리연산자는 조건에 부합하는지에따라 참과 거짓을 판별하는 연산자이다. 논리연산자의 종류는 아래와 같다.
&&
AND 연산자로 양측 피연산값이 모두 true 여야 true 반환
||
OR 연산자로 양측 피연산값 중 하나라도 true 면 true반환
//AND 연산자
let a = (6 > 2) && (6 > 5); //true
let b = (6 > 2) && (6 > 7); //false
//OR 연산자
let c = (6 > 7) && (6 > 5); //true
let d = (6 > 9) && (6 > 10); //false
console.log(a,b,c,d);
//"true false true false" 출력
위 예제에서 a 변수는 (true && ture) 로 양측 피연산값이 모두 true 이기 때문에 AND 연산에서 true가 반환되지만 b 변수에서는 (true && false) 로 우측 피연산값이 false 이므로 false가 반환된다.
c 변수에서는 (false || ture) 로 우측 피연산값이 true 이므로 true 값을 반환한다. 반면에 d 변수에서는 (false || false)로 양측 피연산값이 모두 false 이므로 false 를 반환한다.
객체란 다양한 데이터를 하나의 변수에 저장할 수 있는 데이터 타입이다. 이는 배열과 비슷한 느낌을 주지만 전혀 다르다. 배열은 책장이라면 객체는 책장에 배열되는 파일이다. 이 말을 이해하기 위해서 먼저 객체의 생김새부터 알아보자. 객체의 선언과 사용방법은 아래와 같다.
데이터타입(let,var,const) 객체이름 = { key: value };
// 아래는 사용 예시이다.
let object1 = {
name = "홍길동",
locate="서울시",
age=22
}
객체의 내부는 키(key) 와 값(value)로 이루어져있다. 이는 사전과 비슷하다고 생각하면 된다. 우리가 사전에 "name" 이라는 영단어를 검색했을때 "이름" 이라는 값을 얻을 수 있듯이, key를 이용하여 value 값에 접근할 수 있다. 다음은 객체안에 있는 데이터에 접근하는 법에대해 알아보자.
닷노테이션
닷노테이션은 .(점)을 활용하여 key 값으로 value 값을 가져오는 방식을 말한다. 사용 방법은 아래와 같다.
닷노테이션 코드 양식
객체이름.key
// 아래는 사용 예시이다.
let client = {
id:"gomboy11",
pw:"password",
phone:"010-1234-5678"
}
console.log(client.id); // gomboy11 출력
console.log(client.pw); // password 출력
console.log(client.phone); // 010-1234-5678 출력
위 코드에선 client 라는 이름의 객체를 생성하고 id,pw,phone 이라는 key(키) 값과 그에 맞게 value 값을 선언했다. 이후 닷노테이션 방식을 통해 console.log 로 client 의 value 값을 출력했다. 객체는 "key: value" 의 형태를 가지고 client 객체는 id:"gomboy11" 가 선언되어있으니 id가 key, gomboy11이 value 기 때문에 client.id 는 id 의 value 값인 gomboy11이 출력된것이다. 이렇듯 .(점)을 활용하여 key값으로 value 값을 가져오는 방식이 닷노테이션이다.
브라켓노테이션
브라켓노테이션은 닷노테이션과 비슷하지만 [](대괄호) 를 사용하여 key값으로 value 값을 가져온다.
브라켓노테이션 코드 양식
객체이름["key"]
// 아래는 사용 예시이다.
let client = {
id:"gomboy11",
pw:"password",
"bank account" : true
}
console.log(client["id"]); // gomboy11 출력
console.log(client["pw"]); // password 출력
console.log(client["bank account"]); // true 출력
console.log(client.bank account); //문법오류
console.log(client."bank account"); //문법오류
브라켓노테이션의 기본적인 개념은 닷노테이션과 흡사하다. 객체 이름과 key 값을 통하여 value 값을 가져온다는 기능은 같지만 그 과정에서 차이가 있다 .브라켓노테이션은 [](대괄호)를 사용한다. 위 예제코드를 보면"gomboy11" 이라는 값을 얻기위해 client 라는 객체의 id 라는 키값을 활용하였다. 코딩을 할때 기본적으로 닷노테이션을 압도적으로 많이 사용된다. 하지만 브라켓노테이션이 사용될때는 위 예제코드의 "bank account" 와 같이 key 값이 복수 단어로 이루어져있을때 이를 닷노테이션으로 접근하고자하면 문법오류가 발생한다. 하지만 브라켓노테이션은 키값의 형식에 제약이 적기 때문에 사용이 가능하다. 이점 유의하자.
객체와 배열의 활용
배열과 객체를 동시에 사용하면 데이터를 추적관리하는데 있어 매우 유용하게 사용할 수 있다. 우리가 전포스팅에서 배열에대해 알아봤을때 우리는 그저 책장에 종이 한장한장씩 넣고 있었다면 객체와 배열을 동시에 활용하면 책장안에 파일을 넣고 종이의 내용별로 각기 다른파일에 담아 추적관리 할 수 있다. 예제를 통해 알아보자.
// 객체만을 사용했을 경우
let client1 = {name:"김씨",age:22};
let client2 = {name:"양씨",age:23};
let client3 = {name:"이씨",age:25};
let client4 = {name:"방씨",age:21};
//객체와 배열을 동시에 사용했을경우
let client = [
{name:"김씨",age:22},
{name:"양씨",age:23},
{name:"이씨",age:25},
{name:"방씨",age:21}
]
------이해를 돕기위한 자료(실제 데이터값(주소값)은 동일하지 않음)--------
client[0] == client1
client[1] == client2
client[2] == client3
client[3] == client4
// 배열을 사용한 만큼 배열의 index에대한 이해가 있어야한다.
배열과 객체를 동시에 사용하는것은 처음엔 이해하기 어려울 수 있다. 하지만 배열은 for문과 밀접한 관계가 있고 반복문을 통해 손쉽게 데이터에 접근할 수 있으니 이는 극복해야할 한가지의 과제라고 생각한다. 위 배열안에 객체가 어떻게 저장되어 있는 이해하기 쉽게 시각적으로 그림을 그려봤다.
배열안에 객체
그저 조금이라도 이해하기 편하도록 시각화하여 그린것이다. 위 사진은 예제코드에 사용한 client 배열의 모습이다. 선언된 client 배열이라는 책장에는 0번째칸, 1번째칸, 2번째 칸, 3번째칸이 있다. 그리고 각 칸에 객체라는 파일을 저장했다. 0번째 index의 객체 즉, 0번째칸에 저장된 파일 안에는 name이라는 key 와 age 라는 key가 있고 각각은 "김씨",22 라는 value 값을 가지고 있는 것이다. 각 데이터에 접근하는 방식은 아래와 같다.
let client = [
{name:"김씨",age:22},
{name:"양씨",age:23},
{name:"이씨",age:25},
{name:"방씨",age:21}
]
console.log(client[0].name); // "김씨" 출력
console.log(client[1].name); // "양씨" 출력
console.log(client[2].name); // "이씨" 출력
console.log(client[3].name); // "방씨" 출력
----반복문을 활용한 예시-----
for(let i = 0; i < client.length; i++){
console.log(client[i].name);
} // 출력 값은 8 ~ 11 줄의 코드의 결과값을 합친것이다.
client[0] 은 client 배열의 0번째 index 를 의미한다. client[0]에는 객체가 저장되어 있으므로 닷노테이션 방식을 활용할 수 있다. 위 예제에서는 닷노테이션을 활용하여 name 의 value 값을 출력했다. 이처럼 배열과 객체를 사용할때 배열의 몇번째 index에 어떤 데이터가 있는지 정확히 알고 또 정확히 접근할 수 있어야 개발자가 원하는 방향대로 데이터를 추적관리 할 수 있다. 그리고 위 예제코드에서는 단 4개의 데이터만 다뤘기때문에 그냥 일일히 코딩하는것이 간편해보일지 몰라도 다뤄야하는 데이터가 100개가 넘어가면 100줄의 코드를 입력해야한다. 하지만 반복문을 사용한다면 단 3줄로도 해당 문제를 해결할 수 있다. 이처럼 배열과 반복문은 자주 같이 사용된다. 다음 시간에는 이러한 반복문에대해 자세히 다뤄보도록 하겠다.
배열이란 여러개의 데이터를 한번에 저장하고 관리하게 편하게 해주는 기능이다. 배열을 왜 쓰는가 의문이 든다면 아래 예시가 있다.
let name1 = "홍길동";
let name2 = "코난";
let name3 = "나루토";
let name4 = "블리츠";
//위 코드를 배열을 사용하여 저장할경우 아래와 같이 간편하게 저장할 수 있다.
let array1 = ["홍길동", "코난", "나루토", "블리츠"];
const array2 = ["홍길동", "코난", "나루토", "블리츠"];
이처럼 다수의 데이터를 한번에 저장할 수 있기때문에 배열은 데이터를 관리,저장하기 편하다는 장점이 있다. 그렇다면 이제 배열에대해 자세히 알아보자.
배열의 선언
배열을 선언하는 법은 다른 변수를 선언하는 방법과 동일하다. 다만 한가지 다른점이 있다면 [](대괄호) 를 이용하여 할당을 해주어야한다는 점이다. 배열의 선언방식은 아래와 같다.
let (배열이름) = ["값"];
const (배열이름) = ["값"];
//예시 코드
let studentScore = [80,90,20,78];
const studentScore = [80,90,20,78];
이때 변수 선언을 위해서 var 을 사용해도 되지만 var의 불편한 점들때문에 let을 더 많이 사용한다. 이점 유의하자. 이제 배열의 선언방식을 알아봤으니 배열의 구조에대해 알아보자.
배열의 구조
배열의 구조는 일렬로 정렬되어 있는 책장이라고 생각하면 된다. 배열은 각 칸마다 하나의 값을 저장하고 0번부터 n번까지 번호를 매긴다. 직관적이해를 위해 아래의 사진을 그려왔다.
배열의 구조
배열에 값을 할당하게 되면 왼쪽 0번부터 데이터가 저장되게 된다. 이후에 한칸씩 늘려가면 1번,2번...n번까지 배열에 데이터가 저장된다. 이러한 구조를 알아야 배열을 잘다룰 수 있다. 왜냐하면 배열은 주로 반복문을 통해 많이 다루게 되는데 이때 자신이 원하는 배열의 데이터값을 꺼내기 위해서 배열의 몇번째칸에 데이터가 들어가있는지 파악할 수 있어야한다. 그렇다면 이제 배열의 사용에대해 알아보자.
배열의 사용
배열을 사용하는데 있어 배열에서 제공하는 메소드가 있다. array 라는 이름으로 선언된 배열이 있을때 아래의 표는 이 배열로 사용할 수 있는 메소드의 종류이다.
array.length
배열의 길이
array.push()
배열에 맨끝에 데이터 추가
array.pop
배열 맨끝에 있는 데이터 삭제
array.includes()
배열이 해당 값을 가지고 있는지 검색
array.concat()
두 배열을 합체
array.split()
문자열을 분할하여 배열로 변환
array.join()
배열이 가진값을 문자열처럼 합체
array.length
array.length 는 해당 배열의 길이를 제공하는 메소드이다.
let name = ["원피스","나루토","코난","홍길동"];
console.log(name.length); // 4 출력
위 코드에선 name 이라는 이름의 배열에 총 4개의 값이 들어가있으므로 .length 메소드를 호출했을때 4라는 값을 반환하게 된다. 이때 혼동하면 안되는 것이 배열의 길이는 4이지만 배열의 마지막 데이터인 "홍길동" 이 들어가있는 자리는 3번이다. 이 메소드는 반복문에서 해당 배열의 길이만큼 반복문을 실행시키는 조건문을 작성할때 많이 사용하게 될것이다. 이 외에도 많은곳에서 사용되는 메소드이다.
array.push()
array.push()는 저장할 데이터를 추가하는 메소드이다. 이해를 돕기위해 비유를 하자면 "프링글스 통안에 감자칩을 집어넣는것" 라고 생각하면될것같다. 즉, 기존에 있던 데이터에 데이터를 추가하는것이고 이를 통해 배열의 길이도 증가한다.
let name = ["루피","나미","샹디","조로"];
name.push("우솝");
console.log(name) // "루피 나미 샹디 조로 우솝" 출력
위 메소드를 사용하면서 주의해야할점은 배열의 길이가 늘어난다는 것이다. 즉, 처음 배열을 선언할때의 길이는 4이지만 name.push를 통해 "우솝" 이라는 값을 추가했을때 배열의 길이는 5가된다. 이점 유의하자.
array.pop
array.pop() 메소드는 push 와는 반대로 마지막에 있는 데이터를 삭제하는 메소드이다. push에서 설명한 비유를 다시 가져와보면 pop 메소드는 "프링글스 통에서 감자칩을 꺼내먹는 것" 이다.
let name = ["루피", "나미","샹디","조로","우솝"];
name.pop();
console.log(name); // "루피 나미 샹디 조로" 출력
위 메소드를 사용할때 주의해야할 점은 가장 마지막에 있는 데이터가 삭제된다는 것이다. 우리가 프링글스를 먹을때 위에 있는것을 놔두고 맨 밑에 있는것을 꺼내먹지는 않듯이 pop 메소드도 맨위 즉, 가장 마지막 데이터인 "우솝" 이라는 데이터가 삭제된다. 이 메소드 역시 배열의 길이에 영향을 주니 알아두자.
array.includes
array.includes 메소드는 입력된값이 배열안에 있는지 확인하는 메소드이다.
let name = ["루피", "나미","샹디","조로","우솝"];
let judge1 = name.includes("나미");
let judge2 = name.includes("쵸파");
console.log(judge1); // ture 출력
console.log(judge2); // flase 출력
설명을 위해 코드를 해석하자면 "name.includes("나미");" 이라는 코드는 name 이라는 배열안에 "나미" 라는 값이 들어가있는지 묻는 코드이다. 위 선언된 배열에 "나미" 라는 값이 있으므로 해당 메소드는 true 를 반환하고 이 반환된 값이 judge1 이라는 변수에 저장되는 것이다.
즉, 배열에 "나미" 라는 값이 있으므로 judge1 이라는 변수에는 true가 저장되고 배열에 "쵸파" 라는 값이 없으므로 judge2 라는 변수에는 false 가 저장된것이다. 해당 메소드는 조건문과 합이 잘맞는다.
array.concat()
array.concat() 메소드는 두개의 배열을 합치는 배열이다. 즉, 두개의 프링글스통을 합치는 것이다.
let partner = ["루피","나미","샹디","조로"];
let newPartner = ["쵸파","로빈","프랑키","브록"];
let newMember = partner.concat(newPartner)
console.log(newMember);//[
'루피', '나미',
'샹디', '조로',
'쵸파', '로빈',
'프랑키', '브록'
] 출력
console.log(newMember.length); //8출력
console.log(newMember[4]); //쵸파 출력
위 메소드를 사용하면서 주의 해야할점은 메소드를 사용한 배열을 기준으로 마지막으로 저장된 데이터 뒤로 데이터가 추가된다는 점이다. 위 코드를 예시로 설명하자면 위 코드에서는 partner.concat() 메소드를 사용하였다. 즉, partner 라는 배열을 기준으로 newPartner 라는 배열을 추가한것이다. 그렇기 때문에 partner에 마지막으로 저장된 값인 "조로" 뒤쪽으로 값이 저장된다. 그 증거로 newMember[4](newMember 라는 배열의 4번째 자리) 를 출력해봤을때 "쵸파" 라는 값이 출력된다.
array.split()
array.split() 메소드는 문자열을 입력된 값을 기준으로 분할해 배열로 변환해준다.
let email = "gomboy11@naver.com";
let userInfo = email.split("@");
console.log(userInfo); //[ 'gomboy11', 'naver.com' ] 출력
--------------------------------------------------------------------------
let word = "spring summer fall winter"
let season = word.split(" ");
console.log(season); //[ 'spring', 'summer', 'fall', 'winter' ] 출력
위 코드에서 email.split("@") 는 "@" 을 기준으로 해당 문자열을 분할해달라는 것이다. 그 결과 gomboy11@naver.com 이라는 문자열이 gomboy11 과 naver.com 로 분할되어 userInfo 라는 배열에 들어가게된것이다. 그 아래 예시는 " " 즉, 띄어쓰기를 기준으로 문자열을 분할한결과 4개의 단어가 sesaon 이라는 배열에 저장된것을 볼 수 있다.
array.join
array.join 메소드는 배열안에 있는 값들을 합쳐 문자열로 변환해주는 메소드이다.
let season = ["spring","summer","fall","winter"];
console.log(season.join(" ")); //spring summer fall winter 출력
console.log(season.join("-")); //spring-summer-fall-winter 출력
season.join(" ") 코드는 season 이라는 배열이 가지고 있는 값들 사이에 " "(띄어쓰기) 를 포함해서 합쳐달라는 것이다. 만일이를 지정하지 않으면 "," 이라는 값이 출력된다. 출력된 값은 위와 같다.
반댈로 season.join("-"); 이라는 코드는 값들 사이에 "-" 이라는 값을 추가하여 합쳐달라는 것이다. 결과는 위와 같다.
위 결과를 보면 별도의 태그 지정없이 모든 태그들에게 color:red;(글씨색을 빨간색으로 지정) 이 적용된것을 볼 수 있다.
태그 선택자란?
태그 선택자는 태그이름을 작성하여 선택한 태그에만 CSS 적용시키는 선택자이다. 사용방법은 아래와 같다.
/* 사용 양식 */
태그{
css 코드
}
/* 사용예시는 아래와 같다 */
p,div{
color: red;
}
-------------------------------
<p>p 태그</p>
<div>div 태그</div>
<span>span 태그</span>
결과
태그 선택자는 ,(쉼표) 를 사용하여 여러개의 태그를 동시에 지정할 수도 있고 하나의 태그만 지정할 수도 있다. 위 코드에선 ,(쉼표)를 사용하여 p 태그와 div 태그를 동시에 지정해주었기 때문에 글자 색이 빨간색으로 변경된 모습을 볼 수 있다. 반면에 지정이 안된 span 태그는 default 값인 검은 글씨가 출력되는 걸 볼 수 있다.
id 선택자란?
id 선택자는 # 을 이용하여 태그안에 id 값을 지정하여 해당 id 값을 가지고 있는 태그만 CSS를 적용시키는 선택자이다. 사용방법은 아래와 같다.
id 선택자는 같은 id가 부여된 태그들한테 css를 적용시키는 태그이다. 태그에 id를 지정하는 방식은 시작태그 안에 id="임의의값" 을 입력하여 지정할 수 있고 CSS에서 이를 #(지정한 id) 를 입력함으로써 id 선택자를 사용할 수 있다. 위 코드에선 p 태그에 "selected" 라는 이름의 id를 부여하였고 #selected 선택자를 이용하여 글씨를 빨간색으로 변경해 주었다. id 값이 지정이 안되어있거나 다른 id 값이 부여된 태그한테는 css가 적용되지 않는다.
id 선택자의 중복사용
id 선택자와 class 선택자의 차이점 중 하나는 중복사용의 가능 여부이다. 즉, id 선택자는 하나의 id값만 가지고 중복사용이 불가능하다. 하지만 아래의 예제를 봐보자.
#idSelector{
color:red;
}
--------------------------
<div id="idSelector"> id 선택자1 </div>
<div id="idSelectro"> id 선택자2 </div>
결과
결과를 보면 분명 id 선택자는 중복사용이 불가능하다 했는데 두 div 태그 모두 글씨가 빨간색으로 출력되고 있다. id의 중복사용으로 발생하는 문제점은 css가 아닌 자바스크립트에서 발생한다. 즉, id 선택자를 중복사용해도 괜찮은것처럼 보일지몰라도 나중에 자바스크립트를 반영하여 웹페이지를 만들고자 할때 큰결함으로 다가올 수 있다. 다시한번 강조하면 HTML 규정상 id 선택자의 중복사용은 불가능하다. 대신 중복사용이 가능한 class 선택자가 있으니 안심하자.
class 선택자란?
class 선택자는 .(점) 을 활용하여 선택한 class 값을 가지고 있는 태그들한테 css 를 적용시키는 선택자이다. 사용방식은 id 선택자와 비슷하고 예시는 아래와 같다.
/* 사용 방법 */
.id {
css 코드
}
/* 사용 예시 */
.selected{
color:red;
}
-----------------------
<p class="selected">p 태그</p>
<div class="selected">div 태그</div>
<span>span 태그</span>
결과
class 선택자는 기본적으로 id 선택자와 사용법이 동일하다. 다른점은 # 대신 . 을 사용하고 중복 사용이 가능하다는 것이다. 위 코드에선 selected 라는 이름의 class 를 p 태그와 div 태그에 지정하였고 해당 태그들의 글씨가 빨간색으로 출력된것을 볼 수 있다. 추가적으로 이 선택자는 class 태그는 중복사용이 가능하므로 다수의 태그에게 css 적용이 가능하다.
id,class 선택자에 대한 추가 설명
id, class 선택자의 사용방법이 비슷하기 때문에 이 둘의 차별점에대해 헷갈릴것이다. 결론부터 말하면 id 선택자는 class 선택자보다 우선 적용되기 때문에 보통 class 선택자로 큰틀을 만든 다음 id 선택자로 세부사항을 적용한다. 이론보단 예시와 결과로 알아보자.
#idSelector1{
color:blue;
}
#idSelector2{
color:blue;
}
.classSelector{
color:red;
}
---------------------------------------
<div id="idSelector1"> id 선택자 </div>
<div class="classSelector"> class 선택자 </div>
<div id="idSelector2" class="classSelector"> id, class 선택자 </div>
결과
위 코드에선 3개의 div 태그를 만들었고 각각 id,class 그리고 두값을 모두 가지는 방식으로 차별점을 두었다. 그리고 css를 활용하여 id 선택자는 글씨색을 파란색으로, class 선택자는 글씨색을 빨간색으로 출력되도록 지정했다. 그 결과 첫번째,두번째 div는 본인이 가지고 있는 선택자에 따라 파란색,빨간색 글씨가 출력되었다. 반면에 id,class 선택자를 모두 가지고 있는 3번째 div 에서는 빨간색이 아닌 파란색이 출력되었다. 이를 통해 우리는 class 선택자보다 id 선택자가 우선 적용된다는 사실을 알 수 있다.
CSS는 Cascading Style Sheet 의 약자로 html과 함께 사용되며 웹페이지의 디자인을 담당한다. CSS를 통해 여러 요소들의 크기,색상,배경,위치등을 변경할 수 있으며 이를 통해 개발자는 자신이 원하는 디자인의 웹페이지를 만들 수 있다. 오늘 포스팅에서는 CSS를 html에 적용하는 3가지 방법에대해 알아보고자 한다.
1. 인라인 방식
인라인 방식이란 html로 작성한 태그 안에 바로 CSS 문법을 기입하는 방식이다. 사용 방법은 아래와 같다.
<p> CSS 연습 </p>
<p style="color:red"> CSS 연습 </p>
결과
인라인 방식의 CSS는 태그 안에 style="" 형식으로 사용하며 괄호 안에 자신이 원하는 변경 내용을 작성하여 사용한다. 위 코드에서 사용한 color:red 라는 코드는 위 사진과 같이 글자의 색을 빨간색으로 변경하는 코드이다. 위 방식의 장점은 자신이 원하는 태그에 직접적으로 사용할 수 있다는 장점이 있지만 내가 내용을 수정하고자 할때 해당 CSS가 적용된 태그를 일일히 다 찾아 수정해줘야된다는 큰 단점이 있다. 따라서 유지보수에 매우 불리하므로 가급적 사용을 자제하는 것이 좋다.
2.내부스타일시트 방식
내부스타일시트 방식은 한 html 파일 안에서 <style> 태그를 활용하여 CSS를 적용시키는 방법이다. 사용방법은 아래와 같다.
내부 스타일시트 방식은 주로 웹페이지의 정보를 담고 있는 <head> 태그 안에 <style> 태그를 만들어 CSS를 적용시키는 방식이다. 위 방식은 <style> 안에 CSS 작성하는 법은 "선택자 { css 내용 }" 으로 구성되어 있다. 해당 작성방식은 다음 시간에 자세히 설명하도록 하겠다. 이러한 방식은 한 파일안에서 html 과 css 모두 작성할 수 있다는 장점이 있지만 동일한 CSS를 다른 파일에 적용하고 싶을떄 복붙을 해야된다는 아쉬운 점이 있다. 따라서 보통 코딩을 할때 1,2번째 방식보다 3번째 방식이 많이 선호되는데 이제 마지막 3번째 방식에 대해 알아보자.
3.외부스타일시트 방식
외부스타일시트 방식은 외부에 작성된 css 파일을 <link> 태그를 사용하여 html 파일로 가져오는 방식이다. 사용방식은 아래와 같다.
위처럼 외부스타일시트 방식은 외부에서 작성된 .css 파일을 <link> 태그를 활용하여 html파일로 가져오는것이다. <link> 태그의 사용방법은 <link href="css파일 주소" rel="stylesheet"> 이다. href에는 파일의 주소를 적어주어야하고 rel은 파일의 관계를 작성해주어야한다. 지금 불러오고자 하는 파일은 css 파일이므로 rel="stylesheet" 로 작성한 것이다. 외부 css 파일에서 css작성방식은 내부 css 방식과 동일하다. 이처럼 외부스타일시트는 하나의 css 파일로 여러개의 html에 적용할 수 있다는 장점과 유지보수가 용이하다는 장점을 가지고 있어 현재 가장 많이 사용되는 css 적용 방식이다.
HTML은 작성한 여러태그를 개발자가 원하는 위치에 지정 할 수 있어야한다. 예를 들어 검색창을 상단 중앙에 위치하고 싶은데 자꾸 좌측 상단에 위치하게된다면 개발하는데 큰 지장을 줄것이다. 이러한 요소를 잘다루기위해서는 HTML에 존재하는 block 요소와 inline 요소에 대해 이해해야한다. 먼저 대표적인 block와 inline 요소의 차이점을 알아보자.
block 요소와 inline 요소의 차이점
box 요소와 inline 요소의 차이점은 각 요소가 차지하는 공간에 있다. 이를 이해하기 위해 아래 예제와 결과를 보자.
코드 이해를 위해 <div> 태그는 하나의 집합을 만드는 태그고 <span> 태그는 텍스트같은것을 묶어주는 태그이다. 또한 style="border: 1px solid black" 이라는 코드는 css를 인라인형식으로 넣은것으로 각 요소의 영역을 보기 위해서 테두리를 1px 실선 검은색으로 표시한것이다. 이점 이해하고 들어가보자.
우선 block 요소는 위에 보이는것과 같이. <div> 태그 안에 있는 텍스트가 끝났음에도 불구하고 줄이 우측 끝까지 이어지는걸 볼 수 있다. 반면 inline 요소는 딱 텍스트정도의 크기를 가지고 있고 바로 다음 태그가 이어서 붙고 있는걸 볼 수 있다.
즉, block 요소는 사용가능한 모든 영역을 차지하고 inline 요소는 필요한 만큼의 영역만 차지하는 것이다.
이러한 점들은 웹 페이지를 만들때 자신이 원하는 위치에 배치하는데 영향을 주기 때문에 각 태그들이 block 요소인지 inline 요소인지 알아둘 필요가 있다. 그럼 먼저 block요소의 대표적 태그를 알아보자.
우선 <input> 태그에는 종료태그가 없다. 이점 유의하자. 코드를 실행해보면 좌측 사진과 같은 형태가 나온다. 하지만 첫번째 코드처럼 그저 기본 형식으로만 만들었을때는 입력받을 수 있는 칸만 생성이 되는걸 볼 수 있다. 이러면 이 공간에 어떤 정보를 입력하라는건지 혼란이 생길 수 있다. 그럴땐 2번째 코드처럼 placeholder 속성을 사용해주면 된다. placeholder="내용"을 사용하면 칸안에 좌측 사진처럼 "아이디를 입력해주세요" 라는 문구가 나를 반기는것을 볼 수 있다. placeholder는 우측 사진처럼 아무값이나 입력하면 자동으로 사라진다.
password
password는 근본적으로 text와 비슷하다. 하지만 비밀번호같은 민감한정보는 입력을 받을때 주위사람이 보지 못하도록 감춰둘 필요가 있다. 그럴땐 password 타입을 사용하면 된다. 아래 예제를 보자.
radio 타입은 위 사진처럼 하나만 선택해야하는 값을 입력받을 때 사용한다. radio 타입을 사용하면서 주의해야할 점이 있다. radio 타입을 만들면 checkbox가 만들어진것과 동일하다. 하지만 여기서 차별점을 주기위해서는 두개 이상의 radio를 서로 링크 시켜줘야한다는 것이다. 이를 하지 않았을경우 여성과 남성 둘다 체크가 가능한 사태가 벌어질 수 있다. 위 사태를 방지하기 위해서는 name 속성을 이용하여 동일한 이름을 써주면 된다. 사용법은 name="임의의 이름" 이고 위 코드를 보면 필자는 name="gender" 속성을 이용하여 여성과 남성 radio를 링크시켜줌으로써 하나만 선택할 수 있도록 지정했다.
button
button 타입은 사용자가 누를 수 있는 버튼을 제공하는 타입이다.
<input type="button" value="버튼">
결과
button 타입은 위 사진처럼 사용자가 누를 수 있는 버튼을 만들어주는 타입이다. 이 기능은 js 와 함께 사용되어 이 버튼을 눌렀을때 어떠한 동작이 작동하도록 사용할 수도 있다. 예시로 버튼을 눌렀을때 사용자가 입력한 값을 초기화시켜주는 기능이 있다. button 타입을 사용할때는 위 사진처럼 "버튼" 이라는 글자가 칸 안에 위치할 수 있도록 value 라는 속성을 쓴다.
value="내용"을 사용함으로써 버튼 안에 내용을 추가할 수 있다. 참고로 input 태그로 button을 생성하는 것은 요즘 잘 사용하지 않고 있다. 이유는 input 태그로 생성함으로써 css와 js등으로 버튼에 효과를 주는데 몇가지 제약이 있기 때문이다. 따라서 그저 <button></button> 태그를 사용하는 추세이다.
submit
submit 타입은 서버에 정보를 제출할 때 사용한다.
<input type="submit" value="회원가입">
결과
submit 타입은 주로 사용자가 입력한 값을 서버에 전달할 때 사용한다. 예시로 우리가 회원가입창에서 각종 내용을 입력하고서 회원가입 버튼을 누를때 딱 회원가입이 되는 것이 있다.
number
<input type="number" min="1" max="10" value="1">
결과
number 타입은 숫자를 입력받는 타입이다. 추가적으로 min="숫자" max="숫자" 속성을 이용하여 입력받을 최솟값과 최댓값을 설정할 수 있다. 추가적으로 value="숫자" 속성을 사용해 초기지정값을 설정 할 수 있다.(위 사진은 필자가 사용자 입장에서 임의의값을 입력한것)
file
file은 파일을 입력받을 수 있는 타입이다.
<input type="file">
결과
file 타입으로 코드를 작성하면 위 사진처럼 파일 선택이라는 버튼이 생길 것이다. 버튼을 누르면 문서함이 열리고 파일을 선택했을 경우 오른쪽 사진처럼 선택한 파일이 표기된다.
range
range는 숫자 범위를 조절해 입력받을 수 있는 타입이다.
<input type="range" min="1" max="10" value="1">
결과
range 타입은 number 타입과는 다르게 아날로그 형식으로 범위를 조절하여 숫자를 입력받는다. 아마 이와 같은 형태는 컴퓨터 소리를 조절할때 많이 봤을것이다. 속성은 number 와 같이 mix,max 를 통해 최솟값,최댓값이 설정가능하고 vaule 속성을 통해 초기설정값을 지정할 수 있다.
