1. window.open()을 사용한 새 창 열기

window.open() 메소드는 새로운 창을 열 수 있는 기능을 제공합니다. 여러 매개변수를 통해 창의 URL, 이름, 크기 및 옵션을 지정할 수 있습니다.

예제 코드

function test1(){
    window.open("https://www.naver.com", "test", "width=500, height=500, resizable=no, location=no");
}

• 첫 번째 인자: 열고자 하는 URL 주소를 설정합니다.
• 두 번째 인자: 창의 이름을 지정하며, 동일한 이름으로 열면 새로운 창이 아닌 기존 창에서 내용이 갱신됩니다.
• 세 번째 인자: 창의 크기와 기능을 설정하며, width, height, resizable 등을 지정할 수 있습니다.

2. 타이머 관련 메소드

window.setTimeout()

window.setTimeout()은 지정한 시간 후에 함수가 한 번만 실행되도록 설정합니다. 비동기적으로 동작하여 특정 시간이 지난 후 코드를 실행할 때 유용합니다.

예제 코드

function test2(){
    setTimeout(function(){
        console.log("서버에서 데이터 도착");
    }, 3000);
}

• 3초 후에 console.log 문이 실행되어 데이터 도착을 알립니다.

window.setInterval()

window.setInterval()은 일정 시간마다 주기적으로 함수를 실행합니다. 카운트 증가와 같은 반복적인 작업에 사용하기 적합합니다.

예제 코드

function test3(){
    const area1 = document.getElementById("area1");
    setInterval(() => {
        area1.innerHTML = getNowTimeHHMMSS();
    }, 1000);
}

function getNowTimeHHMMSS(){ const now = new Date(); return ${now.getHours()} : ${now.getMinutes()} : ${now.getSeconds()}; }

• setInterval을 사용해 1초마다 getNowTimeHHMMSS() 함수를 호출하여 현재 시간을 화면에 표시합니다.

3. BOM(Browser Object Model)

location 객체

location 객체는 브라우저의 현재 주소와 관련된 기능을 제공합니다. 현재 URL을 변경하거나 페이지를 새로고침하는 등의 작업이 가능합니다.

예제 코드

<button onclick="location.href = 'http://www.naver.com'">네이버로 이동</button>
<button onclick="location.reload()">새로고침</button>

• location.href로 URL을 변경해 페이지를 이동할 수 있습니다.
• location.reload()로 현재 페이지를 새로고침합니다.

screen 객체

screen 객체는 사용자의 화면 정보를 제공합니다. 화면의 너비와 높이 등 디스플레이와 관련된 정보를 확인할 수 있습니다.

<button onclick="console.log(screen)">screen 객체 확인</button>

• 화면의 너비, 높이 등의 정보를 콘솔에 출력합니다.

navigator 객체

navigator 객체는 브라우저의 정보를 제공하며, 사용자의 브라우저가 지원하는 기능을 확인할 때 유용합니다.

<button onclick="console.log(navigator)">navigator 객체 확인></button>

history 객체

history 객체는 사용자가 방문한 페이지의 히스토리를 관리합니다. 앞으로 가기, 뒤로 가기 기능을 사용할 수 있습니다.

<button onclick="console.log(history)">history 객체 확인</button>

4. DOM을 사용하여 요소 조작

window 객체의 document 객체는 DOM을 통해 HTML 요소를 조작할 수 있도록 합니다. 새로운 요소를 추가하거나, 기존 요소의 내용을 변경할 수 있습니다.

예제 코드

function test4(){
    const area2 = document.querySelector("#area2");
    let h3El = document.createElement('h3');
    h3El.innerText = "안녕하세요.";
    area2.appendChild(h3El);
}

• document.createElement를 사용하여 새로운 h3 요소를 생성합니다.
• appendChild를 통해 생성한 요소를 DOM에 추가합니다.

1. 객체 선언 및 사용

객체는 중괄호 {}를 사용하여 생성되며, 속성명과 속성값을 key: value 형식으로 정의합니다. 속성값은 문자열, 숫자, 배열 등 다양한 자료형을 가질 수 있습니다.

예제 코드

function test1(){
    const product = {
        pName : "Dry Mango",
        price : 4000,
        kind : "pickle",
        ingredient :["mango", "sugar"]
    }

const area1 = document.getElementById("area1");
area1.innerHTML += "pName : " + product['pName'] + "<br>";
area1.innerHTML += `price : ${product.price}<br>`;
area1.innerHTML += `ingredient : ${product.ingredient[0]}, ${product.ingredient[1]}`;

}

• 객체 product는 속성 pName, price, kind, ingredient를 가집니다.
• 객체의 속성에 접근하는 방법은 두 가지가 있습니다:
  1. 객체명["속성명"]으로 접근
  2. 객체명.속성명으로 접근

2. 객체의 메소드 속성

객체의 속성 중에서 함수 자료형을 가지는 속성을 메소드라고 부릅니다. 메소드는 객체 내부에서 동작하는 함수를 의미하며, this 키워드를 사용하여 객체 자신의 속성에 접근할 수 있습니다.

예제 코드

function test2(){
    const dog = {
        name : "복실이",
        kind : "비글",
        eat : function(food){
            area2.innerHTML += `${this.kind} 종류인 ${this.name}가 ${food}를 먹고 있습니다.<br>`;
        }
    }
    dog.eat("사과");
}

• dog 객체의 메소드 eat은 this 키워드를 사용하여 객체 자신의 속성 name과 kind에 접근합니다.
• 메소드 호출 시 객체의 속성을 기반으로 동작하는 것을 확인할 수 있습니다.

3. 객체 배열을 사용한 다량의 데이터 관리

객체 배열을 사용하면 다량의 데이터를 효율적으로 관리할 수 있습니다. 각 객체는 특정한 데이터를 포함하고 있으며, 배열을 통해 반복적으로 객체의 속성에 접근하고, 메소드를 호출할 수 있습니다.

예제 코드

function test3(){
    const studentList = [
        {name: "전제민1", java: 85, db: 70, front: 60},
        {name: "전제민2", java: 70, db: 65, front: 75},
        {name: "전제민3", java: 65, db: 50, front: 65},
        {name: "전제민4", java: 50, db: 70, front: 100},
        {name: "전제민5", java: 100, db: 65, front: 65}
    ];

for(let i in studentList){
    studentList[i].getSum = function(){
        return this.java + this.db + this.front;
    }

    studentList[i].getAvg = function(){
        return this.getSum() / 3;
    }
}

const area3 = document.querySelector("#area3");
for(let student of studentList){
    area3.innerHTML += `이름: ${student.name}, 총점: ${student.getSum()}, 평균: ${student.getAvg()}<br>`;
}

}

• studentList는 객체 배열로, 각 객체는 학생의 정보와 성적을 담고 있습니다.
• getSum과 getAvg 메소드를 각 객체에 추가하여 총점과 평균을 계산합니다.
• 반복문을 통해 각 학생의 정보를 출력합니다.

1. 선언적 함수

선언적 함수는 함수 이름을 사용하여 정의되며, 호출 시 해당 이름으로 호출할 수 있습니다. 일반적으로 많이 사용되는 함수 정의 방법입니다.

예제 코드

function test1(){
    document.querySelector("#area1").innerHTML += "test1()함수 실행됨<hr>";
}

• function 함수명(매개변수, 매개변수) 형식으로 함수를 선언합니다.
• 해당 함수는 어디서든 호출 가능하며, 미리 정의된 로직을 실행합니다.

2. 익명 함수

익명 함수는 이름이 없는 함수로, 변수에 할당하거나 이벤트 핸들러로 사용할 수 있습니다.

예제 코드

const btn = document.getElementById("btn");
btn.onclick = function(){
    document.getElementById("area2").innerHTML += "이벤트 핸들러로 실행<br>";
}

• 함수에 이름을 붙이지 않고 변수나 속성에 바로 할당하여 사용할 수 있습니다.
• 버튼 클릭 시 익명 함수가 실행됩니다.

3. 함수의 매개변수

