연산자란 ?

연산자는 변수나 상수에 미리 약속된 연산을 행하기 위해 사용되며, 연산되는 항의 개수 따라 이항 연산자(binary operator), 단항 연산자(unary operator)등으로 나누어진다.

 

연산자

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b, c;

// +, -, *, /, %, ++, --

c = 10 / 0; 
console.log(c); // Infinity : 무한대를 나타내는 숫자
if(c === Infinity) {
	console.log('0으로 나누었습니다.');
}


a = 2;
b = 10;
c = a ** b; // 거듭 제곱
console.log(c); // 1024

c = 2 ** 3 ** 2; // 2 ** (3 ** 2)과 동일. 우결합성
console.log(c); // 512

// c = -2 ** 2; // 에러. 모호한 표현은 허용하지 않음

// 문자열 결합
a = "seoul";
b = "korea";
c = a + b ;
console.log(c);

a = 10;
b = "5";
c = a + b ; // 숫자 + 문자 => 문자 + 문자 => 문자
console.log(c); // 105
</script>
</head>
<body>

<h3>연산자</h3>

</body>
</html>

 

연산자 - 비교 연산자

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = '123';
b = 123;

console.log(a == b); // true
console.log(a === b); // false(동치). 두 값을 비교할 때는되도록이면 ===을 사용할 것을 권장

console.log(a != b); // false
console.log(a !== b); // true(동치가 아닐 경우 참)

</script>
</head>
<body>

<h3>연산자 - 비교 연산자</h3>

</body>
</html>

 

연산자 - 논리

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = "";

// 값이 "", 0, null, undefined, NaN 등은 거짓이다.
if(a) {
	console.log("참...")
} else {
	console.log("거짓...")
}

a = 0;
if(a) {
	console.log("true...")
} else {
	console.log("false...")
}
// 값이 있으면 true 로 생각함.
a = "html" && "css";
console.log(a); // css

a = "html" && true;
console.log(a); // true

a = false && "css";
console.log(a); // false

a = "html" || "css";
console.log(a); // html

a = "html" || true;
console.log(a); // html

a = false || "css";
console.log(a); // css

a = 0 || "css";
console.log(a); // css

a = 10 || "css";
console.log(a); // 10

</script>
</head>
<body>

<h3>연산자 - 논리</h3>

</body>
</html>

논리연산은 단축연산을 기억할 것

 

리터널은 데이터 그 자체를 의미하며, 변수에 넣는 변하지 않는 데이터이다.

스크립트에 부여한 고정 값으로, 변수가 아니다.

 

리터널

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a;

a = 13; // 10진수
console.log(a);

a = 013; // 8진수
console.log(a); // 11

a = 0x13; // 16진수
console.log(a); // 19

a = 0b1001; // 2진수
console.log(a); // 9

a = 3.141592;
console.log(a); // 부동 소수점

a = 3.1E+12;
console.log(a); // 부동 소수점

a = 'seoul'; // 문자열 리터널
console.log(a);

a = "seoul"; // 문자열 리터널
console.log(a);

a = "c:\\temp"; // 문자 이스케이프
console.log(a);

a = "subject : \"java\", price:1000";
console.log(a); // 문자 이스케이프

a = 'subject : "java", price:1000';
console.log(a); 

a = /ab+c/; // 정규식 리터널
console.log(a);

a = ["html", "css", "javascript"]; // 배열 리터널
console.log(a); 

a = {name:"홍길동", age:20}; // 객체 리ㅓ널
console.log(a);

var x = "홍";
var y = "길동";
var msg;

msg = `안녕하세요 ${x} ${y}님`; // 템플릿 리터널(${}표현식으로 처리된 값을 문자열로 반환)
		// 템플릿 리터널은 반드시 백틱(`)을 사용하며 ' 또는 "를 사용하지 않는다.
console.log(msg);


</script>



</head>
<body>

<h3>리터널(liternal)</h3>

</body>
</html>

 

상수란 ?

- const 키워드로 읽기 전용 상수를 만들 수 있다.

- 상수 식별자의 구문은 변수 식별자와 같다.

 

특징

- 상수는 스크립트가 실행 중에는 대입을 통해 값을 바꾸거나 재 선언될 수 없으며, 선언 시 값으로 초기화해야 한다.

- 상수에 대한 범위 규칙은 let 블록 범위 변수와 동일하다.

