virtualBox로 가상컴퓨터 만들기

1. 새로만들기클릭
2. 이름명:원하는대로(혹시 오류가 발생한다면 예약어가 있을수있으니 다양한 이름으로 시도해볼 것.),
   종류 : Linux

숫자를 전화번호 형식으로 변환

숫자를 받은 후 그 숫자를 전화번호형식으로 변화시키고 싶다.
if else문을 사용해서 나타낼 수 있겠지만 엄청 길었다.
검색해보니 정규식을 이용한 깔끔한 코드를 찾았다

1
2
3

function phoneformat(num){
	return num.replace(/(^02.{0}|^01.{1}|^[0-9]{3})([0-9]*)([0-9]{4})/, "$1-$2-$3");
}

코드를 설명하자면 뒤에서 설명하는 게 편하다.

1. “$1-$2-$3”

이 부분은 $1과 $2 그리고 $3를 하이픈(-)으로 연결했다.
그렇다면 $1과 $2, $3는 뭘까?
앞에 괄호와 연결된다 콤마(,)앞에 식을 자세히보면 (/()()()/,”$1-$2-$3”); 이렇게 볼 수 있다.
괄호안의 연산된 값이 순서대로 $1, $2, $3에 대입된다고 보면 된다.

2. ([0-9]{4})

뒤의 괄호부터 차근차근 풀어보자
0에서부터 9까지의 숫자중에 4개의 숫자를 가지겠다는 의미이다

3. ([0-9] * )

0에서부터 9까지의 숫자중에 모든 남는 숫자를 가지겠다는 의미이다
여기서 남는 숫자란, 총 11자리중에 앞에서 3자리, 뒤에서 4자리를 가져간다면 그 나머지숫자은 4개를 가져가겠다는 의미이다.

4. (^02.{0}|^01.{1}|^[0-9]{3})
   ^은 정규식을 시작한다는 의미이다.
5. {0} 는 02로 시작할경우, .{0}는 문자하나를 출력하겠다는 의미이고 뒤에 오는 숫자를 쓰지않고 02만 출력된다
   |는 or연산자역할이다.
   ^01.{1}는 01로 시작할경우, .{1}는 01 이후로 오는 1자리까지 숫자를 출력하겠다는 의미이고 여기서는 01x가 된다.
   [0-9]{3}는 0부터 9까지 숫자중에서 입력된 3가지 숫자를 가지겠다는 의미이다.

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 문자열객체(String)

문자열객체는 배열처럼 데이터를 저장한다.

1
2
3

let name = new String("Hong") //문자열객체

let name2 = "Kim" //문자열데이터(문자열상수)

둘 다 문자열객체로 사용할수있다.

문자열객체는 두가지타입의 function을 가지고있다.
스타일을 지정하는 타입의 함수와 데이터를 처리하는 타입의 함수이다.

1. 스타일을 지정하는 함수

폰트를 굵게 표시한다.
하지만 스타일을 지정하는 함수는 실제론 거의 사용하지않는다.
실무에선 스타일은 css로 지정한다
그렇지만 굳이 css를 쓰지않더라도 이렇게 스타일을 지정할 수있다는 사실을 알고있어야한다.

참고로 toUpperCase()와 toLowerCase()는 사용할 수 도 있다

1
2
3

document.write("name : " + name.bold()); //굵게 출력
document.write(name.toUpperCase()+"<br>"); //모두 대문자로 출력
document.write(name.toLowerCase()+"<br>"); //모두 소문자로 출력

체이닝기법
함수를 연결하여 한번에 사용하는 형태이다.

1

document.write(msg.fontcolor("red").fontsize("15").bold())

위의 코드를 통해 msg의 글씨색깔은 빨간색이며 폰트사이즈는 15이고 굵게 출력된다.

2. 데이터를 처리하는 함수

아래 함수들(2번부터 ) 모두가 데이터를 처리하는 함수이다.

2. .length

길이를 구하는 함수이다

3. 짤라오는 함수 4종류 .substring(), slice(), substr(), charAt()

substring(시작인덱스,끝인덱스)는 시작부터 끝 인덱스 앞자리까지 짤라온다.
substring(인덱스) 이처럼 인덱스를 하나만 적는 경우에는 시작인덱스로 취급하여 시작인덱스부터 끝까지 다 짤라온다.

1
2
3
4
5
6