함수는 매개변수를 받아서 그에 따라 동작을 달리할 수 있습니다. 전달된 값에 따라 함수의 실행 결과를 유동적으로 변경할 수 있습니다.

예제 코드

function test2(name, age, address, isTrue){
    console.log(arguments);
    document.getElementById("area3").innerHTML = name + " " + age + " " + address;
}

• 매개변수를 통해 함수 실행 시 값을 전달할 수 있습니다.
• arguments 객체는 함수 호출 시 전달된 모든 매개변수를 배열 형태로 담고 있습니다.

4. 함수를 매개변수로 활용

함수를 다른 함수의 매개변수로 전달할 수 있습니다. 콜백 함수를 통해 비동기 처리나 함수의 실행을 제어할 수 있습니다.

예제 코드

function sendUserInfo(userInfo, callBack){
    let user = {
        name : "전제민",
        age : 21,
    }
    callBack(user);
}

sendUserInfo({userId: "user01", userPwd: "pass01"}, function(userInfo){ console.log(userInfo); });

• sendUserInfo 함수는 콜백 함수 callBack을 매개변수로 받아, 특정 작업이 완료된 후 콜백 함수를 실행합니다.

5. this 키워드

this는 현재 객체를 가리키며, 함수 내부에서 동적으로 변할 수 있습니다. 특히 이벤트 핸들러 내에서 this는 해당 이벤트가 발생한 요소를 참조합니다.

예제 코드

function test3(tmp){
    console.log(tmp);
}

• this는 함수 호출 시점에서 그 함수를 호출한 객체를 참조합니다.
• HTML 요소 내에서 this를 사용하면 해당 요소를 참조합니다.

6. 함수의 리턴

함수는 값을 반환할 수 있으며, 반환된 값은 함수 호출한 곳에서 사용 가능합니다.

예제 코드 (일반 값 반환)

function ran(){
    const random = parseInt(Math.random() * 100 + 1);
    return random;
}

function test5(){ document.querySelector("#area5").innerHTML += "랜덤값 : " + ran() + "
"; }

• return 문을 사용하여 함수의 실행 결과를 반환할 수 있습니다.
• 이 함수는 1부터 100까지의 난수를 반환합니다.

예제 코드 (함수 리턴)

function test6(){
    const inputE1 = document.getElementById("userName");

    let alFunk = function(){
        alert(inputE1.value);
    }

    return alFunk;
}

• 함수는 다른 함수도 반환할 수 있습니다.
• 반환된 함수는 이후 호출되어 실행될 수 있습니다.

1. 아이디를 이용해서 요소 가져오기

id 속성은 HTML 요소를 고유하게 식별하기 위해 사용됩니다. 이를 통해 특정 요소에 직접 접근할 수 있습니다.

예제 코드

function accessId(){
    let area1 = document.getElementById("area1");

area1.style.background = "yellow";
area1.style.color = "red";
area1.style.width = "200px";
area1.style.height = "200px";

area1.innerText = "클릭된 area1 영역";

}

• document.getElementById("아이디명")을 사용하면 해당 id를 가진 요소에 접근할 수 있습니다.
• style 속성을 이용해 요소의 스타일을 동적으로 변경할 수 있습니다.
• innerText를 통해 요소의 텍스트를 수정할 수 있습니다.

2. 태그명으로 요소 가져오기

HTML 문서에서 특정 태그를 가진 모든 요소를 가져오고 싶을 때, getElementsByTagName() 메서드를 사용할 수 있습니다.

예제 코드

function accessTagName(){
    let list = document.getElementsByTagName("li");

for(let i = 0; i < list.length; i++){
    list[i].innerHTML = (i+1) + "번째 요소입니다.";
    list[i].style.color = "red";
}

}

• document.getElementsByTagName("태그명")을 사용하면 지정한 태그를 가진 모든 요소가 배열 형태로 반환됩니다.
• 반복문을 통해 각 요소에 접근하여 내용을 수정하거나 스타일을 변경할 수 있습니다.

3. name 속성값을 이용해서 요소 가져오기

name 속성은 보통 폼 요소에서 그룹화된 입력 필드를 참조할 때 사용됩니다. 이를 통해 동일한 name을 가진 요소들에 접근할 수 있습니다.

예제 코드

function allCheck(){
    let allCheckBox = document.getElementById("all");
    let hobbyList = document.getElementsByName("hobby");

for(let checkbox of hobbyList){
    checkbox.checked = allCheckBox.checked;
}

}

• document.getElementsByName("name값")을 사용하면 해당 name을 가진 모든 요소를 배열로 반환받습니다.
• 이를 활용해 여러 체크박스의 상태를 일괄적으로 제어할 수 있습니다.

4. class로 접근하기

HTML 요소는 class 속성을 통해 그룹화할 수 있습니다. class로 요소에 접근할 때는 getElementsByClassName() 메서드를 사용합니다.

예제 코드

function accessClass(){
    let arr = document.getElementsByClassName("test");

for(let unit of arr){
    unit.innerHTML = "text를 클래스로 가지고 있는 요소";
}

}

• document.getElementsByClassName("클래스명")을 사용하면 해당 class를 가진 모든 요소가 배열로 반환됩니다.
• 반환된 요소들에 접근하여 내용을 변경할 수 있습니다.

5. 선택자 활용하기

보다 복잡한 CSS 선택자를 사용하여 요소를 선택할 수 있습니다. 이때 querySelector()와 querySelectorAll()을 사용합니다.

예제 코드

function accessSelector(){
    const divT1 = document.querySelector("#tmp1");
    const h2T1 = document.querySelectorAll("#tmp2 > h2");
    const spanE1 = document.querySelector("#tmp2 + span");

console.log(divT1);
console.log(h2T1);
console.log(spanE1);

}

• querySelector()는 지정한 선택자와 일치하는 첫 번째 요소만을 반환합니다.
• querySelectorAll()은 지정한 선택자와 일치하는 모든 요소를 배열로 반환합니다.

1. 데이터를 출력하는 구문

JavaScript에서 데이터를 출력하는 방법에는 여러 가지가 있습니다. 대표적인 출력 방법은 alert, console.log, document.write, 그리고 특정 HTML 요소의 innerHTML이나 innerText 속성을 사용하는 것입니다.

1) alert()

// alert 창에 메시지 출력
alert("안녕하세요");

• alert() 함수는 브라우저에서 간단한 경고창을 띄워줍니다.

2) console.log()

// 콘솔에 메시지 출력
console.log("콘솔에 입력");

• console.log()는 개발자 도구의 콘솔에 메시지를 출력합니다. 디버깅 시 유용하게 사용됩니다.

3) document.write()

function documentWrite(){
    let str = "<table border='1'>"
            + "<tr><td>1</td><td>2</td></tr>"
            + "</table>";
    document.write(str);
}

• document.write()는 페이지에 직접 HTML을 작성하여 출력합니다. HTML 태그도 포함될 수 있습니다.

4) innerHTML 및 innerText

function tagValue(){
    let divE1 = document.getElementById("area1");
    divE1.innerHTML = "<h3>속성이 변경됨</h3>";
    divE1.style.background = "yellow";
}

• innerHTML은 선택한 요소의 HTML 콘텐츠를 가져오거나 설정합니다.
• innerText는 선택한 요소의 텍스트만을 가져오거나 설정합니다.

2. 데이터를 입력받는 구문

JavaScript에서는 사용자가 입력한 데이터를 받아올 수 있는 방법도 다양합니다. 그 중 가장 흔하게 사용되는 방법들은 confirm(), prompt(), 그리고 특정 요소의 value 속성입니다.

1) confirm()

function testConfirm(){
    let result = confirm("졸리면 확인, 아니면 취소");
    let divE2 = document.getElementById("area2");
    if(result){
        divE2.innerHTML = "<h3>정신차리세요.</h3>";
    }else{
        divE2.innerHTML = "<h3>굳</h3>";
    }
}

• confirm() 함수는 사용자가 확인 또는 취소 버튼을 누를 수 있는 알림창을 띄웁니다. 사용자가 확인을 누르면 true, 취소를 누르면 false를 반환합니다.