- const 키워드가 생략된 경우에는, 식별자는 변수를 나타내는 것으로 간주한다.

- 상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없다.

- 상수에 할당된 객체의 속성 및 배열의 내용은 보호되지 않는다.

 

상수

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
const PI = 3.141592;
// const sub = 10; // 에러:const 이름과 함수명은 동일 할 수 없다.

function sub() {
	console.log(PI);
	
	// PI = 3.14; // 에러:TypeError-값 변경 불가
	
	const x = 10;
	// var x = 5; // 에러:SyntaxError 상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언 불가

	// const a; // 에러:SyntaxError 상수는 선언과 동시에 초기화 해야 함.
	
	if(true) {
		const a=10; // const는 let 블록 범위 변수와 동일하므로 if()에서만 유효
	}
	
	var a=100;
	console.log(a);
	
	// 상수로 선언된 객체의 속성 및 배열의 내용은 보호 하지 않는다. (변경이 가능하다.)
	const arr = ['HTML', 'CSS']; // 배열
	arr.push('JavaScript'); // 배열 뒤에 요소 추가
	console.log(arr); // (3) ['HTML', 'CSS', 'JavaScript']
	
	const obj = {'subject':'java'}; // 객체 {속성:값}
	console.log(obj.subject); // java
	obj.subject = 'HTML'; // 가능
	console.log(obj.subject); // HTML
	
}


sub();
</script>

</head>
<body>

<h3>상수-const</h3>

</body>
</html>

 

데이터 형

- 최선 ECMAScript 준은 7가지 데이터 형을 정의한다.

(1) 6가지 원시 데이터 형

 · Boolean : true와 false

 · null : null 값을 나타내는 특별한 키워드

 · undefined : 값이 저장되어 있지 않은 최상위 속성

 · Number : 정수 또는 실수형 숫자

 · String : 문자열 

 · Symbol : (ECMAScript 6에 도입) 인스턴스가 고유하고 불변인 데이터 형

(2) Object : 객체

- 객체와 함수는 언어의 다른 기본 요소이다. 객체는 값을 위한 컨테이너, 함수는 어플리케이션이 수행할 수 있는 절차로 생각할 수 있다.

 

데이터 타입

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a, b;

b = '자바'; // string - 문자열
a = typeof(b);
console.log(a);

b = 50; // number - 숫자
a = typeof(b);
console.log(a);

b = true; // boolean - 논리형
a = typeof(b);
console.log(a);

b = function() { }; // function - 함수도 스크립트에서는 객체
a = typeof(b);
console.log(a);

b = { }; // object - 객체
a = typeof(b);
console.log(a);

b = null; // object - null은 반객체를 참조하는 특별한 값
a = typeof(b);
console.log(a);

var x;
a = typeof(x); // undefined - 값이 초기화되지 않는 변수는 underfined 타입이다.
console.log(a);
console.log(x); // 값이 초기화되지 않는 변수의 값은 undefined 이다.
				// undefined는 타입이자 값이다.
				
a = typeof(y); // undefined - 정의하지 않은 변수는 undefined 타입이다.
console.log(a);

</script>
</head>
<body>

<h3>데이터 타입</h3>

</body>
</html>

 

데이터 타입 - null

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = null;
var b;

b = typeof a;
console.log(b); // null의 타입은 object

// 변수가 null인지 확인 하는 방법
b = a === null; // === : 일치 연산자
console.log(b); // true

</script>
</head>
<body>

<h3>데이터 타입 - null</h3>

</body>
</html>

 

자료형 변환

- Javascript는 동적 형 지정 언어로 변수를 선언할 때 데이터 형을 지정할 필요가 없다.

- 데이터 형이 스크립트 실행 도중 필요에 의해 자동으로 변환된다.

 

자료형 변환

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a;

a = 10 + '20'; // 숫자 + 문자 => 문자 + 문자 => 문자열로 형변환 됨(+는 문자 우선)
				// 문자 + 숫자 => 문자 + 문자
console.log(a); // 1020

a = 20 - '15'; // "숫자 연산자 문자" 에서 "+" 이외는 문자는 숫자로 형변환 됨
console.log(a) // 5

a = 20 * '10'; // 문자가 숫자로 형변환 되어 연산 됨
console.log(a) // 200

</script>
</head>
<body>

<h3>형변환</h3>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a, b;

a = "123";
console.log(typeof(a));

b = a + 10;
console.log(b); // 12310

