자료형 지정이 없어 모든 자료형(숫자, 문자열, 함수, Boolean, undefined, 객체)이다. 데이터로 저장가능(자바의 컬렉션과 비슷)
let 변수명 = [ 값1(숫자), 값2(문자), 값3(객체), 함수 … ] ;
▼ 코드 예시 보기 ▼
<h1>배열</h1>
<h3>배열이란?</h3>
<p>
자바 스크립트에서는 "모든 자료형"을 보관하는 변수의 모음을 배열로 처리한다. <br>
자바에서의 컬렉션과 유사하다.
</p>
<script>
function test1() {
let arr = ['홍길동', 20, true, [1, 2, 3, 4]];
// 배열출력
console.log(arr);
// 문자열과 더해지면서 toString()호출하여
// "," 기준으로 합쳐진 문자열이 반환됨
console.log('arr : ' + arr);
console.log(arr.length);
//인덱스로 접근
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
// 배열 안의 배열 인덱스 접근
console.log(arr[3][0]);
console.log(arr[3][1]);
console.log(arr[3][2]);
console.log(arr[3][3]);
}
// test1();
</script>
배열 선언
new연산자와 Array객체를 통한 배열 선언
배열 크기 정하지 않고 선언 / 배열 크기를 정하는 선언
배열의 크기를 정하지 않는 배열 선언
let 변수명 = new Array();
배열의 크기를 정한 배열 선언
let 변수명 = new Array(개수);
▼ 코드 예시 보기▼
<h3>배열의 선언</h3>
<p>
배열 선언 시 배열의 크기를 정하거나,
정하지 않고 선언할 수 있다.
</p>
<script>
function test2() {
//new Array()로 배열생성
let arr1 = new Array();
let arr2 = new Array(3);
// 배열 출력
console.log(arr1);
console.log(arr2);
// 배열 길이 출력
console.log(arr1.length);
console.log(arr2.length);
// 배열길이가 101이 된다.
// length는 요소 내 개수가 아니라 가장 큰 인덱스에
// 1을 더한 값이 된다.
// 즉 마지막 배열 + 1 = length
arr2[100] = '테스트';
console.log(arr2);
console.log(arr2.length);
// length에 0을 기록하면 값 삭제도 가능하다.
arr2.length = 0;
console.log(arr2);
// 배열에 값 대입
arr1[0] = '바나나';
arr1[1] = '복숭아';
arr1[2] = '키위';
console.log(arr1);
// new 연산자 활용한 초기화
let arr3 = new Array('홍길동', '임꺽정', '신사임당');
console.log(arr3);
// 대괄호를 활용한 초기화
let arr4 = ['java', 'oracle', 'html5', 'css3'];
console.log(arr4);
}
test2();
</script>
배열 초기화
new연산자를 활용한 초기화
‘[ ]’를 활용한 초기화
배열에 값 대입
값을 입력 시에 index번호 활용
번호 범위 : 0 ~ (지정한 크기-1)
배열에 값 대입
변수에 배열 값 대입
배열 순회
일반 for문
for of문
▼ 코드 예시 보기▼
<h3>배열 순회</h3>
<p>
일반 for문, for of문 등을 사용할 수 있다.
</p>
<script>
function test3() {
let arr = ['java', 'oracle', 'html5', 'css3', 'javascript'];
//for문 이용
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// for of 문 이용 - 자바에서의 향상 for
for(let subject of arr) {
console.log(subject);
}
}
test3();
</script>
Array객체 메소드
요소 추가/제거
▼ 코드 예시 보기▼
<h3>배열 객체의 메소드</h3>
<p>
배열도 하나의 객체이기 때문에
배열에서 활용할 수 있는 메소드들이 있다.
</p>
<h3>요소 추가/제거</h3>
<h4>push : 배열의 맨 뒤에 요소 추가
, pop : 배열의 맨 뒤에 요소 제거</h4>
<script>
function test4 () {
let arr = ['짜장면', '짬뽕', '우동'];
console.log('push 전 arr : ' + arr);
//arr.push('탕수육');
//arr.push('양장피');
arr.push('탕수육', '양장피');
console.log('push 후 arr : ' + arr);
console.log('arr.pop() : ' + arr.pop());
console.log('arr.pop() : ' + arr.pop());
console.log('arr.pop() : ' + arr.pop());
console.log('pop 후 arr : ' + arr);
}
//test4();
</script>
<h4>shift : 배열의 맨 앞 요소 제거 후 반환,
unshift : 배열의 맨 앞에 요소 추가
</h4>
<script>
function test5 () {
let arr = ['양념치킨', '후라이드', '파닭'];
console.log('unshift 전 arr : ' + arr);
//arr.unshift('간장치킨');
//arr.unshift('마늘치킨');
arr.unshift('간장치킨', '마늘치킨');
console.log('unshift 후 arr : ' + arr);
console.log('arr.shift() : ' + arr.shift());
console.log('arr.shift() : ' + arr.shift());
console.log('arr.shift() : ' + arr.shift());
console.log('shift 후 arr : ' + arr);
}
//test5();
<h4>slice : 배열의 요소 선택 잘라내기,
splice : 배열의 index 위치의 요소 제거 및 추가
</h4>
<script>
function test6(){
let arr = ['Java', 'HTML', 'CSS', 'JavaScript'];
console.log('arr : ' + arr);
// slice(시작 인덱스, 종료 인덱스)
// 원본 배열에 영향을 미치지 않음
console.log('arr.slice(2, 4) : ' + arr.slice(2, 4));
console.log('arr : ' + arr);
// splice(index, 제거수, 추가값1, 추가값2, ...)
// 제거 된 값을 리턴하며 원본 배열에 영향을 미침
console.log('arr.splice(2, 1, "Servlet") : ' + arr.splice(2, 1, "Servlet"));
console.log('arr : ' + arr);
}
test6();
</script>
<h4>concat : 두 개 이상의 배열을 결합</h4>
<script>
function test7 () {
let arr1 = ['아이유', '블랙핑크', '오마이걸'];
let arr2 = ['트와이스', '에스파'];
// 배열명.concat(배열명1, 배열명2, ...)
let arr3 = arr1.concat(arr2);
let arr4 = arr2.concat(arr1, arr3);
console.log('arr1 : ' + arr1);
console.log('arr2 : ' + arr2);
console.log('arr1 기준으로 arr2 배열을 합친 arr3 : ' + arr3);
console.log('arr2 기준으로 arr1, arr3 배열을 합친 arr4 : ' + arr4);
}
test7();
</script>
forEach() 메소드
-> 배열변수.forEach(function(item, index, array){
// 배열 요소 각각에 실행할 기능 작성
});
item : 처리할 현재 요소
index: 처리할 현재 요소의 인덱스
array: forEach()를 호출한 배열
▼ 코드 예시 보기▼
<h3>배열 forEach</h3>
<p>
배열.forEach(function(item, index, array){
// 배열 요소 각각에 실행할 기능 작성
});
</p>
<script>
function test8 () {
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array){
console.log(item + " " + index + " " + array);
});
// 각 요소 별로 * 10 한 값을 콘솔에 출력
arr.forEach(item => console.log(item * 10));
}
test8();
</script>
Array객체 메소드
배열 탐색/배열 변형
▼ 코드 예시 보기▼
<h3>배열 탐색</h3>
<h4>indexOf : 배열에서 요소가 위치한 인덱스를 리턴,
lastIndexOf : 배열의 요소가 위치한 마지막 인덱스를 리턴,
includes : 배열에 해당 요소 포함 여부 리턴
</h4>
<script>
function test9 () {
let arr = ['물회', '삼계탕', '냉면', '수박', '물회'];
console.log("arr.indexOf('물회') : " + arr.indexOf('물회'));
console.log("arr.indexOf('물회', 1) : " + arr.indexOf('물회', 1));
console.log("arr.indexOf('삼겹살') : " + arr.indexOf('삼겹살'));
console.log("arr.lastIndexOf('물회') : " + arr.lastIndexOf('물회'));
console.log("arr.lastIndexOf('삼겹살') : " + arr.lastIndexOf('삼겹살'));
console.log("arr.includes('물회') : " + arr.includes('물회'));
console.log("arr.includes('삼겹살') : " + arr.includes('삼겹살'));
}
test9();
</script>
<h3>배열 변형</h3>
<p>
map : 배열 요소 전체를 대상으로 함수 호출 후 결과 배열로 반환
</p>
<p>
배열.map(function(item, index, array){
// 배열 요소 각각에 반환할 새로운 값
});
</p>
<script>
function test10(){
let types = [true, 1, 'text'].map(item => typeof item);
console.log(types);
let lengths = ['apple', 'banana', 'cat', 'dog', 'egg'].map(item => item.length);
console.log(lengths);
}
test10();
</script>
<h4>sort : 배열을 정렬 기준으로 정렬, reverse : 배열의 순서를 뒤집음</h4>
<p>
* sort, reverse 수행 시 원본 데이터의 순서 자체가 변함
</p>
<script>
function test11 () {
let arr = [];
for(let i = 0; i < 10; i++) {
arr[i] = Math.floor(Math.random() * 100) + 1;
}
console.log('정렬 전 arr : ' + arr);
// 오름차순 정렬이 기본이며 정렬 후 정렬 순서를 유지함
// 배열은 기본적으로 문자열 정렬이 되므로 한자리수, 세자리수가
// 올바르지 않게 정렬 되는 모습을 확인할 수 있음
// => 다른 정렬 기준을 사용하려면 매개변수로 compare 함수 전달
arr.sort();
console.log('정렬 후 arr : ' + arr);
// 숫자 오름차순 정렬
arr.sort(compare);
console.log('매개변수로 compare 함수 전달하여 숫자 오름차순 정렬');
console.log(arr);
// 숫자 내림차순 정렬
// arr.sort(function(a, b){
// return b - a;
// });
arr.sort((a, b) => b - a);
console.log('숫자 내림차순 정렬');
console.log(arr);
arr.reverse();
console.log('reverse 호출 후 arr : ' + arr);
}
function compare(a, b) {
if(a > b) return 1; // a와 b 순서 바꿈
if(a == b) return 0;
if(a < b) return -1; // a와 b 순서 안바꿈
}
//test11();
</script>
<h4>split : 문자열 구분자로 잘라 배열로 반환,
join : 배열을 구분자로 결합하여 문자열로 반환
</h4>
<script>
function test12(){
let arr = ['사탕', '초콜렛', '껌', '과자'];
console.log(arr);
console.log('arr.join() : ' + arr.join());
console.log('arr.join("/") : ' + arr.join("/"));
let str = arr.join("*");
console.log(str);
console.log('str.split("*") : ' + str.split("*"));
console.log(str.split("*"));
}
test12();
</script>
function키워드에 함수 명을 작성하여 사용하는 방법(함수 선언문)과 function에 함수 명 작 성하지 않고 변수에 대입하는 방법(함수 표현식)이 있음
function에 함수명 작성 방법(함수 선언문)
function 함수명([매개변수]){
처리 로직
[return 되돌려줄 값;]
}
function에 함수명 작성하지 않고 변수에 대입(함수 표현식)
let f1=function([매개변수]){
처리 로직
[return 되돌려줄 값]
}
▼ 코드 예시보기 ▼
<h1> 함수(Function) </h1>
<h3> 함수선언 (Function Declaration)과 호출 </h3>
<p>
메소드도 함수이기는 하지만 그 중 클래스에 정의된 것을 메소드라고 한다.
</p>
<script>
// function키워드 + 변수명 + (매개변수) + {중괄호}
function test1() {}
//다음과같이 선언
// function 키워드 선언후 반환형은 기재하지않는다.
function test1() {
//함수 본문 작성
alert('test1 함수실행!');
}
//선언된 함수 호출하는 법
test1();
</script>
<h3> 변수 범위 </h3>
<script>
function test2 () {
let local='local';
}
//Uncaught ReferenceError: local is not defined
// => 지역변수는 함수 외부에서 접근 불가
//console.log('test2 밖의 local : ' + local);
// 외부에서 지역변수로의 접근은 불가능하지만
// 지역변수에서 외부인 전역변수로의 접근은 가능하다.
// 즉, 밖에서 안을 참조할 수는 없지만 안에서 밖은 가능하다.
let outer = 'outer';
function test3 () {
console.log('test3 안의 outer : ' + outer);
outer = 'changed outer';
}
test3();
// test3 안의 outer : outer
// 접근 뿐 아니라 수정도 가능
console.log('test3 호출 후 outer : ' + outer);
// test3 호출 후 outer : changed outer
// 같은 이름을 가진 지역 변수와 외부 변수가 있을 경우
// 우선순위는 지역 변수가 높다.
let test = 'outer';
function test4(){
let test = 'local';
console.log('test4 안의 test : ' + test);
}
test4();
// test4 안의 test : local
console.log('test4 밖의 test : ' + test)
// test4 밖의 test : outer
</script>
함수 호출
함수는 반드시 선언(정의)가 되어야 만 실행가능
원하는 기능에 대한 함수를 호출하는 것 -> 함수 실행
return값이 있으면 리턴 값을 받을 변수가 있어야 한다.
return값이 없는 경우
함수명(); / 함수명(인자값1,인자값2 ...);
return 값이 있는 경우
let 변수명 = 함수명();
let 변수명 = 함수명(인자값1,인자값2 ...);
매개변수(전달인자)
호출하는 코드와 호출되는 함수를 연결해주는 변수는 매개 변수라 한다.
지정된 매개변수보다 많은 개수 선언하고 호출하는 것을 허용 -> 초과되는 매개변수는 무시
지정된 매개변수보다 적게 선언하고 호출하는 것도 허용 -> 선언이 안된 매개변수는 undefined로 자동 설정 된다.
▼ 코드 예시 보기▼
<h3>함수의 매개변수</h3>
<script>
function test5(value = "no value") {
/* 자바스크립트 함수는 타입을 지정하지않고
변수명만 작성하는 것에 유의한다. */
console.log('입력 된 메세지 : ' + value);
}
// 호출
test5(prompt("메세지를 입력하세요"));
입력 된 메세지 : 123456
// 지정된 매개변수보다 많은 개수를 전달하여서
// 호출하는 것도 가능하다. 단, 초과 된 전달인자는 무시된다.
// test5('안녕하세요', '반갑습니다');
// 값을 전달하지않았을때 = 값을 정의하지않음 = undefined
// 지정된 매개변수보다 적은 개수를 전달하며 호출하는 것도
// 가능하다. 단, 전달 되지않은 값은 undefined로 자동 설정
test5();
// 입력 된 메세지 : undefined (디폴트 x)
// 입력 된 메세지 : no value (디폴트 o)
// (value = "no value") 는 아무값도 입력되지않았을때를 대비한
// 디폴트값이다. 즉 매개변수 선언 시 기본값 설정도 가능하다.
</script>
return [되돌려줄 값]
return은 함수를 호출한 위치로 돌아가라는 의미
return값(되돌려줄 값)을 지정하지 않으면 undefined 자료형으로 반환된다.
▼ 코드 예시 보기▼
<h3>함수의 반환형</h3>
<script>
// return 문이 없거나
// return 지시자만 있는 함수는 undefined를 반환
// 1~100 사이의 랜덤 값을 반환하는 함수
function returnFunction(){
return Math.floor(Math.random() * 100) + 1;
}
function test6(){
for(let i = 1; i <= 10; i++) {
let random = returnFunction();
console.log('random' + i + " : " + random);
}
}
test6();
</script>
콜백함수(매개변수 함수)
다른 함수에게 매개변수로 넘겨준 함수
함수도 하나의 자료형으로 매개변수로 전달 가능
function 함수명(매개변수명){
매개변수명(); //호출;
}
▼ 코드 예시 보기▼
<h3>함수 표현식(Function Expression)</h3>
<script>
// 함수를 생성하고 변수에 값을 할당하는
// 것처럼 함수가 변수에 할당
let test7 = function () {
alert('함수 표현식!');
};
// 자바스크립트에서 함수는 값
console.log(test7);
// 함수 호출 시 변수명에 () 붙여서 호출
//test7();
// 함수 복사
let copy = test7;
// 복사한 함수 실행
//copy();
</script>
<h3>콜백 함수</h3>
<script>
function test8(func1, func2){
let name = func1();
let age = func2();
console.log('이름 : ' + name + ", 나이 : " + age);
}
function question1(){
return prompt("당신의 이름은 무엇입니까?");
}
function question2(){
return prompt("당신의 나이는 몇 살입니까?");
}
// 함수 question1과 question2를 test8 함수로 전달
// test8(question1, question2);
// 함수 표현식으로 작성한다면
//test8(function(){return prompt("당신의 이름은 무엇입니까?")},
//function(){return prompt("당신의 나이는 몇 살입니까?")});
</script>
▼ 코드 예시 보기▼
<h3>함수 선언문과 함수 표현식의 차이</h3>
<script>
// 선언문 위에서도 호출 가능
// 전역 함수는 스크립트 실행 전 초기화 단계에서 생성 되고
// 실행문은 함수 선언문이 모두 처리 된 후에 실행되므로
// 스크립트 내 어디에서든 호출 가능함
//test9();
// 함수 선언문
function test9 (){
alert('함수 선언문으로 선언 된 함수!');
}
// 함수 표현식으로 선언 된 함수는 스크립트 실행
// 흐름이 진행 될 때 생성 되므로 아직 생성 되지 않아
// 호출할 수 없음
//test10();
// 함수 표현식
let test10 = function () {
alert('함수 표현식으로 생성 된 함수!');
}
</script>
함수 표현식으로 선언 된 함수는 흐름이 진행 될 때 생성 되므로 아직 생성 되지 않아호출할 수 없음
화살표 함수
function 키워드, return 키워드 및 중괄호를 생략한 함수 표현식 작성을 위한짧은 구문을 허용하는 함수
함수명 = (매개변수) => 실행문;
▼ 코드 예시 보기▼
<h3>화살표 함수</h3>
<p>
화살표 함수는 function 키워드, return 키워드 및 중괄호를
생략한 함수 표현식 작성을 위한 짧은 구문을 허용한다.
</p>
<script>
let hello;
// 기존 function 정의
hello = function () {
return "Hello World!";
};
console.log(hello());
// function 키워드 생략
hello = () => {
return "Hello World!";
};
console.log(hello());
// return 키워드, 중괄호 생략
// (단, 명령문이 하나만 있는 경우)
hello = () => "Hello World!";
console.log(hello());
// 매개변수가 있을 경우
hello = (val1, val2) => "Hello " + val1 + val2;
console.log(hello('World', '!!!!'));
// 매개변수가 하나면 소괄호 생략 가능
hello = val => "Hello " + val;
console.log(hello('World!!!'));
</script>
<!----> <!--html 내 주석-->
<script>
// html 주석을 사용할 수 없다.
// JavaScript 한줄 주석
/*
JavaScript
여러줄 주석
줄 바꿈이 있다면 세미콜론 자동 삽입
*/
변수 선언/할당
<h1>변수와 자료형</h1>
<h3>변수 선언과 대입</h3>
<script>
//변수선언, 타입을 따로 작성하지않는다.
let str; //let은 선언 str은 변수명
//대입
str = '변수'; //홑따옴표, 쌍따옴표 둘다 가능
//alert로 출력
// alert(str);
//선언과 대입을 동시에
// let str = '이름';
// SyntaxError: Identifier 'str' has already been declared
// 같은 이름의 변수 재선언 불가
let name = '이름';
console.log(name);
</script>
변수 명명규칙
영어 대/소문자, 숫자 , _ , $ 사용가능
첫 글자 숫자 사용 불가
공백을 포함한 특수문자 사용 불가
이름에 의미있는 단어의 조합을 권장
예약어를 이름으로 사용 불가
두 단어 이상 결합 시 Camel표기법 권장
한글 이름 사용가능
생성자 함수의 이름은 항상 대문자로 시작
변수, 인스턴스, 함수, 메소드 이름은 항상 소문자로 시작
▼ 변수 명명 규칙 코드 예시 ▼
<h3>변수 명명 규칙</h3>
<ul>
<li>문자, 숫자, '$', '_' 사용가능</li>
<li>첫 글자는 숫자가 될 수 없다.</li>
<li>예약어 사용불가</li>
<li>카멜 표기법을 사용</li>
<li>한글 변수명은 권장하지않음</li>
</ul>
<script>
//유효한 변수명
let userName;
let number1;
let number_2;
let number$3;
// 유효하지 않은 변수명
// let 1number; 첫글자 숫자사용 불가
// let number#4; 다른 특수문자 사용불가
// 유효하나 권장하지 않음
// 되도록 영어로 네이밍 규칙을 지켜 작성
let 변수 = '변수입니다';
console.log(변수);
</script>
<h3>상수 선언과 대입</h3>
<script>
//const는 재할당 할 수 없다.
const PI = 3.141592; //상수라는 의미를 담아서 선언
// PI = 3.14;
// Uncaught TypeError: Assignment to constant variable.
// 재할당시 오류발생
console.log(PI);
// const는 선언과 동시에 할당해야 한다. 분리 선언 불가
//Uncaught SyntaxError: Missing initializer in const declaration
// const NUM;
// NUM = 123;
</script>
자료형
자바스크립트는 느슨한 타입 언어, 동적 언어로 변수의 타입을 미리 선언할 필요가 없으며 타입은 프로그램이 처리되는 과정에서 자동으로 파악됨
▼ 기본 자료형 코드 예시 ▼
<h4>원시 자료형 (primitive type)</h4>
<p>
기본자료형. 원시 자료형이 할당 될 때에는 변수에 값(value) 자체가 담긴다.
</p>
<ul>
<li>number</li>
<li>string</li>
<li>boolean</li>
<li>null</li>
<li>undefined</li>
</ul>
<script>
//숫자 : 정수 및 실수
let age = 20;
let height = 171.5;
console.log(age);
console.log(height);
// Infinity : 무한대 -> 출력됨
// 아래 두줄은 같은 결과이다.
console.log(1/0);
console.log(Infinity);
// NaN : not a number 출력, 숫자와 숫자끼리의 연산이 아닌경우
// 아래 두줄은 같은 결과이다.
console.log('문자'/2);
console.log(NaN);
// 문자열 : 따옴표로 묶음
// 문자 자료형은 따로 ㅇ벗음
let str2 = 'single';
let str3 = 'double';
console.log(str2);
console.log(str3);
// 논리값
let bool = true;
let bool2 = 1 == 2; // false
console.log(bool);
console.log(bool2);
// null
// 의도적 부여, 존재하지 않는 값, 알 수 없는 값, 비어있는 값
// 의도적으로 빈값이라고 표현하는 상태
let nullValue = null;
console.log(nullValue);
// undefined
// 값이 할당 되지 않은 상태
let undef;
console.log(undef);
// 명시적 undefined
let undef2 = undefined;
console.log(undef2);
</script>
▼ 참조 자료형 코드 예시 ▼
<h4>참조 자료형 (reference type) </h4>
<p>
원시자료형이 아닌것 <br>
참조자료형이 할당 될 때는
보관함의 주소 (reference) 가 담긴다.
</p>
<ul>
<li>Array</li>
<li>Object</li>
<li>function</li>
</ul>
<script>
//배열
let arr = [1, 2, 3, 4 ,5];
console.log(arr);
//객체
let user = {
name : "홍길동",
age : 30,
id : "user01"
};
console.log(user);
console.log(user.name);
console.log(user.age);
console.log(user.id);
</script>
데이터 출력방법
▼ 데이터 출력 코드예시 ▼
<h1>간단한 데이터 입출력</h1>
<h3>console.log()로 개발자 도구 콘솔 화면에 출력하기</h3>
<p>
개발자 도구 콘솔 화면에 출력을 하고자 할 때 사용하며,
주로 디버깅 시 사용된다.
</p>
<script>
console.log('콘솔 화면에 출력하기');
</script>
<h3>alert()로 메세지 출력하기</h3>
<p>
사용자가 확인 버튼을 누를 때까지
메세지를 보여주기 위해 사용한다.
</p>
<script>
alert('alert에 메시지 출력하기');
</script>
<h3>confirm()을 이용한 데이터 입력</h3>
<p>
어떤 질문에 예/아니오의 결과를
얻을 때 사용한다.<br>
확인버튼과 취소버튼이 나타나며
확인 버튼 클릭시 true,
취소 버튼 클릭스 또는 ESC 키를 누를 시
false를 리턴한다.
</p>
<script>
//let result = confirm('배고프면 확인, 아니면 취소를 누르세요.');
//console.log('result : ' + result);
</script>
<h3>prompt()을 이용한 데이터 입력</h3>
<p>
텍스트 필드와 확인/취소 버튼이 있는 대화상자를 출력하고
입력한 메세지 내용을 리턴값으로 돌려 받는다. <br>
취소 버튼 클릭시 null 을 리턴하며, 두 번째 인자로 default 값
설정도 가능하다.
</p>
<script>
let userName = prompt("당신의 이름은 무엇인가요?");
console.log('userName :' + userName);
// 두번 째 인자로 default 값 설정
let age = prompt('당신의 나이는 몇 살인가요?', 20);
console.log("age : " + age);
</script>
<p>
alert, confirm, prompt가 띄운 창이 떠 있는 동안은
스크립트 동작이 일시 정지하며 사용자가 창을 닫기 전까지는
나머지 페이지와 상호작용이 불가능하다. <br>
해당 창들은 브라우저 마다 다른 모양을 가지며
개발자가 수정 불가능한 요소이다.
</p>
형변환 : typeof()
값의 자료형을 확인하는 연산자
선언 시 자료형을 지정하지 않아 변수명을 보고 데이터를 확인불가, 자료형 확인 시 자주 사용
typeof(“문자열값”) 또는 typeof(‘문자열값‘)
string
typeof(숫자)
number
typeof(참/거짓)
Boolean
typeof(객체)
object
typeof(초기값이 없는 변수)
undefined
typeof(function)
function
데이터 형변환
문자형변환
숫자와 문자를 +연산하게 되면 문자가 우선되어 숫자를 문자로 변환
강제 형변환 : String() 함수 이용
▼ 문자형변환 코드 예시 ▼
<h3>문자형변환</h3>
<p>
자동형변환 :
alert 메소드의 매개변수는 문자형이므로
alert(value)에서 value가 다른 타입이면 문자형으로 자동 변환된다. <br>
또한 String(value) 함수 호출로 변환할 수도 있다.
</p>
<script>
console.log("===============문자형 변환================");
let str = false;
console.log(str);
// typeof 연산자를 통해 타입을 확인할 수 있음
console.log('typeof str : ' + typeof str); // 타입 확인
str = String(str); // 타입을 String으로 변환 (강제형변환)
console.log('typeof str : ' + typeof str); // String으로 변환된것 확인
</script>
숫자형변환
수학과 관련 된 함수와 표현식에서 자동으로 변환
강제 형변환 : Number() 함수 이용
▼숫자형 변환 코드 예시 ▼
<h3>숫자형변환</h3>
<p>
숫자형변환 :
수학과 관련 된 함수와 표현식에서 자동으로 변환된다. <br>
또한 Number(value) 함수 호출로 변환할 수도 있다.
</p>
<script>
console.log("===============숫자형 변환================");
console.log(' "10 / 2" : ' + "10" / "2");
//콘솔창에 ""을 출력하고 싶다면 ''로 구분해 감싸준다.
let number = "100";
console.log(number);
console.log('typeof number : ' + typeof number);
//숫자로 강제 형 변환 Number(변수);
number = Number(number);
console.log(number);
console.log('typeof number : ' + typeof number);
//공백 자동 제거 후 숫자 형변환도 가능하다.
console.log('Number(" 100 ") : ' + Number(" 100 "));
// NaN 이뜸 왜냐? 문자가 포함되어있기 때문에 숫자형변환 불가
console.log(' Number("123a") : ' + Number("123a"));
// boolean 형변환 가능, true는 1 false는 0으로 취급될 수 있다.
console.log(Number(true)); // 1
console.log(Number(false)); // 0
//null은 0으로 숫자취급하지만 undefined는 숫자취급하지않는다.
console.log(Number(null)); //0
console.log(Number(undefined)); // NaN
</script>
<h3>문자열과 숫자의 + 연산</h3>
<p>
문자열 + 숫자 = 문자열 <br>
숫자 + 숫자 + 문자열 = 숫자가 먼저 계산 되고 뒤의 문자열과 합쳐진다.
</p>
<script>
let test1 = 7 + 7;
let test2 = "7" + "7";
let test3 = "7" + 7;
let test4 = 7 + 7 + "7";
// +"7"와 같이 '+'를 이항 연산자가 아닌 단항연산자로 사용시
// 숫자형이 아닌 피연산자는 숫자형으로 변화한다.
let test5 = 7 + 7 + +"7";
console.log("=======문자열과 숫자의 '+' 연산=========")
console.log('7 + 7 : ' + test1); //14
console.log('"7" + "7" : ' + test2); //77
console.log('"7" + 7 : ' + test3); //77
console.log(' 7 + 7 + "7" : ' + test4); //147
console.log('7 + 7 + +"7" : ' + test5); //21
</script>
논리형변환
논리 연산 수행 시 발생
강제 형변환 : Boolean() 함수 이용
▼논리형변환 코드 예시 ▼
<h3>논리형변환</h3>
<p>
논리연산 수행시 발생한다. <br>
또한 Boolean(value) 함수 호출로 변환할 수도 있다.
</p>
<script>
console.log("===============논리형 변환================");
// 1과 0은 각각 true와 false의 값을 갖는다.
console.log('Boolean(1) : ' + Boolean(1)); //true
console.log('Boolean(0) : ' + Boolean(0)); // false
// 값이 있는 문자열 : true
console.log('Boolean("str") : ' + Boolean("str"));
// 값이 없는 문자열, null, undefinde -> false
console.log('Boolean("") : ' + Boolean(""));
console.log('Boolean(null) : ' + Boolean(null));
console.log('Boolean(undefined)' + Boolean(undefined));
</script>
연산자 : 연산자의 종류
연산자 우선순위
최우선 > 단항 > 산술 > 관계 > 논리 > 삼항 > 대입
비교 연산자를 통한 문자열 비교
비교 연산자로 문자열을 비교할 수 있음
사전 순(유니코드 순)으로 뒤쪽의 문자열은 앞쪽의 문자열보다 큼
▼ 비교연산자 코드 예시 ▼
<h3>비교 연산자를 통한 문자열 비교</h3>
<p>
비교 연산자로 문자열을 비교할 수 있다.
사전순 (유니코드순)으로 뒤쪽의 문자열은 앞쪽의 문자열보다 크다.
</p>
<script>
console.log("======문자열 비교 연산자 사용======");
console.log("'hello' == 'hello' : " + ('hello' == 'hello')); //true
console.log("'hello' != 'hello' : " + ('hello' != 'hello')); // false
// 유니코드 순으로 더 위에있는 b가 크다는 물음에 true 반환
console.log("'apple' < 'banana' : " + ('apple' < 'banana')); // true
console.log("'apple' > 'banana' : " + ('apple' > 'banana')); // false
// 유니코드 순 대문자가 더 앞에있으므로 상대적으로 뒤에있는 소문자가 더 크다.
console.log("'cat' <= 'Zoo' : " + ('cat' <= 'Zoo')); // true
console.log("'cat' >= 'Zoo' : " + ('cat' >= 'Zoo')); // false
</script>
<p>
그 외 삼항 연산자,
조건문 (if, if-else, if-else if else, switch문 ),
반복목 (for, while, do-while문) 등의 사용방법 모두
Java에서 학습한 방법과 동일하다.
</p>
<h3> 논리연산자를 이용한 짧은 조건문 </h3>
<p>
prompt로 숫자를 입력 받고 해당 값이 홀수이면 "홀수입니다."
라고 alert 창으로 출력하고, 해당 값이 짝수이면 "짝수입니다."
라고 alert창으로 출력한다.
(*if 문이 아니라 논리연산자 &&, || 의 특징 활용해서 작성)
</p>
<script>
/*
나의 작성답안
let Num = prompt("0이상의 숫자를 입력하세요.");
console.log('Num :' + Num);
if (Num % 2 == 0 && Num > 0) {
alert('짝수입니다.')
} alert ('홀수입니다.');
*/
let input = prompt("숫자를 입력하세요");
input % 2 == 0 || alert("홀수입니다.");
input % 2 == 0 && alert("짝수입니다.");
</script>
제어문
조건문
if, if ~ else, if ~ else ~if, switch문, 짧은 조건문(||, &&)
반복문
for, while, do~while, for in문
분기문
continue, break문
▼ var과 let의 차이 코드예시 보기 ▼
<h1>ECMAScript 6</h1>
<p>
ES6 및 EXMAScript 2015 라고도 하며
JavaScript의 두번째 주요 개정판 (2015년)을 말함
</p>
<h3>let, const</h3>
<p>
ES5 까지는 모든 변수를 var 라는 예약어로 선언했으나
ES6 문법에서는 let 과 const를 사용한다. <br>
ES5까지는 "전역 범위"와 "함수 범위"라는
두 가지 유형의 범위만 있었지만
ES6에서는 "블록범위" 변수 (및 상수)를 제공한다. <br>
즉 차이는 어디서부터 어디까지 유효한지의 "범위(scope)"이다.
</p>
<script>
//선언 범위 테스트
var x = 1;
let y = 2;
console.log('블럭 밖 x = ' + x);
console.log('블럭 밖 y = ' + y);
// script 바로 밑에선언한 변수는 전역변수
{
// script 바로 밑에선언한 변수는 지역변수
var x = 3;
let y = 4;
console.log('블럭 안 x = ' + x);
console.log('블럭 안 y = ' + y);
}
console.log('블럭 밖 x = ' + x);
console.log('블럭 밖 y = ' + y);
/*
var는 블록 범위를 가질 수 없고
let은 블록 범위를 가질 수 있다.
var는 블록 내부의 변수를 다시 선언하면
블록 외부의 변수도 다시 선언되는 문제가 있으니
let은 블록 내부의 변수를 다시 선언해도
블록 외부의 변수는 다시 선언되지않는다.
*/
/* loop 블록 안의 변수로 사용했을때 차이가 더 드러난다.
let의 경우 loop 블록 범위와 전역 범위가 구분되지만
var의 경우 loop 블록 범위와 전역범위가 구분되지않는다. */
var i = 5;
for (var i = 0; i < 10; i++) {}
console.log("i = " + i);
let j = 5;
for (let j = 0; j < 10; j++) {}
console.log("j = " + j)
</script>
CSS : HTML은 뼈대이고, 자바스크립트가 기능이라면, CSS는 꾸미기 위한 옷의 기능이라고 할 수 있다.
자바스크립트(JavaScript) : 로컬의 브라우저에서 실행되는 인터프리터 방식의 프로그래밍 언어
jQuery : 자바스크립트의 코드가 길어지면 사용하기 복잡해지는 단점을 파격적으로 개선한, 존 레식(John Resig)이 창안한 자바스크립트 기반의 라이브러리 중 하나이다.
서버 주요언어
JSP : 운영체제의 구애를 받지 않으며 실행된다.
톰갯(Tomcat) 컨테이너 위에서 자바 기반의 언어를 사용한다.
ASP : 윈도우 기반의 IIS 서버에서만 동작한다. MS-SQL DBMS와 연동된다.
PHP : 리눅스 기반에 아파치(Apache)서버에서 동작한다.
기존에 제로보드나 그누보드와 같은 사이트 빌더에서 기본적으로 사용되는 언어이다.
Node.js : 흔히 “노드제이에스” 또는 “노드”라고 하는 자바스크립트 라이브러리로서, 소켓을 이용하여 쉽게 실시간 서버를 구축 가능하도록 한다.
JavaScript란
자바스크립트(JavaScript)는 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어이다.
자바스크립트는 ECMA스크립트 표준을 따르는 대표적인 웹 기술이다.
ECMA(European Computer Manufacturers Association) : 표준화 기구
<h1>JavaScript란?</h1>
<p>
HTML이 웹 문서의 뼈대 역할, CSS가 그 뼈대를 꾸며주는 역할이라면
<b>자바스크립트는 생동감을 불어넣기 위해</b> 만들어진 프로그래밍 언어이다. <br>
자바스크립트로 작성한 프로그램을 스크립트(script)라고 부르고,
스크립트는 웹 페이지의 HTML 안에 작성가능하며 웹페이지 로드시 자동으로 실행된다 <br>
<script></script>로 작성하며 기본적인 위치는 head 안, body 안이다.
브라우저에는 '자바스크립트 가상 머신' 이라 불리는 엔진이 내장되어 있다
</p>
<h1>JavaScript의 실행 방식</h1>
<p>
엔진이 스크립트를 읽고(파싱) 읽어들인 스크립트를 기계어로 전환(컴파일) 하면
기계어로 전환 된 코드가 실행된다. <br>
전체를 해석해 놓은 컴파일 언어와는 차이가 있다. <br>
</p>
<h3>JavaScript로 수행할 수 있는 기능</h3>
<ul>
<li>페이지에 새로운 HTML 추가</li>
<li>기존 HTML과 스타일 수정</li>
<LI>마우스 클릭 및 이동, 키보드 키 누름등의 사용자 행동에 반응</LI>
<li>네트워크를 통해 원격 서버에 요청(Ajax기술 등)</li>
<li>쿠키 (Cookie) 사용</li>
<li>클라이언트 측에 데이터 저장(Local Storage)</li>
</ul>
<h3>JavaScript를 사용하는 이유</h3>
<p>
HTML/CSS와 완전히 통합할 수 있으며 모든 주요 브라우저에서 지원하고,
기본 언어로 사용되기 때문이다. <br>
오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어이며
지금은 서버단 등 다양한 환경에서도 사용된다.
</p>
<h3>개발자 도구</h3>
<p>
브라우저별로 개발자 도구 (Developer Tools)를 제공하는데 크롬의 경우
F12 키를 눌러 실행한다. <br> 브라우저 창에서 원하는 부분을 확인하고 싶으면 원하는
위치에 우클릭 후 검사를 누른다. <br>
자바스크립트 소스 코드 중 console.log()는 브라우저에서 출력하는 것이 아니라
개발자 도구의 console 패널에서 출력하고 스크립트 구문을 디버깅할때 자주 사용한다.
</p>
스크립트 언어란
매우 빠르게 배우고 작성하기 위해 고안되었고 짧은 소스코드파일이나 REPL(Read Eval Print Loop)로 상호작용
기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 주로 사용
클라이언트 사이드 스크립트
클라이언트, 즉 사용자 컴퓨터에서 처리되는 스크립트
종류 : JavaScript, VBscript, Jscript
서버 사이드 스크립트
정보를 제공하는 서버쪽 컴퓨터에서 처리되는 스크립트
종류 : ASP, PHP, JSP, Perl, 파이썬, Node.js 등
작성 및 실행
브라우저 개발자 도구
브라우저별 개발자 도구(Develop Tools)가 있음
크롬/ IE 브라우저 F12키 눌러서 실행
브라우저 창에서 원하는 코드를 확인하고 싶으면 원하는 위치에서 우 클릭 후 해당메뉴선택 (크롬 : 검사 / IE : 요소검사)
자바스크립트 소스코드 중 console.log()는 브라우저에 출력하는 것이 아니라 개발자 도구의 console패널에서 출력
스크립트 구문을 디버깅할 때 자주 사용
개발자&nbsp;도구의&nbsp;console패널
자바스크립트 선언
<SCRIPT></SCRIPT> 태그 사이에 자바스크립트 코드 문장을 작성하면 된다.
HTML에서 제공하는 <script></script>태그를 사용하여, 자바 스크립트 작성영역을 설정
type속성 브라우저 호환성을 위해 사용되나 default값으로 생략이 가능
<script type=“text/javascript”>
자바스크립트 내용
</script>
language속성과 charset속성이 있었지만 language속성은 폐기 되고 charset속성은 meta태그가 적용되기 때문에 사용할 필요가 없음.
자바스크립트 위치
<SCRIPT></SCRIPT> 는 <head>,<body> 안 어느 영역에나 작성 가능
html태그 영역 밖에 작성가능, 하지만 웹 표준과 웹 접근성을 고려해서 <head>나 <body>에 작성
external 방식 : 자바스크립트의 양이 많은 경우 자바스크립트 코드 부분을 외부 파일로 저장하여 작성
<script src=“경로”>태그를 이용하여 내용을 삽입 후 사용
<h3>자바스크립트 작성방법</h3>
<h3>1. internal 방식</h3>
<p>
script 태그 영역에 작성해서 실행되게 하는 방법으로
head 태그, body 태그 내에서 작성 가능하다. <br>
type="text.javascript" 는 HTML4 에서는 필수였으나 지금은 필수가 아니다. <br>
language 속성은 자바스크립트가 기본 언어이므로 작성할 필요가 없다.
</p>
<!----> <!--html 내 주석-->
<script>
// html 주석을 사용할 수 없다.
// JavaScript 한줄 주석
/*
JavaScript
여러줄 주석
줄 바꿈이 있다면 세미콜론 자동 삽입
*/
console.log('Hello!'); console.log('JavaScript!');
</script>
inline 방식
html 태그의 on이벤트 속성을 이용하여 내장 메소드를 호출하거나 개발자가 선언한 사용자정의 함수를호출할 때 사용
<태그명 on이벤트 = “함수명();”>
<h3>3. inline 방식</h3>
<p>
태그에 직접 소스 코드를 작성해서 실행되게 하는 방법
</p>
<button onclick="alert('버튼 클릭 확인');">경고창 출력</button>
<button onclick="console.log('버튼 클릭 확인');">콘솔창 출력</button>
internal 방식
자바스크립트코드를 작성, 함수 단위로 소스코드를 작성하고 html태그에서 이벤트 핸들러를 통해 함수를 실행시키는 방식
<script>
실행할 소스코드 작성
</script>
external 방식
외부에 별도의 자바스크립트 소스파일(*.js)을 작성하고 html에서 <script src=“경로.js”>태그를이용하여 해당파일을 불러와 사용하는 방식
여러 개 html파일에서 공통적으로 사용하는 기능일 경우 사용
<script src=“경로”></script>
<h3>2. external 방식</h3>
<p>
별도의 js 파일로 작성해서 가져다 사용하는 방법<br>
스크립트가 길어지면 별도의 js 파일로 작성하는 것이 좋은데
이는 브라우저의 캐싱으로 다시 다운 받을 필요가 없어지기 때문이다.
</p>
<script src="../resources/js/sample.js"></script>
<noscript>태그
자바 스크립트가 지원되지 않는 브라우저를 대비 지원하지 않는 경우 <noscript>에 작성된 내용이 출력
<noscript>
지원하지 않을 경우 출력문구
</noscript>
자바스크립트 실행방식
웹 브라우저에 내장되어 있는 자바스크립트 파서가 소스 코드를 한 줄씩 읽고 해석한다는 점에서 인터프리터 방식으로 소스를 해석하기 때문에 전체를 해석해 놓은 컴파일 언어와는 차이가 있다.
자바스크립트 실행은, 작성된 html문서를 브라우저에서 읽어 들이면 바로 실행을 확인할 수 있다는것이다.
<!DOCTYPE html>
<html lang="ko">
<!-- 1. head 작성 -->
<head>
<!-- meta tag : metadata(정보에 대한 정보) 제공
화면에 표시되지는 않지만 검색 엔진/브라우저에 읽힘 -->
<meta charset="UTF-8">
<!-- IE 브라우저에서 최신 표준 모드를 선택하는 문서 모드 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 뷰 포트 : 화면 상의 화상 표시 영역
데스크탑 화면과 모바일의 뷰 포트는 차이가 있음. 너비를 디바이스에 맞춤. 기본 배율 1. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 사이트에 대한 설명 -->
<meta name="description" content="Full Screen Practice">
<title>1_full-screen실습</title>
<!-- CSS -->
<!-- 브라우저별로 디폴트로 적용된 CSS에 차이(여백, 폰트 크기 등)가 있어
CSS가 별도로 지정 되지 않은 요소는 브라우저별로 다르게 보일 수 있으므로
만들어져 있는 리셋 css 활용 -->
<!-- ress.css (https://github.com/filipelinhares/ress)-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!-- favicon (Real Favicon Generator 활용) -->
<link rel="icon" type="image/x-icon" href="../resources/images/khfavicon.ico">
<!-- 외부 스타일 시트 -->
<link href="../resources/css/style.css" rel="stylesheet" type="text/css">
<!--구글 웹 폰트-->
<link href="https://fonts.googleapis.com/css2?family=Syne+Tactile&display=swap" rel="stylesheet">
</head>
<body>
<!-- 화면을 꽉채우는 이미지 배치 -->
<div id="home" class="big-bg">
<!--2. header 만들기-->
<header class="page-header wrapper">
<!--로고 클릭시 다시 본인 페이지로 로드-->
<h1><a href="1_full-screen실습.html"><img class="logo" src="../resources/images/logo.jpg" alt="Home"></a></h1>
<nav>
<ul class ="main-nav">
<li><a href="2_column실습.html">News</a></li>
<li><a href="3_grid실습.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!--3. 콘텐츠 부분 만들기-->
<div class="home-content wapper">
<h2 class="page-title">Full Screen Practice</h2>
<p>
풀 스크린이란 이미지 또는 동영상을 메인으로 화면 전체에 출력하는 레이아웃입니다.
</p>
<a class="button" href="#">메뉴 보기</a>
</div>
</div>
</body>
</html>
css
@charset "UTF-8"; /* 인코딩 문자 깨짐 방지 */
html {
/* 사용자 설정 문자 크기 그대로 반영 되도록 */
font-size : 100%;
}
body {
line-height: 2.0;
color : #432;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/* header ---------------------------------------------- */
/* 로고 크기 및 여백 */
.logo {
width: 210px;
margin-top : 14px;
}
/* nav 메뉴 장식 */
.main-nav {
display: flex;
list-style: none;
text-transform: uppercase;
font-size: 1.25em;
margin-top: 34px;
}
.main-nav li {
margin-left : 36px;
}
.main-nav a {
color : #432;
}
.main-nav a:hover {
color : #0bd;
}
/* 로고 내비 가로 정렬 */
.page-header {
display: flex;
justify-content: space-between;
}
/* 콘텐츠의 최대 출력 너비 설정 */
.wrapper {
max-width: 1100px;
margin : 0 auto;
padding : 0 4%;
}
/* home ----------------------------------------- */
/* 배치 및 여백 설정 */
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125em;
margin : 10px 0 42px;
}
/* 제목 */
.page-title {
font-size: 5em;
text-transform: uppercase;
font-weight: normal;
font-family: 'Roboto Serif', sans-serif;
}
/* 버튼 */
.button {
background: #0bd;
color : white;
padding: 15px 32px;
border-radius: 5px;
font-size: 1.375em;
}
/* 큰 배경 이미지 */
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home {
background-image: url("../images/main-bg.jpg");
min-height: 100vh;
}
<body>
<!-- 화면을 꽉채우는 이미지 배치 -->
<div id="home" class="big-bg">
<!--2. header 만들기-->
<header class="page-header wrapper">
<!--로고 클릭시 다시 본인 페이지로 로드-->
<h1><a href="1_full-screen실습.html"><img class="logo" src="../resources/images/logo.jpg" alt="Home"></a></h1>
<nav>
<ul class ="main-nav">
<li><a href="2_column실습.html">News</a></li>
<li><a href="3_grid실습.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
@charset "UTF-8"; /* 인코딩 문자 깨짐 방지 */
html {
/* 사용자 설정 문자 크기 그대로 반영 되도록 */
font-size : 100%;
}
body {
line-height: 2.0;
color : #432;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/* header ---------------------------------------------- */
/* 로고 크기 및 여백 */
.logo {
width: 210px;
margin-top : 14px;
}
/* nav 메뉴 장식 */
.main-nav {
display: flex;
list-style: none;
text-transform: uppercase;
font-size: 1.25em;
margin-top: 34px;
}
.main-nav li {
margin-left : 36px;
}
.main-nav a {
color : #432;
}
.main-nav a:hover {
color : #0bd;
}
/* 로고 내비 가로 정렬 */
.page-header {
display: flex;
justify-content: space-between;
}
/* 콘텐츠의 최대 출력 너비 설정 */
.wrapper {
max-width: 1100px;
margin : 0 auto;
padding : 0 4%;
}
<!--3. 콘텐츠 부분 만들기-->
<div class="home-content wapper">
<h2 class="page-title">Full Screen Practice</h2>
<p>
풀 스크린이란 이미지 또는 동영상을 메인으로 화면 전체에 출력하는 레이아웃입니다.
</p>
<a class="button" href="#">메뉴 보기</a>
</div>
/* home ----------------------------------------- */
/* 배치 및 여백 설정 */
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125em;
margin : 10px 0 42px;
}
/* 제목 */
.page-title {
font-size: 5em;
text-transform: uppercase;
font-weight: normal;
font-family: 'Roboto Serif', sans-serif;
}
/* 버튼 */
.button {
background: #0bd;
color : white;
padding: 15px 32px;
border-radius: 5px;
font-size: 1.375em;
}
/* 큰 배경 이미지 */
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home {
background-image: url("../images/main-bg.jpg");
min-height: 100vh;
}
<!-- 5. 뉴스 컨텐츠-->
<div class="news-content wrapper">
<article>
<!--세부 영역 사이사이 header를 넣을 수 있다.-->
<!-- 기사 헤더-->
<header class="post-info">
<h2 class="post-title">기사 상단에 출력될 제목입니다.</h2>
<p class="post-date">2/14 <span>2022</span></p>
<p class="post-cat">카테고리 : 기사 카테고리</p>
</header>
<!--기사 본문-->
<img src="../resources/images/tower1.PNG" alt="기사사진">
/* 기사 부분 */
article {
/* width : 74%; */
/* 2-column에서 3-column으로 변경 시 width 줄이기 */
width : 55%;
/* 컬럼 순서 변경
display : flex의 자식 요소에서 동작 */
order : 2;
}
<!--사이드 바-->
<aside>
<h3 class="sub-title">카테고리</h3>
<ul class="sub-menu">
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
<h3 class="sub-title">KH 아카데미 소개</h3>
<p>
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
</p>
</aside>
<!-- 7. 3-cloumn 레이아웃으로 변경 -->
<div class="ad">
<!--
display : flex가 지정 된 내부 박스 모두 자동으로 수평
정렬 되지만 전체 너무 조정을 위해 article 너비 수정
-->
<img src="../resources/images/banner.PNG">
</div>
/* 기사 부분 */
article {
/* width : 74%; */
/* 2-column에서 3-column으로 변경 시 width 줄이기 */
width : 55%;
/* 컬럼 순서 변경
display : flex의 자식 요소에서 동작 */
order : 2;
}
/* 사이드바 */
aside {
width: 22%;
order : 3;
}
/* 광고 배너 */
.ad {
order : 1;
}
/* menu ----------------------------------------------------- */
#menu {
background-image: url(../images/menu-bg.jpg);
min-height: 100vh;
}
.menu-content {
max-width: 560px;
margin-top : 10%;
}
.menu-content .page-title {
text-align: center;
}
.menu-content p {
font-size: 1.125rem;
font-weight: bolder;
margin : 10px 0 0;
}
/* for mobile ----------------------------------- */
@media (max-width : 600px) {
.menu-content {
margin-top: 20%;
}
}
/* grid ----------------------------------------- */
.grid {
display: grid;
gap : 26px;
/* 처음 적용한 값 */
/* grid-template-columns: 1fr 1fr 1fr; */
/* 반응형 적용 1. 창의 너비가 작아졌을 때 이미지가 너무 작아지지 않도록 최소값 지정 */
/* grid-template-columns: repeat(3, minmax(240px, 1fr)); */
/* 반응형 적용 2. 2번째 3번째 요소가 잘려 보이므로 3열로 한정하지 않고
화면의 너비에 맞게 요소의 수 조정 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 6%;
margin-bottom: 50px;
}
.item p {
font-weight: bold;
text-align: center;
}
/* 타일형 레이아웃 변경
-> 강조하고 싶은 item에 big-box 클래스 부여 */
.big-box {
grid-column : 1/3;
grid-row : 1/3;
}
/* 큰 이미지와 작은 이미지의 높이 맞춤 */
.big-box img {
height: 94%;
/* 이미지 비율 맞춤 (자동 잘림) */
object-fit: cover;
}
/* for mobile ------------------------------- */
/* 타일형 레이아웃 변경으로 인해 폭이 좁아지면 메뉴끼리 크기가 맞지 않으므로
폭이 좁아질 경우 1-column으로 변경하기 */
@media (max-width : 600px) {
/* big-box 2개씩 자리차지하던 설정을 리셋 */
.big-box {
grid-column: auto;
grid-row : auto;
}
}
<!-- 4. 화면을 꽉 채우는 배경 이미지 배치 -->
<div id="menu" class="big-bg">
<!-- 2. header 만들기 -->
<header class="page-header wrapper">
<h1><a href="1_full-screen실습.html"><img class="logo" src="../resources/images/logo.jpg" alt="HOME"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="2_column실습.html">News</a></li>
<li><a href="3_grid실습.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- 3. 콘텐츠 부분 만들기 -->
<div class="menu-content wrapper">
<h2 class="page-title">Menu</h2>
<p>
클라우드 서버를 이용한 웹 융합 응용SW개발자 양성과정에 오신 여러분을 진심으로
환영합니다. 웹 어플리케이션 개발에 대한 기초를 다지기 위해 해당 과정에서
학습할 수 있는 하단의 메뉴를 확인해보세요.
</p>
</div>
</div>
/* for mobile ----------------------------------- */
@media (max-width : 600px) {
.menu-content {
margin-top: 20%;
}
}
/* grid ----------------------------------------- */
.grid {
display: grid;
gap : 26px;
/* 처음 적용한 값 */
/* grid-template-columns: 1fr 1fr 1fr; */
/* 반응형 적용 1. 창의 너비가 작아졌을 때 이미지가 너무 작아지지 않도록 최소값 지정 */
/* grid-template-columns: repeat(3, minmax(240px, 1fr)); */
/* 반응형 적용 2. 2번째 3번째 요소가 잘려 보이므로 3열로 한정하지 않고
화면의 너비에 맞게 요소의 수 조정 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 6%;
margin-bottom: 50px;
}
.item p {
font-weight: bold;
text-align: center;
}
/* 타일형 레이아웃 변경
-> 강조하고 싶은 item에 big-box 클래스 부여 */
.big-box {
grid-column : 1/3;
grid-row : 1/3;
}
/* 큰 이미지와 작은 이미지의 높이 맞춤 */
.big-box img {
height: 94%;
/* 이미지 비율 맞춤 (자동 잘림) */
object-fit: cover;
}
/* for mobile ------------------------------- */
/* 타일형 레이아웃 변경으로 인해 폭이 좁아지면 메뉴끼리 크기가 맞지 않으므로
폭이 좁아질 경우 1-column으로 변경하기 */
@media (max-width : 600px) {
/* big-box 2개씩 자리차지하던 설정을 리셋 */
.big-box {
grid-column: auto;
grid-row : auto;
}
}
단순히 요소가 페이지에 출력만 되는 것이 아니라 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것
애니메이션
단순히 요소가 페이지에 출력만 되는 것이 아니라 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회정하는 것
2차원 변형
요소가 변형(이동,회전)할 때 수직,수평으로 이동하는 것으로 X축, Y축으로 나누어 페이지 내에서 이동하는 것
3차원 변형
요소가 변형(이동,회전)할 때 수직, 수평으로 이동뿐만 아니라 화면상에서 앞으로 이동하거나 뒤로 이동하는 것이 추가된 것으로 X,Y좌표 뿐만 아니라 Z좌표가 추가된 것
transform 속성
페이지에서 요소들을 변형시키려면 transform속성과 변형 함수를 이용 - 변형함수는 2차원 함수와 3차원 함수 구분
선택자 {
-접두사-transform : 변형함수
transform : 변형함수;
}
이전브라우저와 호환을 위해 접두사를 이용한 함수호출
변형/애니메이션
2차원 변형함수
<body>
<h1>애니메이션</h1>
<h3>transition</h3>
<p>
시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 의미<br>
transition-duration : 애니메이션 효과를 얼마동안 줄지 설정<br>
transition-property : 애니메이션 효과를 적용할 프로퍼티
목록을 정의
</p>
<h3>transform</h3>
<p>
사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것을
변형이라고 하고 transform 속성에 변형 함수를 사용해서 나타낼 수 있음<br>
변형이 부드럽게 이어지면 애니메이션이 됨
</p>
<ul>
<li>translate(x,y) : 지정한 크기만큼 x축, y축으로 이동</li>
<li>scale(x,y) : 지정한 크기만큼 x축, y축으로 확대/축소</li>
<li>rotate(각도) : 지정한 각도만큼 회전</li>
<li>skew(x, y) : 지정한 각도만큼 x축과 y축으로 요소 변형</li>
</ul>
translate ? (좌표값)
요소를 페이지의 일정좌표로 이동하는 함수
3d효과를 표현하기 위해서는 perspective함수을 사용해야함
선택자 {
transform : 함수명(이름) ;
}
scale ? (좌표값)
요소를 일정페이지 만큼 확대/축소 시키는 함수
양수 : 확대
음수 : 축소
선택자 {
transform : 함수명(이름) ;
}
rotate ? (좌표값)
지정한 각도만큼 요소를 시계방향(양수)이나 반대방향(음수)으로 회전시키는 함수
선택자 {
transform : 함수명(이름) ;
}
skew ? (좌표값)
2차원만 가능 지정한 각도만큼 요소를 비틀어 변형하는 함수
선택자 {
transform : 함수명(이름) ;
}
추가 변형속성
transform-origin
변형기준을 x,y,x축을 기준으로 했으나 특정지점을 기준으로 변형할 수 있게 하는 속성
선택자 {
trasform-origin : x y z ;
}
transform-origin
변형기준을 x,y,x축을 기준으로 했으나 특정지점을 기준으로 변형할 수 있게 하는 속성
선택자 {
trasform-origin : x y z ;
}
perspective
화면에서 원근감을 갖게 하는 속성
다른 변형과 적용하려면 먼저 적용되어야 한다.
선택자 {
perspective : 숫자(단위);
}
transform-style
여러가지 변형을 동시에 하는 경우 부모 요소에서 적용한 3D변형을 하위요소에 적용하는 속성
<h3>keyframes</h3>
<p>
@keyframes 을 사용하면 간단한 애니메이션 여러 개를
한꺼번에 실행할 수 있음<br>
@keyframes에는 애니메이션 이름과 CSS 속성을 시점을
나누어 설정함<br>
EX. from ~ to, 0% ~ 30% ~ 60% ~ 100% 등<br>
애니메이션을 적용하기 위해 아래와 같은 속성 적용<br>
animation-name : 애니메이션 이름<br>
animation-duration : 애니메이션 실행 시간<br>
animation-direction : 애니메이션 반복 방향
(처음부터, 끝나면 다시 역순으로)<br>
animation-iteration-count : 반복 횟수 (숫자 또는 무한)
</p>
<img class="pika" id="jump" src="../resources/images/pikachu.png">
<hr>
<img class="pika" id="shake" src="../resources/images/pikachu.png">
</body>
/* @keyframes 정의 */
/* 1. 시작 지점과 끝 지점 두 개만 있는 경우 */
@keyframes jump {
from {
margin-left: 300px;
}
to {
margin-left : 100px;
margin-bottom : 200px;
}
}
/* 애니메이션 jump를 #jump img에 적용 */
#jump {
/* keyframes에서 정한 이름을 작성 */
animation-name: jump;
/* 애니메이션의 실행 시간을 지정하는 속성 */
animation-duration: 2s;
/* 애니메이션을 얼만큼 반복할지 설정 */
animation-iteration-count: 5;
/* 애니메이션 반복 시 처음부터 시작 or 끝에서 역순으로 */
animation-direction: normal;
}
/* 2. 중간 작업이 있는 경우 */
@keyframes shake {
0% {
border : 5px solid black;
}
50% {
margin-left : 300px;
border : 10px solid black;
border-radius: 50%;
transform: translate(50px, 50px);
}
100% {
margin-left : 600px;
border : 5px solid black;
transform : rotate(45deg);
}
}
/* 애니메이션 shake를 #shake img에 적용 */
#shake {
/* alternate : 반복 시 역순으로
infinite : 무한 반복 */
animation: shake 2s alternate infinite;
}
<body>
<h1>레이아웃 스타일</h1>
<h3>width와 height</h3>
<p>
내용이 차지하고 있는 영역의 크기를 조절할 수 있는 속성
</p>
<h4>고정 크기</h4>
<div id="test1" class="size-test"></div>
<h4>가변 크기</h4>
<div id="test2" class="size-test"></div>
<hr>
<h3>화면 배치 방법 변경</h3>
<p>
블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을
변경할 수 있다<br>
블럭 요소 : 한 줄 전체를 차지하는 요소.
한 줄에 여러 요소가 올 수 없는 요소.<br>
Ex. div, hn, p, hr, ul, ol, form, table, ... 등등<br>
인라인 요소 : 한 줄에서 일부분만 차지하는 요소.
한 줄에 여러 요소가 올 수 있는 요소.<br>
Ex. span, img, input, textarea, label, button, br, ... 등등
</p>
<h4>블럭 요소를 인라인 요소로 변경</h4>
<p>
>> display : inline 테스트<br>
인라인 요소로 변경 되면서 width와 height 속성이 무시된다.
</p>
<div class="block block-test1 area1">첫 번째 영역</div>
<div class="block block-test1 area2">두 번째 영역</div>
<div class="block block-test1 area3">세 번째 영역</div>
<div class="block block-test1 area4">네 번째 영역</div>
<div class="block block-test1 area5">다섯 번째 영역</div>
<h4>인라인 요소를 블럭 요소로 변경</h4>
<p>
>> display : block 테스트<br>
인라인 요소를 블럭 요소로 변경하면 width와 height 값을
지정할 수 있다.
</p>
<span class="block block-test2 area1">첫 번째 영역</span>
<span class="block block-test2 area2">두 번째 영역</span>
<span class="block block-test2 area3">세 번째 영역</span>
<span class="block block-test2 area4">네 번째 영역</span>
<span class="block block-test2 area5">다섯 번째 영역</span>
.block-test2 {
display: block;
<h4>블럭 요소를 인라인 요소로 변경2</h4>
<p>
>> display : inline-block 테스트<br>
영역은 인라인 요소로 변경되지만 내용은 블럭 요소로 지정 되어
width와 height 속성을 설정할 수 있다.
</p>
<div class="block block-test3 area1">첫 번째 영역</div>
<div class="block block-test3 area2">두 번째 영역</div>
<div class="block block-test3 area3">세 번째 영역</div>
<div class="block block-test3 area4">네 번째 영역</div>
<div class="block block-test3 area5">다섯 번째 영역</div>
<body>
<h1>배치 관련 스타일</h1>
<p>
<b>position 속성</b><br>
static : 일반적인 문서 흐름에 따라 배치(기본 값).
top, right, bottom, left 속성이 아무런 영향을 주지 못함.<br>
relative : 일반적인 문서 흐름에 따라 배치.
자신 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용.
다른 요소에는 영향을 주지 않아 공간 차지는 static일 때와 같음.<br>
absolute : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음.
가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치 되며
top, right, bottom, left의 값이 위치 결정.<br>
fixed : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음.
해당 요소가 모든 페이지의 같은 위치에 출력.<br>
</p>
<h3>static과 relative</h3>
<div class="inline-block" id="first"></div>
<div class="inline-block" id="second"></div>
<div class="inline-block" id="third"></div>
<title>10_레이아웃스타일(배치)</title>
<style>
.inline-block {
display: inline-block;
width : 100px;
height: 100px;
background: orange;
}
#first {
position: static;
top : 20px;
left : 20px;
}
#second {
position: relative;
top : 20px;
left : 20px;
}
#third {
position : relative;
bottom: 20px;
right : 20px;
}
<h3>visibility</h3>
<p>
페이지에 특정 속성을 보이거나 보이지 않게 하는 속성<br>
display : none 속성은 페이지 공간도 차지하지 않고,
visibility : hidden 속성은 페이지 공간을 차지한다
</p>
<div class="vis-test vis-test1"></div>
<div class="vis-test vis-test2"></div>
<div class="vis-test vis-test3"></div>
페이지에 float설정되어 있으면 그 속성이 그대로 다음 요소에 영향을 미치는데 이를 초기화시키는 속성
선택자 {
clear : 속성값;
}
▼ 코드 예시 보기 ▼
<body>
<h1>Flexbox로 수평 정렬</h1>
<p>
Flexible Box Layout Module의 의미로
이전에는 float 속성을 많이 사용했다면
최근에는 Flexbox를 많이 사용함
</p>
<div class="container">
<div class="item">div 1</div>
<div class="item">div 2</div>
<div class="item">div 3</div>
<div class="item">div 4</div>
<div class="item">div 5</div>
<div class="item">div 6</div>
<div class="item">div 7</div>
<div class="item">div 8</div>
</div>
</body>
<style>
.item {
background : lightgray;
color : white;
margin : 10px;
padding : 10px;
}
.container {
/* 부모 요소 display : flex; 추가 시 수평 정렬 */
display: flex;
/* flex-direction : 배치 방향 */
/* 오른쪽에서 왼쪽으로 */
flex-direction: row-reverse;
/* 위에서 아래로 */
flex-direction: column;
/* 아래에서 위로 */
flex-direction: column-reverse;
/* 왼쪽에서 오른쪽으로 */
flex-direction: row;
/* flex-wrap : 줄바꿈 */
/* 줄바꿈 하지 않음 */
flex-wrap: nowrap;
/* 줄바꿈 여러 줄의 경우 아래에서 위로 */
flex-wrap: wrap-reverse;
/* 줄바꿈 여러 줄의 경우 위에서 아래로 */
flex-wrap: wrap;
/* justify-content : 수평 방향 맞춤 */
/* 오른쪽 맞춤 */
justify-content: flex-end;
/* 가운데 맞춤 */
justify-content: center;
/* 양쪽 끝에 붙이고 균등하게 맞춤 */
justify-content: space-between;
/* 균등하게 맞춤 */
justify-content: space-around;
/* 왼쪽 맞춤 */
justify-content: flex-start;
/* align-items : 수직 방향 맞춤 */
/* vh는 뷰 포트의 높이 기준 단위 */
height: 100vh;
/* 부모 요소의 높이 or 콘텐츠 많은 자식 요소 높이 맞춤 */
align-items: stretch;
/* 부모 요소 윗 부분 배치 */
align-items: flex-start;
/* 부모 요소 아랫 부분 배치 */
align-items: flex-end;
/* 중앙 배치 */
align-items: center;
}
</style>
<body>
<h1>Grid로 타일 형태 정렬</h1>
<p>
Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있음
</p>
<div class="container">
<div class="item">div 1</div>
<div class="item">div 2</div>
<div class="item">div 3</div>
<div class="item">div 4</div>
<div class="item">div 5</div>
<div class="item">div 6</div>
<div class="item">div 7</div>
<div class="item">div 8</div>
<div class="item">div 9</div>
</div>
</body>
<style>
.item {
background: lightgray;
color : white;
padding : 10px;
}
.container {
display: grid;
/* grid-template-columns : 그리드 아이템 너비
한 열에 그리드 아이템을 여러 개 놓을 경우 띄어쓰기로 구분
필요한 그리드 아이템 수 만큼 너비 지정 */
grid-template-columns: 200px 200px 200px;
grid-template-columns: 100px 200px auto;
/* 고정 너비 사용 시
화면 너비가 넓어지면 공간 발생
회면 너비가 좁아지면 화면 잘림
그리드에서 사용하는 fr(fraction) 단위 사용
*/
grid-template-columns : 1fr 1fr 1fr;
/* 반복 되는 패턴이 있다면 repeat 사용 */
grid-template-columns: repeat(3, 1fr);
/* gap : 그리드 아이템 사이의 여백 */
row-gap : 20px;
column-gap: 10px;
gap : 20px 10px;
gap : 20px;
/* grid-template-rows : 그리드 아이템 높이
여러 줄을 만들 경우 띄어쓰기 구분 */
grid-template-rows: 200px 200px 200px;
/* row 개수를 미리 알 수 없을 때는 */
grid-auto-rows : 200px;
grid-auto-rows: minmax(200px, auto);
}
.item:nth-child(1) {
/* 컬럼 시작/끝 설정 */
grid-column-start: 1;
grid-column-end: 3;
/* 컬럼 시작/끝 설정 한 번에 */
grid-column: 1/3;
grid-column: 1/span 2;
/* 로우 시작/끝 설정 */
grid-row-start: 1;
grid-row-end: 3;
/* 로우 시작/끝 설정 한 번에 */
grid-row : 1/3;
grid-row : 1/span 2;
/* grid-area */
/* 로우시작/컬럼시작/로우끝/컬럼끝 */
grid-area : 1/1/3/3;
}
</style>
<body>
<h1>배경색과 배경 이미지</h1>
<p>
body { background-color : 색상명 | rgb | rgba | hsl | hsla | 16진수; }
로 배경색을 지정할 수 있다.
</p>
<hr>
<h3>div 영역 테스트</h3>
<p>
div 영역을 설정하는 경우 배경색을 지정하기 위해서는
div에 배경색을 별도로 지정해야 한다.
</p>
<div id="div-bg">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<h3>배경 적용 범위 조정</h3>
<p>
div 영역의 배경 적용 범위를 지정할 때 background-clip
속성을 사용한다.
</p>
<div class="div-test" id="div1">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<div class="div-test" id="div2">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<div class="div-test" id="div3">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<h3>배경 이미지 테스트</h3>
<p>
background-image 속성을 이용하여 배경 사진을 넣을 수 있다.
사진 크기에 따라 자동 반복하여 이미지가 나타난다.
배경 이미지의 반복 방법을 지정하기 위해 background-repeat 속성을
이용할 수 있다.
배경 이미지가 요소보다 크거나 작은 경우 배경 이미지의 크기를
background-size 속성으로 변경할 수 있다.
</p>
<div id="bg-img"></div>
</body>
</html>
CSS_배경 그라데이션
선형 그라데이션
색상이 수직, 수평, 대각선 방향으로 일정하게 변하는 것
웹표준으로 지정되었지만 이전 버전과 호환을 위해 브라우저별 접두사를 이용, 그라데이션 표현방법이 약간씩 다름
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_텍스트 스타일</title>
<!-- 구글 웹 폰트 추가 -->
<link href="https://fonts.googleapis.com/css2?family=Festive&display=swap" rel="stylesheet">
<!-- 외부 스타일 시트 링크 -->
<link href="../resources/css/font.css" rel="stylesheet" type="text/css">
<link href="../resources/css/textstyle.css" rel="stylesheet" type="text/css">
<link href="../resources/css/paragraph.css" rel="stylesheet" type="text/css">
<link href="../resources/css/liststyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>텍스트 스타일</h1>
<hr>
<h2>글꼴 관련 스타일</h2>
<h3>font-family 속성 : 텍스트의 글꼴을 지정할 때 사용한다.</h3>
<pre> 선택자 { font-family : 글꼴이름; }의 형식으로 사용한다. </pre>
<p id="ff1">글꼴 변경 테스트1</p>
<p id="ff2">글꼴 변경 테스트2</p>
<p id="ff3">글꼴 변경 테스트3</p>
<h4>웹 폰트 사용하는 방법</h4>
<p>웹 폰트 제공 사이트 예시 : <a href="http://fonts.google.com" target="_blank">구글 웹 폰트 사이트로</a></p>
<p id="web-font">font style test</p>
<h3>font-size 속성 : 텍스트의 크기를 변경할 때 사용한다.</h3>
<p>
상대 크기 <br>
- em : 해당 폰트의 대문자 M의 너비를 기준으로 함.
부모 요소의 크기가 기준으로 배수를 의미. ex) 1.5em은 1.5배<br>
- rem : 최상위의 부모 요소의 크기 기준으로 배수를 의미.<br>
- % : 기본 글꼴의 크기에 대하여 상대적인 값을 가짐<br>
절대 크기 <br>
- px : Pixels, 표시장치(모니터)에 따라서 상대적인 크기를 가짐<br>
- pt : Points, 기본 지정된 크기를 가짐. 1 포인트는 1/72 인치
</p>
<h3>text-transform 속성 : 영문 텍스트의 대소문자 변환 시 사용한다.</h3>
<pre> 선택자 { text-transform : none | capitalize | uppercase | lowercase; }의 형식으로 표현한다.</pre>
<ul>
<li id="tt1">none</li>
<li id="tt2">capitalize : 영문자의 첫 글자만 대문자로</li>
<li id="tt3">uppercase : 모든 영문자를 대문자로</li>
<li id="tt4">lowercase : 모든 영문자를 소문자로</li>
</ul>
<h3>text-shadow 속성 : 텍스트에 그림자 효과를 줄 때 사용한다.</h3>
<pre> 선택자 { text-shadow : none | 가로거리 세로거리 번짐정도 색상; }의 형식으로 표현한다.</pre>
<div id="bg">
<span id="ts1" class="shadow">HTML5</span>
<span id="ts2" class="shadow">HTML5</span>
<span id="ts3" class="shadow">HTML5</span>
<span id="ts4" class="shadow">HTML5</span>
</div>
/* text-shadow 속성 */
/* 배경 설정 */
#bg {
background: black;
margin : 30px;
padding : 50px;
}
/* 공통 속성으로 사이즈와 두께를 지정 */
.shadow {
font-size : 100px;
line-height: 30px;
font-weight: 900;
}
/* 그림자 효과 (가로, 세로, 번짐, 색상) */
#ts1 {
color : orangered;
text-shadow: 5px 5px orange;
}
#ts2 {
color : white;
text-shadow: 0px 1px 20px #fff;
}
#ts3 {
color : white;
text-shadow: 1px 1px 20px #6f0;
}
#ts4 {
color : black;
text-shadow: 0px 0px 4px #ccc,
0px -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -19px 18px #f20;
}
<h3>white-space 속성 : 텍스트의 공백을 처리할 때 사용한다. </h3>
<h3>letter-spacing 속성 : 낱개 글자의 간격을 조정할 때 사용한다. </h3>
<h3>word-spacing 속성 : 단어와 단어 사이 간격을 조정할 때 사용한다. </h3>
<p id="space1">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space2">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space3">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space4">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space5">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
/* white-space 속성 */
/* letter-spacing 속성 */
/* word-spacing 속성 */
#space1 {
/* 여러 개의 공백을 하나로 표시 */
white-space: normal;
/* 낱개 글자의 간격 조정 */
letter-spacing: 5px;
}
#space2 {
/* 여러 개의 공백 하나로 표시, 줄 바꾸지 않고 한 줄 표시 */
white-space: nowrap;
/* 단어 사이의 간격 조정 */
word-spacing: 10px;
}
#space3 {
/* 여러 개의 공백을 그대로 표시 */
white-space: pre;
}
#space4 {
/* 여러 개의 공백을 하나로 표시,
영역 넘어가면 자동 줄바꿈 */
white-space: pre-line;
}
#space5 {
/* 여러 개의 공백을 그대로 표시,
영역 넘어가면 자동 줄바꿈 */
white-space: pre-wrap;
}
<h2>문단 스타일</h2>
<h3>direction 속성 : 텍스트 글자 쓰기 방향 지정</h3>
<h4>왼쪽에서 오른쪽으로 텍스트를 표시</h4>
<p id="p1">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>오른쪽에서 왼쪽으로 텍스트를 표시</h4>
<p id="p2">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h3>text-align 속성 : 텍스트 정렬하기</h3>
<h4>왼쪽 정렬(기본값)</h4>
<p id="p3">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>오른쪽 정렬</h4>
<p id="p4">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>가운데 정렬</h4>
<p id="p5">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>양쪽 정렬</h4>
<p id="p6">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h3>line-height 속성 : 줄 간격 조절하기</h3>
<h4>기본 간격</h4>
<p id="p7">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<h4>픽셀 고정 단위 간격</h4>
<p id="p8">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<h4>em 가변 단위 간격</h4>
<p id="p9">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<h4>% 배율 단위 간격</h4>
<p id="p10">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<hr>
<h1> CSS 기본 선택자 </h1>
<h2> 선택자란 </h2>
<p>
특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과
기능을 적용할 수 있다.
</p>
전체 선택자
<html>에 있는 모든 태그에 적용되는 스타일
기본형식
전체태그는 body태그에 있는 요소뿐만 아니라 html, head에도 적용된다.
* { 설정내용; }
▼ 코드 예시 보기 ▼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_기본선택자</title>
<!--내부 스타일 시트/ html에서 작성하는 주석방법-->
<style>
/* 스타일이라는 태그 안에서의 주석은 이와같이 작성한다. */
/* CSS 주석 */
<h2>모든 선택자</h2>
<p>
HTML문서 안의 모든 태그를 선택할 때 전체 선택자를 사용할 수 있다.
</p>
/* 전체 선택자 */
/* 전체선택자로서 모든 요소의 색상이 빨간색이 된다. */
/* * { color : red; } */
태그 선택자
<html>에 있는 모든 태그에 적용되는 스타일
기본형식
-> 여러 개 태그 선택시에는 ‘,’(쉼표)로 구별하여 작성
태그명 { 설정내용; }
▼ 코드 예시 보기▼
<h2>태그 선택자</h2>
<p>
HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.
p {color : red;} 와 같은 형태로 사용한다.
</p>
/* 태그 선택자 */
p { color : blueviolet; }
/* p로 선언된 태그들만 골라서 색으로 적용한다. */
아이디 / 클래스 선택자
아이디 선택자 : 태그 속성 id를 설정하고 id값을 선택자로 하는 것(#)
클래스 선택자 : 태그 속성 class를 설정하고 class값을 선택자로 하는 것(.)
기본형식
id : #아이디명 { 설정내용; }
class : .클래스명 { 설정내용; }
클래스 선택자는 중복이 허용되고 id선택자는 중복이 허용되지 않는다. 코드상에서는 에러는 없지만 javascript의 DOM에서 id값으로 페이지 요소를 가져오기 때문에 중복을 허용하지 않음.
클래스는 중복을 허용하기 때문에 영역을 명확하게 하기 위해 태그선택자와 같이 쓰는 경우도 있음
▼ 코드 예시 보기▼
<h2>아이디 선택자</h2>
<!-- 아이디는 고유값으로서 반드시 하나에만 고유하게 적용해야 한다. -->
<p>
HTML 문서 내에 해당하는 아이디 속성을 가진 태그만 선택할때 사용한다. <br>
#아이디명 {color : blue;} 와 같은 형태로 사용한다.
</p>
<ol>
<li id = "id1">아이디 선택자 테스트1</li>
<li id = "id2">아이디 선택자 테스트2</li>
<li id = "id3">아이디 선택자 테스트3</li>
<li id = "id4">아이디 선택자 테스트4</li>
<li id = "id5">아이디 선택자 테스트5</li>
</ol>
<h2>클래스 선택자</h2>
<p>
HTML 문서 내에서 여러 개의 태그를 동일한 클래스명으로 지정하여
선택할 때 사용한다. <br>
.클래스명 {color : purple;} 와 같은 형태로 사용한다.
</p>
<ul>
<li class="class1">클래스 선택자 테스트1</li>
<li class="class2">클래스 선택자 테스트2</li>
<li class="class1">클래스 선택자 테스트1</li>
<li class="class2">클래스 선택자 테스트2</li>
<li class="class1">클래스 선택자 테스트1</li>
</ul>
/* 아이디 선택자 */
#id2, #id4 {
background : lightblue;
color : white;
}
/* 클래스 선택자 */
.class1 {
background : lightcoral;
color : white;
}
기본 속성 선택자
지금 선택자와 함께 사용하는 선택자로 선택자 뒤에 []를 사용하여 속성과 속성값을 사용
기본형식
- 선택자[속성] { 설정내용; }
- 선택자[속성=속성값] { 설정내용; }
문자열 속성 선택자
특정문자열을 확인하여 스타일을 적용하는 방식으로 특별한 경우에만 사용
▼ 코드 예시 보기▼
<body>
<h1>다양한 선택자</h1>
<h2>속성 선택자</h2>
<p>
기본 선택자 뒤에 []를 사용하여 속성과 속성값을 사용한다 <br>
선택자 [속성=속성값] { 설정내용 } 의 형식으로 사용한다.
</p>
<div name="name1" class="div-class">div 1</div>
<div name="name2" class="div-class">div 2</div>
<div name="name3 name1" class="div-class">div 3</div>
<div name="name4" class="class-div">div 4</div>
<style>
/* 속성 선택자 */
/* 속성 값이 특정 값의 태그 선택 */
div[name=name2] { background : skyblue; }
/* 속성 값이 특정 값을 단어로 포함하는 태그 선택 (띄어쓰기 구분) */
div[name~=name1] { background : pink; }
/* 띄어쓰기 기준으로 어떤 단어가 포함됐는지를 묻는것, 단 붙어있으면 인식되지 않는다. */
/* 속성 값이 특정 값을 단어로 포함하는 태그 선택
(-으로 구분, - 앞의 내용이 값 동일해야 함) */
div[class|=class] { background : cyan; }
/* 속성 값이 특정값으로 시작하는 태그 선택 */
div[name^=name] {
background : gray;
}
/* 속성 값이 특정 값으로 끝나는 태그 선택 */
div[class$=class] {
color : white;
}
/* 속성 값이 특정 값을 포함하는 태그 선택
(해당값이 적어도 하나 존재한다면) */
div[class*=div] { background : salmon; }
후손선택자 / 자손선택자
후손 선택자
기본 형식
선택자 후손선택자 { 설정내용; }
자손 선택자
기본 형식
선택자 > 자손선택자 { 설정내용; }
여러 개의 자손선택가능 ( 선택자 > 자손 > 자손 > 자손 … )
▼ 코드 예시 보기▼
<h2>자손/후손 선택자</h2>
<p>
자손 선택자 : 바로 아래의 요소, 후손선택자 : 하위요소 전부<br>
자손선택자는 : 선택자>자손선택자 { 설정내용 } 의 형식으로 사용하고 <br>
후손 선택자는 : 선택자 후손선택자 { 설정내용 } 의 형식으로 사용한다. (띄어쓰기)
</p>
<div id = "test1">
<h4>div의 자손입니다.</h4>
<h4>나도 div의 자손입니다.</h4>
<ul id="testul">
<li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
<li>나도 ul의 자손이면서 동시에 div의 후손입니다.</li>
</ul>
</div>
/* 자손/후손 선택자 */
/* div test1의 자손 h4*/
#test1 > h4 { background : pink; }
/* div test1의 자손 ul의 자손 li */
#test1 > ul > li {background : skyblue;}
/* div test1의 후손 ul */
#test1 ul { background : lightgray }
/* div test1의 후손 li */
#test1 li {color : white;}
동위선택자
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용
▼ 코드 예시 보기▼
<h2>동위 선택자</h2>
<p>
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다. <br>
바로 뒤에 있는 요소 선택 시 : 선택자 + 선택자 { 설정내용 }의 형식으로 사용하고
뒤에 있는 모든 요소 선택 시 : 선택자 ~ 선택자 { 설정내용 }의 형식으로 사용한다.
</p>
<!--
동위 선택자 사용을 위해서 다른 태그들과 동위가
되지않도록 div로 감싸서 작업한다.
-->
<div>
<div id="div-test1">div test1</div>
<div id="div-test2">div test2</div>
<div id="div-test3">div test3</div>
<div id="div-test4">div test4</div>
<div id="div-test5">div test5</div>
</div>
/* 동위 선택자 */
/* 선택자바로 뒤의 요소 선택시 ' + ' */
#div-test1 + div { background : yellow; }
/* 선택자 뒤에 있는 모든 요소 선택시 ' ~ ' */
#div-test2 ~ div { background : orangered; }
반응선택자
사용자의 움직임에 따라 달라지는 선택자
기본형식
선택자 :active { 설정내용; }
선택자 :hover { 설정내용; }
▼ 코드 예시 보기▼
<h2>반응 선택자</h2>
<p>
사용자의 움직임에 따라 달라지는 선택자 <br>
사용자가 클릭한 태그 : 선택자:active {설정 내용} 의 형식으로
사용하고 사용자의 마우스가 올라간 태그 : 선택자:hover { 설정 내용 }
의 형식으로 사용한다.
</p>
<div id="active-test">active 테스트</div>
<br>
<div id="hover-test">hover 테스트</div>
/* 반응 선택자 */
/* div 영역 표시를 위한 스타일 적용 */
#active-test,
#hover-test {
width : 300px;
height : 300px;
background-color : skyblue;
color : white;
}
/* 클릭한 태그 */
#active-test:active {background : plum;}
/* 마우스 오버한 태그 */
#hover-test:hover {
background : cyan;
cursor: pointer;
/* 포인터 모양으로 바뀐다. */
}
<h2>상태 선택자</h2>
<p>
입력 양식의 상태에 따라 선택되는 선택자 <br>
체크 상태의 input 태그 선택 : input태그:checked { 설정내용 }
의 형식으로 사용한다.
</p>
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">사과</label>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">바나나</label>
<input type="checkbox" id="peach" name="fruit" value="peach">
<label for="peach">복숭아</label>
/* 상태 선택자 */
/* 체크박스가 체크 될 경우 */
input[type=checkbox]:checked {
width : 200px;
height : 200px;
}
<p> 초점이 맞추어진 input 태그 선택 :
input태그:focus { 설정내용 } 의 형식으로 작성한다.
</p>
<label>아이디 : </label>
<input type="text" id="userid" placeholder="아이디 입력" autofocus>
<!-- autofocus 자동으로 선택되어 커서가 깜빡이는 속성 -->>
<br>
<label>패스워드 : </label>
<input type="password" id="password" placeholder="비밀번호 입력" disabled>
<p>
사용 가능한 input 태그 선택 : input태그:enable { 설정 내용 }
의 형식으로 사용하며 사용 불가능한 input 태그 선택 :
input태그:disable { 설정 내용 } 의 형식으로 사용한다.
</p>
<h3>당신의 연령대는?</h3>
<select>
<option disabled>10대</option>
<option>20대</option>
<option>30대</option>
<option>40대</option>
<option>50대</option>
<option disabled>60대</option>
<!-- disabled 속성 적용시 비활성화되어 선택할 수 없다. -->>
</select>
/* 초점이 맞추어진 input 태그 선택 */
#userid:focus,
#password:focus {
background-color : lightgray;
}
/* 사용 불가능한 옵션 */
option:disabled { background : gray; }
/* 사용 가능한 옵션 */
option:enabled { background : yellowgreen; }
</style>
일반구조 선택자
특정한 위치에 있는 태그 선택 (위치로만 구분)
▼ 코드 예시 보기▼
<h1>다양한 선택자-2</h1>
<h2>일반 구조 선택자</h2>
<p>
특정한 위치에 있는 태그 선택 (위치로 구분
</p>
<div id="test1">
<!--같은 동위 = 형제관계-->
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트1</pre>
</div>
<style>
/* 구조 선택자 */
/* 일반 구조 선택자 -> 위치로만 구분 */
/* 형제관계태그 중 첫 번째 태그 선택 */
#test1 p:first-child {
background: pink;
color : white;
}
/* 형제 관계 태그 중 마지막 태그 선택 */
/* 아무런 변화 없음.
왜? 위치로만 확인을 하는데 마지막태그는
p태그가 아니라 pre태그이기 때문 */
#test1 p:last-child {
background : orange;
color : white;
}
/* 형제 관계 태그 중 앞에서 수열번째 태그 선택 */
#test1 p:nth-child(2n) {
background : yellowgreen;
color : white;
}
/* 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
#test1 p:nth-last-child(4) {
background : skyblue;
color : white;
}
형태구조 선택자
특정한 위치에 있는 태그 선택(태그 별로 구분)
▼ 코드 예시 보기▼
<h2>형태 구조 선택자</h2>
<p>
특정한 위치에 있는 태그 선택 (태그별로 구분)
</p>
<div id="test2">
<!--같은 동위 = 형제관계-->
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
/* 형태 구조 선택자 - 태그별로 구분 */
/* (해당 타입의) 형제 관계 태그 중 첫번째 태그 선택 */
#test2 p:first-of-type {
background : pink;
color : white;
}
/* (해당 타입의) 형제 관계 태그 중 마지막 번째 태그 선택 */
#test2 p:last-of-type {
background : orange;
color : white;
}
/* (해당 타입의) 형제관계 태그 중 앞에서 수열번째 태그 선택 */
#test2 p:nth-of-type(2n) {
background: yellowgreen;
color : white;
}
/* (해당 타입의) 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
#test2 p:nth-last-of-type(3) {
background: skyblue;
color : white;
}
문자 선택자
태그 내부에서 특정 조건의 문자를 선택하는 선택자
▼ 코드 예시 보기▼
<h2>문자 선택자</h2>
<p>태그 내부에서 특정 조건의 문자를 선택하는 선택자</p>
<div id="test3">
<p>보는 천하를 공자는 든 그리하였는가? 오아이스도 만물은 아름답고 인간은 없으면 무엇을 그들의 그들은 많이 힘있다. 착목한는 무한한 인생에 청춘의 새가 열락의 기쁘며, 인생에 그리하였는가? 곳으로 청춘이 것은 품었기 피가 들어 웅대한 봄바람을 방지하는 때문이다. 피가 끓는 인간은 인류의 구할 그리하였는가? 영락과 것이다.보라, 것은 방황하였으며, 우는 이상이 생명을 말이다.
피부가 우리는 앞이 가치를 이상을 것이다. 너의 있으며, 소담스러운 열락의 약동하다. 방지하는 풀밭에 뜨고, 타오르고 힘있다. 못할 것은 피가 이상의 풀밭에 힘있다. 것은 위하여 풍부하게 광야에서 싹이 청춘 피고 위하여서.
피어나기 곳이 바이며, 스며들어 그들의 피고, 있는가? 못하다 황금시대의 청춘이 것이다. 석가는 싶이 과실이 용감하고 우리의 피가 것이다. 피가 불러 이상의 고동을 이상의 청춘에서만 위하여서 못할 피다. 만물은 싶이 청춘의 투명하되 낙원을 끝까지 힘있다. 산야에 투명하되 어디 철환하였는가? 못할 살 이는 전인 있는가?
꽃이 봄바람을 인생을 싹이 돋고, 그러므로 끓는다. 대한 인간에 그들을 새 인도하겠다는 하였으며, 못하다 영원히 고동을 있다. 돋고, 바이며, 더운지라 청춘은 투명하되 이상은 있는 구하기 이것이다. 끓는 설산에서 청춘의 인도하겠다는 가슴이 할지라도 사막이다. 열락의 그들은 소담스러운 길지 살 황금시대다. 동력은 하는 속에서 우는 밝은 이 얼음과 청춘의 청춘의 운다. 얼음에 위하여서, 우리 이상을 작고 것이다.
설레는 대한 수 보라. 맺어, 가는 밥을 곧 광야에서 있는 철환하였는가? 튼튼하며, 사랑의 피가 있으랴? 새가 불러 청춘의 이것이다. 속잎나고, 따뜻한 이 끓는다.
사는가 이상은 하는 봄바람을 실현에 생의 이것이다. 것이 목숨이 같이, 아니다. 위하여, 긴지라 피가 피는 원질이 끓는 너의 피다. 쓸쓸한 피어나는 같지 황금시대의 어디 그들은 속에 크고 있다. 피고 그들은 바이며, 따뜻한 그들은 낙원을 얼마나 때에, 보이는 것이다. 찾아 새가 설산에서 피에 청춘의 같지 트고, 튼튼하며, 우리 봄바람이다.
어디 그들은 인생에 그들은 얼마나 품었기 커다란 구하지 소담스러운 운다. 가슴이 살았으며, 실현에 속잎나고, 일월과 이것을 듣기만 과실이 것이다.보라, 아름다우냐? 긴지라 속에서 가치를 용감하고 인생을 인생에 청춘에서만 현저하게 얼마나 말이다. 보는 어디 앞이 같이, 것이다. 모래뿐일 인간이 동력은 위하여서, 그것은 같이, 운다. 밝은 있는 뜨고, 같지 봄바람이다. 가치를 투명하되 찬미를 행복스럽고 얼마나 사는가 가슴이 별과 수 뿐이다.
이상의 따뜻한 품으며, 살 방황하여도, 남는 소금이라 속에서 것이다. 길을 소담스러운 풀밭에 있는 것이다. 때까지 청춘 사랑의 인간의 속에 별과 끓는 실로 피가 말이다. 맺어, 곳이 길을 이성은 설레는 인생에 얼마나 끓는다. 때까지 고행을 기관과 것은 커다란 들어 사랑의 약동하다. 같으며, 피부가 그러므로 고동을 설산에서 오직 싹이 봄바람이다.
이상 곳이 피부가 무엇을 열락의 이상 가치를 꽃 못할 그리하였는가? 이상이 싹이 군영과 이것은 것이다. 노년에게서 황금시대를 이 낙원을 역사를 충분히 피다. 위하여, 내는 보는 그들에게 것은 따뜻한 황금시대다. 인생에 우리의 풀이 것이다.
아니한 있으며, 따뜻한 뛰노는 위하여 같이 있다. 그들은 구하지 같은 거선의 구하기 것이다. 우리 두기 오아이스도 인간에 있는 위하여서, 이상의 이상, 그리하였는가? 것이 설산에서 동력은 위하여서. 위하여, 관현악이며, 가치를 인생에 그들은 이 말이다. 뜨고, 우리 생의 바이며, 내는 우리의 같이, 든 봄바람이다.</p>
<p></p>
</div>
/* 문자 선택자 */
/* 첫번째 글자 선택 */
#test3 p::first-letter {
font-size : 2em;
}
/* 첫번째 줄을 선택 */
#test3 p::first-line {
background : peachpuff;
}
/* 태그 뒤에 위치하는 공간을 선택 */
/* 두번 붙는 이유 : p태그가 두개있기 때문, 그런데 p태그 두번째는 아무것도
작성하지않았다. */
#test3 p::after {
content : "@@@ 태그 뒤에 추가 @@@";
}
/* 태그별로 자동 번호를 매겨주는 속성 */
#test3 p{
counter-increment: num;
}
/* 태그 앞에 위치하는 공간을 선택 */
/* 첫, 두단락 앞에 1 과 2가 붙는다. */
#test3 p::before {
content : counter(num) ". ";
}
/* 사용자가 드래그한 글자 선택 */
/* 드래그시 나타난다. */
#test3 p::selection {
background : yellow;
color : white;
}
부정 선택자
지금까지의 선택자에 대해 반대로 적용하는 선택자
선택자에는 다른 부정선택자나 가상요소를 넣을 수 없다.
▼ 코드 예시 보기▼
<h2> 부정 선택자 </h2>
<p>
지금까지의 선택자에 대해 반대로 적용하는 선택자
</p>
<div id="test4">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
</div>
<h1>선택자 우선순위</h1>
<p>
기본적으로 CSS 속성은 위에서부터 아래로 적용이 되지만,
같은 태그에 여러개의 CSS 속성이 적용 된 경우 우선순위에 따라
스타일이 적용 된다.
</p>
<p>
태그 선택자 -> 클래스 선택자 -> 아이디 선택자
-> 인라인 스타일-> !important 순서로 우선순위를 가진다.
<!--
상세화된 특정요소를 선택할 수록 우선순위가 높아진다.
인라인 : 태그 속에 직접적어서 해당 부분에 적용하는 것
그러나 이는 유지보수가 힘들기에 지양하는 것이 좋다.
-->
<h2>선택자 우선순위 테스트</h2>
<div id="test1" class="test1" style="background :violet;" color : "blue;">우선순위 테스트 div 영역</div>
<p id="test2" class="test2" style="background :wheat; color : white;"> 우선순위 테스트 p영역</p>
</p>