2) prompt()

function testPrompt(){
    let name = prompt("당신의 이름은 무엇입니까?");
    let age = prompt("당신의 나이는 몇 살입니까?");
    let divE3 = document.getElementById("area3");
    divE3.innerHTML = "당신은 " + age + "살 <b>" + name + "</b>이시군요.";
}

• prompt() 함수는 사용자가 텍스트를 입력할 수 있는 창을 띄웁니다. 입력된 텍스트는 문자열로 반환되며, 취소를 누르면 null을 반환합니다.

3) 특정 요소의 value 속성

function testInput(){
    let input1 = document.getElementById("userId");
    let input2 = document.getElementById("userPwd");

console.log("아이디 " + input1.value);
console.log("비밀번호 " + input2.value);

let area4 = document.getElementById("area4");
area4.value = input1.value + " " + input2.value;

input1.value = "";
input2.value = "";

}

• 입력 요소(input)의 value 속성은 사용자가 입력한 값을 가져오거나 설정할 수 있게 해줍니다.

1. 스크립트 언어란?

스크립트 언어는 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도로 사용됩니다. 일반적으로 배우기 쉽고, 짧은 소스코드로 상호작용을 구현할 수 있도록 설계되어 있습니다.

2. JavaScript

JavaScript는 웹 브라우저에서 많이 사용되는 "인터프리터 방식"의 스크립트 언어입니다. 인터프리터 방식은 코드를 한 줄씩 읽어가며 바로 실행하는 방식으로, 실시간으로 텍스트를 분석해서 실행합니다. 이 방식은 문법 오류가 있는 경우, 실행 시점에서야 오류를 알려주는 특징이 있습니다.

<!-- JavaScript를 외부 파일로 불러오는 방법 -->
<script src="resources/js/sample.js"></script>

• 외부에서 JavaScript 파일을 불러와서 사용할 수 있습니다.

3. JavaScript의 장단점

장점

1. 빠른 수행 속도: 컴파일 과정 없이 인터프리터로 코드를 한 줄씩 읽어가며 바로 실행하기 때문에 수행 속도가 빠릅니다.
2. 쉽고 간단한 코드 작성: 코드 작성이 간단하여 초보자가 접하기 쉬운 구조를 가지고 있습니다.
   • 예: 접근 제한 개념이 없고, 변수 선언 시 자료형을 미리 정해둘 필요가 없습니다.

단점

1. 웹에 특화된 기술: JavaScript는 웹에 특화되어 있어 내부에서 제공하는 기능이 제한적입니다.
2. 보안 취약점: HTML 소스코드와 함께 작성되면 외부에 공개될 수 있어 보안 취약점이 발생할 수 있습니다.

4. JavaScript 사용법

JavaScript는 여러 가지 방법으로 웹 페이지에 포함될 수 있습니다. 여기서는 대표적인 세 가지 방법을 소개합니다.

1) Inline(인라인)

인라인 방식은 태그 내에서 간단한 소스코드를 작성하여 바로 실행되게 하는 방법입니다.

알림창 출력 콘솔 출력

• 버튼 클릭 시, alert와 console.log를 통해 각각 알림창과 콘솔에 메시지를 출력합니다.

2) Internal(내부)

Internal 방식은 HTML 문서 내의 <script> 태그 안에 JavaScript 코드를 작성하여 실행하는 방법입니다.

알림창 출력 콘솔 출력

• getElementById 메서드를 사용해 버튼 요소를 선택하고, 클릭 이벤트를 부여합니다.
• btnClick 함수는 콘솔에 메시지를 출력합니다.

3) External(외부)

External 방식은 JavaScript 코드를 별도의 .js 파일로 작성하고, HTML 문서에서 해당 파일을 불러와 사용하는 방법입니다.

알림창 출력

• test() 함수는 외부의 sample.js 파일에서 정의된 함수로, 버튼 클릭 시 실행됩니다.

1. 텍스트 색상 지정: color

color 속성은 텍스트의 색상을 지정하는 데 사용됩니다. 색상은 이름, 16진수 코드, RGB, RGBA 등의 다양한 방식으로 표현할 수 있습니다.

예제 코드와 설명

#c {
    color: red;
    color: #f57230;
    color: rgb(15, 94, 48);
    color: rgba(15, 94, 48, 0.452);
}

• color: red;: 텍스트를 빨간색으로 지정합니다.
• color: #f57230;: 텍스트를 16진수 코드를 사용해 주황색으로 지정합니다.
• color: rgb(15, 94, 48);: RGB 값을 사용해 초록색으로 지정합니다.
• color: rgba(15, 94, 48, 0.452);: RGBA 값을 사용해 투명도가 포함된 초록색으로 지정합니다.

2. 텍스트 장식: text-decoration

text-decoration 속성은 텍스트에 밑줄, 취소선, 윗줄 등의 장식을 추가하거나 없앨 때 사용됩니다.

예제 코드와 설명

#td1 { text-decoration: underline; }
#td2 { text-decoration: line-through; }
#td3 { text-decoration: overline; }

• text-decoration: underline;: 텍스트 아래에 밑줄을 긋습니다.
• text-decoration: line-through;: 텍스트 가운데에 취소선을 긋습니다.
• text-decoration: overline;: 텍스트 위에 윗줄을 긋습니다.

실습 예제

• 텍스트 영역 아래 줄 긋기
• 텍스트 영역 중간에 줄 긋기
• 텍스트 영역 위에 줄 긋기

• 각 텍스트는 지정된 text-decoration 속성에 따라 밑줄, 취소선, 윗줄이 추가됩니다.

3. 텍스트 정렬: text-align

text-align 속성은 텍스트의 정렬 방식을 설정하는 데 사용됩니다. 왼쪽, 오른쪽, 중앙, 양쪽 정렬이 가능합니다.

예제 코드와 설명

왼쪽 정렬된 텍스트입니다.

양쪽 정렬된 텍스트입니다.

중앙 정렬된 텍스트입니다.

오른쪽 정렬된 텍스트입니다.

• text-align: left;: 텍스트를 왼쪽에 정렬합니다.
• text-align: justify;: 텍스트를 양쪽에 정렬합니다.
• text-align: center;: 텍스트를 중앙에 정렬합니다.
• text-align: right;: 텍스트를 오른쪽에 정렬합니다.

4. 줄 간격 조절: line-height

line-height 속성은 텍스트 줄 간격을 조절하는 데 사용됩니다. 이 속성은 텍스트의 가독성을 높이는 데 중요한 역할을 합니다.

예제 코드와 설명

p {
    line-height: 30px;
}

• line-height: 30px;: 텍스트의 줄 간격을 30픽셀로 설정합니다.

실습 예제

<p style="line-height: 30px;">줄 간격이 30픽셀로 설정된 텍스트입니다.</p>

• 이 텍스트는 줄 간격이 30픽셀로 설정되어 가독성이 높아집니다.

1. 글꼴 설정: font-family

font-family 속성은 텍스트의 글꼴을 지정하는 데 사용됩니다. 여러 글꼴을 쉼표로 구분하여 지정할 수 있으며, 지정한 글꼴이 없을 경우를 대비해 대체 글꼴을 나열하는 것이 좋습니다.

예제 코드와 설명

#ff1 {
    font-family: 궁서체;
    font-size: 24px;
}

#ff2 { font-family: 고딕체; }

#ff3 { font-family: 'Courier New', Courier, monospace; }

#ff4 { font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 24px; }

• font-family: 궁서체;: 텍스트를 '궁서체'로 표시합니다.
• font-family: 'Courier New', Courier, monospace;: 여러 글꼴을 지정하여, 첫 번째 글꼴이 없는 경우 다음 글꼴로 대체합니다.
• font-family: "Noto Sans KR", sans-serif;: 웹폰트인 "Noto Sans KR"을 사용하며, 이 글꼴이 없을 경우 기본 sans-serif 글꼴로 표시합니다.

실습 예제

글꼴 테스트

글꼴 테스트

글꼴 테스트