let name3 = "이번년도는 복세편살!"
document.write(name3.substring(2,6))
document.write(name3.substring(2))
//출력값 
년도는
년도는 복세편살!

이것과 비슷한 함수로는 아래 세 가지가 있다.

1. slice(시작,끝) : 시작인덱스부터 끝인덱스의 앞자리까지 짤라오는 함수

2. substr(시작인덱스,갯수) : 시작인덱스부터 갯수만큼 짤라오는 함수

3. .charAt(인덱스) : 해당 인덱스에 있는 문자데이터를 가져온다.

   1 2 3 4 5 6

   let name3 = "이번년도는 복세편살!" document.write(name3.charAt(0)) //첫번째글자 가져오기 document.write(name3.charAt(name3.length-1)) //제일 끝 글자가져오기 // 출력값 이 !

예시 1. 주민번호로 성별 구분 코드

짤라오는 함수를 이용하여 주민번호로 성별을 구분하는 코드를 작성해보자
총 4가지 방법의 함수로 짤라올수가 있다!

1
2
3
4
5
6
7
8
9
10
11
12
13

let num = prompt("주민번호를 -와 함께 입력하세요")
	
let checkNum = num.substring(7,8); //첫번째방법 substring사용
let checkNum = num.slice(7,8); //두번째방법 slice사용
let checkNum = num.substr(7,1); //세번째방법 substr사용
let checkNum = num.charAt(7); //네번째방법 charAt사용


if(checkNum === "2" || checkNum === "4"){
	document.write("여성입니다")
}else if(checkNum === "1" || checkNum === "3"){
	document.write("남성입니다")
}

예시 2. 전화번호 중간자리 가리기

위에서 배운 함수로 출력이 가능하나 마지막방법인 charAt는 1자리만 가져오는 것이기때문에 불가능하다.
따라서 3가지 방법으로 코드를 작성할 수 있다.

1
2
3
4

let phonenum = prompt("전화번호를 -와 함께 입력하세요")
let mobile = "010-****-" + phonenum.substring(9) //첫번째방법 substring사용
let mobile = "010-****-" + phonenum.slioce(9) //두번째방법 slice사용
let mobile = "010-****-" + phonenum.substr(9) //세번째방법 substr사용

5. .indexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 indexOf()를 사용한다.
indexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 왼쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

1
2
3
4
5
6
7

let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
0
-1

현재 name3안에는 “이”가 2개가 있지만 첫번째 “이”의 index위치를 알려주고 있다.
중복되는 데이터의 첫번째 index 위치만 알려주기때문에 중복데이터가 있으면 그 위치가 어디인지 찾기가 어렵다.
그럴때 사용하는 함수가 아래에 있는 .lastIndexOf()이다.

6. .lastIndexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 lastIndexOf()를 사용한다.
lastIndexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 오른쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

1
2
3
4
5
6
7

let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
11
-1

7. .concat()

괄호에 추가하고싶은 데이터를 작성하여, 데이터를 추가하는 방법에는 아래처럼 두가지가 있다.

1. 더하기 연산자사용
2. .concat()사용

1
2
3
4
5
6
7

let name3 = "이번년도도는 복세편살이야"
document.write(name3 + "!!!!"+"<br>")
document.write(name3.concat("!!!!")+"<br>")

//출력값
이번년도도는 복세편살이야!!!!
이번년도도는 복세편살이야!!!!

8. .split()

괄호안의 값을 기준으로 문자를 파싱(나누기)후 배열에 저장한다.

1
2
3
4
5
6
7

let name3 = "이번년도도는 복세편살이야"
document.write(name3.split(" ")+"<br>")
document.write(name3.split(" ")[0]+"<br>")

//출력값 : 괄호가 스페이스이므로 스페이스 기준으로 2개가 나누어진다.
이번년도도는,복세편살이야
이번년도도는

9. ID자릿수를 제한하는 이메일 유효성검사

userEmail.indexOf(“@”) >= 0)에서
0대신에 다른 숫자를 넣으면 해당 숫자에 따라 최소 ID의 자리수가 달라지는 로직을 만들수있다.
userEmail.indexOf(“@”) >= 8)인경우 8자리이상 ID만 true가 된다.