a = Number(a); // Number() 함수를 이용한 문자열을 숫자로 변환
console.log(typeof(a)); // Number
b = a + 10;
console.log(b); // 133

a = String(a); // String() 함수를 이용하여 숫자를 문자열로 변환
console.log(typeof(a));

a = "true";
console.log(typeof(a)); // String

a = Boolean(a); // Boolean() 함수를 이용하여 문자열을 boolean으로 변환
console.log(typeof(a)); // boolean

</script>

</head>
<body>

<h3>형변환</h3>

</body>
</html>

 

 

변수 (Variable)

- 어플리케이션에서 값에 상징적인 이름으로 변수를 사용한다.

 

전역 변수 : 함수의 바깥에서 선언한 수로, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있다.

지역 변수 : 함수 내부에서 선언한 변수로, 변수를 선언한 함수 내에서만 사용할 수 있다.

 

변수 선언

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = 10, b = 20, c;

console.log(c); // undefined - 초기값을 부여하지 않는 경우

// c = a + x; // ReferenceError 예외 발생
c = a + b;
console.log(c);
</script>

</head>
<body>

<h3>자바스크립트-변수 선언</h3>

</body>
</html>

 

변수 범위

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a=10; // 전역 변수

function fun() { // 함수 선언
	console.log(a); // 10
	
	if(true) {
		var x=5; // var로 선언한 변수의 범위는 if() 블록이 아니라 x가 선언된 함수이다.
	}
	console.log(x); // 5. 
	
	if(true) {
		let y=10; // let로 선언한 변수의 범위는 if() 블록이다.
	}
	// console.log(y) //ReferenceError
}

// 함수 호출
fun();
</script>
</head>
<body>

<h3>자바스크립트-변수 범위</h3>

</body>
</html>

 

변수 호이스팅(hoisting)

- 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 

- 변수가 함수 내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다.

 

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function sub() {
	// console.log(a); // 에러 : ReferenceError
	console.log(x); // undefined. 자바스크립트는 나중에 선언한 변수를 참조 할 수 있다.
	var x = 3;
	console.log(x); // 3
	
/*
	// 위는 아래와 동일
	var x;
	console.log(x);
	x = 3;
	console.log(x);
*/
}

sub();

</script>
</head>
<body>

<h3>변수-호이스팅(hoisting)</h3>
<p>
 호이스트는 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미
</p>

</body>
</html>

 

Javascript란?

- 자바스크립트는 객체 기반의 스크립트 언어이다.

- 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.

- 자바스크립트는 HTML문서에 적용될 때, 웹사이트상에서 동적 상호 작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어이다.

- Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다.

- 컴퓨터나 스마트 폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.

- 자바스크립트는 1995년에 넷프케이프(Netscape)의 브레던 아이크(Brendan Eich)에 의해 개발되었다.

 

HTML과 CSS 그리고 Javascript

- HTML : 제공할 웹 콘텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동여상 등으로 정의하고 부여하는 마크업 언어이다.

- CSS : 배경색, 폰트 등의 레이아웃 등을 지정하여 HTML 콘텐츠를 꾸며주는 스타일 규칙 언어이다.

- Javascript : 동적으로 콘텐츠를 바꾸고, 멀티미디어를 다루며, 움직이는 이미지 등을 구현한다. 즉 웹의 동작을 구현한다.

 

자바스크립트 특징

- 자바스크립트는 객체 기반의 스크립트 언어이다.

- 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.

- 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

 

스크립트 언어 ?

- 기존에 이미 존재하는 소프트웨어(애플리케이션)를 제어하기 위한 용도로 쓰이는 언어

- 인터프리터 형식의 언어

- 수정이 빈번하게 발생하는 부분은 소스코드를 한 줄 씩 읽어 바로 실행하는 인터프리터 방식이 유리하므로, 스크립트 언어는 이런 부분에 사용하기 위해 나온 언어이다.

- 스크립트 언어는 Client side Scripting과 Server side Scripting 언어로 나눌 수 있다.

 

Client side Scripting

- 사용자의 컴퓨터에서 작동되는 스크립트 코드이다.

- 웹 페이지에 포함된 스크립트로, 클라이언트 측 코드가 사용자의 컴퓨터로 다운로드 되고 브라우저가 이를 실행한다. 이러한 자바시크립트 모듈을 정확히는 클라이언트 측 자바스크립트라고 한다.

 

Server side Scripting 