글꼴테스트 Font Style Test

• 각 텍스트는 설정된 글꼴에 따라 표시됩니다.

웹폰트 사용

웹폰트를 사용하면 다양한 글꼴을 쉽게 적용할 수 있습니다. 예를 들어, Google Fonts를 이용해 원하는 글꼴을 사용할 수 있습니다.

• 이 코드는 "Noto Sans KR" 웹폰트를 불러오는 코드입니다. 웹 페이지에 포함하여 사용할 수 있습니다.

2. 글꼴 크기 설정: font-size

font-size 속성은 글꼴의 크기를 설정하는 데 사용됩니다. 크기는 px, em, rem 등 다양한 단위로 지정할 수 있습니다.

예제 코드와 설명

#ff1 {
    font-size: 24px;
}

• font-size: 24px;: 글꼴 크기를 24픽셀로 설정합니다.

3. 글꼴 굵기 설정: font-weight

font-weight 속성은 글꼴의 굵기를 조절하는 데 사용됩니다. 기본적으로 normal, bold, lighter, bolder 등이 있으며, 숫자 값(100~900)을 사용하여 세밀하게 조정할 수도 있습니다.

예제 코드와 설명

#fw1 { font-weight: bold; }
#fw2 { font-weight: 900; }
#fw3 { font-weight: 100; }

• font-weight: bold;: 텍스트를 굵게 표시합니다.
• font-weight: 900;: 텍스트를 매우 굵게 표시합니다.
• font-weight: 100;: 텍스트를 매우 얇게 표시합니다.

실습 예제

• 원래굵기
• 굵은 글꼴로 변경
• 원래 굵기보다 더 굵게
• 원래 굵기보다 더 얇게

• 각 항목은 설정된 font-weight 속성에 따라 굵기가 다르게 표시됩니다.

1. Flexbox 기본 설정: display: flex

Flexbox를 사용하려면 먼저 부모 요소에 display: flex를 설정합니다. 이로 인해 자식 요소들이 Flex 컨테이너의 영향을 받게 됩니다.

예제 코드와 설명

.container {
    border: 3px solid black;
    display: flex;
    flex-direction: row;
}

• display: flex;: 부모 요소를 Flex 컨테이너로 만듭니다.
• flex-direction: row;: 자식 요소들을 수평으로 배치합니다. 다른 옵션으로는 column(수직), row-reverse, column-reverse가 있습니다.

실습 예제

• 위 코드는 세 개의 자식 요소를 수평으로 배치합니다.

2. Flex 아이템의 크기와 정렬

Flex 아이템의 크기와 정렬은 매우 유연하게 설정할 수 있습니다. flex 속성을 사용하면 각 아이템의 크기를 유연하게 조절할 수 있습니다.

예제 코드와 설명

.flex-item {
    color: black;
    font-size: 50px;
    padding: 24px;
    text-align: center;
    border: 1px solid red;
    width: 100px;
    flex: 1;
}

• flex: 1;: 각 아이템이 Flex 컨테이너 내에서 동일한 비율로 공간을 차지하도록 합니다.

실습 예제

• 각 아이템이 컨테이너 내에서 동일한 공간을 차지합니다.

3. Flexbox의 고급 정렬: justify-content와 align-items

Flexbox는 주축과 교차축을 기준으로 요소를 정렬할 수 있습니다. justify-content와 align-items 속성을 사용하면 요소들이 어떻게 정렬될지 결정할 수 있습니다.

예제 코드와 설명

.container2 {
    border: 3px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

• justify-content: space-between;: 자식 요소들이 주축(가로축)을 기준으로 양 끝에 배치되며, 요소 간의 간격을 균등하게 조절합니다.
• align-items: center;: 자식 요소들이 교차축(세로축) 기준으로 가운데 정렬됩니다.

실습 예제

• 여러 개의 아이템이 Flexbox의 주축과 교차축에 따라 균등하게 정렬됩니다.

1. 요소의 크기 조절: width와 height

width와 height 속성은 요소의 가로와 세로 길이를 설정하는 데 사용됩니다. 고정 크기(px) 또는 가변 크기(%)로 설정할 수 있습니다.

예제 코드와 설명

.size-test {
    border: 1px solid red;
}

#test1 { width: 400px; height: 200px; }

#test2 { width: calc(100% - 100px); height: 150px; }

• #test1: 고정된 크기(px)를 설정하여 요소의 가로, 세로 크기를 지정했습니다.
• #test2: 가변 크기(%)를 사용하여 부모 요소 크기의 100%에서 100px을 뺀 크기로 설정했습니다.

실습 예제

width, height

기본적으로 내용을 차지하는 content영역의 가로, 세로 길이를 조정하는데 사용하는 스타일

고정크기(px)

가변크기(%)

• 고정 크기와 가변 크기를 설정하여 요소의 크기를 조절할 수 있습니다.

2. 화면 배치 방법: display

display 속성은 요소가 화면에 배치되는 방식을 결정합니다. inline, block, inline-block 등이 있습니다.

예제 코드와 설명

.display-test {
    border: 1px solid black;
    width: 150px;
    height: 150px;
}

.inline { display: inline; }

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

.block { display: block; }

• inline: 요소가 다른 요소와 한 줄에 배치되며, 크기 조절이 불가능합니다.
• block: 요소가 한 줄 전체를 차지하며, 크기 조절이 가능합니다.
• inline-block: inline과 block의 특성을 결합하여 한 줄에 배치되면서도 크기 조절이 가능합니다.

실습 예제

display : 화면 배치 방법 변경

display : inline

display : block

display : inline-block

• display 속성을 사용해 요소를 인라인, 블록, 인라인-블록으로 배치할 수 있습니다.

3. 요소의 위치 조절: position

position 속성은 요소를 특정 위치에 배치하는 데 사용됩니다. relative, absolute, fixed 등이 있습니다.

예제 코드와 설명

.outer {
    position: relative; /* 기준 */
    border: 1px solid black;
}

#first { width: 300px; height: 300px; background: yellow; }

#second { width: 200px; height: 200px; background: yellowgreen; position: absolute; /* 내가 원하는 위치에 두기 */ left: 50px; top: 50px; }

#third { width: 100px; height: 100px; background: red; position: absolute; top: 100px; left: 100px; }

#fixed-area { width: 100px; height: 100px; background: blue; position: fixed; right: 20px; bottom: 20px; }

• relative: 요소를 기준 위치에서 상대적으로 이동시킵니다.
• absolute: 부모 요소를 기준으로 절대 위치에 배치합니다.
• fixed: 화면의 특정 위치에 고정하여 스크롤에도 위치가 변하지 않습니다.

실습 예제

position: 상대위치(relative)와 절대위치(absolute)

position: 고정위치(fixed)

• position 속성을 사용해 요소를 상대적, 절대적, 고정 위치에 배치할 수 있습니다.

4. 가시성 제어: visibility와 opacity

visibility와 opacity 속성은 요소의 가시성을 제어합니다. 요소를 숨기거나 투명도를 조절할 수 있습니다.

예제 코드와 설명

.vis-test {
    width: 100px;
    height: 100px;
}

.opacity-zero { opacity: 0; }

.hidden { visibility: hidden; }

.none { display: none; }

• opacity: 0;: 요소를 완전히 투명하게 만들어 보이지 않게 합니다.
• visibility: hidden;: 요소를 보이지 않게 하지만, 레이아웃에서 공간을 차지합니다.
• display: none;: 요소를 완전히 제거하여 레이아웃에서도 사라지게 합니다.

실습 예제

visibility: 특정요소를 보이거나 보이지 않게하는 스타일 속성

• 요소의 가시성을 조절하여 화면에 보이게 하거나 숨길 수 있습니다.

5. 요소의 정렬: float

float 속성은 요소를 왼쪽 또는 오른쪽으로 띄워서 다른 요소들과 함께 배치할 수 있도록 합니다.

예제 코드와 설명

.float-test {
    border: 1px solid black;
    width: 70px;
    height: 30px;
    float: left;
}

• float: left;: 요소를 왼쪽으로 띄워서 배치합니다.

실습 예제

float

페이지 내의 요소들을 띄워서 화면으로부터 왼쪽 또는 오른쪽으로 배치하는 속성

• float 속성을 사용해 요소를 좌우로 정렬할 수 있습니다.

1. 요소의 기본 구조

CSS에서 요소의 영역은 content(내용) + padding(내부 여백) + border(테두리)로 구성됩니다. 이를 통해 요소 간의 간격을 조절하고, 레이아웃을 정리할 수 있습니다.

예제 코드와 설명

body {
    margin: 0px;
}

.test { background: yellow; width: 100px; height: 100px; border: 10px solid black; }

• body 요소는 기본 여백(margin)을 없애기 위해 margin: 0px;로 설정했습니다.
• .test 클래스는 기본적인 배경색, 크기, 테두리를 설정한 div 요소입니다.

실습 예제

요소 영역 --> content(내용) + padding(여백) + border(테두리)

기존 div

• 이 코드에서는 요소가 배경색과 테두리를 갖춘 기본 div로 렌더링됩니다.

2. 내부 여백(padding)

padding 속성은 요소의 내용(content)과 테두리(border) 사이의 거리를 조절하는 데 사용됩니다. 다양한 방식으로 padding을 설정하여 원하는 레이아웃을 만들 수 있습니다.

예제 코드와 설명

#test1 {
    padding: 100px; /* 사방으로 100px */
}