이런 로직을 잘 짜야지 좋은 개발자가 될 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function check(userEmail){

	let check1 = false; //@유무 체크
	let check2 = false; //유효한 이메일주소 체크
	let emailArr = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"]

	if(userEmail.indexOf("@") >= 0){ //숫자에 따라 최소 ID의 자리수가 달라짐 8인경우 8자리이상id필요
		check1 = true;
	}

	for(let i=0; i<emailArr.length; i++){
		//document.write(emailArr[i] + "<br>")//출력
		if(userEmail.indexOf(emailArr[i]) >= 0){
			check2 = true;
			break;
		}
	}

	if(check1 && check2){
		document.write("사용자 이메일 확인완료 : "+ userEmail +"<br>")
	}else{
		document.write("이메일주소 오류!<br>")
	}
}

check("s.co.kr")
check("s.cd")
check("s@.co.kr")
check("2@.com")
check("2@.or.kd")
check("2@.cd")

//출력값
이메일주소 오류!
이메일주소 오류!
사용자 이메일 확인완료 : s@.co.kr
사용자 이메일 확인완료 : 2@.com
이메일주소 오류!
이메일주소 오류!

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 배열객체(Array)

내장객체 중에서 가장 활용도가 높은 것은 배열객체이다.
연속된 공간에 여러개의 데이터를 저장하는 객체이다.
배열에 들어있는 데이터를 요소(Element)라고 부른다.
배열의 index는 0부터 시작한다. 그리고 마지막 index는 (배열의 크기 - 1)이다.
배열의 요소는 변수처럼 사용가능 -> 주로 반복문에 활용해서 사용한다.
JS의 경우 모든 데이터타입을 한 배열안에 넣기 가능하다.

1

let arr = [1,2,"Hello", true, 3];

2. for ~ in 구문

변수의 값을 0부터 배열 객체의 개수만큼 반복하는 구문.
자동적으로 배열 객체의 길이를 계산한다.

1
2
3
4

for(let i in arr){
	document.write( arr[i]+ " ")
}
//출력값은 1 2 Hello true 2 JS

3. array.join();

요소들을 출력할 때 사이에 입력하여 출력하는 방법은 join()을 쓰면 쉽게 해결된다

1
2

document.write(arr.join(" "))
//출력값은 1 2 Hello true 2 JS

위의 출력값과 아래의 출력값의 차이는 딱 하나이다.
마지막 요소에 스페이스의 입력유무이다.
join()의 경우 마지막요소에 입력되지 않으니 더욱 유용하다

1
2

document.write(arr.join(","))
//출력값은 1,2,Hello,true,2,JS

4. array.reverse();

배열안의 요소를 역순으로 출력하고 싶다면 반복문을 먼저 생각해볼수있다.
반복문을 이용하면 임시값에 뒷요소부터 넣어서 반복할 수 있다.
하지만 array에 좋은 내장함수가 있다.
바로 reverse()이다
reverse()는 배열의 순서를 반대로 처리한다.

1
2
3
4

arr1 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr1.reverse())

//출력값 나,가,A,a,hi,2,1

기본적으로 콤마(,)가 함께 출력된다.
이 콤마를 없애고 싶다면 reverse후에 join을 하면 된다

1
2

document.write(arr1.reverse().join(" "))
//출력값 나 가 A a hi 2 1

5. array.sort();

낮은 순자부터 높은 숫자로 오름차순으로 출력한다.

1
2
3
4

arr2 = [1,2,"hi", "a", "A", "가", "나"];
document.write(arr2.sort())

//출력값 1,2,A,a,hi,가,나

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 이벤트

브라우저에서 사용자가 취하는 모든 행동을 이벤트라고 한다

이벤트 :
- 브라우저에서 사용자가 취하는 모든 행동
- ex)button

이벤트리스너 :
- 이벤트 발생정보를 체크해서 해당 핸들러로 전달
- ex) onclick

이벤트핸들러 :
- 이벤트 발생시 특정 동작을 처리해주는 동작
- 자바스크립트 함수를 실행시켜서 작동한다 즉, js함수실행가능
- 태그의 스타일정보 변경가능
- ex) alert(‘버튼클릭’), open() 등등

보통을 keydown해서 keyup을 해야 즉, 키보드를 눌렀다가 떼면 데이터가 입력된다.
따라서 키이벤트를 처리할때는 keyup일때 이벤트를 걸어줘야 keydown일때보다 정확한 처리가 가능하다

1
2
3
4