- 서버에서 작동되고, 그 결과가 사용자의 브라우저에 넘어가 표시된다.

- Node.js란 환경을 통해 서버 측에서도 자바스크립트가 사용 가능하다.

 

자바스크립트 구현

코어(ECMAScript)

- 자바스크립트의 핵심 기능

 

문서 객체 모델(DOM : Document Object Model)

- 웹 페이지 콘텐츠를 조작하는 메소드와 인터페이스 제공

- XML을 HTML에서 사용할 수 있도록 확장된 애플리케이션 프로그래밍 인터페이스

- DOM은 문서를 표현하는 트리를 생성하고 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 추가, 수정, 제거할 수 있다.

 

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

- 브라우저와 상호작용하는 메소드와 인터페이스 제공

- 웹 브라우저와 관련된 객체의 집함

- BOM을 이용하면 브라우저 창에 접근하고 조작할 수 있다.

 

그리드 레이아웃이란 ?

- 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는데 아주 탁월하다.

- 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있다.

- 테이블과 달리 CSS 그리는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있다. 

 

 

 

grid-template-rows

grid-template-columns

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width 안에 border과 padding이 포함됨 */
}

.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #ddd;
	border-radius: 10px;
	
	display: grid;
	
	/* 명시적으로 행/열의 크기를 지정 */	
	grid-template-rows: 100px auto 100px; /* 총 3행 / 1, 3행은 100px를 줌 */
	grid-template-columns: 100px auto; /* 총 2열 / 1열은 100px를 줌 */
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center; /* 수직의 가운데 */
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

</body>
</html>

 

grid-template-areas

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width 안에 border과 padding이 포함됨 */
}

.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #ddd;
	border-radius: 10px;
	
	display: grid;
	
	/* 영역 이름을 참조해 템플릿 생성 */
	grid-template-rows: 100px auto 100px; /* 총 3행 / 1, 3행은 100px를 줌 */
	grid-template-columns: 100px auto; /* 총 2열 / 1열은 100px를 줌 */
	grid-template-areas: 
		"header  header"
		"nav body"
		"footer footer";
	
	font-weight: 900;
	font-size: 25px;
}

.header {
	grid-area : header;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}

.nav {
	grid-area : nav;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}

.body {
	grid-area : body;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}

.footer {
	grid-area : footer;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<header class="header">HEADER</header>
	<nav class="nav">NAV</nav>
	<article class="body">BODY</article>
	<footer class="footer">FOOTER</footer>
</div>

</body>
</html>

 

grid-template

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width 안에 border과 padding이 포함됨 */
}

.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #ddd;
	border-radius: 10px;
	
	display: grid;
	
	grid-template: repeat(3, auto) / repeat(2, auto);
	/* grid-template: repeat(3, 200) / repeat(2, 300); */
	/* 행 수가 3개 width는 auto, 열 수가 2개 height는 auto */
	gap: 10px; /* row-gap: 10px; column-gap: 10px; */
	/* 요소와 요소 사이의 공간 */
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center; /* 수직의 가운데 */
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

</body>
</html>

 

grid-auto-rows

grid-auto-columns

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width 안에 border과 padding이 포함됨 */
}

.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #ddd;
	border-radius: 10px;
	
	display: grid;
	
	/* 명시적으로 2개의 행과 2개의 열 크기 명시 */
	grid-template-rows: 200px 200px;
	grid-template-columns: 150px 150px;
	/* 암시적인 행, 열의 크기를 정의 */
	grid-auto-rows: 100px;
	grid-auto-columns: 100px;
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center; /* 수직의 가운데 */
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

/* item요소들 중에 5번째 요소 */
.item:nth-child(5) { /* 아이템 배치 */
	grid-row: 3/4; /* start-line / end-line */
	grid-column: 3/4;
}

/* .item :nth-child / item의 자손요소중 5번째 요소*/

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

</body>
</html>

 

repeat, fr

grid-auto-flow

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width 안에 border과 padding이 포함됨 */
}

.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #ddd;
	border-radius: 10px;
	
	display: grid;
	
	grid-template-rows: repeat(3, 1fr); /* 1/3 의 의미 */
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: row dense; /* 각 행 축을 따라 차례로 배치. 빈 영역을 메움 */
	/* grid-auto-flow: column dense; */
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center; /* 수직의 가운데 */
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

.item:nth-child(2) {
	grid-column:span 3; /* 3칸에 출력 */	
}
</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