#test2 { padding-top: 100px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; }

#test3 { padding: 100px 20px 30px 10px; /* 위에서부터 시계 방향으로 / padding: 100px 50px; / 위아래 양쪽 */ }

• #test1: 사방에 100px의 padding을 적용합니다.
• #test2: 각각의 방향에 대해 다른 값을 설정합니다.
• #test3: 시계 방향으로 padding을 설정하고, 간소화된 문법으로 위아래 양쪽에 동일한 padding을 적용합니다.

실습 예제

padding

내용물 영역(content)과 테두리 영역(border) 사이의 거리를 조절하는 스타일 속성

• padding을 통해 요소의 내부 여백을 설정할 수 있습니다.

3. 외부 여백(margin)

margin 속성은 요소 간의 간격을 조절하는 데 사용됩니다. padding과는 달리 요소 외부의 여백을 조절합니다.

예제 코드와 설명

#test4 {
    margin: 50px;
}

#test5 { margin-top: 50px; margin-left: 10px; margin: 100px 20px 30px 10px; }

#test6 { margin: auto; }

• #test4: 모든 방향에 50px의 margin을 적용합니다.
• #test5: 각각의 방향에 대해 다른 margin 값을 설정합니다.
• #test6: auto로 설정해, 요소를 가운데 정렬합니다.

실습 예제

margin

타 요소들 간의 간격을 조절할 때 사용

• margin을 이용해 요소 간의 외부 여백을 설정할 수 있습니다.

4. 테두리(border)

border 속성은 요소의 테두리를 정의합니다. 테두리의 두께, 스타일, 색상을 설정하여 다양한 시각적 효과를 줄 수 있습니다.

예제 코드와 설명

#test7 {
    border: 1px solid black;
    border-width: 5px;
    border-style: double;
    border-color: aquamarine;
    border-left: 1px solid black;
    border-right-color: blue;
}

• #test7: 테두리의 두께, 스타일, 색상을 각각 설정하여 테두리를 구성합니다.

실습 예제

테두리

• 테두리를 이용해 요소의 경계선을 정의할 수 있습니다.

5. 배경 스타일(background)

background 속성은 요소의 배경색이나 배경 이미지를 설정하는 데 사용됩니다. 배경 이미지의 위치, 반복 여부 등을 세부적으로 설정할 수 있습니다.

예제 코드와 설명

#test8 {
    width: 1000px;
    height: 500px;
    border-width: 10px;
    box-sizing: border-box;
    background-color: aqua;
    background-image: url('https://menu.mtn.co.kr/upload/article/2024/08/26/2024082612473657679_00_169.jpg');
    background-repeat: no-repeat;
    background-position: 100px 50px 10px;
}

• #test8: 배경 색상과 이미지를 설정하고, 이미지의 위치와 반복 여부를 정의합니다.

실습 예제

배경관련 스타일

• 배경 이미지를 설정하고 다양한 속성을 통해 시각적 효과를 줄 수 있습니다.

1. 텍스트 색상 지정: color

color 속성은 텍스트의 색상을 지정하는 데 사용됩니다. 색상은 기본 색상명, 16진수 코드, RGB, RGBA 값 등 다양한 방법으로 지정할 수 있습니다.

예제 코드와 설명

#c {
    color: red;
    color: #f57230;
    color: rgb(15, 94, 48);
    color: rgba(15, 94, 48, 0.452);
}

• #c 요소에 다양한 방식으로 색상을 지정했습니다.
• red: 기본 색상명
• #f57230: 16진수 색상 코드
• rgb(15, 94, 48): RGB 색상 값
• rgba(15, 94, 48, 0.452): 투명도를 포함한 RGBA 색상 값

실습 예제

color : 텍스트 색상 지정

    선택자{
        color: 색상명 | #16진수(코드값) | rgb(x,x,x) | rgba(x,x,x,x) 
    }

• 다양한 색상 지정 방법을 이용해 텍스트의 색상을 설정할 수 있습니다.

2. 텍스트에 줄 긋기: text-decoration

text-decoration 속성은 텍스트에 줄을 긋거나 줄을 없애는 데 사용됩니다. underline, overline, line-through 등 다양한 옵션을 제공하여 텍스트를 꾸밀 수 있습니다.

예제 코드와 설명

#td1 { text-decoration: underline; }
#td2 { text-decoration: line-through; }
#td3 { text-decoration: overline; }

• #td1: 텍스트 아래에 줄을 긋습니다.
• #td2: 텍스트 가운데에 줄을 긋습니다.
• #td3: 텍스트 위에 줄을 긋습니다.

실습 예제

text-decoration : 텍스트에 줄을 긋거나 줄을 없앨 때 사용

    선택자{
        text-decoration : none | underline | overline | line-through;
    }

• 텍스트 영역 아래 줄 긋기
• 텍스트 영역 중간에 줄 긋기
• 텍스트 영역 위에 줄 긋기

• 텍스트에 다양한 방식으로 줄을 그어 시각적 효과를 줄 수 있습니다.

3. 텍스트 정렬: text-align

text-align 속성은 텍스트를 좌우 또는 중앙에 정렬할 때 사용됩니다. left, right, center, justify 등의 값을 사용하여 텍스트를 원하는 위치에 정렬할 수 있습니다.

예제 코드와 설명

p {
    text-align: left;
    text-align: right;
    text-align: center;
    text-align: justify;
}

• left: 텍스트를 왼쪽으로 정렬합니다.
• right: 텍스트를 오른쪽으로 정렬합니다.
• center: 텍스트를 중앙으로 정렬합니다.
• justify: 텍스트를 양쪽 정렬합니다.

실습 예제

text-align : 텍스트 정렬할 때 사용

    선택자{
        text-align: left(기본값) | right | center | justify
    }

왼쪽정렬(기본값)

텍스트 예제

양쪽정렬

텍스트 예제

중앙정렬

텍스트 예제

오른쪽정렬

텍스트 예제

• 다양한 텍스트 정렬 방법을 통해 레이아웃을 조정할 수 있습니다.

4. 줄 간격 조절: line-height

line-height 속성은 텍스트 줄 간격을 조절할 때 사용됩니다. 픽셀 단위, em 단위, 백분율 등 다양한 단위를 사용하여 줄 간격을 조정할 수 있습니다.

예제 코드와 설명

p {
    line-height: normal;
    line-height: 30px;
}

• normal: 기본 줄 간격으로 설정합니다.
• 30px: 고정된 픽셀 단위로 줄 간격을 설정합니다.

실습 예제

line-height : 줄 간격 조절할 때 사용

    선택자{
        line-height: normal | px | em | %
    }

px고정단위 간격