<input type="button" value="버튼" onclick="alert('버튼클릭');"><br>
<input type="button" value="버튼2" ondblclick="alert('버튼더블클릭');"><br>
<input type="button" value="버튼3" onmouseover="alert('마우스오버');"><br>
<input type="text" name="txt" onkeyup="alert('키업!');"><br>

참고링크 : onmouseleave와 onmouseout의 차이점

2. 브라우저객체모델(BOM : Browser Object Model)

우리가 사용하는 인터넷브라우저안에 내장되어있는/포함되어있는 객체를 말한다.
특징

• 계층적구조 : 단계별로 표시할 수 있다.
  • 최상위레벨 : window객체
  • 그 아래레벨 : document객체, screen객체, location객체, history객체, navigator객체

정확한 구조를 표현한 문장인 window.document.write() 사용해야하지만 최상위 객체는 생략해서 document.write()로 사용한다.

3. window객체

브라우저 객체이 최상위 객체.
객체이기때문에 당연히 속성과 함수들을 가지고 있다.

• window.open(“url주소 “, “창이름(title태그와 동일한 기능)”, “옵션”); 새창열기

• window.location.href=’url주소’; 현재페이지에서 열기

• window.close(); 현재 창 닫기

• window.alert(); 알림 팝업창 열기

• window.confirm() : 팝업창을 열어서 확인/취소 버튼으로 Boolean 데이터를 받는 함수

• window.prompt(); 팝업으로 input창 열기

• window.setInterval(“자바스크립트실행문”,밀리초시간); 일정시간동안에 자바스크립트실행문을 실행하는 함수

window는 최상위객체이기때문에 window를 생략하고 사용할 수 있다.

1. 예시1 : window.open(), window.close(), window.location

1
2

<input type="button" value="새창열기" onclick="window.open('http://www.naver.com')">
<input type="button" value="현재페이지열기" onclick="location.href='http://www.naver.com'">

이렇게 input태그에 많은 내용이 들어가면 보안상의 위험이 있으므로 js에 넣어서 사용한다.
참고로 아래 코드에서 점점(..)은 상위폴더로 이동을 의미한다.

1
2
3
4
5
6
7
8

function winOpen(){
	open("http://www.naver.com") //window생략가능
}
<input type="button" value="새창열기" onclick="winOpen();">

function pageOpen2(){
	open("../JS2/Test5.html") //점점(..)은 상위폴더로 이동을 의미한다.
}

2. 예시2 : setInterval(()=>{js실행문}, 밀리초)

3초에 한번씩 숫자를 찍는 함수를 아래코드와 같이 만들수있다.
java에서 스래드와 비슷한 개념이다.

1
2
3
4
5
6

let i=0;
let inter = setInterval(() => { 
	console.log(i++)
}, 3000);  //3초에 한번씩 숫자찍기

clearInterval(inter); //변수에 담은 interval데이터를 clearInterval()함수로 멈출수있다.

파이썬 인강 자기계발 챌린지 22회차 미션

이때까지 배운 HTML와 CSS를 가지고 Django 사이트를 만들어보는 실습을 해보자.
참고링크 : Django

1. 전체 페이지 레이아웃잡고 마크업하기

먼저 홈페이지를 보고 레이아웃을 잡고 미리 스케치하는 것이 좋다.
그래야 안 헷갈리고 필요한 태그들만 사용하여 깔끔한 마크업이 가능하기때문이다.

지난 포스팅에서 Django홈페이지 전체를 스케치한 이미지이다.

전체 홈페이지를 가장 큰 세가지부분으로 나눈다

1. Header
2. main
3. footer

그 뒤로 안에 있는 요소들을 스케치한 뒤 그대로 마크업하면 된다!
간단한 작업처럼 보이지만 깔끔하게 잘 만들기 여건 어려운 것이 아니다.
나도 강사님처럼 척보면 척하고 짜임새있게 짜고 싶다.

2. Header 전체구상

먼저 첫번째 큰 부분인 Header부분이다.
안을 보면 logo와 navigator로 나눌 수 있다.
logo안은 이미지태크와 링크를 넣어 이미지를 누를때마다 홈으로 돌아가게끔 구현할 것이다.
navigator는 ul태그로 만들어서 li태그에 a태그를 넣어 li태그를 누를때 관련 페이지로 이동할 수 있도록 구현할 것이다.