</body>
</html>

 

grid-row

grid-column

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width 안에 border과 padding이 포함됨 */
}

.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #ddd;
	border-radius: 10px;
	
	display: grid;
	
	grid-template-rows: repeat(4, 1fr);
	grid-template-columns: repeat(3, 1fr);
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center; /* 수직의 가운데 */
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }
.item7 { background: rgb(169,80,255); }
.item8 { background: rgb(95,95,95); }
.item9 { background: rgb(240,0,0); }

.item1 {
	grid-column:1/4;
}
.item2 {
	grid-row:2/4;
}
.item3 {
	grid-column:2/span2; /* 2열부터 두 칸 */
}
.item6 {
	grid-column:1/span3; /* 1열부터 세 칸 */
}

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

</body>
</html>

 

 

auto-fill

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width 안에 border과 padding이 포함됨 */
}

.container {
	width: 800px;  /* 이게 없으면 알아서 조정 */
	margin: 50px;
	border-radius: 10px;
	
	padding: 20px;
	border: 1px solid #99e9f2;
	background: #e3fafc;
	
	display: grid;
	grid-gap: 40px;
	
	grid-template-rows: minmax(100px, auto);
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	/* auto-fill: 행열의 개수를 자동으로 조정. 남는 공간은 그대로 유지 */
	grid-auto-flow: dense;
}

.container .item {
	border: 1px solid blue;
	border-radius: 3px;
	background: #99e9f2;
	font-size: 250%;
	color: #fff;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.container .item:nth-child(1) {
	grid-row-end: span 2;
}

.container .item:nth-child(2) {
	grid-row-end: span 3;
}

.container .item:nth-child(4) {
	grid-row-end: span 3;
}

.container .item:nth-child(5) {
	grid-column-end: span 2;
}


</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

</body>
</html>

 

방법-1

display:block을 사용한다.

 

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	padding: 0; margin: 0;
}

header {
	position: fixed;
	top: 0; left: 0; right: 0; 
	/* right 0은 오른쪽 끝까지 간다는 뜻아니면 width 100% 로 줘도됨! */
	
	color: white;
	background: darkblue;
}

header>nav>ul>li {
	list-style: none;
	display: inline-block;
}

header>nav>ul>li>a {
	display: block;
	text-decoration: none;
	padding: 10px 20px;
	color: white;
	font-weight: 700;
}

header>nav>ul>li>a:hover {
	background: #03f;
	font-weight: 700;
}

main {
	min-height: 1500px;
	padding-top: 40px;
}

footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

</style>

</head>
<body>

<header>
	<nav>
		<ul>
			<li><a href="#">홈</a></li>
			<li><a href="#">메뉴-1</a></li>
			<li><a href="#">메뉴-2</a></li>
		</ul>
	</nav>
</header>

<main>
	<h3>display:flex를 사용하지 않고 메뉴바를 화면에 고정</h3>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
</main>

<footer>
	<p>footer 영역</p>
</footer>

</body>
</html>

 

방법-2

float:left 를 사용한다.

더보기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	padding: 0; margin: 0;
}

header>nav {
	width: 100%;
	background: darkblue; 
	position: fixed;
}

header>nav>ul {
	list-style: none;
}

header>nav>ul>li {
	width: 100px; height: 50px; line-height: 50px;
	text-align: center;
	float: left;
}

header>nav>ul>li>a {
	color: white;
	text-decoration: none;
}
header>nav>ul>li:hover, header>nav>ul>li:active {
	background: blue;
}

main {
	min-height: 1100px;
	clear: both;
	padding-top: 55px;
}

footer {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

</style>

</head>
<body>

<header>
	<nav>
		<ul>
			<li><a href="#">홈</a></li>
			<li><a href="#">메뉴-1</a></li>
			<li><a href="#">메뉴-2</a></li>
		</ul>
	</nav>
</header>

<main>
	<h3>display:flex를 사용하지 않고 메뉴바를 화면에 고정</h3>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
	<p>메인 영역</p>
</main>

<footer>
	<p>footer 영역</p>
</footer>

</body>
</html>

 

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0924_Javascript : 개요  (0) 2021.09.25
0923_CSS : Grid Layout  (0) 2021.09.23
0923_CSS : flex 속성  (0) 2021.09.23
0923_CSS : columns 다단  (0) 2021.09.23
0923_CSS : clip  (0) 2021.09.23

+ Recent posts