포스코DX X 비트교육센터 6기 - FRONT

종속 선택자

  • 태그, 클래스, 아이디 선택자가 결합되 형태의 선택자

  • 종속 선택자 예

  h1#head { … } 
  .headline.selected { … }
  input#user-id.focused { …}
  p.title { … }

하위 선택자

  • 선택자 내부의 자식 선택자에 속성을 지정하는 방식이다.
  • 하위 선택자 예
  body h1, body h2, body p { … } 
  p .txt1 { … }                                                
  .headline span
  • 만약, 두 가지가 충돌이 날 경우에는 가장 가까운 위치의 css가 먹는다

.list1 a{
	font-weight: bold;
	color:red;
}

.list2 a{
	font-weight:bold;
	color:pink;
}
</style>
</head>

<body>
	<ul class="list1">
		<li><a href="#">제주글꼴의 가장 큰 특징</a></li>
		<li>제주어를 표현할 수 있어야 한다.</li>
		<ul class="list2">
			<li><a href="#">제주 사투리(고어)를 표현할 수 있어야 한다.</a></li>
			<li>제주 글꼴이라는 느낌이 줘야 한다.</li>
			<li>기본 고딕체가 있어야 한다.</li>
			<li>기본 명조체가 있어야 한다.</li>
		</ul>
		<li>시대적인 요구에 맞춘 디자인이어야 한다.</li>
		<li>PC와 맥 둘 다 사용 가능해야 한다.</li>
	</ul>

image

JS

  • onfocus
  • 함수
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>수도 선택자 1</title>
<style type="text/css">
body {
	font-family: "맑은 고딕", "돋움";
	font-size: 12px;
	color: #333;
}

form{
	width:180px;
	height:200px;
	margin: 200px auto 0 auto;
	
	/**background-color: pink;*/
}

input{
	border: 2px solid #aaa;
	outline: none;
	padding:5px;
}
</style>
<script>
	i=10;
	s='hello';
	f=function(){
		console.log('hello');
	}
	console.log("!!!")
	console.log("!!!")
	console.log("!!!")
	console.log("!!!")
</script>
</head>

<body>
	<form>
		<input type="text" onfocus="f();">
	</form>

</body>
</html>

image

this

JavaScript에서 this는 현재 실행 중인 함수의 컨텍스트를 가리키는 특별한 키워드입니다. this의 값은 호출된 함수 또는 메소드가 어떻게 호출되었느냐에 따라 다르게 설정됩니다. 이것은 주로 객체 지향 프로그래밍과 함수 스코프에 관련이 있습니다.

  • this 1

image

<script>
	i=10;
	s='hello';
	f=function(){
		console.log(this);
	}
</script>
</head>

<body>
	<form>
		<input type="text" onfocus="f();">
	</form>

</body>
  • this 2

image

<body>
	<form>
		<input type="text" onfocus="console.log(this)">
	</form>

</body>
  • this 3

image

<script>
	i=10;
	s='hello';
	f=function(input){
		console.log(input);
	}
</script>
</head>

<body>
	<form>
		<input type="text" onfocus="f(this)">
	</form>

</body>
  • 활용

image

image

  • onblur
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>수도 선택자 1</title>
<style type="text/css">
body {
	font-family: "맑은 고딕", "돋움";
	font-size: 12px;
	color: #333;
}

form{
	width:180px;
	height:200px;
	margin: 200px auto 0 auto;
	
	/**background-color: pink;*/
}

input{
	border: 2px solid #aaa;
	background-color: #fff;
	outline: none;
	padding:5px;
}
</style>
<script>
	i=10;
	s='hello';
	focused=function(input){
		input.style.borderColor = "#2a00e6";
		input.style.backgroundColor = "#e1e6f6";
	}
	blured=function(input){
		input.style.borderColor = "#aaa";
		input.style.backgroundColor = "#fff";
	}
</script>
</head>

<body>
	<form>
		<input type="text" onfocus="focused(this)" onblur="blured(this)">
	</form>

</body>
</html>
  • 활용 발전 ver.

		input.focused {
			border-color: #2a00e6;
			background-color: #e1e6f6;

		}
	</style>
	<script>
		i = 10;
		s = 'hello';
		focused = function (input) {
			input.className = "focused";
		}
		blured = function (input) {
			input.className = "";
		}
	</script>