1. logo

   • logo
     • img + link to home

2. navigator

   • list
     • li + link to overview page
     • li + link to download page
     • li + link to documentation page
     • li + link to news page
     • li + link to community page
     • li + link to code page
     • li + link to issues page
     • li + link to about page

스케치를 보고 그대로 html를 작성해주면 좋다.
위의 이미지처럼 class 이름까지 지정해서 하면 훨씬 편하고 빠르게 마크업할수있다.

li태그와 a태그는 묶어서 총 8번 작성해야한다.
이때 효율적으로 코드를 작성할 수 있는 방법이 있다.

1
2
3
4
5
6
7
8
9
10
11
12

 (li>a)*8
 
 
 // 출력값은
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

li태그 안에 a태그를 만들고 전체를 곱하기 8번해서 총 8개의 태그를 만들게 된다.
참~ 쉽죠?

3. max-width 속성과 min-width속성

브라우저의 크기를 조절할때, 브라우저가 일정한 크기에 도달할 경우 더이상 콘텐츠의 크기도 같이 줄어들거나 늘어나지 않는다.
이러한 속성을 max-width와 min-width라고 한다.

브라우저 전체 넓이가 1060px이 되면 더 이상 줄어들지 않도록 지정하고 1400px이 되면 더 이상 늘어나지않도록 지정해보자.

이를 위해서 먼저 생각해야할 것이 어느 부분에 max-width와 min-width를 적용시킬 것인 가이다.

브라우저 전체 넓이가 일정크기보다 작아지면 모든 요소들이 다 작아지다가 멈춰야하므로 body에 min-width를 주면 된다.

반면 브라우저 전체 넓이가 일정크기보다 커지면 header는 크기와 상관없이 양옆에 컬러가 계속 칠해져있어야하므로 container를 주어 container태그안에 max-width속성을 적용하여 디자인을 유지할 수 있다.

1
2
3
4
5
6
7
8

body{
    min-width: 1060px;
}

.container{
    max-width: 1400px;
    margin: 0 auto 0 auto;
}

4. margin과 padding의 단축속성

margin과 padding값을 주는 데는 총 4가지 단축 방법이 있다.

1. { margin: 0 auto 0 auto}
   이렇게 4개가 나열되어 있는 경우의 순서는 top right botton left순이다.

2. { margin: 0 auto 10px }
   이렇게 3개 값이 나열되어 있는 경우에는 순서가 첫번째값은 top, 두번째 값은 left와 right 그리고 마지막 값은 bottom이다

즉 { margin: 0 auto 10px } 는 { margin: 0 auto 10px auto} 와 동일한 값을 가진다.

3. { margin: 0 auto }
   이렇게 2개가 나열되어 있는 경우의 순서는 첫번째값은 top botton에 적용 두번째 값은 left와 right에 적용된다.

즉 { margin: 0 auto } 는 { margin: 0 auto 0 auto} 와 동일한 값을 가진다.

4. { margin: 10px }
   이렇게 1개 값만 있는 경우는 어디에 값이 적용될까?
   정답은 모든 곳에 적용된다.
   다시말해 10px이 top right botton left에 각각 적용된다.

즉 { margin: 10px } 는 { margin: 10px 10px 10px 10px } 와 동일한 값을 가진다.

5. display: inline-block;

display속성에 inline-block을 넣어보자.

1
2
3
4
5
6
7

.nav{
    text-align: right;
}

.list-items{
    display: inline-block;
}

아래 이미지를 순서대로 본다면 1번에는 적용되지 않은 순수한 모습에서
위의 코드를 적용한 후 3번을 본다면 예쁘게 오른쪽으로 카테고리가 일렬로 배열되어 있는 것을 확인할 수 있다.

6. position: absolute; 와 relative; 적용

가장 헷갈리는 position속성을 적용하기 전후를 비교해보자.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13

.container{
    max-width: 1400px;
    background-color: red;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; //normal flow의 속성에 변화가 있는 것이 아니기때문에 화면에 출력될때 변화가 없다
}

.logo{
    position: absolute;
    top: 0;
    left: 0; 
}

1번은 위의 태그를 적용하기 전의 모습이고 container클래스에 position: relative;를 적용하고 logo클래스에 position: absolute;를 적용을 하면 아래 이미지의 3번으로 화면에 출력된다.