텍스트 예제

• 줄 간격을 조절하여 텍스트의 가독성을 높일 수 있습니다.

글꼴 설정: font-family

font-family 속성은 요소의 글꼴을 지정할 때 사용합니다. 여러 글꼴을 지정하면, 사용자의 시스템에 첫 번째 글꼴이 없을 경우 다음 글꼴이 적용됩니다. 웹 페이지에 적절한 글꼴을 사용하면 페이지의 가독성과 디자인이 크게 향상됩니다.

예제 코드와 설명

#ff1 {
    font-family: 궁서체;
    font-size: 24px;
}

#ff2 { font-family: 고딕체; }

#ff3 { font-family: 'Courier New', Courier, monospace; }

#ff4 { font-family: "Noto Sans KR", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 24px; }

• #ff1은 궁서체 글꼴을 사용하며, 글씨 크기는 24px입니다.

• #ff2은 고딕체 글꼴을 사용합니다.

• #ff3은 Courier New 글꼴을 사용하며, 이는 고정폭 글꼴입니다.

• #ff4는 구글 웹폰트를 이용한 Noto Sans KR 글꼴을 사용합니다. 또한 글꼴의 크기, 굵기, 스타일이 지정되어 있습니다.

실습 예제

글꼴 테스트

글꼴 테스트

글꼴 테스트

글꼴테스트 Font Style Test

• 각 <p> 태그에 다른 글꼴이 적용됩니다. 웹폰트를 사용하고자 할 경우, 구글 웹 폰트 사이트에서 필요한 폰트를 검색해 사용할 수 있습니다.

글꼴 크기: font-size

font-size 속성은 글꼴의 크기를 조절합니다. 글꼴의 크기를 px(픽셀) 단위로 지정할 수 있으며, 반응형 웹 디자인에서는 em이나 rem 단위도 자주 사용됩니다.

예제 코드와 설명

#ff1 {
    font-size: 24px;
}

• #ff1은 글꼴 크기가 24px로 지정되어 있습니다. 이 속성을 사용해 텍스트의 크기를 변경할 수 있습니다.

실습 예제

font-size : 글꼴의 크기를 변경할 때 사용

선택자{font-size : 크기(px, em, rm)}

• font-size 속성으로 다양한 크기의 텍스트를 설정할 수 있습니다.

글꼴 굵기: font-weight

font-weight 속성은 글꼴의 굵기를 설정합니다. 굵기는 normal, bold, light 등의 키워드 또는 숫자 값(100~900)을 사용하여 설정할 수 있습니다.

예제 코드와 설명

#fw1 {font-weight: bold;}
#fw2 {font-weight: 900;}
#fw3 {font-weight: 100;}

• #fw1은 글꼴이 굵게(bold) 설정되어 있습니다.

• #fw2는 글꼴이 가장 굵은(900) 설정입니다.

• #fw3은 글꼴이 가장 얇게(100) 설정되어 있습니다.

실습 예제

font-weight : 글꼴의 굵기를 표현할 때 사용

선택자{font-weight : normal | bold | light}

• 원래굵기
• 굵은 글꼴로 변경
• 원래 굵기보다 더 굵게
• 원래 굵기보다 더 얇게

• 이 예제에서 <li> 태그에 적용된 font-weight 속성을 통해 글씨의 굵기가 어떻게 변하는지 확인할 수 있습니다.

기본 우선순위 규칙

CSS의 기본적인 적용 순서는 위에서 아래로입니다. 즉, 아래에 위치한 스타일이 위의 스타일을 덮어쓰게 됩니다. 하지만 동일한 요소에 여러 선택자가 적용될 경우, 선택자의 우선순위에 따라 스타일이 적용됩니다.

선택자 우선순위

CSS에서 선택자의 우선순위는 다음과 같은 순서로 결정됩니다:

1. 태그 선택자 (예: h1, p)
2. 클래스 선택자 (예: .class1)
3. 아이디 선택자 (예: #id1)
4. 인라인 스타일 (예: <h1 style="color: red;">)
5. !important 규칙

위의 순서에 따라, 동일한 요소에 여러 스타일이 적용될 경우, 가장 높은 우선순위를 가진 스타일이 적용됩니다.

예제 코드와 설명

다음은 선택자 우선순위를 보여주는 예제입니다:

h1 {
    background: pink;
}

h1 { background: red;
/* 동일한 요소에 중복된 선택자. 후자의 스타일이 적용됩니다. */ }

#id1 { background: blue; /* 아이디 선택자는 클래스 선택자보다 우선순위가 높습니다. */ }

.class1 { background: yellow; /* 클래스 선택자는 태그 선택자보다 우선순위가 높습니다. */ }

div { background: aqua!important; color: black; /* !important 규칙이 적용된 스타일은 최우선으로 적용됩니다. */ }

• 첫 번째 h1 선택자는 background: pink;를 지정합니다. 그러나 두 번째 h1 선택자가 바로 뒤에 위치해 있으므로, background: red;가 최종적으로 적용됩니다.

• #id1 선택자는 background: blue;를 지정합니다. 이 아이디 선택자는 클래스 선택자보다 우선순위가 높아, 클래스에서 지정한 스타일을 덮어씁니다.

• .class1 선택자는 background: yellow;를 지정합니다. 클래스 선택자는 태그 선택자보다 우선순위가 높습니다.

• div 선택자에 background: aqua!important;를 사용했습니다. !important는 모든 다른 우선순위 규칙보다 우선적으로 적용되므로, background: aqua;가 최종적으로 적용됩니다.

실습 예제

다음 HTML 코드에서는 선택자 우선순위에 따라 스타일이 적용되는 것을 확인할 수 있습니다:

선택자 우선순위

기본적으로 CSS는 위에서부터 아래로 적용됩니다.
동일한 요소에 다양한 선택자로 CSS를 부여한 경우 우선순위는 다음과 같습니다:
태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인 스타일 방식 → `!important`

• 이 코드에서는 <div> 요소에 id="id1"과 class="class1"이 적용되었습니다. 기본적으로 #id1의 스타일이 .class1의 스타일보다 우선합니다.

• 그러나, div 선택자에 !important를 사용했기 때문에, 해당 스타일이 최종적으로 적용됩니다.

1. 속성 선택자

속성 선택자는 특정 속성과 그 값을 가진 HTML 요소를 선택할 때 사용됩니다. 선택자 뒤에 대괄호 []를 사용하여 속성과 속성값을 지정합니다.

선택자[속성  = 속성값]
선택자[속성 ~= 속성값]
선택자[속성 |= 속성값]
선택자[속성 ^= 속성값]
선택자[속성 $= 속성값]
선택자[속성 *= 속성값]{
    스타일 속성: 값;
    ...
}

• 선택자[속성=값]: 특정 속성에 특정 값을 가진 요소를 선택합니다.

• 선택자[속성~=값]: 특정 속성에 지정된 단어를 포함하는 요소를 선택합니다.

• 선택자[속성|=값]: 특정 속성 값이 지정된 값으로 시작하거나, -로 연결된 요소를 선택합니다.

• 선택자[속성^=값]: 특정 속성 값이 지정된 값으로 시작하는 요소를 선택합니다.

• 선택자[속성$=값]: 특정 속성 값이 지정된 값으로 끝나는 요소를 선택합니다.

• 선택자[속성*=값]: 특정 속성 값에 지정된 값이 포함된 요소를 선택합니다.

2. 자손 선택자와 후손 선택자

자손 및 후손 선택자는 요소들 간의 관계를 기반으로 특정 요소를 선택할 때 사용됩니다.

/* 자손 선택자 */
a > b {
    스타일 속성: 값;
    ...
}
/* 후손 선택자 */
a b {
    스타일 속성: 값;
    ...
}

• a > b: a 요소의 바로 하위에 있는 b 요소만을 선택합니다.

• a b: a 요소의 모든 하위 요소 중에서 b 요소를 선택합니다.

3. 동위(같은 레벨) 선택자

동위 선택자는 같은 레벨에 위치한 특정 요소를 선택할 때 사용됩니다.

/* a 요소 바로 뒤에 있는 b 요소 하나만 선택 */
a + b {
    스타일 속성: 값;
    ...
}
/* a 요소 뒤에 있는 모든 b 요소를 선택 */
a ~ b {
    스타일 속성: 값;
    ...
}

• a + b: a 요소 바로 뒤에 있는 b 요소 하나만을 선택합니다.
• a ~ b: a 요소 뒤에 있는 모든 b 요소를 선택합니다.

ul

4. 반응 선택자

반응 선택자는 사용자의 상호작용에 따라 스타일을 적용할 때 사용됩니다.

/* 해당 요소가 클릭되었을 때 스타일 부여 */
선택자:active {
    스타일 속성: 값;
    ...
}
/* 해당 요소에 마우스가 올라갔을 때 스타일 부여 */
선택자:hover {
    스타일 속성: 값;
    ...
}

• 선택자:active: 요소가 클릭된 상태일 때 스타일을 적용합니다.
• 선택자:hover: 요소에 마우스가 올라갔을 때 스타일을 적용합니다.

5. 상태 선택자

상태 선택자는 요소의 상태에 따라 스타일을 적용할 때 사용됩니다.

/* 체크된 상태의 요소 선택 */
선택자:checked {
    스타일 속성: 값;
    ...
}
/* 초점이 맞춰진 input 요소 선택 */
선택자:focus {
    스타일 속성: 값;
    ...
}
/* 활성화된 요소 선택 */
선택자:enabled {
    스타일 속성: 값;
    ...
}
/* 비활성화된 요소 선택 */
선택자:disabled {
    스타일 속성: 값;
    ...
}

• 선택자:checked: 체크된 상태의 요소에 스타일을 적용합니다.
• 선택자:focus: 초점이 맞춰진 요소에 스타일을 적용합니다.
• 선택자:enabled: 활성화된 요소에 스타일을 적용합니다.
• 선택자:disabled: 비활성화된 요소에 스타일을 적용합니다.

<input type="checkbox" id="apple">
<label for="apple">사과</label>

선택자란?

CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용하는 기능입니다. 선택자를 사용하여 HTML 요소를 선택하고, 해당 요소에 원하는 스타일을 지정할 수 있습니다.

선택자란?

특정 html 요소를 선택하고자 할때 사용하는 기능
해당 요소를 선택해서 원하는 "스타일"과 "기능"을 적용시킬 수 있다.

• HTML 요소를 선택하여 스타일이나 기능을 적용할 때 사용됩니다.

1. 모든(전체) 선택자: *

전체 선택자는 문서 내의 모든 요소를 선택할 때 사용됩니다.

• { 스타일속성: 값; 스타일속성: 값; ... }

• *: 문서의 모든 요소에 스타일을 적용할 때 사용됩니다.

2. 태그 선택자: 태그명

태그 선택자는 특정 태그를 선택하여 스타일을 적용합니다. 문서 내에 해당 태그가 여러 개 있을 경우, 모든 해당 태그에 동일한 스타일이 적용됩니다.

태그명 {
    스타일속성: 값;
    ...
}

• 태그명: 문서 내 특정 태그(예: h1, p, div)에 스타일을 적용할 때 사용됩니다.

3. 아이디 선택자: #아이디

아이디 선택자는 특정 HTML 요소 하나만을 선택할 때 사용됩니다. 이때 선택하려는 요소에는 반드시 고유한 id 속성이 있어야 합니다.

#id1 {
    color: skyblue;
}