</head>

<body>
	<form>
		<input type="text" onfocus="focused(this)" onblur="blured(this)">
	</form>

</body>

그룹 선택자

  • 각각의 선택자를 그룹으 지어 속성을 부여하는 것
  • 선택자들 간에 공통적인 속성이 있는 경우 일괄 적용으로 편리하게 사용
  • 그룹 선택자 예
             body h1, body h2, body p { … } 
            .right_box, .left_box { … }

동기, 비동기

  1. 동기 (Synchronous):

동기 코드는 순차적으로 실행됩니다. 한 작업이 끝나야 다음 작업이 실행됩니다. 코드 실행 중인 작업이 끝날 때까지 다른 작업을 수행할 수 없으며, 이로 인해 블로킹(blocking)이 발생할 수 있습니다. 예를 들어, 웹 페이지가 동기 코드에 블로킹되면 사용자는 다른 작업을 수행할 수 없을 수 있습니다.

  1. 비동기 (Asynchronous):

비동기 코드는 순차적으로 실행되지 않고, 작업이 백그라운드에서 병렬로 실행됩니다. 코드 실행 중에 다른 작업을 동시에 수행할 수 있으며, 블로킹이 발생하지 않습니다. 주로 비동기 작업은 콜백 함수, 프라미스(Promise), async/await 패턴 등을 통해 처리됩니다. 예를 들어, 웹 페이지에서 이미지를 다운로드하고 표시하는 작업을 생각해보겠습니다:

  1. 동기 방식: 이미지를 다운로드할 때까지 웹 페이지는 멈추며, 사용자는 다른 작업을 수행할 수 없습니다.

  2. 비동기 방식: 이미지를 다운로드하는 동안 웹 페이지는 다른 작업을 계속 수행하며, 이미지 다운로드가 완료되면 그 때 이미지를 표시합니다.

이것이 동기와 비동기 코드의 주요 차이입니다. 비동기 코드는 주로 네트워크 요청, 파일 다운로드, 데이터베이스 쿼리 등과 같이 시간이 오래 걸리는 작업을 다룰 때 유용하며, 애플리케이션의 반응성을 향상시키는 데 도움이 됩니다.

호이스팅

호이스팅(hoisting)은 프로그래밍에서 주로 JavaScript와 같은 언어에서 발생하는 개념입니다. 호이스팅은 변수와 함수 선언을 현재 범위(scope)의 맨 위로 끌어올리는 동작을 나타냅니다. 이 동작은 코드 실행 전에 자동으로 수행되며, 프로그램 실행 중에는 실제로 코드가 작성된 순서와 다를 수 있습니다.

호이스팅의 핵심 개념은 다음과 같습니다:

  1. 변수 호이스팅: 변수 선언은 해당 범위의 맨 위로 끌어올려집니다. 이것은 변수를 선언하기 전에 변수를 사용할 수 있게 해줍니다. 그러나 변수의 초기화(값 할당)는 호이스팅되지 않습니다. 초기화는 변수가 선언된 위치에서 이루어집니다.

예를 들어, 다음 JavaScript 코드를 살펴보겠습니다:

console.log(x); // undefined
var x = 5;

위의 코드에서 변수 x는 선언 전에 사용되었지만 호이스팅으로 인해 오류가 발생하지 않습니다. 그러나 변수 x의 값은 아직 할당되지 않았으므로 undefined가 출력됩니다.

  1. 함수 호이스팅: 함수 선언도 해당 범위의 맨 위로 끌어올려집니다. 이것은 함수를 선언하기 전에 함수를 호출할 수 있게 해줍니다.

예를 들어:

sayHello(); // "Hello, World!"

function sayHello() {
  console.log("Hello, World!");
}

위의 코드에서 sayHello 함수는 함수가 선언되기 전에 호출되었지만 호이스팅으로 인해 정상적으로 동작합니다.

호이스팅은 코드를 이해하고 디버깅하는 데 중요한 역할을 합니다. 그러나 호이스팅은 변수와 함수 선언만을 끌어올리며, 변수의 초기화나 함수 내부의 코드는 호이스팅되지 않으므로 주의해야 합니다. 코드를 읽고 이해할 때는 실제 실행 순서와 호이스팅된 순서를 구분해야 합니다.