파이썬 인강 자기계발 챌린지 21회차 미션

1. Reset보단 normalize

기본값으로 설정된 css가 레이아웃을 잡을때 불편함을 초래하기도 한다.
이에 reset을 시켜주는 코드들이 생겨났다.
하지만 reset코드들은 오래된 것들이 많아 요즘 유용하게 쓰이는 기본값까지 초기화시켜버리기떼문에 효율적이지 못하다.

따라서 최근에는 normalize를 더 많이 사용한다.

Normalize.css 파일에 들어가서 다운로드를 누르면 css 파일이 나오고 해당 파일 코드를 전체복사하여 내 프로젝트에 normalize.css로 새로운 파일을 만들어 전체붙여넣기해준다.
normalize.css안에는 주석으로 해당 코드들이 어떤 역할을 하는지 자세하게 알려주어 필요한 코드만 사용할 수 있고 필요하지 않는 코드들은 삭제하기만 하면 된다.

2. 기본 box-sizing 잡기

레이아웃의 에러를 최소화하기 위해서는 box-sizing을 border-box로 하는 것이 좋다.
여기서 *는 모든 영역에 적용한다는 뜻이다.
*::before와 *::atfer는 숨은 영역을 뜻한다.

1
2
3
4
5
6

*, 
*::before,
*::atfer {
	box-sizing : border-box;
}
 box-sizing을 border-box

3. 레이아웃짜기 hero-section

웹페이지를 구성할 레이아웃을 짜본적이 없어서 혼자서 웹페이지를 만들때 수정을 엄청 많이 하게 된다.
그래서 다른 사람은 어떻게 짜는 지 궁금했는데 강사가 자신이 왜 이렇게 레이아웃을 짜게 되었는지 설명을 해줘서 좋았다.

hero-section을 처음 듣게되었는데 이는 해당 웹페이지가 중요시하는 콘텐츠를 먼저 배치하고 링크를 걸어두는 것이다.

아래 이미지는 강사님이 장고사이트의 레이아웃을 분석한 것이다.

4. Pseudo-class 가상클래스 (hover, active, focus 등 )

가상클래스를 사용하여 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을 때 css요소를 적용할 수 있다.
예를 들면 아래 태그는 a태그에 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을때 배경색상 변경하는 코드이다.

• hover : 마우스가 올라가 있는 경우
• active : 활성화되어 있는 경우
• focus : 키보드로 선택되어있는 경우

1
2
3
4
5
6

a : hover,
a : active, 
a : focus {
/* a 요소에 
background-color : orange;
}

5. Pseudo Element 가상요소

없는 태그를 css로 넣어줄수도 있다.
아래는 h2태그에 가상의 태그인 >를 넣는 태그이다.
가상태그는 html에서 드래그를 하려고해도 드래그가 되지 않는다.
말그대로 가상태그이기 때문이다.

1
2
3

h2 ::before{
	content : " > "
}

아래 이미지는 h2태그에 가상의 태그인 손가락이모티콘을 표현했다.

6. Cascading 캐스캐이딩

캐스캐이딩은 폭포라는 의미를 가지고 있다.
웹페이지의 디자인이 아래 3가지 디자인과 결합할 수 있기때문에 그 결과값이 내가 예상한대로 나오지 않을 수 있다.

• 웹브라우저의 기본 디자인
• 브라우저 사용자의 디자인
• 그리고 웹페이지 저자의 디자인

따라서 선택자 구체성 점수를 매겨서 우선순위를 잘 파악하고 있어야한다.

7. 선택자 구체성 점수

선택자와 요소에 따라 아래와 같이 다른 값을 매기고 이를 더해주면 어느 것이 더 우선순위인지 확인 할 수 있다.

• HTML태그의 style속성 사용 : 1000점
• ID선택자 : 100점
• CLASS선택자와 가상클래스 : 10점
• TAG선택자와 가상요소 : 1점

사용한 태그가 위의 4분류중 어디에 속하는 지 잘 모르겠는 경우에는 구체성 계산기에 접속하여 궁금한 태그를 복사 붙여넣기하면 된다.
계산기가 자동적으로 사용된 아래 세가지

• ID선택자 갯수
• CLASS선택자와 가상클래스 갯수
• TAG선택자와 가상요소 갯수

를 알려준다 그걸 기준으로 위의 점수표와 함께 계산하면 된다.