```html
<ol>
    <li id="id1">아이디선택자</li>
    <li>아이디선택자</li>
    <li>아이디선택자</li>
    <li>아이디선택자</li>
</ol>
>```

- `#아이디`: 특정 요소 하나에 스타일을 적용합니다. 문서 내에서 유일해야 합니다.

## 4. 클래스 선택자: `.클래스명`
클래스 선택자는 여러 요소에 동일한 스타일을 적용할 때 사용됩니다. 동일한 클래스를 여러 요소에 중복하여 사용할 수 있으며, 여러 개의 클래스를 한 요소에 적용할 수도 있습니다.

>```css
.cl1 {
    color: blueviolet;
}
>
.cl2 {
    font-size: 25px;
    color: black;
}
>
.cl1.cl2 {
    background: beige;
}

```html

• 클래스1
• 클래스2
• 클래스3
• 클래스4
• 클래스5

• .클래스명: 문서 내 여러 요소에 스타일을 적용할 때 사용됩니다.
• 여러 클래스를 조합하여 스타일을 복합적으로 적용할 수 있습니다.

1. input 태그

input 태그는 사용자가 값을 입력할 수 있는 다양한 형태의 입력 상자를 제공합니다.

아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>
성별 : <input type="radio" name="gender">남
       <input type="radio" name="gender">여
<br>
<input type="submit" value="회원가입">

• type="text": 한 줄짜리 텍스트를 입력받습니다.
• type="password": 비밀번호 입력 상자입니다. 입력된 문자가 보이지 않습니다.
• type="radio": 여러 개 중 하나만 선택 가능한 라디오 버튼입니다.
• type="submit": 입력된 데이터를 서버로 전송하는 버튼입니다.

2. form 태그

form 태그는 사용자가 입력한 데이터를 서버로 전송하는 역할을 합니다.

• action: 데이터를 전송할 서버의 URL을 지정합니다.
• method: 데이터를 전송하는 방식입니다. get과 post가 있으며, get은 데이터를 URL에 노출시키고, post는 데이터를 숨깁니다.
• fieldset: 관련된 입력 양식을 그룹화하여 테두리로 묶습니다.
• legend: fieldset 그룹에 제목을 붙입니다.

3. Text와 관련된 input 태그의 타입

텍스트와 관련된 다양한 input 태그들이 존재합니다.

아이디 : <input type="text" name="userId" placeholder="아이디를 입력해주세요." maxlength="12" required><br>
비밀번호 : <input type="password" name="userPwd" placeholder="영문, 숫자 포함 8~12자리" maxlength="12" required><br>
검색 : <input type="search" name="keyword"><br>
홈페이지 : <input type="url" name="url"><br>
이메일 : <input type="email" name="email"><br>
전화번호 : <input type="phone" name="phone"><br>
<input type="submit">

• type="text": 일반 텍스트 입력.
• type="password": 비밀번호 입력.
• type="search": 검색어 입력.
• type="url": URL 입력.
• type="email": 이메일 입력.
• type="phone": 전화번호 입력.

4. textarea 태그

textarea 태그는 여러 줄의 텍스트를 입력받을 수 있습니다.

설명 : <textarea name="description" cols="30" rows="10" style="resize: none;"></textarea>

• textarea: 여러 줄의 텍스트를 입력받습니다. cols와 rows 속성을 통해 크기를 지정할 수 있으며, resize: none;을 통해 크기 조정을 막을 수 있습니다.

5. 숫자와 관련된 input 태그의 타입

숫자를 입력받을 때 사용되는 input 태그 타입입니다.

수량 : <input type="number" name="amount" min="0" max="20" step="5" value="10"><br>
점수 : <input type="range" name="score" min="0" max="100" step="20"><br>
<input type="submit">

• type="number": 숫자만 입력 가능하며, 스핀 박스가 표시됩니다.
• type="range": 슬라이드 바를 통해 숫자를 선택할 수 있습니다.

6. 날짜 및 시간과 관련된 input 태그의 타입

날짜와 시간을 입력받을 수 있는 태그입니다.

date : <input type="date"><br>
month : <input type="month"><br>
week : <input type="week"><br>
time : <input type="time"><br>
datetime-local : <input type="datetime-local"><br>

• type="date": 연도, 월, 일을 입력받습니다.
• type="month": 연도와 월을 입력받습니다.
• type="week": 연도, 월, 주를 입력받습니다.
• type="time": 시와 분을 입력받습니다.
• type="datetime-local": 연도, 월, 일, 시, 분을 입력받습니다.

7. selectbox

select 태그는 드롭다운 목록을 만듭니다.

<select name="color">
    <option value="red">빨간색</option>
    <option value="blue">파란색</option>
</select>

• select: 여러 개 중 하나를 선택할 수 있는 목록입니다.
• option: 선택 가능한 항목을 정의합니다.

8. radio button

radio 버튼은 여러 개 중 하나를 선택할 때 사용합니다.

<input type="radio" name="gender" id="man" value="man" checked>
<label for="man">남자</label>

• type="radio": 여러 개 중 하나를 선택하는 버튼입니다.
• name: 같은 이름을 가진 버튼들은 하나의 그룹으로 묶입니다.
• checked: 기본 선택된 버튼을 지정합니다.
• label: 라벨과 버튼을 연결해줍니다.

9. checkbox

checkbox는 여러 개 중 여러 개를 선택할 수 있는 버튼입니다.

<input type="checkbox" id="red" value="red" name="color">
<label for="red">빨간색</label>

• type="checkbox": 여러 개를 선택할 수 있는 버튼입니다.
• checked: 기본 선택된 버튼을 지정합니다.
• label: 라벨과 버튼을 연결해줍니다.

기본 HTML 구조

<!DOCTYPE html>

하이퍼링크의 기본 개념

• 하이퍼링크는 웹 문서의 중요한 기능으로, 다른 웹 페이지나 문서로의 이동을 지원합니다.
• 텍스트나 이미지를 클릭하여 다른 페이지로 넘어가는 링크를 만들 수 있습니다.

a 태그와 href 속성

하이퍼링크 관련태그

• 글자관련태그
• 목록관련태그
• 네이버로

• a 태그는 하이퍼링크를 생성하는 데 사용됩니다.
• href 속성에 연결할 페이지의 URL을 입력하여 링크를 설정합니다.
• 내부 페이지와 외부 페이지로 연결할 수 있습니다.

target 속성: 새로운 탭에서 열기

target 속성 : 연결된 페이지를 새로운 탭에서 열지 지정 (_self(기본값), _blank)

• target 속성을 사용하여 링크를 클릭했을 때의 동작을 지정할 수 있습니다.
• _self는 기본값으로, 현재 창에서 열기를 의미합니다.
• _blank를 사용하면 새로운 탭에서 링크를 열기가 가능합니다.

이미지 링크 만들기

img태그 이용해서 링크 만들기

네이버로

• a 태그 내부에 img 태그를 포함하여, 이미지를 클릭했을 때 링크로 이동할 수 있습니다.
• 이미지에 링크를 적용하면, 사용자는 이미지를 클릭하여 다른 페이지로 이동할 수 있습니다.

페이지 내에서의 링크 이동

한 페이지 내에서 id 속성은 1개만 존재한다. -> 식별자로 사용된다.

• 페이지 내에서 특정 위치로 이동하기 위해 id 속성을 사용합니다.
• href 속성에 #id명을 입력하여, 해당 id가 적용된 위치로 이동할 수 있습니다.
• 이 기능은 긴 페이지 내에서 특정 섹션으로 빠르게 이동할 때 유용합니다.

본문 내용

본문내용

한 페이지 내에서 id 속성은 1개만 존재하며, 이를 식별자로 사용할 수 있습니다.

• id 속성은 한 페이지 내에서 유일하게 사용되어야 하며, 특정 요소를 식별하는 데 사용됩니다.

기본 HTML 구조

<!DOCTYPE html>

블록 요소와 인라인 요소

HTML 태그는 블록 요소와 인라인 요소로 나뉩니다. 이 요소들은 페이지에서 어떻게 영역을 차지하고 표시되는지에 따라 구분됩니다.

블록 요소 한 줄 단위로 영역을 차지하며, 줄바꿈이 자동으로 적용됩니다. (예: p, div, h1-h6 등)

인라인 요소 콘텐츠 영역만 차지하며, 줄바꿈이 적용되지 않고, 다른 요소와 같은 줄에 위치합니다. (예: span, a, img 등)

div 태그와 span 태그의 차이점

줄바꿈 적용

div 태그와 span 태그의 차이점 1: 줄바꿈 적용

div 태그

div 태그는 블록 요소로, 한 줄 단위로 영역을 차지합니다. 이미 존재하는 태그 다음 줄에 영역이 잡힙니다.

span 태그

span 태그는 인라인 요소로, 콘텐츠 영역만 차지합니다. 줄바꿈이 발생하지 않고 같은 줄에 다른 요소가 함께 표시됩니다.

• div 태그는 블록 요소로, 각 요소가 화면에 한 줄을 차지하며 자동으로 줄바꿈이 적용됩니다.
• span 태그는 인라인 요소로, 줄바꿈 없이 요소가 이어서 표시됩니다.

영역 지정 방식

div 태그와 span 태그의 차이점 2: 영역 지정 방식

div 태그: 사각형 박스로 영역을 지정

span 태그: 문장 단위로 영역을 지정

• div 태그는 문단이나 큰 영역을 감싸는 데 사용되며, 블록 전체를 사각형 박스로 표시합니다.
• span 태그는 문장 내에서 특정 부분만을 감싸는 데 사용되며, 특정 텍스트에 스타일을 적용할 때 유용합니다.

iframe 태그

iframe

`iframe` 태그는 웹 문서 안에 다른 웹페이지를 삽입할 때 사용됩니다. 이 태그는 인라인 요소입니다.

• iframe 태그는 웹 페이지 안에 다른 웹 페이지를 삽입하는 데 사용됩니다.
• src 속성에 삽입할 페이지의 URL을 지정하며, width와 height 속성으로 크기를 조정할 수 있습니다.
• iframe은 웹 페이지에 유튜브 동영상, 다른 웹 페이지 등을 삽입할 때 많이 사용됩니다.

기본 HTML 구조

<!DOCTYPE html> <!-- HTML5 문서 형식을 선언 -->

이미지 관련 태그

이미지를 웹 페이지에 삽입하려면 <img> 태그를 사용합니다.

이미지 관련 태그

src 속성

• <img> 태그는 HTML에서 이미지를 삽입하기 위한 태그입니다.
• src 속성은 삽입하려는 이미지 파일의 경로를 지정합니다.

alt 속성

- 이미지의 경로가 잘못되었거나 이미지를 제대로 표시할 수 없을 때 대체 텍스트로 사용됩니다.
- 시각장애인들을 위한 스크린리더에서 이미지를 읽어주는 설명 문구로도 활용됩니다.

• alt 속성은 이미지가 표시되지 않을 때 대신 표시될 텍스트를 지정합니다. 이 속성은 접근성을 높이는 데 중요한 역할을 합니다.

width 속성과 height 속성

고정 길이 단위(px): 화면 크기가 변경되어도 이미지 크기는 고정됩니다.

• width와 height 속성은 이미지의 너비와 높이를 지정합니다.
• 고정 길이 단위(px)는 화면 크기가 변경되어도 이미지 크기가 고정된 상태로 유지됩니다.

가변 길이 단위(%): 화면 크기 또는 부모 요소 크기에 따라 이미지 크기가 변경됩니다.

• 가변 길이 단위(%)를 사용하면 화면 크기나 부모 요소의 크기에 따라 이미지 크기가 자동으로 조정됩니다.

미디어 관련 태그

HTML에서는 오디오와 비디오를 삽입하고 제어하기 위해 각각 <audio> 태그와 <video> 태그를 사용합니다.

미디어 관련 태그

오디오 관련 태그

• <audio> 태그는 웹 페이지에 오디오를 삽입합니다.
• src 속성은 오디오 파일의 경로를 지정합니다.
• controls 속성은 사용자가 오디오를 제어할 수 있는 재생 도구를 표시합니다.
• autoplay 속성은 페이지 로드 시 오디오가 자동으로 재생되도록 합니다.
• loop 속성은 오디오를 반복 재생합니다.

비디오 관련 태그

• <video> 태그는 웹 페이지에 비디오를 삽입합니다.
• poster 속성은 비디오가 로드되기 전에 표시될 썸네일 이미지를 지정합니다.
• width와 height 속성은 비디오의 크기를 지정합니다.