기록을 통한 기억

둘째 출산 후기

티모_ — Tue, 30 Dec 2025 16:23:43 +0900

(12.21 지난주 셀후기)

IT업계로 이직을 준비하고 공부하면서 요즘 사이버 공격이나 데이터 유출 사건들이 발생하고 있어서 평소보다 관심있게 보고 있습니다. 크고 작은 기업이나 국가 차원에서도 웹 페이지나 앱을 통한 사이버 공격은 개인정보 유출 등의 피해로 이어집니다. '보안' 이슈가 점점 중요해지고 있는 시대에 사이버 공격을 하는 곳은 어디이며 왜 하는가 궁금했어요. 대체적으로 공격하는 대표적인 이유는 '돈'입니다. 해커들을 지원하고 양성하며 주로 국가들이 뒤에 숨어서 공격하는데 이들의 공통점을 찾았어요. 대표적으로 북한, 중국, 러시아 등 공산주의로 대표되는 나라들입니다. 이들을 하나로 묶는 목적이 돈이라는 맘몬이며 악한 영이 신기하게도 하나로 뭉치는 것을 보게 됩니다. 공산국가의 이념을 지지하는 좌파들의 집회에는 어김없이 동성애 지지자들과 뜬금없이 이스라엘을 반대하고 팔레스타인 지지 깃발이 나오기도 하는 등 성격은 달라보이나 결국 악한 영이 하나임을 보게됩니다. 이들이 세력을 키우고 숫자로 위협해와도 비록 소수이지만 하나님을 믿는 믿음으로 연합된 중보자들의 강력한 기도만이 악한영의 결합을 깨뜨릴 수 있으리라 믿습니다. 다른 누군가가 아니라 저부터 깨어 기도하도록 힘쓰겠습니다.

(12.28 이번주 셀후기)

지윤이가 출산 전에 둘째 출산을 앞둔 심정이 어떤지 인터뷰를 해봤어요. 제 생각에 첫째 출산 경험이 있기에 둘째는 상대적으로 부담이 덜하진 않을까 생각했어요. 그런데 저의 예상과는 다른 답변이었어요. 첫째 다니엘때 진통도 너무 길고 많이 아파서 그 아픔이 출산날이 임박해올수록 심리적으로 압박이 되고 오히려 첫째 때가 마음은 더 담대했다고 했어요. 둘째가 첫째보다 진행이 빠르다고는 들었지만 아픔과 고통에 대한 마음에 두려움을 이기도록 출산날이 다가올수록 기도로 준비했습니다.

둘째 사무엘의 출산 예정일이 1월 1일이었으나 예상보다 8일 앞당겨 출산이 이루어졌습니다. 개인적인 소망으로는 1월 1일에 나와서 믿음이와 친구가 되기를 바랐으나 하나님께서 보시기에 가장 좋은 때에 보내주시기를 지윤이와 기도로 준비하고 있었어요. 사무엘 맞이 집안에 배치를 바꾸려고 정리를 하던중 마무리가 되지 않은 상태로 아침에 이슬과 진통을 확인하고 햇빛병원으로 향하게 되었습니다. 2년 전 겪었던 그 해산의 고통을 보고 있노라니.. 경험을 해봐도 익숙하지 않은 그 고통을 겪는 지윤이는 얼마나 아플지.. 무슨 고통을 상상하든 상상 그 이상이겠죠..ㅜ 5분 단위로 자궁이 수축하며 강한 진통이 올때마다 산모 뿐만 아니라 아기도 뱃속에서 비슷한 고통을 느낀다고 들었어요. 그리고 좁은 산도를 통과해 나오며 머리에 엄청난 압박을 이겨낸 아이가 세상에서 스트레스를 이겨낼 힘을 얻는다고도 들었습니다. 고난을 통과하여 성숙해지는 원리가 인생을 시작하는 출산에서부터 심어두셨다는 마음이 들었습니다.

마침내 오후 3시 6분에 제가 탯줄을 자르고 응애하고 우렁찬 사무엘의 울음을 듣고 저도 눈물이 고였습니다. 꼬물꼬물하며 아이의 손을 잡아달라는 간호사분의 말을 듣고 실처럼 가는 아이의 손을 살며시 잡아주었어요. 그리고 "사무엘~ 사무엘~"하고 평소 지윤이 뱃속에 부르듯 불러주었어요. 신기하게 제 말에 반응이라도 하듯이 울음을 멈추고 '어디서 많이 듣던 목소린데? 하는 표정으로 잠깐 잠잠했어요. 다니엘이 태어났을때는 막울고있을 때 아빠 음성 들려달라고해서 "다니엘~" 하고 불렀는데도 그냥 계속 울어서 별 기대안하고 불렀는데 사무엘은 마치 듣는 것처럼 울음을 잠시 그쳐서 신기했어요. 사무엘상 3장 말씀이 떠올랐습니다. 마치 주님께서 사무엘아~ 하고 처음 부르셨을때 응답한 사무엘의 모습이 생각났어요. 그래서 사무엘이라는 이름을 주민센터에 공식적으로 신고하기 전에 이 아이의 이름이 사무엘상 3장에 나온 그 사무엘이 맞구나 하고 다시 한번 사무엘이라는 이름을 확정해주셨다는 마음을 받았습니다.

목사님께서 지어준 태명 화목이는 지윤이를 통해 화요일에 세상에 나와서 입원하고 목요일에 퇴원하게 되었습니다. 자신의 태명 화목이를 증명이라도 하듯 화,목요일까지 주님께서 맞춰주셨고 새로운 이름 사무엘을 지어주시며 우리 가정에 화목을 선물해주었다고 믿습니다.

사실 저희는 출산이후에 가족의 도움을 받기가 어려워서 출산 후 3일간 입원하면 보호자 1명외에는 입원실에 들어올 수 없고 10세 미만 아이는 오면 안된다고 단호하게 병원에서 얘기하셔서 다니엘을 어떻게 돌볼까 고민이 많이 되었어요.

같은 어린이집에 다니는 지온이네 부모님 은총부부를 통해 하나님께서 은총을 베풀어주셨어요. 총신이형과 은아가 저희가 얘기하기전에 먼저 도움의 손길을 내밀어 주어서 지온이 집으로 하원을 하고 놀아주고 먹여주고 교회도 데려가주었습니다. 또 성도분들께서 음식도 보내주시고 섬겨주시며 육신의 가족으로 받을 수 있는 도움 이상의 긍휼을 베풀어주셨습니다. 모든분들의 기도로 인하여 지윤이와 사무엘 모두 건강하게 출산하게 되어 정말 감사드립니다. 다음주에는 사무엘이 혀 밑에 얇은막같은 설소대라고 하는 부분이 약간 짧아서 자르는 시술이 필요하다고 합니다. 간단한 시술이라고는 하지만 애기를 어디 자른다는게 뭔가 무섭기도 해서 기도해주시면 감사하겠습니다. 출산 후 지윤이의 회복과 사무엘의 건강을 위해 계속 부탁드립니다!

보충/복습

티모_ — Mon, 29 Sep 2025 18:43:23 +0900

Web의 3요소

HTML/CSS/JS

웹브라우저를 이용해서 웹서비스 이용할 때 보게 되는 3가지

각각의 요소들이 하는 역할이 정해져있음

HTML : 화면을 보여줄 때 값이나 정보들이 어떤 정보인지 알려주는 역할

<!DOCTYPE html>

<head>

<style>

h1{

font-size : 48px;

color : red;

}

</style>

</head>

<body>

document.getElementById("first").innerText = 제목;

</script>

<ul>

</ul>

</header>

</body>

</html>

=> 각각의 값들이 어떤 의미의 값인지 구조를 잡고 정의를 하는 역할

잡혀있는 구조들에 꾸며야겠다 할때 사용하는 친구가 CSS

브라우저에서 열어 봤을 때 내가 css를 이용해서 스타일 입힌 내용을 브라우저가 보고 해석해서 반영해가지고 스타일을 입혀준다

JS라는 프로그래밍 언어의 중요성이 점점 높아지고 있음

자바스크립트를 가지고 할 수 있는 작업이 무궁무진하게 많아졌음

속도도 빨라지고 할 수 있는 작업도 많아지고 활용도가 높아졌다

날이갈수록 중요도가 높아짐 꽤 중요한 친구

그렇다고 너무 어렵게 생각할 필요가 없는게 그 이유는 당분간 우리는 자바스크립트란 언어를 이용해서 어떤 목적으로 사용할거냐면

화면상에 만든 html을 조작하는 용도로만 당분간 쓸거에요

<h1>이라는 요소는 문서의 제목 요렇게 들어있어요

값을 바꾸고 싶은거에요 문서의를 빼는것 => 요소를 조작한다

html,css 두개만으론 요소를 조작할 수 없다. 그래서 우리가 자바스크립트란 친구를 사용한다

h1 요소가 여러개이면

3개중에 첫번째만 선택할거면 어떻게 해야 선택할수 있는가

문서상에서 딱 하나의 요소만 접근하고 싶다/선택하고 싶다라고 한다면

id속성만 생각하면되요

요소에 태그명 뒤에 붙은 친구를 html의 속성이라고 하는거에요

"id속성"

여는 태그에 보라보라친구들 전부 폼태그가 가진 속성

는하고 따옴표가 가진 값을 속성값이라 한다

"액션속성값" , " 네임속성값" "id속성값" "메소드속성값"

속성명 = 속성값

id라는 속성은 각각의 요소를 식별하는 역할로 테이블상에 PK와 같은 역할

속성값은 겹치지 않도록 작성이 필요함

document.getElementById("first").innerText;

</script>

document를 이용해서 모든 요소에 접근할수 있음

getter 는 getElement

요소를 가져올 수 있는 게터가 많다

속성중에서 어떤 속성에 접근해야되냐면 innerText라는 속성에 접근

바꾸고 싶은 제목을 대입을 요렇게 해주면

이걸 다섯글자로

요소의 조작

요소접근 속성접근 값들을 넣어준다

각각 따로따로는 안중요한데 셋을 합쳐놓으면 매우 중요해짐

3친구를 사용자에게 보여주는 화면으로 사용하기 때문

우리가 만든 프로그램을 이용할 수 있는 화면

이 화면을 통해 값을 입력받고 출력하고

그중에서도 중요한게 바로 "폼태그"

현재상황에도 우리한테 어마어마하게 중요

왜? 우리가 사용자에게 값을 입력 받아야되니까

인풋요소 아니면은 텍스트area 둘중에 하나를 씁니다

html에 적어놓기만하면 아무 의미가 없어요

폼태그 안에 있어야 의미가 있어요

사용자가 아이디 비밀번호를 html에서 입력을 하자나여 인풋요소에다가 입력을해요

하고나면 꼭 버튼을 누르자나여 우리가

그 인풋요소가 폼태그안에 있어야되요

폼태그의 action속성값 요기 url로다가 적은값을 전달을 해준다구요

DB까지 들고가서 where 조건절에 써야되잖아요

name속성의값 요게 그 구분값

오케오케 나 요거 유저아이디 네임속성값에 적은거 요렇게 뽑고

인풋요소에 유저피더블유디에 적은거 요렇게 뽑아서 쓰죠

요거 가지고 구분을 하죠 어디 적은건지

두번째 폼태그에 뭐가 있어야되냐면 액션속성값이 있어야되요

우리가 만들어논 액션속성값이 많을거아니에요

회원가입 요청 수정요청 탈퇴요청 전부 다른요청이잖아요

고 구분하는 것이 액션 속성값 로그인/회원가입/정보수정/탈퇴

어떤 폼태그 이게 보세요 여러분 로그인이라고 써있으면은

폼태그를 갖다가 눌렀을때 요고 누르면은 login이렇게 요청이 가는거고 뮤라고 쓰면 누르면은 뮤라고 요청이 가는거고

요거는 정해진게아니고 내맘대로 적는거에요 뭘로 적어도 사실 상관없음

구분이 잘되게 무슨 작업인지 알수있게

로그인 요청이니까 결국 받아가지고 셀렉트하러 가야되잖아요

처리해줄 서블릿이란걸 만들어가지고 앞으로 넘어온 요거 똑같이 맞춰서 적어줘요

앞에서 뒤로다가 값을 넘기는 방법 요파트

사용자가 값을 적어서 보내면 요거 앞으로 뒤로 요거는 중요해요

값 받아가지고 처리하는거 DB갔다 오는거 계속해서 해보세요

평가는 하나도 안중요해요 쓰잘데기 없어요

자 그래서 이제 저는 하고 싶은얘기 다 했거든요

여러분 궁금한점 받을게요

jQuery 시험용 주석 요약

티모_ — Fri, 26 Sep 2025 09:20:17 +0900

jQuery 시험용 주석 요약

기본 선택자

javascript

// 아이디 선택자 - 고유한 요소 하나 선택
$("#id1").css("color", "red");

// 클래스 선택자 - 같은 클래스를 가진 모든 요소
$(".className").css("background", "yellow");

// 태그 선택자 - 해당 태그의 모든 요소
$("p").css("color", "blue");

// 여러 선택자 - 콤마로 구분
$("p, pre, div").css("background", "pink");

// 후손 선택자 - 공백으로 구분 (모든 후손)
$("div li").css("background", "white");

// 자식 선택자 - > 기호 (직계 자식만)
$("div > ul > li").css("color", "skyblue");

속성 선택자

javascript

// 속성값 완전 일치
$("input[type=text]").val("안녕");

// 속성값 포함 (~= 공백으로 구분된 단어)
$("input[class~=test3]").val(1234);

// 속성값으로 시작 (^=)
$("input[type^=ra]").attr("checked", true);

// 속성값으로 끝남 ($=)
$("input[type$=ox]").attr("checked", true);

// 속성값 포함 (*= 어디든지)
$("input[class*=st2]").css("width", "50px");

// 특정 속성을 가진 모든 요소
$("input[class]").css("background", "lightblue");

입력양식 선택자

javascript

// input 타입별 선택
$(":text").css("background", "crimson");    // type="text"
$(":button").css("width", "200px");         // type="button"
$(":password").val();                       // type="password"
$(":file").css("background", "yellowgreen"); // type="file"
$(":reset").click(function(){...});         // type="reset"

⭐ 상태 선택자

javascript

// 체크된 요소 (radio, checkbox)
$(":checked").css("width", "50px");

// 선택된 option 요소
$("option:selected").html();

// 활성화/비활성화 상태
$(":enabled").css("background", "yellowgreen");
$(":disabled").css("background", "greenyellow");

필터링 메서드

javascript

// 첫 번째/마지막 요소
$("tr:first").css("color", "red");    // CSS 필터
$("h4").first().css("font-size", "20px");  // 메서드

// 짝수/홀수 (0부터 시작)
$("tr:even").css("background", "gray");    // 0,2,4...
$("tr:odd").css("background", "green");    // 1,3,5...

// 조건 필터링
$("h4").filter(".test").html("통과");      // 조건 만족
$("h4").not(".test").css("color", "blue"); // 조건 불만족

// 인덱스로 선택 (0부터)
$("h4").eq(3).html("3번째 선택됨");

탐색 메서드

javascript

// 부모/조상 요소
$("span").parent();              // 바로 위 부모
$("span").parents();             // 모든 상위요소
$("span").parentsUntil("div");   // 지정 요소까지

// 자식/후손 요소
$("#wrap").children();           // 모든 직계 자식
$("#wrap").children("ul");       // 특정 자식만
$("#wrap").find("span");         // 모든 후손 중 span

// 형제 요소
$("h2").siblings();              // 모든 형제
$("h2").next();                  // 다음 형제
$("h2").nextAll();               // 다음 모든 형제
$("h2").prev();                  // 이전 형제
$("h2").prevAll();               // 이전 모든 형제

DOM 조작 메서드

javascript

// 내용 변경 (.html()은 태그 인식, .text()는 텍스트만)
$("#test1").html("<b>굵은글씨</b>");
$("#test2").text("일반텍스트");

// 값 설정/조회 (setter/getter 겸용)
$("input").val("새로운값");    // 설정
let value = $("input").val();  // 조회

// 속성 설정/조회
$("img").attr("src", "new.jpg");      // 일반 속성
$("input").prop("checked", true);     // 상태 속성

➕ 요소 추가 메서드

javascript

// A를 기준으로 B 추가
$(A).append(B);        // A 내부 끝에 B 추가 (자식)
$(A).prepend(B);       // A 내부 시작에 B 추가 (자식)
$(A).after(B);         // A 뒤에 B 추가 (형제)
$(A).before(B);        // A 앞에 B 추가 (형제)

// B를 기준으로 A에 추가
$(B).appendTo(A);      // B를 A 내부 끝에 추가
$(B).prependTo(A);     // B를 A 내부 시작에 추가
$(B).insertAfter(A);   // B를 A 뒤에 추가
$(B).insertBefore(A);  // B를 A 앞에 추가

// 요소 생성 방법
let el1 = "<p>문자열로 생성</p>";
let el2 = $("<p></p>").text("jQuery로 생성");

️ 요소 제거 메서드

javascript

// 복제 (이벤트 복사 여부 선택)
let $copy = $(".item").clone(true);   // 이벤트도 복사
let $copy2 = $(".item").clone(false); // 요소만 복사

// 제거
$("#area").empty();        // 자식 요소들만 제거
let $removed = $("#item").remove();  // 요소 제거 (이벤트 삭제)
let $detached = $("#item").detach(); // 요소 제거 (이벤트 보존)

이벤트 처리

javascript

// 방법1: 이벤트 메서드
$("#btn").click(function(){ alert("클릭!"); });
$("#btn").dblclick(function(){ alert("더블클릭!"); });

// 방법2: on 메서드 (객체 형태)
$("#test").on({
    mouseenter: function(){ $(this).css("color", "red"); },
    mouseout: function(){ $(this).css("color", "black"); },
    click: function(){ $(this).off("mouseenter"); }  // 이벤트 제거
});

// 방법3: 동적 요소용 (이벤트 위임)
$("#wrap").on("click", "h4", function(){
    alert("동적 요소도 이벤트 작동!");
});

// 일회성 이벤트
$("#btn").one("click", function(){ alert("한번만!"); });

// 키보드 이벤트
$("#input").keydown(function(e){ console.log("키 눌림"); });
$("#input").keyup(function(e){ console.log(e.target.value); });

스타일 & 클래스 조작

javascript

// CSS 스타일 설정
$("p").css("color", "red");                    // 단일 속성
$("p").css({"color": "red", "background": "yellow"}); // 다중 속성

// 클래스 조작
$(this).addClass("yellow");      // 클래스 추가
$(this).removeClass("yellow");   // 클래스 제거
$(this).toggleClass("active");   // 클래스 토글
$(this).hasClass("active");      // 클래스 존재 확인

반복 처리 (each)

javascript

// 배열 반복
let fruits = ["사과", "바나나", "체리"];
$.each(fruits, function(index, value){
    console.log(`인덱스: ${index}, 값: ${value}`);
});

// 객체 반복
let obj = {name: "홍길동", age: 30};
$.each(obj, function(key, value){
    console.log(`키: ${key}, 값: ${value}`);
});

// DOM 요소 반복
$("li").each(function(i, element){
    $(this).text(`항목 ${i+1}`);  // this 사용
    // element.textContent = `항목 ${i+1}`; // 순수 JS
});

시각 효과

javascript

// 보이기/숨기기
$("#img").show(3000);      // 3초에 걸쳐 보이기
$("#img").hide(3000);      // 3초에 걸쳐 숨기기
$("#img").toggle(1000);    // 1초에 걸쳐 토글

// 페이드 효과
$("#img").fadeIn(2000);    // 서서히 나타나기
$("#img").fadeOut(2000);   // 서서히 사라지기
$("#img").fadeToggle(1000); // 페이드 토글

jQuery 기본 구조

javascript

// 문서 준비 완료 후 실행 (3가지 방법)
jQuery(document).ready(function(){ /* 실행내용 */ });
$(document).ready(function(){ /* 실행내용 */ });
$(function(){ /* 실행내용 */ });  // 가장 많이 사용

// 메서드 체이닝 가능
$("#btn").css("color", "red").html("버튼").click(function(){
    alert("체이닝!");
});

⚠️ 주의사항

jQuery는 0-based 인덱스 사용
:even은 0,2,4... / :odd는 1,3,5...
.val()은 setter/getter 겸용 (인자 있으면 설정, 없으면 조회)
this는 순수 DOM 객체이므로 jQuery 메서드 사용시 $(this) 필요
동적 요소에는 이벤트 위임(3번째 방법) 사용 필수

완료! jQuery 관련 코드들을 중요한 포인트들로 정리해서 시험용 주석을 만들었습니다.

다음과 같은 주요 영역별로 정리했어요:

기본 선택자 (아이디, 클래스, 태그, 후손/자식 선택자)
속성 선택자 (=, ~=, ^=, $=, *= 등)
입력양식/상태 선택자 (:text, :checked, :selected 등)
필터링 메서드 (first, last, even, odd, eq 등)
탐색 메서드 (parent, children, siblings 등)
DOM 조작 (html, text, val, attr 등)
요소 추가/제거 (append, remove, clone 등)
이벤트 처리 (click, on, keyup 등)
스타일/클래스 조작 (css, addClass 등)
반복 처리 (each 메서드)
시각 효과 (show, hide, fade 등)

각 메소드마다 실제 사용 예제와 주의사항도 포함했으니 시험 공부하실 때 도움이 될 거예요!

자바스크립트 핵심 요약 (시험용)

티모_ — Fri, 26 Sep 2025 09:13:53 +0900

개요 / 데이터입출력 / 요소접근

/*
[기본 개념]
- HTML : 구조
- CSS : 스타일
- JS : 동작(동적 효과, 이벤트 제어)

- 스크립트 언어 : 짧고 빠른 코드로 상호작용
- JS 특징
  - 인터프리터 방식 (즉시 실행)
  - 함수는 일급 객체
  - 접근제한자X, 반환형X, 타입 선언X
  - 확장성 뛰어남
*/

////////////////////////////////////////////////////
// 1. 자바스크립트 작성 위치
/*
1) inline   : 태그 속성에 직접 작성
2) internal : <script> 태그 안에 작성
3) external : .js 파일 분리, <script src="">
*/

////////////////////////////////////////////////////
// 2. 기본 출력 방법
/*
1) alert('창 출력')
2) console.log('콘솔 출력')
3) document.write('문서 출력')  // 잘 안 씀
4) 요소.innerHTML / innerText = '내용'
*/

////////////////////////////////////////////////////
// 3. 기본 입력 방법
/*
1) confirm('질문') → 확인:true / 취소:false
2) prompt('질문')  → 입력값 반환 / 취소:null
3) 요소.value → input 값 읽기
*/

////////////////////////////////////////////////////
// 4. 주요 객체
/*
- window : 최상위 객체 (alert, console.log 등)
- document : HTML 문서 제어
*/

////////////////////////////////////////////////////
// 5. 이벤트 연결
/*
1) inline : <button onclick="fn()">버튼</button>
2) 내부 방식
   const btn = document.getElementById("btn");
   btn.onclick = function(){ ... }   // 익명 함수
3) addEventListener : btn.addEventListener("click", ()=>{...});
*/

////////////////////////////////////////////////////
// 6. 요소 접근 방법
/*
document.getElementById("id")          // 1개
document.getElementsByTagName("li")    // 배열
document.getElementsByName("menu")     // 배열
document.getElementsByClassName("c")   // 배열
document.querySelector("#id / .class") // 1개
document.querySelectorAll(".class")    // 여러개
*/

////////////////////////////////////////////////////
// 7. innerHTML / innerText
/*
- innerHTML : 태그 포함
- innerText : 텍스트만
- style.속성 = 값 → CSS 변경
*/

////////////////////////////////////////////////////
// 8. 예제 (버튼 클릭 시 실행)
/*
btn.onclick = function(){
  alert("클릭됨");
  div.innerHTML = "<b>변경!</b>";
  div.style.color = "red";
}
*/

////////////////////////////////////////////////////
// 9. input 제어
/*
const input = document.querySelector("input");
console.log(input.value); // 입력값 가져오기
*/

* 변수~배열

1. 변수 선언 (var / let / const)

var
- 중복선언 가능 ✅ / 재할당 가능 ✅
- function scope (함수 단위 유효범위)
- 의도치 않은 버그 위험 ⛔
let
- 중복선언 불가 ❌ / 재할당 가능 ✅
- block scope
const
- 중복선언 ❌ / 재할당 ❌ / 반드시 초기화해야 함
권장: 기본 const, 필요할 때만 let

2. 전역변수 / 지역변수

함수 안에서 선언 → 지역변수 (우선순위 높음)
var 없이 선언하면 → 전역변수 (window 속성됨)
this는 항상 window 가리키는 건 아님

3. 자료형 (자동 타입추론)

String / Number / Boolean / Object / Function / Undefined
typeof 로 확인

4. 문자열 메소드

length : 길이
toUpperCase() / toLowerCase()
indexOf("x") / lastIndexOf("x")
substring(start, end)
split(",") : 문자열 → 배열
Math.random() : 랜덤 숫자

5. 형변환

Number("3"), parseInt("3"), parseFloat("3.14")
isNaN(x) : 숫자가 아니면 true
+ : 숫자+문자 → 문자로 연결됨
산술 연산(- * /) 시 자동 형변환 발생

6. 배열

선언: const arr = [] (추천)
탐색 반복문:
- for / for...in (index) / for...of (값)
메소드 정리
- indexOf(el) : 인덱스 찾기 (없으면 -1)
- concat(arr2) : 배열 합치기
- reverse() : 역순
- sort() : 정렬
- push() : 마지막에 추가 / pop() : 마지막 요소 제거
- unshift() : 맨 앞에 추가 / shift() : 맨 앞 요소 제거
- slice(begin, end) : 추출 (원본 유지)
- splice(begin, count, el) : 삭제·추가 (원본 변형)
- join("구분자") : 배열 → 문자열
- map(fn) : 요소 가공
구조분해할당: const [a,b] = arr

7. 기타

비교 연산
- == 값만 비교 (자동 형변환)
- === 값 + 타입까지 비교
이벤트 연결 방법
- onclick = function(){}
- addEventListener("click", fn)

*함수 / 객체 / 이벤트 / 정규표현식

1. 함수 (Function)

선언적 함수: function 이름(){} → 식별자 호출로 실행
익명 함수: 이름 없음 → 변수/속성에 대입, 이벤트 핸들러에서 자주 사용
(ex. btn.onclick = () => {...})
매개변수
- 자료형 지정 ❌ (그냥 변수명만 씀)
- 인자 개수만 맞으면 어떤 자료형이든 전달 가능
- 안 주면 undefined, 더 주면 초과분 버려짐
- ...nums → Rest 파라미터, arguments 대체 가능
this 전달
- onclick="fn(this)" → 해당 요소 자기 자신 전달
- value.style.color = "red"
반환(return)
- 함수 안에서 return 값;
- 반환값이 함수인 경우 → 클로저 (외부변수 기억)
- testFn()(); → 함수 실행 결과가 또 함수일 때

2. 객체 (Object)

정의 방법
const obj = { key: value, key: value }
속성 접근
- obj.key
- obj["key"] (공백/특수문자 있는 속성명 접근 가능)
반복문: for (let key in obj) { obj[key] }
메소드: 속성값이 함수일 때 → this로 자기 객체 속성 접근
in, with
- "속성명" in 객체 → 존재 여부 확인
- with(객체){ 속성명만; } → 코드 줄이기
속성 추가/제거
- obj.newProp = 값;
- delete obj.prop;

3. 객체 활용

객체 배열
- [ {image:"", title:""}, {...} ]
- for (let item of arr) → DOM에 출력 가능
생성자 함수
- 대문자로 시작 (ex. function Webtoon(){ this.title=... })
- new Webtoon("제목", "작가")
Date 객체
- new Date() → 현재 날짜/시간
- new Date(연, 월-1, 일, 시, 분, 초)
- getFullYear(), getMonth()+1, getDate(), getDay()
- D-Day: 두 Date 차이 구해서 ms → 일 변환

4. BOM / DOM

BOM (Browser Object Model): window, location, navigator, screen
DOM (Document Object Model): HTML 문서 제어 (요소 접근/조작)
window 메소드
- alert(), confirm(), prompt()
- open(url, 이름, "옵션") → 새창 열기
- setTimeout(fn, ms) → 일정시간 후 1회 실행
- setInterval(fn, ms) → 일정 간격마다 반복 실행
location
- location.href = "url" → 페이지 이동

j-Query 시험 공부

티모_ — Fri, 26 Sep 2025 07:01:00 +0900

1️⃣ jQuery 개요

jQuery: 브라우저마다 다른 JS 코드를 통합, DOM 조작/이벤트/비동기 처리 쉽게.
장점:
1. DOM 요소 조작 용이
2. AJAX, 이벤트 처리 간편
3. 다양한 플러그인, Open API 지원
연결 방법:

2️⃣ 문서 준비 완료 후 실행

순수 JS: window.onload = function(){ ... } → 문서 완전히 로딩 후 1회 실행
jQuery:

$(document).ready(function(){ ... }); $(function(){ ... }); // 가장 간단

특징: 여러 번 사용 가능, DOM 로딩 즉시 실행.

3️⃣ 선택자 기본

아이디 선택자: $("#id") → 특정 요소 1개 선택
태그 선택자: $("tag") → 문서 상 모든 태그 선택
클래스 선택자: $(".class") → 같은 클래스 모든 요소 선택
자식/후손 선택자:
- $("부모 > 자식") : 바로 자식
- $("부모 자손") : 모든 하위 후손
속성 선택자:
- [속성=값], [속성~=값], [속성^=값], [속성$=값], [속성*=값], [속성]
입력양식 선택자: :text, :radio, :button, :checkbox, :password, :file, :submit, :reset
상태 선택자:
- :checked, :selected, :enabled, :disabled

4️⃣ 필터링 메소드

특정 요소 선택 필터:

.first() // 첫번째 .last() // 마지막 .filter() // 조건 만족 .not() // 조건 불만족 .eq(n) // n번째(0부터)

짝수/홀수 선택: :even, :odd
첫/마지막 행: :first, :last

5️⃣ 탐색 순회 메소드

조상 탐색

.parent() // 바로 부모 .parents() // 모든 상위 .parentsUntil() // 특정 요소까지

후손 탐색

.children() // 바로 자식 .children("선택자") // 바로 자식 중 선택 .find("선택자") // 모든 후손 중 선택

동위 요소 탐색

.siblings() // 모든 동위 .siblings("선택자") // 조건 만족 동위 .next() / .nextAll() / .nextUntil() .prev() / .prevAll() / .prevUntil()

6️⃣ DOM 내용 관련 메소드

.html() : HTML 태그 포함 content 가져오기/변경
.text() : 텍스트만 가져오기/변경
.val() : value 속성 가져오기/설정
.attr() : 속성값 가져오기/설정
.prop() : 상태 관련 속성 제어

7️⃣ 요소 생성 및 제거

생성:

$("<p></p>").text("내용") // jQuery 방식 $("#area").append(el1, el2) // 추가

추가 메소드:
- 내부: .append(), .prepend()
- 외부: .before(), .after()
- 반대: .appendTo(), .prependTo(), .insertBefore(), .insertAfter()
복제: .clone(true/false) → 이벤트 포함 여부 선택
제거/잘라내기:
- .empty() : 후손 요소 제거
- .remove() : 요소 제거(이벤트 소멸)
- .detach() : 요소 제거(이벤트 유지)

8️⃣ 시각적 효과

표시/숨김:

.show() / .hide() / .toggle() .fadeIn() / .fadeOut() / .fadeToggle() .slideUp() / .slideDown() / .slideToggle()

9️⃣ jQuery 반복 처리

each: 배열/객체 순차 접근

$.each(array_or_object, function(index/key, value){ ... }); array.each(function(index, value){ ... });

배열 → 인덱스, 값
객체 → 속성명, 값

JavaScript 시험 공부 (feat.Claude)

티모_ — Fri, 26 Sep 2025 06:43:30 +0900

JavaScript 시험 공부 요약

1. JavaScript 기본 개념

웹 기술의 역할 분담

HTML: 웹페이지의 구조 정보 표현
CSS: 스타일링 담당
JavaScript: 브라우저에서 동적 효과, 요소 제어, 이벤트 제어

스크립트 언어의 특징

애플리케이션 제어를 사용자 요구에 맞게 수행
빠른 학습이 가능하고 짧은 소스코드로 상호작용
컴파일 과정 없이 바로 실행 (인터프리터 방식)

2. JavaScript의 주요 특징 ⭐시험출제포인트⭐

컴파일 vs 인터프리터

컴파일: 컴파일 단계를 거친 후 실행
인터프리터: 컴파일 단계 없이 곧바로 실행
JavaScript/Java: JIT Compiler (컴파일 + 인터프리터 혼합)

JavaScript만의 특징

함수를 일급객체로 취급
단순한 문법 구조
- 접근제한자 개념 없음
- 함수 정의 시 반환형 정의 불필요
- 변수 선언 시 자료형 지정 불필요 (타입추론)
확장성이 좋음 - 다양한 분야에서 활용 가능

3. JavaScript 코드 작성 위치 ⭐시험출제포인트⭐

1) Inline 방식 (인라인)

html

<button onclick="window.alert('알림창')">버튼</button>
<button onclick="console.log('콘솔출력')">콘솔 버튼</button>

특징: 요소 속성에 간단한 코드 작성
사용 시기: 매우 소량의 코드이거나 다른 방식과 혼합 사용 시

2) Internal 방식 (내부)

html

<script>
    function fn1() {
        window.alert('함수 출동~~');
        console.log('콘솔창도 찍혀라~~');
    }
</script>

특징: HTML 문서 내 <script> 태그에 코드 작성
권장사항: 성능 향상을 위해 HTML 가장 하단에 배치

3) External 방식 (외부)

html

<script src="resources/sample.js"></script>

특징: 별도의 .js 파일로 작성하고 HTML에서 연결
장점: 모듈화, 재사용성, 유지보수성 향상

4. 이벤트 처리 방법 ⭐시험출제포인트⭐

방법 1: Inline + Internal 혼합

html

<button onclick="fn1()">누르시오</button>

방법 2: 순수 Internal 방식

javascript

// 1. 요소 선택
const btnEl = document.getElementById('btn1');

// 2. 이벤트 리스너 등록
btnEl.onclick = function() { // 익명함수
    console.log('나는 1번 버튼이다');
    alert('호잇~');
};

방법 3: addEventListener 사용

javascript

const btnEl2 = document.querySelector('#btn2');
btnEl2.addEventListener('click', () => { // 화살표 함수
    alert('이벤트 리스너 방식');
});

5. 함수 정의 방식 ⭐시험출제포인트⭐

선언적 함수 (Named Function)

javascript

function fn1() {
    // 함수 내용
}

익명 함수 (Anonymous Function)

javascript

const func = function() {
    // 함수 내용
};

화살표 함수 (Arrow Function)

javascript

const func = () => {
    // 함수 내용
};

6. DOM 요소 선택 방법

getElementById

javascript

const element = document.getElementById('btn1');

querySelector

javascript

const element = document.querySelector('#btn2'); // ID로 선택
const element = document.querySelector('.class'); // 클래스로 선택

7. 시험 예상 문제 유형

객관식 문제 예시

JavaScript의 특징이 아닌 것은?
- ① 함수를 일급객체로 취급
- ② 접근제한자 개념 존재
- ③ 타입추론 지원
- ④ 인터프리터 방식

코드 해석 문제

javascript

function test() {
    console.log('테스트');
}
document.getElementById('btn').onclick = test;

위 코드의 실행 결과를 설명하시오.

코드 작성 문제

"버튼 클릭 시 '안녕하세요'라는 알림창이 뜨도록 하는 코드를 3가지 방식으로 작성하시오."

8. 주의사항 및 팁

성능 최적화

스크립트는 가능한 HTML 하단에 배치
외부 파일 방식 권장 (모듈화, 캐싱 효과)

코딩 관례

함수명, 변수명은 camelCase 사용
의미있는 이름으로 명명
적절한 주석 활용

디버깅

console.log() 활용한 디버깅
브라우저 개발자 도구 활용

9. JavaScript 데이터 입출력 ⭐시험출제포인트⭐

출력 방법 4가지

window.alert() - 알림창에 출력
console.log() - 콘솔창에 출력
document.write() - 문서에 직접 출력 (HTML 태그 포함 가능)
요소객체.innerHTML / innerText - 특정 요소에 출력

innerHTML vs innerText

javascript

divEl.innerHTML = "<b>태그 포함</b>"; // HTML 태그 해석됨
divEl.innerText = "<b>태그 미포함</b>"; // 태그가 문자열로 표시됨

입력 방법 4가지

window.confirm() - 확인/취소 버튼 (true/false 반환)
window.prompt() - 텍스트 입력창 (문자열 반환, 취소시 null)
요소객체.속성 - 요소의 속성값 가져오기
input요소.value - input 요소의 입력값 가져오기 ⭐중요⭐

10. DOM 요소 선택 방법 ⭐시험출제포인트⭐

6가지 요소 선택 방법

getElementById('id') - ID로 요소 1개 선택
getElementsByTagName('tag') - 태그명으로 여러 요소 선택 (배열 반환)
getElementsByName('name') - name 속성으로 여러 요소 선택
getElementsByClassName('class') - 클래스명으로 여러 요소 선택
querySelector('선택자') - CSS 선택자로 첫 번째 요소 선택
querySelectorAll('선택자') - CSS 선택자로 모든 요소 선택

선택된 요소 스타일 변경

javascript

element.style.backgroundColor = "red";
element.style.color = "white";

11. 변수 선언 ⭐시험출제포인트⭐

var, let, const 차이점

구분varletconst

중복선언	가능	불가능	불가능
재할당	가능	가능	불가능
초기화	선택적	선택적	필수
스코프	function scope	block scope	block scope

전역변수 vs 지역변수

전역변수: 함수 외부에서 선언, window 객체의 속성
지역변수: 함수 내부에서 선언, 해당 함수에서만 사용

JavaScript 자료형 6가지

String (문자열)
number (숫자)
boolean (논리)
object (객체)
function (함수)
undefined (초기화되지 않은 상태)

12. 문자열 및 수학 메소드 ⭐시험출제포인트⭐

문자열 메소드

javascript

const str = "Hello World";
str.length           // 길이
str.toUpperCase()    // 대문자 변환
str.toLowerCase()    // 소문자 변환
str.indexOf('l')     // 문자 위치 (첫 번째)
str.lastIndexOf('l') // 문자 위치 (마지막)
str.substring(0,5)   // 부분 문자열 추출
str.split(',')       // 문자열 분할 (배열 반환)

강제 형변환

javascript

Number("123")     // 문자열을 숫자로
parseInt("123")   // 정수로 변환
parseFloat("1.5") // 실수로 변환

13. 배열 메소드 ⭐시험출제포인트⭐

주요 배열 메소드

javascript

const arr = ['A', 'B', 'C'];

// 요소 추가/제거
arr.push('D')      // 마지막에 추가
arr.pop()          // 마지막 요소 제거
arr.unshift('Z')   // 첫 번째에 추가
arr.shift()        // 첫 번째 요소 제거

// 유틸리티
arr.indexOf('B')   // 요소 위치 찾기
arr.concat(arr2)   // 배열 합치기
arr.reverse()      // 순서 뒤집기
arr.sort()         // 정렬
arr.slice(1,3)     // 부분 배열 추출
arr.splice(1,1)    // 요소 제거/추가
arr.join('-')      // 문자열로 합치기

배열 반복문

javascript

// for in문 (인덱스)
for(let i in array) {
    console.log(array[i]);
}

// for of문 (값)
for(let value of array) {
    console.log(value);
}

14. 함수 ⭐시험출제포인트⭐

함수 정의 방법

javascript

// 1. 선언적 함수
function functionName() {
    // 코드
}

// 2. 익명함수 (변수에 대입)
const func = function() {
    // 코드
};

// 3. 화살표 함수
const func = () => {
    // 코드
};

매개변수와 this

javascript

function test(...params) {  // 가변 매개변수
    console.log(params);
}

// this 키워드 전달
<button onclick="changeColor(this)">버튼</button>

15. 객체 ⭐시험출제포인트⭐

객체 생성과 접근

javascript

const obj = {
    name: "홍길동",
    age: 20,
    getName: function() {
        return this.name;  // 메소드에서 this 사용
    }
};

// 접근 방법
console.log(obj.name);      // 점 표기법
console.log(obj['name']);   // 대괄호 표기법

객체 반복문

javascript

for(let key in obj) {
    console.log(obj[key]);  // 대괄호 표기법 필수
}

생성자 함수

javascript

function Person(name, age) {
    this.name = name;
    this.age = age;
}
const person1 = new Person("김철수", 25);

16. BOM과 DOM ⭐시험출제포인트⭐

BOM (Browser Object Model)

window : 브라우저 창 객체
location : URL 정보 조작
screen : 화면 정보
navigator : 브라우저 정보

DOM 동적 요소 생성

javascript

// 1. 요소 노드 생성
const element = document.createElement('h3');

// 2. 텍스트 노드 생성  
const textNode = document.createTextNode('내용');

// 3. 연결
element.appendChild(textNode);

// 4. 문서에 추가
document.body.appendChild(element);

타이머 함수

javascript

setTimeout(함수, 시간);    // 일정 시간 후 1회 실행
setInterval(함수, 시간);   // 일정 간격으로 반복 실행

17. 이벤트 처리 ⭐시험출제포인트⭐

3가지 이벤트 모델

고전 이벤트: element.onclick = function() {}
인라인 이벤트: <button onclick="함수()">
표준 이벤트: element.addEventListener('click', function() {})

이벤트 객체

javascript

// 이벤트 타겟 접근
window.event.target  // IE 방식
e.target            // 표준 방식
this               // function 키워드 사용시

기본 이벤트 제거

javascript

// 방법 1: return false
<a href="url" onclick="return false;">링크</a>

// 방법 2: 조건부 return
<a href="url" onclick="return validate();">링크</a>

18. 정규표현식 ⭐시험출제포인트⭐

정규표현식 생성

javascript

const regExp = /패턴/플래그;
const regExp = new RegExp('패턴');

주요 메타문자

^ : 시작
$ : 끝
[] : 문자 클래스
. : 모든 문자 (개행 제외)
+ : 1글자 이상
\d : 숫자 [0-9]
\w : 영문자,숫자,_ [a-zA-Z0-9_]

수량문자

{n} : 정확히 n글자
{n,m} : n글자 이상 m글자 이하
{n,} : n글자 이상

플래그

i : 대소문자 구분 안함
g : 전역 검색
m : 여러 줄 검색

정규식 메소드

javascript

regExp.test(문자열)        // 패턴 일치 여부 (boolean)
문자열.replace(regExp, 값) // 패턴 치환

19. 시험 예상 문제 유형

1. 객관식 - 개념 문제

var, let, const 차이점
DOM 요소 선택 방법
이벤트 모델 종류
정규표현식 메타문자

2. 단답형 - 코드 결과 예측

javascript

console.log(7 + "7");        // "77"
console.log(7 + 7 + "7");    // "147"
console.log("7" - 7);        // 0

3. 코드 작성 - 실무 응용

버튼 클릭 이벤트 처리
배열 데이터 화면 출력
입력값 유효성 검사
객체를 이용한 데이터 관리

4. 디버깅 - 오류 찾기

변수 스코프 문제
이벤트 this 참조 오류
정규식 패턴 오류

20. 암기할 핵심 키워드

일급객체: JavaScript에서 함수가 갖는 특성
JIT Compiler: Java/JavaScript의 실행 방식
타입추론: 변수 선언 시 자료형을 자동으로 추론
이벤트 핸들러: onclick, addEventListener 등
DOM: Document Object Model - HTML 요소에 접근하는 방법
BOM: Browser Object Model - 브라우저 제어
호이스팅: var 변수의 선언부가 위로 끌어올려지는 현상
클로저: 외부 함수의 변수에 접근할 수 있는 내부 함수
this 키워드: 현재 실행 컨텍스트의 객체 참조

CSS 시험 준비 (feat.Claude)

티모_ — Fri, 26 Sep 2025 05:59:05 +0900

CSS 기본 선택자 시험 공부 요약

CSS란?

CSS (Cascading Style Sheets) - HTML 구조에 스타일을 적용하는 언어 (CSS3 버전 사용, W3C 표준)

CSS 스타일 적용 3가지 방식 ⭐⭐⭐

1. 인라인 방식

<div style="color:darkgreen">인라인 스타일 방식</div>

해당 요소에 style 속성으로 직접 기입
우선순위가 가장 높음

2. 내부 방식

<head>
  <style>
    /* CSS 코드 작성 */
  </style>
</head>

<head> 태그 안에 <style> 태그 사용

3. 외부 방식

<link rel="stylesheet" href="style.css">

별도 .css 파일을 <link> 태그로 연결

선택자(Selector) 개념 ⭐⭐⭐

선택자: 특정 HTML 요소를 선택해서 스타일을 적용하는 기능

4가지 기본 선택자 유형

1. **전체 선택자 (*)** ⭐⭐

* {
    color: darkred;
}

모든 요소를 선택
HTML 문서 내 모든 태그에 적용
주로 초기화 목적으로 사용

2. 태그 선택자 ⭐⭐⭐

pre {
    color: rgb(182, 91, 81);
}

같은 태그명을 가진 모든 요소 선택
h1, p, div 등 태그명 그대로 사용

3. 아이디 선택자 (#아이디값) ⭐⭐⭐

#pre-3,
#list-2 {
    color: orangered;
}

#으로 시작
딱 하나의 요소만 선택 (고유값)
HTML에서 id="아이디값" 속성 필요
문서 내에서 중복 불가

4. 클래스 선택자 (.클래스값) ⭐⭐⭐

.class-1 {
    color: salmon;
}
.class-2 {
    color: saddlebrown;
}

.으로 시작
여러 개의 요소 선택 가능
HTML에서 class="클래스값" 속성 필요
중복 사용 가능, 여러 클래스 동시 적용 가능

시험 출제 포인트

id vs class 차이점 ⭐⭐⭐

구분idclass

선택자 기호	#	.
고유성	문서 내 유일 (중복 불가)	중복 사용 가능
선택 개수	1개 요소만	여러 개 요소
사용 목적	특정 요소 하나만 스타일링	여러 요소를 그룹으로 스타일링

다중 선택자 ⭐⭐

/* 쉼표로 구분하여 여러 선택자 동시 적용 */
#pre-3,
#list-2 {
    color: orangered;
}

다중 클래스 적용 ⭐⭐

<!-- 한 요소에 여러 클래스 적용 -->
<li class="class-1 class-2">한 번에</li>

암기 포인트

선택자 기호: * (전체), 태그명 (태그), # (아이디), . (클래스)
CSS 적용 방식 3가지: 인라인 > 내부 > 외부 (우선순위 순서)
id는 고유값, class는 공유값
다중 선택자는 쉼표(,)로 구분

CSS 선택자 핵심 요약

기본 선택자 4개

* : 전체 선택자
태그명 : 태그 선택자
#아이디 : 아이디 선택자 (고유값, 1개만)
.클래스 : 클래스 선택자 (중복가능, 여러개)

고급 선택자 핵심

[속성명] : 속성 선택자
부모 > 자식 : 자식 선택자 (바로 하위만)
조상 후손 : 후손 선택자 (모든 하위)
A + B : 인접 형제 (바로 다음 1개)
A ~ B : 일반 형제 (뒤의 모든)

상태 선택자 (:콜론)

:hover : 마우스 올릴 때
:active : 클릭 중일 때
:focus : 포커스 상태
:checked : 체크된 상태
:enabled / :disabled : 활성/비활성

시험 필수 암기

자식(>) vs 후손( ) : 바로 하위 vs 모든 하위
id(#) vs class(.) : 고유값 vs 중복가능
형제 선택자 : 뒤에 오는 요소만 선택 가능
가상 클래스 : 콜론(:) 사용

⭐⭐⭐ CSS 우선순위 (중요!)

우선순위 순서 (높음 → 낮음)

1. !important          ← 최우선 (강제 적용)
2. 인라인 스타일        ← style="..." 
3. 아이디 선택자        ← #id
4. 클래스 선택자        ← .class
5. 태그 선택자          ← 태그명

CSS 글꼴 속성 핵심 요약 ✏️

1. font-family (글꼴 지정) ⭐⭐⭐

웹폰트: Google Fonts 등에서 <link> 태그로 연결
fallback: 여러 폰트 나열 (앞에서부터 우선 적용)

2. font-size (글꼴 크기) ⭐⭐⭐

단위 비교

px: 고정 크기
em: 부모 요소 기준 배수
%: 부모 요소 기준 백분율

3. font-weight (글꼴 두께) ⭐⭐

font-weight: normal;    /* 기본 */
font-weight: bold;      /* 굵게 */
font-weight: bolder;    /* 더 굵게 */
font-weight: lighter;   /* 더 얇게 */
font-weight: 100-900;   /* 숫자 (100단위) */

4. font-style (글꼴 기울임) ⭐⭐

font-style: normal;     /* 기본 */
font-style: italic;     /* 이탤릭 글꼴 */
font-style: oblique;    /* 강제 기울임 */

italic vs oblique 차이

italic: 기울임 전용 폰트 사용
oblique: 일반 폰트를 강제로 기울임

시험 출제 포인트

웹폰트 연결법 ⭐⭐⭐

html

<!-- 구글 웹폰트 연결 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/.../font.css" rel="stylesheet">

font-weight 숫자값 ⭐⭐

100-300: 얇음 (light)
400: 보통 (normal)
700: 굵음 (bold)
800-900: 매우 굵음

단위 선택 기준 ⭐⭐

고정 크기 원할 때: px
반응형 원할 때: em, %
1em = 부모 font-size 100%

암기 포인트

font-family: 웹폰트 link 연결법
font-size: px, em, % 단위 차이
font-weight: normal(400), bold(700)
font-style: italic vs oblique 차이

CSS 텍스트 & 색상 속성 핵심 요약

색상 표현 방법 5가지 ⭐⭐⭐

1. 색상명

css

color: orangered;
color: yellowgreen;

2. 16진수 (#)

css

color: #3e0703;    /* 6자리 */
color: #f00;       /* 3자리 (축약형) */

3. RGB

css

color: rgb(255, 114, 20);    /* Red(0-255), Green(0-255), Blue(0-255) */

4. RGBA (투명도 포함)

css

color: rgba(255, 123, 66, 0.5);    /* 마지막 값: 투명도 0-1 */

5. HSL/HSLA

css

color: hsl(2, 20%, 30%);           /* 색상(0-360), 채도%, 명도% */
color: hsla(2, 20%, 30%, 0.899);   /* + 투명도 */

텍스트 장식 속성

text-decoration ⭐⭐⭐

css

text-decoration: none;         /* 선 없음 (링크 밑줄 제거) */
text-decoration: underline;    /* 밑줄 */
text-decoration: overline;     /* 윗줄 */
text-decoration: line-through; /* 취소선 */

text-align ⭐⭐⭐

css

text-align: left;      /* 왼쪽 정렬 */
text-align: right;     /* 오른쪽 정렬 */
text-align: center;    /* 가운데 정렬 */
text-align: justify;   /* 양쪽 정렬 */

실무 활용 예시

링크 스타일링 ⭐⭐

css

a {
    text-decoration: none;           /* 기본 밑줄 제거 */
    color: rgb(50, 50, 50);
}

a:hover {
    text-decoration: underline;      /* 호버시 밑줄 추가 */
    color: rgba(50, 50, 50, 0.4);   /* 호버시 투명도 적용 */
}

시험 출제 포인트

색상값 범위 ⭐⭐⭐

색상 방식범위

RGB	0 ~ 255
투명도 (A)	0 ~ 1
HSL 색상	0 ~ 360도
HSL 채도/명도	0 ~ 100%

투명도 ⭐⭐

0: 완전 투명
1: 완전 불투명
0.5: 반투명

text-decoration 용도 ⭐⭐

none: 링크 밑줄 제거
underline: 중요 텍스트 강조
line-through: 삭제된 내용 표시

text-align ⭐⭐

justify: 양쪽 끝을 맞춤 (신문처럼)
center: 제목이나 버튼에 주로 사용

암기 포인트

text-decoration: none: 링크 밑줄 제거 필수
text-align: left, right, center, justify
rgba/hsla: 투명도 포함된 색상 표현

CSS 박스 모델 핵심 요약

박스 모델 4개 영역 ⭐⭐⭐

┌─────────── margin (바깥쪽 여백) ────────┐
│  ┌─────── border (테두리) ──────────┐   │
│  │  ┌─── padding (안쪽 여백) ──┐    │   │
│  │  │     content (내용물)     │    │   │
│  │  └─────────────────────────┘    │   │
│  └─────────────────────────────────┘   │
└────────────────────────────────────────┘

영역 구분 (바깥 → 안쪽)

margin: 요소의 바깥쪽 여백
border: 테두리
padding: 내용과 테두리 사이 거리 (안쪽 여백)
content: 실제 내용물

실제 요소 크기

전체 크기 = content + padding + border
(margin은 포함되지 않음!)

Padding (안쪽 여백) ⭐⭐⭐

단축 속성 문법

css

/* 1개 값: 모든 방향 동일 */
padding: 100px;    /* 상하좌우 100px */

/* 2개 값: 세로/가로 */
padding: 50px 20px;    /* 상하 50px, 좌우 20px */

/* 4개 값: 시계방향 (상우하좌) */
padding: 50px 20px 10px 0px;    /* 상 우 하 좌 */

개별 속성

css

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Margin (바깥쪽 여백) ⭐⭐⭐

기본 사용법

css

margin: 50px;              /* 모든 방향 50px */
margin: 10px 20px;         /* 상하 10px, 좌우 20px */
margin: 10px 20px 30px 40px;  /* 상 우 하 좌 */

특별한 값들 ⭐⭐⭐

css

/* 음수 값: 요소를 위로 당김 */
margin-top: -150px;

/* auto: 가운데 정렬 */
margin: auto;              /* 상하좌우 auto */
margin: 0 auto;            /* 상하 0, 좌우 auto (가로 가운데) */

시험 출제 포인트

박스 모델 크기 계산 ⭐⭐⭐

css

.box {
    width: 100px;        /* content width */
    height: 100px;       /* content height */
    padding: 20px;       /* 안쪽 여백 */
    border: 5px solid;   /* 테두리 */
    margin: 10px;        /* 바깥 여백 */
}

실제 요소가 차지하는 크기:

가로: 100px (content) + 40px (padding) + 10px (border) = 150px
세로: 100px (content) + 40px (padding) + 10px (border) = 150px
margin은 크기에 포함되지 않음!

단축 속성 순서 ⭐⭐⭐

css

/* 시계방향: 12시부터 시작 */
padding: 상 우 하 좌;
margin: 상 우 하 좌;

/* 기억법: TRouBLe (상 우 하 좌) */

margin auto 활용 ⭐⭐

css

/* 가로 가운데 정렬 */
margin: 0 auto;           /* 블록 요소 가운데 정렬 */
margin-left: auto;
margin-right: auto;       /* 위와 동일한 효과 */

음수 margin ⭐⭐

css

margin-top: -50px;        /* 요소를 위로 50px 당김 */
margin-left: -20px;       /* 요소를 왼쪽으로 20px 당김 */

실무 팁

가운데 정렬

css

.center {
    width: 300px;         /* 고정 너비 필요 */
    margin: 0 auto;       /* 가로 가운데 정렬 */
}

요소 간격 조정

css

.spacing {
    margin-bottom: 20px;  /* 아래 요소와 간격 */
}

겹침 현상 주의

margin collapse: 세로 margin은 겹칠 수 있음
padding은 절대 겹치지 않음

암기 포인트

박스 모델 순서: margin → border → padding → content
크기 계산: content + padding + border (margin 제외)
단축 속성: 1개(전체), 2개(상하/좌우), 4개(상우하좌)
margin auto: 가로 가운데 정렬
음수 margin: 요소를 반대 방향으로 이동

CSS 목록 스타일 핵심 요약

list-style 속성 3가지

1. list-style-type (불릿/번호 모양) ⭐⭐⭐

순서 없는 목록 (ul)

css

list-style-type: disc;      /* ● (기본값) */
list-style-type: circle;    /* ○ */
list-style-type: square;    /* ■ */
list-style-type: none;      /* 불릿 없음 */

순서 있는 목록 (ol)

css

list-style-type: decimal;       /* 1, 2, 3... (기본값) */
list-style-type: lower-roman;   /* i, ii, iii... */
list-style-type: upper-roman;   /* I, II, III... */
list-style-type: lower-alpha;   /* a, b, c... */
list-style-type: upper-alpha;   /* A, B, C... */

2. list-style-image (이미지 불릿) ⭐⭐

css

list-style-image: url(path/to/image.jpg);
list-style-image: none;     /* 기본값 */

3. list-style-position (불릿 위치) ⭐⭐

css

list-style-position: outside;   /* 텍스트 밖 (기본값) */
list-style-position: inside;    /* 텍스트 안 */

단축 속성 ⭐⭐⭐

css

/* 개별 속성 */
list-style-type: none;
list-style-image: url(image.jpg);
list-style-position: inside;

/* 단축 속성 (순서 상관없음) */
list-style: none;
list-style: url(image.jpg) inside;
list-style: square outside;

시험 출제 포인트

ul vs ol 기본값 ⭐⭐⭐

목록 타입	기본 list-style-type
ul	●
ol	1, 2, 3...

none의 활용 ⭐⭐⭐

css

list-style: none;    /* 가장 많이 사용 - 네비게이션, 메뉴 등 */

브라우저 기본 스타일 초기화 ⭐⭐

css

/* 목록 기본 스타일 완전 제거 */
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

CSS 테두리 & 효과 핵심 요약

Border 기본 속성 3가지 ⭐⭐⭐

1. border-style (테두리 스타일)

css

border-style: solid;      /* 실선 (가장 많이 사용) */
border-style: dotted;     /* 점선 */
border-style: dashed;     /* 대시선 */
border-style: double;     /* 이중선 */
border-style: groove;     /* 홈 파인 효과 */
border-style: ridge;      /* 돌출 효과 */
border-style: inset;      /* 안쪽으로 들어간 효과 */
border-style: outset;     /* 바깥으로 나온 효과 */
border-style: none;       /* 테두리 없음 */

2. border-width (테두리 두께)

css

border-width: 3px;        /* 모든 면 3px */
border-width: 1px 2px 3px 4px;  /* 상 우 하 좌 */
border-top-width: 10px;   /* 특정 면만 */

3. border-color (테두리 색상)

css

border-color: tomato;
border-color: #ff6347;
border-right-color: purple;  /* 특정 면만 */

시험 출제 포인트

border 단축 속성 순서 ⭐⭐⭐

css

border: 두께 스타일 색상;
border: 2px solid red;    /* 순서 중요! */

box-shadow vs text-shadow ⭐⭐

box-shadow: 요소 전체에 그림자
text-shadow: 텍스트에만 그림자

암기 포인트

border 순서: 두께 → 스타일 → 색상
border-radius: 50%: 완전한 원
box-shadow: x y 흐림 번짐 색상
다중 그림자: 쉼표(,)로 구분
border-style 8가지: solid, dotted, dashed, double, groove, ridge, inset, outset
hover 효과: 그림자로 상호작용 표현

CSS 배경 속성 핵심 요약

시험 출제 포인트

background-size ⭐⭐⭐

auto: 원본 크기
contain: 전체 보임, 비율 유지
cover: 영역 꽉참, 비율 유지

background-clip vs box-sizing ⭐⭐

background-clip: 배경 적용 범위
box-sizing: 너비 계산 방식

background-attachment: fixed ⭐⭐

패럴랙스 스크롤 효과
배경이 화면에 고정됨

CSS 레이아웃 & 배치 핵심 요약

Display 속성 ⭐⭐⭐

블록 vs 인라인 기본 개념

블록 요소: 한 줄 단위로 영역 차지 (div, h1, p 등)
인라인 요소: 컨텐츠 크기만큼만 영역 차지 (span, a, strong 등)

display 값들

css

display: block;          /* 블록 요소로 변환 */
display: inline;         /* 인라인 요소로 변환 (width, height 적용 X) */
display: inline-block;   /* 인라인처럼 나열 + width, height 적용 가능 */
display: none;          /* 완전히 숨김 (공간도 차지 안함) */
display: flex;          /* 플렉스 컨테이너 */

중요한 차이점

inline: width, height 속성 적용 불가
inline-block: width, height 적용 가능하면서 가로 배열

Flexbox ⭐⭐⭐

기본 설정

css

.container {
    display: flex;          /* 자식 요소들이 가로 배열 */
}

방향 설정

css

flex-direction: row;        /* 가로 배열 (기본값) */
flex-direction: column;     /* 세로 배열 */

가로 정렬 (justify-content)

css

justify-content: flex-start;    /* 왼쪽 정렬 (기본값) */
justify-content: center;        /* 가운데 정렬 */
justify-content: flex-end;      /* 오른쪽 정렬 */
justify-content: space-around;  /* 요소 사이사이 동일 간격 */
justify-content: space-evenly;  /* 모든 간격 동일 */
justify-content: space-between; /* 양 끝 붙이고 사이 균등 분배 */

세로 정렬 (align-items)

css

align-items: stretch;       /* 부모 높이에 맞춤 (기본값) */
align-items: center;        /* 세로 가운데 */
align-items: flex-start;    /* 위쪽 정렬 */
align-items: flex-end;      /* 아래쪽 정렬 */
align-items: baseline;      /* 텍스트 베이스라인 맞춤 */

자식 요소 속성

css

.item {
    flex-grow: 1;           /* 남은 공간 차지 비율 */
    order: 2;               /* 배치 순서 변경 */
}

Position 속성 ⭐⭐⭐

position 값들

css

position: static;       /* 기본값 (일반적인 흐름) */
position: relative;     /* 원래 위치 기준으로 이동 */
position: absolute;     /* 부모 기준으로 절대 위치 */
position: fixed;        /* 화면(viewport) 기준 고정 */

Z-index (쌓임 순서) ⭐⭐⭐

css

z-index: 1;             /* 숫자가 클수록 위에 */
z-index: 9999;          /* 매우 위에 */
z-index: -1;            /* 아래로 */

z-index 주의사항

position이 static이 아닌 요소에만 적용
같은 부모 내에서만 비교됨

시험 출제 포인트

display 차이 ⭐⭐⭐

inline: width, height 무시
inline-block: width, height 적용 + 가로 배열
none vs visibility: hidden: 공간 차지 여부

Flexbox 축 ⭐⭐⭐

justify-content: 주축(기본 가로) 정렬
align-items: 교차축(기본 세로) 정렬

Position 상대성 ⭐⭐⭐

relative: 원래 위치 기준
absolute: 부모(relative) 기준
fixed: 화면 기준

z-index 조건 ⭐⭐

position: static이 아닌 요소에만 적용

암기 포인트

inline: width, height 적용 안됨
Flexbox: justify(가로), align(세로)
Position 3단계: 부모 relative → 자식 absolute → 위치 지정
z-index: 숫자 클수록 위, position 필수
display: none vs visibility: hidden: 공간 차지 여부
flex-grow: 남은 공간 차지 비율

CSS 레이아웃 패턴 핵심 요약

기본 웹 레이아웃 구조

전체 컨테이너 설정

css

#wrap {
    width: 1000px;           /* 고정 너비 */
    height: 800px;           /* 고정 높이 */
    margin: auto;            /* 화면 가운데 정렬 */
    box-sizing: border-box;  /* 테두리 포함 크기 계산 */
}

1. 기본 3단 레이아웃 (Header-Main-Footer)

HTML 구조

html

<div id="wrap">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

CSS (백분율 방식)

css

#header, #footer {
    height: 30%;             /* 각각 30% */
}
#container {
    height: 40%;             /* 가운데 40% */
}

2. Flexbox 3단 레이아웃

HTML 구조

html

<div id="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>

CSS (flex 비율)

css

#wrap {
    display: flex;
    flex-direction: column;   /* 세로 배치 */
}

header { flex: 3; }          /* 비율 3 */
main   { flex: 4; }          /* 비율 4 */
footer { flex: 3; }          /* 비율 3 */

3. 복합 레이아웃 (Header + Main 2분할 + Footer)

HTML 구조

html

<div id="wrap">
    <header></header>
    <main>
        <div id="content_1"></div>
        <div id="content_2"></div>
    </main>
    <footer></footer>
</div>

CSS (중첩 flex)

css

#wrap {
    display: flex;
    flex-direction: column;
}

header { flex: 2; }
footer { flex: 2; }
main   { flex: 6; }

/* main 내부를 가로 분할 */
main {
    display: flex;           /* 가로 배치 */
}

#content_1 { flex: 7; }     /* 70% */
#content_2 { flex: 3; }     /* 30% */

4. 고급 레이아웃 (Header 3분할 + Main 3분할 + Footer)

HTML 구조

html

<div id="wrap">
    <header>
        <div id="header_1"></div>
        <div id="header_2"></div>
        <div id="header_3"></div>
    </header>
    <main>
        <div id="content_1"></div>
        <div id="content_2"></div>
        <div id="content_3"></div>
    </main>
    <footer></footer>
</div>

CSS (다중 flex 컨테이너)

css

#wrap {
    display: flex;
    flex-direction: column;
}

/* 세로 영역 비율 */
header { flex: 2; }
main   { flex: 6; }
footer { flex: 2; }

/* Header 가로 분할 */
header {
    display: flex;
}
#header_1 { flex: 2; }      /* 20% */
#header_2 { flex: 5; }      /* 50% */
#header_3 { flex: 3; }      /* 30% */

/* Main 가로 분할 */
main {
    display: flex;
}
#content_1 { flex: 1.5; }   /* 15% */
#content_2 { flex: 5; }     /* 50% */
#content_3 { flex: 3.5; }   /* 35% */

핵심 Flexbox 패턴

세로 배치 (Column)

css

.container {
    display: flex;
    flex-direction: column;   /* 세로로 쌓기 */
}

가로 배치 (Row) - 기본값

css

.container {
    display: flex;            /* 가로로 나열 */
}

비율 설정

css

.item1 { flex: 1; }          /* 1 비율 */
.item2 { flex: 2; }          /* 2 비율 (item1의 2배) */
.item3 { flex: 3; }          /* 3 비율 (item1의 3배) */

시험 출제 포인트

flex 비율 계산

css

/* flex: 2, flex: 4, flex: 4 인 경우 */
/* 전체 비율 = 2 + 4 + 4 = 10 */
/* 첫 번째: 2/10 = 20% */
/* 두 번째: 4/10 = 40% */
/* 세 번째: 4/10 = 40% */

중첩 flex 이해

부모가 flex-direction: column (세로)
자식이 flex-direction: row (가로) - 기본값

box-sizing의 중요성

css

* {
    box-sizing: border-box;  /* 모든 요소에 적용 권장 */
}

암기 포인트

기본 구조: wrap → header/main/footer
세로 배치: flex-direction: column
가로 배치: display: flex (기본값)
비율 설정: flex: 숫자
가운데 정렬: margin: auto
중첩 flex: 부모와 자식 모두 flex 컨테이너 가능
box-sizing: border-box 필수

CSS 전체 종합 요약 - 시험 완벽 대비

1. 선택자 (Selectors)

기본 선택자

* : 전체 선택자
태그명 : 태그 선택자
#아이디 : 아이디 선택자 (문서 내 고유값, 1개만)
.클래스 : 클래스 선택자 (중복 가능, 여러 개)

고급 선택자

[속성명] : 속성 선택자
부모 > 자식 : 자식 선택자 (바로 하위만)
조상 후손 : 후손 선택자 (모든 하위)
A + B : 인접 형제 (바로 다음 형제 1개)
A ~ B : 일반 형제 (뒤에 오는 모든 형제)

상태 선택자 (가상 클래스)

:hover : 마우스 올릴 때
:active : 클릭 중일 때
:focus : 포커스된 상태
:checked : 체크된 상태
:enabled / :disabled : 활성화/비활성화 상태

2. CSS 우선순위 (매우 중요!)

우선순위 순서 (높음 → 낮음)

1. !important          ← 최우선 (강제 적용)
2. 인라인 스타일        ← style="..." 
3. 아이디 선택자        ← #id
4. 클래스 선택자        ← .class
5. 태그 선택자          ← 태그명

핵심 규칙

같은 선택자: 아래쪽이 덮어씀 (cascade)
다른 선택자: 우선순위에 따라 적용
!important는 모든 우선순위를 무시하고 강제 적용

3. CSS 적용 방식

3가지 스타일 적용 방법

인라인 방식: <div style="color: red">
내부 방식: <head> 안에 <style> 태그
외부 방식: 별도 CSS 파일을 <link> 태그로 연결

4. 글꼴 속성 (Font Properties)

주요 속성

font-family: 글꼴명 : 글꼴 지정
font-size: 크기 : 글꼴 크기 (px, em, %)
font-weight: normal|bold|100-900 : 글꼴 두께
font-style: normal|italic|oblique : 글꼴 기울임

웹폰트 사용

html

<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

단위 비교

px: 절대 단위 (고정 크기)
em: 상대 단위 (부모 요소 기준)
%: 백분율 (부모 요소 기준)

5. 텍스트 & 색상 속성

색상 표현 방법

색상명: red, blue
16진수: #ff0000, #f00
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5) (투명도 0-1)
HSL: hsl(0, 100%, 50%) (색상 0-360도, 채도/명도 0-100%)

텍스트 속성

color: 색상값 : 글자 색상
text-decoration: none|underline|overline|line-through
text-align: left|right|center|justify : 텍스트 정렬

6. 박스 모델 (Box Model) - 핵심!

박스 모델 구조 (바깥 → 안쪽)

margin → border → padding → content

크기 계산 공식

실제 요소 크기 = content + padding + border
(margin은 포함되지 않음!)

단축 속성 순서 (시계 방향)

css

padding: 10px 20px 30px 40px;  /* 상 우 하 좌 */
margin: 10px 20px;             /* 상하 좌우 */

중요한 설정

margin: auto : 가로 가운데 정렬
box-sizing: border-box : 테두리까지 포함한 크기 계산 (실무 필수)

7. 테두리 & 효과

Border 속성

border: 두께 스타일 색상 (예: border: 2px solid red)
border-radius: 값 : 모서리 둥글게 (50%면 완전한 원)
스타일: solid, dotted, dashed, double, groove, ridge, inset, outset

그림자 효과

box-shadow: x좌표 y좌표 흐림정도 번짐정도 색상
text-shadow: x좌표 y좌표 흐림정도 색상

8. 배경 속성 (Background)

주요 속성

background-color: 색상 : 배경색
background-image: url(경로) : 배경 이미지
background-repeat: repeat|no-repeat|repeat-x|repeat-y
background-size: auto|contain|cover|크기
background-position: left|right|center|좌표

중요한 차이점

contain: 이미지 전체 보임, 비율 유지 (여백 생길 수 있음)
cover: 영역을 완전히 덮음, 비율 유지 (이미지 일부 잘릴 수 있음)

9. 레이아웃 & 배치 (Layout)

Display 속성

display: block : 블록 요소 (한 줄 차지)
display: inline : 인라인 요소 (width, height 적용 안됨)
display: inline-block : width, height 적용 + 가로 배열
display: none : 완전히 숨김 (공간도 차지 안함)
display: flex : 플렉스 컨테이너

Flexbox (현대 레이아웃의 핵심)

css

.container {
    display: flex;                    /* 자식 요소들 가로 배열 */
    flex-direction: column;           /* 세로 배열 */
    justify-content: center;          /* 가로 정렬 */
    align-items: center;              /* 세로 정렬 */
}

Flexbox 정렬 옵션

justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly
align-items: stretch, center, flex-start, flex-end, baseline

자식 요소 속성

flex: 숫자 : 공간 차지 비율
order: 숫자 : 배치 순서 변경

Position 속성

position: static : 기본값
position: relative : 원래 위치 기준으로 이동
position: absolute : 부모(relative) 기준으로 절대 위치
position: fixed : 화면(viewport) 기준 고정

Position 설정 3단계

부모 요소에 position: relative
자식 요소에 position: absolute
위치 지정: top, right, bottom, left

Z-index (쌓임 순서)

숫자가 클수록 위에 위치
position이 static이 아닌 요소에만 적용

10. 목록 스타일 (List Style)

기본 속성

list-style-type: disc|circle|square|decimal|none
list-style-image: url(이미지경로)
list-style: none : 불릿/번호 완전 제거 (네비게이션에서 필수)

11. 가시성 제어

숨김 방법의 차이

visibility: hidden : 안 보이지만 공간은 차지
display: none : 완전히 제거 (공간도 차지 안함)

12. 웹 레이아웃 패턴

기본 3단 구조

css

#wrap {
    width: 1000px;
    margin: auto;              /* 가운데 정렬 */
    display: flex;
    flex-direction: column;    /* 세로 배치 */
}

header { flex: 2; }           /* 비율 2 */
main   { flex: 6; }           /* 비율 6 */
footer { flex: 2; }           /* 비율 2 */

중첩 레이아웃

css

main {
    display: flex;            /* 가로 분할 */
}
#sidebar { flex: 3; }        /* 30% */
#content { flex: 7; }        /* 70% */

시험 출제 빈도 높은 문제들

1. 우선순위 계산 문제

!important > 인라인 > #id > .class > 태그
같은 우선순위면 아래쪽이 적용

2. 박스 모델 크기 계산

width: 200px, padding: 20px, border: 5px
실제 크기 = 200 + 40 + 10 = 250px

3. 선택자 차이

자식(>) vs 후손(공백): 바로 하위 vs 모든 하위
id vs class: 고유값 vs 중복 가능

4. Flexbox 정렬

justify-content: 가로 정렬
align-items: 세로 정렬

5. Position 관계

relative-absolute 부모-자식 관계
fixed는 화면 기준 고정

6. Display 차이

inline: width, height 적용 안됨
inline-block: width, height 적용 + 가로 배열

최종 암기 체크리스트

CSS 우선순위 5단계
박스 모델 크기 계산 공식
Flexbox 정렬 속성 (justify vs align)
Position 부모-자식 관계 설정법
색상 표현법과 범위 (RGB 0-255, 투명도 0-1)
단축 속성 순서 (상 우 하 좌)
display 값들의 차이점
background-size: cover vs contain
margin: auto 가운데 정렬
box-sizing: border-box의 중요성

최종 시험 대비 핵심:

선택자 우선순위 - 가장 많이 출제됨
박스 모델 계산 - width 계산 문제 단골
Flexbox 정렬 - 현대 레이아웃 필수
Position 관계 - relative-absolute 부모-자식
색상 표현법 - RGB, RGBA 범위 값

특히 margin: auto와 box-sizing: border-box는 실무에서도 기본이니까 확실히 기억해두세요.

html 시험 준비 (feat.ChatGPT)

티모_ — Fri, 26 Sep 2025 04:55:33 +0900

1_글자관련태그.html

주석 요약

<!DOCTYPE html> : 이 문서가 HTML임을 선언.
<html lang="ko"> : 문서 언어는 한국어.
<head> : 문서 정보(제목, 설명, 메타, 링크 등).
<meta charset="UTF-8"> : 한글 깨짐 방지, UTF-8 인코딩.
<meta name="viewport"> : 반응형 모바일 화면 지원.
<title> : 브라우저 탭에 표시되는 제목.
<body> : 실제 화면에 표시되는 내용.
<br> : 줄바꿈 태그(빈 태그).
<hr> : 수평선 태그.
<h1> ~ <h6> : 제목 태그, 단계별 계층 구조. (h1은 문서당 1개 권장)
<p> : 문단 나눔. 줄바꿈은 <br> 필요.
<pre> : 입력한 그대로 줄바꿈/공백 반영.
<b> : 단순 굵게(시각적 강조).
<strong> : 의미적 강조(스크린리더도 강조).
<i> : 단순 기울임.
<em> : 의미적 강조(기울임).
<s> : 취소선.
<mark> : 형광펜 강조.
<small> : 글자 작게.
<big> : 글자 크게. (HTML5에서 비권장)
<sub> : 아래첨자.
<sup> : 위첨자.

코드 해석 (중요 부분 중심)

회원관리프로그램입니다. <br /> 1. 회원추가 <br /> 2. 전체 회원 조회

→ br로 강제 줄바꿈, 콘솔 출력처럼 나열.

<hr />

→ 화면에 가로 구분선.

<h1>대장 제목</h1> ... <h6>h6제목입니다.</h6> <h7>태그가 아닌 일반 텍스트로 인식</h7>

→ h1~h6까지만 제목 태그, h7은 없음.

<p> 문단영역을 나누는 태그로는 p태그와 prer가 있음 개행을 하더라도 줄바꿈이 일어나지 않음<br> ... </p>

→ <p> 내부에서는 개행이 무시, 줄바꿈은 <br> 필요.

<pre> pre의 경우 브라우저에 자체 스타일이 부여 개행하는데로 잘 들어감 </pre>

→ 입력한 공백·줄바꿈 그대로 반영.

→ 둘 다 굵게 보이지만 의미 차이: strong은 중요성까지 전달.

→ 둘 다 기울임 보이지만 em은 의미 강조.

<s>...</s> → 취소선 <mark style="background:red">...</mark> → 빨간 형광펜 효과 <small>...</small> → 글자 작게 <big>...</big> → 글자 크게 <sub>...</sub> → 아래첨자 <sup>...</sup> → 위첨자

시험 대비 핵심 포인트

h태그는 h1~h6까지만 존재 → h7은 일반 텍스트 처리.
시맨틱 차이:
- <b> vs <strong>
- <i> vs <em>
  의미 전달 가능한 태그를 쓰는 게 HTML5 표준/접근성 권장.
<p>는 자동 줄바꿈 안 함 → <br> 필요.
<pre>는 입력 그대로 표시 (코드 블록, 시·가사 표현에 유용).
<mark>, <small>, <sub>, <sup> 등은 “출력 예제 문제”로 자주 나옴.
<big>은 구식 태그 — 현재는 CSS로 대체 권장.

정리하면, 이 파일은 텍스트 관련 HTML 태그 기본기 + 시맨틱/비시맨틱 구분을 묻는 시험에 딱 맞는 내용이에요.

2_표태그.html을 정리해드릴게요.

주석 요약

표(table): row(행) + cell(셀) 구조.
태그 구성:
- <table> : 표 전체
- <tr> : 행(Row)
- <td> : 일반 셀(Data Cell)
- <th> : 제목 셀(Header Cell, 기본적으로 굵게·가운데 정렬됨)
- <thead> : 표 머리 부분 (제목 행)
- <tbody> : 표 본문 부분 (데이터 행들)
- <tfoot> : 표 하단 요약 부분 (주로 합계, 비고 등)
셀 병합:
- colspan="2" → 열 2칸 합치기
- rowspan="2" → 행 2칸 합치기

시험 대비 핵심 포인트

표 기본 구조
- <table> → <thead> / <tbody> / <tfoot>
- 각 안에는 <tr> → <th> 또는 <td>
차이점
- <th>: 제목 셀 (자동 굵게, 가운데 정렬)
- <td>: 일반 데이터 셀
셀 병합 속성
- colspan (가로 병합), rowspan (세로 병합)
스타일 적용
- 표는 기본적으로 테두리 없음 → CSS로 border 지정해야 보임.
- border-collapse: collapse; 속성을 쓰면 이중 테두리 제거 가능 (시험에서 자주 물어봄).

요약하면, 이 파일은 표 만들기, 행/열 병합, <th>와 <td> 차이, 테두리 스타일링이 시험 핵심이에요.

3_이미지및멀티미디어관련태그.html

주석 요약

이미지 태그 <img>
- 필수 속성: src(이미지 경로), alt(대체 텍스트)
- 선택 속성: width, height (픽셀 또는 % 가능)
- alt의 역할:
  - 이미지 로딩 실패 시 대체 텍스트 표시
  - 스크린 리더에서 읽어주는 문구 → 웹 접근성 필수
미디어 태그
- <audio> : 오디오 파일 재생
- <video> : 비디오 파일 재생
- 공통 속성:
  - src : 미디어 파일 경로
  - controls : 재생 컨트롤 표시
  - autoplay : 자동 재생
  - loop : 반복 재생
  - poster : 비디오 썸네일 이미지
CSS 스타일링
- #id:hover → 마우스 오버 시 효과
- cursor: pointer → 마우스 커서 변경
- transition + transform: scale(1.1) → 확대 애니메이션 효과

시험 대비 핵심 포인트

src와 alt 필수 속성, 의미와 역할 정확히 이해.
이미지 크기 조절: px vs %, 고정/가변 단위 차이.
CSS 효과:
- hover, cursor, transform, transition
- 이미지 확대/축소 예제.
미디어 태그 사용법: audio/video 기본 속성 암기.
HTML 접근성: alt → 화면 낭독기, 사용자 경험 고려.

✅ 요약: 이 파일은 이미지 삽입, 크기 조절, 마우스 오버 효과, 오디오 재생 등 HTML 실습의 핵심 내용이 포함되어 있습니다.

시험 문제 유형: <img> 필수 속성, 고정/가변 크기 차이, alt의 역할, CSS hover 적용, <audio> 속성 이해

4.목록 관련 HTML 태그.html

주석 요약

기본 목록 태그 <li>
- 항목(Item) 하나를 나타냄
- 반드시 <ul>(순서 없는 목록), <ol>(순서 있는 목록), <dl>(정의 리스트) 안에서 사용 권장
순서 없는 목록 <ul>
- 기본 bullet 표시: ●, ○, ■ 등
- CSS로 커스터마이징 가능
순서 있는 목록 <ol>
- 숫자, 알파벳, 로마 숫자 등 순서 표시 가능
- 속성 예시:
  - start="10" → 시작 번호 지정
  - type="I" → 로마 숫자 대문자
정의 리스트 <dl>
- <dt> : 용어(term)
- <dd> : 정의(description)

시험 대비 핵심 포인트

순서 없는 목록 : <ul> + <li>
순서 있는 목록 : <ol> + <li>
- 속성: start, type
정의 리스트 : <dl> + <dt> + <dd>
중첩 목록 가능 → ul 안에 ul/ol, ol 안에 ul/ol 가능
li 단독 사용은 비권장 → 반드시 목록 요소 안에서 쓰기

✅ 요약: 이 파일은 HTML 목록 태그 기본 구조와 중첩, 속성 활용을 보여줍니다.

시험에서 자주 나오는 포인트: ul vs ol vs dl, start/type 속성

4_폼(form)과 입력(input) 양식 관련 HTML 태그 (중요)

주석 요약

기본 아이디어
- Java에서 Scanner 역할을 HTML에서 대체
- 사용자 입력을 받아 서버로 전송
입력 태그 <input>
- type="text" : 한 줄 텍스트 입력
- type="password" : 비밀번호 입력, 입력값 숨김
- type="search" / url / email : 특화된 입력 상자
- type="number" : 숫자 입력 + 스핀박스 지원
- type="range" : 슬라이드바 입력
- type="date/month/week/time/datetime-local" : 날짜/시간 입력
- type="color" : 색상 선택
- type="file" : 파일 첨부
- type="hidden" : 화면에 표시하지 않고 값 전송
텍스트 영역 <textarea>
- 여러 줄 입력 가능
- cols, rows 속성으로 크기 조절
- CSS resize: none으로 크기 조절 제한 가능
폼 <form>
- 입력 요소를 묶어 서버로 값 전송
- action : 요청 URL
- method : 전송 방식 (GET/POST)
- submit 버튼 클릭 시 전송
그룹화 <fieldset> + <legend>
- <fieldset> : 입력 요소 그룹화
- <legend> : 그룹 제목
라디오 버튼 / 체크박스
- type="radio" : 같은 name 그룹 내 한 개만 선택 가능
- type="checkbox" : 여러 개 선택 가능, 값은 value 전달
버튼 만들기
- <input type="submit/reset/button">
- <button type="submit/reset/button">
- button 기본값은 submit (폼 내부에서)
선택 목록 <select> + <option>
- 제시된 옵션 중 선택
- value 속성값이 서버로 전송
- <datalist> : 텍스트박스와 선택 목록 결합

핵심 포인트 (시험 대비)

폼(Form) 이해
- form 내부 input 요소 → submit 클릭 시 action URL로 값 전송
- method 차이: GET → URL에 노출 / POST → URL 비노출
입력 요소 속성
- placeholder : 입력 안내 문구
- required : 필수 입력
- maxlength : 입력 최대 길이
- name : 서버에 전달될 key 값
- value : 실제 입력된 값
라디오 vs 체크박스
- 라디오 → 한 그룹 내 단일 선택
- 체크박스 → 여러 개 선택 가능
특수 입력 타입
- 숫자/슬라이드바/날짜/시간/색상/파일/숨김 값 등
- 각 타입의 특징과 전송 방식 숙지
그룹화 & 레이아웃
- fieldset + legend → 폼 구성 요소 묶기
- 시각적 구분 + 접근성 향상
버튼과 전송 동작
- button 기본 타입 주의 (폼 내부에서 submit 기본)
- reset → 입력값 초기화
선택 목록과 데이터 리스트
- <select> + <option> : 단일 선택 목록
- <datalist> : 텍스트 입력 + 선택 가능

✅ 요약:
이 파일은 HTML 폼 작성법, 다양한 input 타입, submit/GET/POST 전송, 라디오/체크박스, 버튼, select/datalist 등을 다루며, 실제 웹 입력 UI 구현과 시험에서 자주 출제되는 핵심 내용을 포함합니다.

5_HTML 영역 관련 태그

주석 요약

블록(block) 요소 vs 인라인(inline) 요소
- 블록 요소
  - 한 줄 전체를 차지, 자동 줄바꿈
  - 예: h1 ~ h6, p, pre, textarea, ul, ol, li, div
- 인라인 요소
  - 내용 길이만큼만 영역 차지, 줄바꿈 없음
  - 줄바꿈 필요 시 <br> 사용
  - 예: input, label, button, mark, s, img, span
div 요소
- 블록 요소
- 영역 지정 가능 (width, height)
- 레이아웃 그룹화 용도
span 요소
- 인라인 요소
- 블록처럼 영역 지정 가능하지만 줄바꿈 없음
- 텍스트 강조나 레이아웃 일부에 사용
iframe 요소
- 다른 웹페이지 또는 콘텐츠를 현재 문서에 포함
- 속성:
  - src : 포함할 페이지 URL
  - frameborder : 테두리 유무
  - width, height : 크기 지정
  - allowfullscreen : 전체 화면 허용

핵심 포인트 (시험 대비)

블록 vs 인라인
- 블록: 줄바꿈 자동, 영역 전체 사용
- 인라인: 내용 길이만큼 영역, 줄바꿈 없음, 필요 시 <br>
div와 span
- div : 레이아웃 구조 및 영역 그룹화
- span : 텍스트 강조 및 인라인 영역 지정
영역 지정
- width와 height 속성으로 크기 조절 가능
- CSS 스타일로 블록/인라인 영역 커스터마이징 가능
iframe
- 외부 페이지/미디어 포함
- 속성: src, width, height, frameborder, allowfullscreen
- 동영상, 다른 HTML 문서 삽입 시 사용

✅ 요약:
이 파일은 HTML에서 영역과 레이아웃 이해를 위한 실습입니다.

블록/인라인 구분
영역 지정(width, height)
외부 콘텐츠 포함(iframe)
시험 포인트: div vs span, 줄바꿈 특징, iframe 기본 속성

앵커 태그(a)와 하이퍼링크

6_ 앵커 태그(a)와 하이퍼링크 관련 태그

주석 요약

앵커 태그 <a>
- HyperLink 생성
- 문서 내/외부 페이지 이동 가능
속성
- href : 이동할 URL 또는 페이지 ID (#id)
- target : 링크 열기 방식
  - _self : 현재 창 (기본값)
  - _blank : 새 창 / 새 탭
- id : 페이지 내 점프(Anchor)용
이미지 링크
- <a> 안에 <img> 넣으면 이미지 클릭 시 이동 가능
페이지 내 점프
- <a href="#id"> → 해당 id 요소 위치로 이동
- 주로 “위로 가기” 버튼 등
스타일링
- <a>를 버튼처럼 보이게 CSS 적용 가능
- text-decoration, display, width, height, background-color, border-radius 등 사용

✅ 요약:
이 파일은 앵커 태그 기본, target 속성, 이미지 링크, 페이지 내 점프, CSS로 링크 버튼화까지 다루고 있습니다.

시험 포인트: href, target, 페이지 점프(#id), 이미지 링크, CSS 스타일링 기본

01_HTML 폴더 시험용 요약

구분태그주요 속성설명예시

문서 구조	<!DOCTYPE html>	없음	문서가 HTML5임을 선언	<!DOCTYPE html>
	<html lang="ko">	lang	문서 언어 지정	<html lang="ko">
	<head>	없음	문서 메타데이터, 제목, 링크 등을 작성	<head>...</head>
	<meta>	charset, name, content	문자 인코딩, 뷰포트, 설명 등	<meta charset="UTF-8">
	<title>	없음	브라우저 탭에 표시될 문서 제목	<title>문서제목</title>
	<body>	없음	화면에 표시할 내용을 작성	<body>...</body>

구분태그주요 속성설명예시

글자 / 텍스트	<h1> ~ <h6>	없음	제목 표시, h1은 문서당 1개 권장	<h1>제목</h1>
	<p>	없음	문단 영역	<p>문단</p>
	<pre>	없음	입력한 줄바꿈 그대로 표시	<pre>줄바꿈 유지</pre>
	<b> / <strong>	없음	글자 굵게 표시 (b: 시각, strong: 의미적)	<b>굵게</b>
	<i> / <em>	없음	글자 기울임 (i: 시각, em: 의미적)	<em>강조</em>
	<s>	없음	취소선	<s>취소</s>
	<mark>	없음	형광펜 효과	<mark>강조</mark>
	<small> / <big>	없음	글자 크기 조절	<small>작게</small>
	<sub> / <sup>	없음	아래첨자 / 위첨자	H<sub>2</sub>O

구분태그주요 속성설명예시

표	<table>	없음	표 전체	<table>...</table>
	<tr>	없음	행(row)	<tr>...</tr>
	<th>	colspan, rowspan	열 제목, 셀 합치기 가능	<th colspan="2">제목</th>
	<td>	colspan, rowspan	일반 셀	<td>내용</td>
	<thead> / <tbody> / <tfoot>	없음	표 구획 나누기	<thead>...</thead>

구분태그주요 속성설명예시

이미지 / 미디어	<img>	src, alt, width, height	이미지 삽입, alt: 대체텍스트	<img src="img.jpg" alt="설명">
	<audio>	src, controls, autoplay, loop	오디오 삽입	<audio src="sound.mp3" controls>
	<video>	src, controls, autoplay, loop, width, height, poster	동영상 삽입	<video src="movie.mp4" controls>

구분태그주요 속성설명예시

목록	<ul>	없음	순서 없는 목록	<ul><li>항목</li></ul>
	<ol>	start, type	순서 있는 목록	<ol start="10" type="I">
	<li>	없음	목록 항목	<li>HTML</li>
	<dl> / <dt> / <dd>	없음	설명 목록	<dl><dt>포함</dt><dd>내용</dd></dl>

구분태그주요 속성설명예시

폼 / 입력	<form>	action, method	입력 양식 틀, 서버로 데이터 전송	<form action="url" method="get">
	<input>	type, name, value, placeholder, required, maxlength, min, max, step	다양한 입력 요소	<input type="text" name="id">
	<textarea>	cols, rows, name	여러 줄 입력	<textarea name="content"></textarea>
	<button>	type	버튼 (submit / reset / button)	<button type="submit">제출</button>
	<select> / <option>	name, value	드롭다운 선택	<select name="menu"><option value="1">A</option></select>
	<datalist>	id	텍스트 입력+선택 옵션	<input list="menu"><datalist id="menu"><option>1</option></datalist>
	<fieldset> / <legend>	없음	폼 그룹화, 제목 표시	<fieldset><legend>정보</legend>...</fieldset>

구분태그주요 속성설명예시

영역 / 레이아웃	<div>	없음	블록 영역 지정, 레이아웃	<div>내용</div>
	<span>	없음	인라인 영역 지정, 텍스트 강조	<span>텍스트</span>
	<iframe>	src, width, height, frameborder, allowfullscreen	다른 페이지/미디어 포함	<iframe src="page.html"></iframe>

구분태그주요 속성설명예시

링크 / 앵커	<a>	href, target, id	하이퍼링크, 페이지 내 이동, 새 창 열기	<a href="url" target="_blank">링크</a>
	<a> + <img>	src, alt	이미지 클릭 시 링크 이동	<a href="url"><img src="img.jpg"></a>

시험 대비 핵심 포인트

HTML 구조: <!DOCTYPE html> → html → head → body
블록 vs 인라인 요소 구분 + 줄바꿈 특성
텍스트 관련 태그: 강조(b, strong, i, em), 취소선(s), 형광펜(mark)
표: table, tr, th, td + rowspan/colspan
이미지/미디어: img, audio, video + 필수 속성(src, alt)
목록: ul/ol/dl + li/dt/dd
폼: form, input, textarea, select, datalist, button, fieldset/legend
영역/레이아웃: div vs span, iframe 포함
링크: a 태그 기본, target 속성, 이미지 링크, 페이지 내 점프(#id)

db sql study

티모_ — Fri, 5 Sep 2025 07:24:57 +0900

DQL 기본문법

* - ResultSet : 조회된 행들의 집합

* < 컬럼명에 별칭 부여하기 >

* [ 표현법 ]

* 컬럼명 AS 별칭, 컬럼명 AS "별칭", 컬럼명 "별칭", 컬럼명 별칭

* < 리터럴 >

* 임의로 지정한 문자열('')을 SELECT절에 기술하게 되면

* ResultSet을 반환받을 때 데이터를 붙여서 조회할 수 있음

-- EMPLOYEE테이블로부터 사원명, 급여

* <DISTNCT>

* 조회하고자하는 컬럼 앞에 작성하여 중복된 값을 딱 한번만 조회하는 용도

* 주의) SELELCT에 DISTINCT구문은 한 개만 사용이 가능

* SELECT문을 이용해서 조회를 할 때 조건을 부여하는 방법!

* < WHERE 절 >

* 조회하고자 하는 테이블에 특정 조건을 제시해서

* 조건에 만족하는 행만 조회하고자 할 때 기술하는 구문

* < 논리 연산자 >

* 여러 개의 조건을 엮을 때 사용

* AND(이면서~~, 그리고) / OR(~~거나, 또는)

* < BETWEEN AND >

* 몇 이상 몇 이하인 범위에 대해서 조건을 제시할 때 사용

* [ 표현법 ]

* 비교대상컬럼명 BETWEEN 하한값 AND 상한값

* < LIKE '특정패턴' >

* 비교하려는 컬럼의 값이 내가 지정한 특정 패턴에 만족할 경우 조회

* [ 표현법 ]

* 비교대상컬럼 LIKE '특정패턴'

* - 특정패턴 --> 와일드카드

* '%', '_' 두 가지를 가지고 패턴을 만들 수 있음

* '%' : 0글자 이상

* 비교대상컬럼 LIKE 'A%' => 컬럼값 중 'A'로 시작하는 것만 조회-> Apple, Add, A

* 비교대상컬럼 LIKE '%A' => 컬럼값 중 'A'로 끝나는 것만 조회 -> BananA, GolilA, A

* 비교대상컬럼 LIKE '%A%' => 컬럼값 중 'A'가 포함되는 것을 전부 조회

* '_' : 1글자

* 비교대상컬럼 LIKE '_A' => 컬럼값에 'A'앞에 무조건 1글자가 있어야만 패턴에 만족

* 비교대상컬럼 LIKE '__A' => 컬럼값에 'A'앞에 무조건 2글자가 있어야만 패턴에 만족

* < IS NULL >

* [ 표현법 ]

* 비교대상컬럼 IS NULL : 컬럼값이 NULL일경우

* 비교대상컬럼 IS NOT NULL : 컬럼값이 NULL이 아닐 경우

* < 연결연산자 || >

* 여러개의 컬럼 값들을 마치 하나의 컬럼인것처럼 연결시켜주는 연산자

* 컬럼값 또는 리터럴(문자열)을 전부 다 합칠 수 있음

* < IN >

* 비교대상 컬럼값에 내가 제시한 목록들 중에 일치하는 값이 있는지

* < 연산자 우선순위 >

* 1. ( )

* 2. 산술연산자

* 3. 연결연산자

* 4. 비교연산자

* 5. IS NULL, LIKE, IN

* 6. BETWEEN AND

* 7. NOT

* 8. AND

* 9. OR

* < ☆★☆★☆★☆★☆★☆★☆★ ORDER BY 절 ☆★☆★☆★☆★☆★☆★☆★ >

* 정렬용도로 사용하는 구문

* SELECT문에 가장 마지막에 작성하는 문법 + 실행 순서 또한 가장 마지막

* ORDER BY절을 작성하지 않으면 ResultSet은 정렬이 안된 상태

* [ 표현법 ]

* SELECT

* 컬럼명

* , 컬럼명

* , ...

* FROM

* 테이블명

* WHERE

* 조건식(생략가능)

* ORDER

* BY

* [정렬기준으로 삼고 싶은 컬럼명 / 별칭 / 컬럼 순번]

* [ASC / DESC]

* [NULLS FIRST / NULLS LAST] (생략가능)

* - ASC : 오름차순 정렬(기본값)

* - DESC : 내림차순 정렬

* - NULLS FIRST : 컬럼값이 NULL일 경우 조회결과의 위쪽에 배치(내림차순일 경우 기본값)

* - NULLS LAST : 컬럼값이 NULL일 경우 조회결과의 아래쪽에 배치(오름차순일 경우 기본값)

* 함수 < FUNCTION >

* 자바로 따지면 메소드

* 전달된 값을 가지고 계산된 결과를 반환해준당

* - 단일행 함수 : N개의 값을 읽어서 N개의 결과를 반환(매 행마다 함수 결과 반환)

* - ★☆그룹 함수☆★ : N개의 값을 읽어서 1개의 결과를 반환(그릅별로 함수 결과 반환)

-- 단일행 함수와 그룹함수는 함꼐 사용할 수 없음 : 결과 행의 개수가 다르기 때문

* < 문자열과 관련된 함수 >

* LENGTH / LENGTHB

* STR : '문자열' / 문자열이 들어가있는 컬럼

* "equals".length(); <-- 얘랑 똑같아용

* - LENGTH(STR) : 전달된 문자열의 글자 수 반환

* - LENGTHB(STR) : 전달된 문자열의 바이트 수 반환 (크기)

* 결과는 NUMBER타입 (ORACLE은 정수,실수 구분없이 NUMBER타입)

* 한글 : 'ㄱ', 'ㅏ', '강' => 한글자당 3Byte

* 숫자, 영어, 특수문자 => 한 글자당 1Byte

* INSTR

* - INSTR(STR) : 문자열로부터 특정 문자의 위치값 반환

* INSTR(STR, '특정 문자', 찾을위치의 시작값, 순번)

* 결과값은 NUMBER타입으로 반환

* 찾을 위치의 시작값과 순번은 생략이 가능

* 찾을 위치의 시작값

* 1 : 앞에서부터 찾겠다.(기본값)

* -1 : 뒤에서부터 찾겠다.

* SUBSTR

* - SUBSTR(STR, POSITION, LENGTH) : 문자열로부터 특전 문자열을 추출해서 반환

* - STR : '문자열' 또는 문자타입 컬럼 값

* - POSITION : 문자열 추출 시작위치값(POSITION번째 문자부터 추출) -> 음수도 가능

* - LENGTH : 추출할 문자 개수(생략 시 끝까지라는 의미)

* LPAD / RPAD

* - LPAD / RPAD(STR, 최종적으로 반환할 문자의 길이(바이트), 패딩할문자)

* : 인자로 전달한 문자열에 임의의 문자를 왼쪽 또는 오른쪽에 덧붙여서 N길이만큼의 문자열 반환

* 결과값은 CHARACTER타입으로 반환

* 덧붙이고자하는 문자는 생략 가능

* LTRIM / RTRIM

* - LTRIM / RTRIM(STR, 제거하고자하는 문자)

* : 문자열의 왼쪽 또는 오른쪽에서 제거하고자 하는 문자들을 찾아서 제거한 나머지 문자열을 반환

* 결과값은 CHARACTER타입으로 반환

* TRIM

* - TRIM(BOTH / LEADING / TRAILRING '제거하고자하는문자' FROM STR)

* : 문자열의 앞 / 뒤 / 양쪽에 있는 문자를 제거한 나머지 문자열을 반환

* 결과값은 CHARACTER

* BOTH / LEADING / TRAILRING은 생략 가능, 참고로 생략 시 기본값은 BOTH

* -LOWER(STR)

* : 다 소문자로 변경

* - UPPER(STR)

* : 다 대문자로 변경

* -INTICAP(STR)

* : 각 단어마다 앞글자만 대문자로 변경

* 결과값은 모두 CHARACTER 타입으로 반환

* CONCAT

* - CONCAT(STR1, STR2)

* : 전달된 두 개의 인자를 하나로 합친 결과를 반환

* 반환타입은 CHARACTER

* REPLACE

* -REPLACE(STR, 찾을문자, 바꿀문자)

* : STR로부터 찾을 문자를 찾아서 바꿀 문자로 바꾼 문자열을 반환

* 결과값은 CHARACTER타입

* MOD

* - MOD(NUMBER 1, NUMBER 2)

* ROUND

* - ROUND(NUMBER, 위치) : 반올림 처리해주는 함수

* 위치 : 소수점 아래 N번째 위치를 지정할 수 있음

* 생략도 가능, 생략 시 기본값은 0

* FLOOR

* - FLOOR(NUMBER) 소수점 아래의 수를 무조건 버림처리해주는 함수

* CEIL

* - CEIL(NNUMBER) 소수점 아래의 수를 무조건 올림처리해주는 함수

* TRUNC

* - TRUNC(NUMBER, 위치) : 위치지정이 가능한 절삭처리 함수

* < 날짜 관련 함수 >

* DATE 타입 : 년, 월, 일, 시, 분, 초를 모두 포함한 자료형

* TIMESTAMP <- 얘는 나중에

* ☆★EXTRACT : 년도 또는 월 또는 일정보를 추축해서 반환(NUMBER타입)

* - EXTRACT(YEAR FROM DATE) : 년도만 추출

* - EXTRACT(MONTH FROM DATE) : 월만 추출

* - EXTRACT(DAY FROM DATE) : 일만 추출

* < 형변환 함수>

* NUMBER . DATE => CHARACTER

* - TO_CHAR(NUMBER/DATE, 포맷) : 숫자 또는 날짜 데이터를 문자데이터타입으로 반환

* NUMBER / CHARACTER => DATE

* - TO_DATE(NUMBER, CHARACTER, 포맷) : 숫자/문자를 날짜로 변환(DATE로반환)

* CHARACTER => NUMBER

* - TO_NUMBER(CHARACTER, 포맷) : 문자를 숫자형으로 변환(NUMBER로반환)

* < NULL 처리 함수>

* NVL(컬럼명, 해당 컬럼값이 NULL값일 경우 반환할 결과값)

-- NVL2(컬럼명, 결과값1, 결과값2)

-- 해당 컬럼에 값이 존재할 경우 결과값 1을 반환

-- 해당 컬럼에 값이 null값일 경우 결과값 2를 반환

-- NULLIF(비교대상1, 비교대상2)

-- 두 개의 값이 동일할 경우 NULL을 반환

-- 두 개의 값이 동일하지 않을 경우 비교대상 1을 반환

* < 선택함수 >

* DECODE(비교대상(컬럼명/산술연산/함수식), 조건값1, 결과값1, 조건값2, 결과값3...);

* - 자바에서의 switch문과 유사

* switch(비교대상){

* case 조건값1 : 결과값1;

* case 조건값2 : 결과값2;

* default : 결과값

* }

* CASE WHEN THEN 구문

* - DECODE랑 비교했을 때 DECODE는 동등비교만 수행

* CASE WHEN THEN 다양한 조건식을 기술 가능

* [ 표현법 ]

* CASE

* WHEN 조건식1 THEN 결과값1

* WHEN 조건식2 THEN 결과값2

* ...

* ELSE 결과값

* END

------------------------- < ☆그룹 함수★ > --------------------------------------

* N개의 값을 읽어서 1개의 결과를 반환(하나의 그룹별로 함수 실행결과를 반환)

-- 1. SUM(숫자타입) : 해당 컬럼값들의 총 합계를 반환해주는 함수

-- 전체 사원의 총 급여합계

SELECT

SUM(SALARY)

FROM

EMPLOYEE;

-- 2. AVG(숫자타입) : 해당 컬럽값들의 평균값을 구해서 반환

-- 3. MIN(ANY) : 해당 컬럼값들 중 작은 값 반환

-- 4. MAX(ANY) : 해당 컬럼값들 중 가장 큰 값 반환

-- 5. COUNT(*/ 컬럼명 / DISTINCT 컬럼명) : 행 개수 세서 반환

-- COUNT(*) : 조회 결과에 해당하는 모든 행 개수를 다 세서 반환

--COUNT(DISTINCT 컬럼명) : 제시한 해당 컬럼값이 중복값이 존재할경우 하나로만 세서 반환

DQL_GROUP BY

* < GROUP BY 절 >

* 그룹을 묶어줄 기준을 제시할 수 있는 구문

* 여러 개의 컬럼값을 특정 그룹으로 묶어서 처리할 목적으로 사용

-- 주의할 점 : GROUP BY절 사용 시 GROUP으로 나누지 않은 컬럼은 SELECT 할 수 없음

* < HAVING 절 >

* 그룹에 대한 조건을 제시할 때 사용하는 구문

* (그룹함수를 아주 쏠쏠히 사용할 수 있음)

* < 실행 순서 > --> 실행순서가 중요함

* 5 : SELECT 조회하고자하는 컬럼명 / 함수식 / 산술연산식 / 리터럴값 / * AS "별칭"

* 1 : FROM 조회하고자하는 테이블명

* 2 : WHERE 조건식

* 3 : GROUP BY 그룹 기준에 해당하는 컬럼명 / 함수식

* 4 : HAVING 그룹함수로 만들어줄 조건식

* 6 : ORDER BY 정렬기준으로 사용할 컬럼명 / 함수식 / 별칭 / 컬럼 순번

* < JOIN >

* 두 개 이상의 테이블에서 데이터를 한 번에 조회하기 위해 사용하는 구문

* 조회 결과는 하나의 ResultSet으로 나옴

* 관계형 데이터베이스에서는 최소한의 데이터로 각각의 테이블에 데이터를 보관하고 있음(중복방지)

* -> JOIN구문을 사용해서 여러 개의 테이블 간 "관계"를 맺어서 같이 조회 해야함

* => 무작정 JIN을 해서 조인하는 것이 아니고 테이블 간 매칠을 할 수 있는 컬럼이 존재해야함

* JOIN은 크게 "오라클 전용구문"과 "ANSI(미국국립표준협회)구문"으로 나뉜다.

* ==================================================================

* 오라클 전용 구문 | ANSI(오라클 + 타 DBMS) 구문

* ==================================================================

* 등가조인 | 내부조인

* (EQUAL JOIN) | (INNER JOIN)

* ------------------------------------------------------------------

* 포괄조인 | 왼쪽 외부조인(LEFT OUTER JOIN)

* (LEFT OUTER) | 오른쪽 외부조인(RIGHT OUTER JOIN)

* (RIGHT OUTER) | 전체 외부조인(FULL OUTER JOIN) -> 오라클에선X

* ------------------------------------------------------------------

* 카테시안 곱 | 교차조인

* (CARTESIAN PRODUCT) | (CROSS JOIN)

* ------------------------------------------------------------------

* 자체조인(SELF JOIN)

* 비등가조인(NON EQUAL JOIN)

* 자연조인(NATURAL JOIN)

* 1. 등가조인(EQUAL JOIN) / 내부조인(INNER JOIN)

* JOIN 시 연결시키는 컬럼의 값이 일치하는 행들만 조인되서 조회

* ( == 일치하지 않는 값들을 조회에서 제외 )

--> 오라클 전용 구문

--> SELECT 절에는 조회하고 싶은 컬럼명을 각각 기술

--> FROM 절에는 조회하고자 하는 테이블을 , 를 이용해서 전부 다 나열

--> WHERE 절에는 매칭을 시키고자 하는 컬럼명에 대한 조건을 제시함( = )

--> ANSI구문

-- FROM절에 기준 테이블을 하나 기술한 뒤

-- 그 뒤에 JOIN절에 같이 조회하고자하는 테이블을 기술(매칭시킬 컬럼에 대한 조건도 기술)

-- USING / ON 구문

-- EMP_NAME, DEPT_CODE, DEPT_TITLE

-- 사원명, 부서코드, 부서명

-- 연결컬럼이 컬럼명이 다름(EMPLOYEE - DEPT_CODE / DEPARTMENT - DEPT_ID)

-- 무조건 ON구문만 사용가능!!!(USING은 못씀 안됨 불가능함!!!!!!!!!!!!!!!!!!!!)

* 2. 포괄조인 / 외부조인(OUTER JOIN)

* 테이블간의 JOIN 시 일치하지 않는 행도 포함시켜서 ResultSet 반환

* 단, 반드시 LEFT / RIGHT를 지정해줘야함!(기준 테이블을 선택해야함)

* 3. 카테시안 곱(CARTESIAN PRODUCT) / 교차조인(CROSS JOIN)

* 모든 테이블의 각 행들을 서로서로 매핑해서 조회된(곱집합) ** 사용금지 문법

* 두 테이블의 행들이 곱해진 조합 뽑아냄 => 데이터가 많을수록 방대한 행이 생겨남

* => 과부하의 위험

* 4. 비등가 조인(NON EQUAL JOIN)

* '='를 사용하지 않는 조인

* 컬럼값을 비교하는 경우가 아니라 "범위"에 포함되는 내용을 매칭

* 5. 자체조인(SELF JOIN)

* 같은 테이블을 다시 한 번 조인하는 경우

* 자기자신의 테이블과 조인을 맺음

* < 집합 연산자 SET OPERATOR >

* 여러 개의 쿼리문을 가지고 하나의 쿼리문으로 만드는 연산자

* - UNION : 합집합 ( 두 쿼리문의 수행 결과값을 더한 후 중복되는 부분을 제거)

* - INTERSECT : 교집합(두 쿼리문의 수행 결과값 중 중복된 부분)

* - MINUS : 차집합(선행 쿼리문 결과값 빼기 후행 쿼리문의 결과값을 한 결과)

* - UNION ALL : 합집합의 결과에 교집합을 더한 개념

* (두 쿼리문을 수행한 결과값을 무조건 더함. 합집합에서 중복 제거를 하지 않는 것)

* => 중복행이 여러 번 조회 될 수 있음

* < SUB QUERY 서브쿼리 >

* 하나의 메인 SQL(SELECT, INSERTM UPDATE, CREATE, ...)안에 포함된

* 또 하나의 SELECT문

* MAIN SQL문의 보조역할을 하는 쿼리문

-- 박세혁 사원과 부서가 같은 사원들의 사원명 조회

SELECT

EMP_NAME

FROM

EMPLOYEE

WHERE

DEPT_CODE = (SELECT

DEPT_CODE

FROM

EMPLOYEE

WHERE

EMP_ID = (SELECT

EMP_ID

FROM

EMPLOYEE

WHERE

EMP_NAME = '박세혁'

AND

DEPT_CODE = 'D5');

* 서브쿼리의 분류

* 서브쿼리를 수행한 결과가 몇 행 몇 열이냐에 따라서 분류됨

* - 단일행 [단일열] 서브쿼리 : 서브쿼리 수행 결과가 딱 1개일 경우

* - 다중행 [단일열] 서브쿼리 : 서브쿼리 수행 결과가 여러 행일 때

* - [단일열] 다중열 서브쿼리 : 서브쿼리 수행 결과가 여러 열일 때

* - 다중행 다중열 서브쿼리 : 서브쿼리 수행 결과가 여러 행, 여러 열 일때

* => 수행 결과가 몇 행 몇 열이냐에 따라서 사용할 수 있는 연산자가 다름

* 1. 단일 행 서브쿼리(SINGLE ROW SUBQUERY)

* 서브쿼리의 조회 결과값이 오로지 1개 일 때

* 일반 연산자 사용(=, !=, >, < ...)

-- FINAL class => 상속 안됨 X

-- FINAL METHOD => 오버라이딩 안됨 XX

--> JAVA

-------------------------------------------------------------------------

-- 자! 우리가 지금 하고 있는 작업이 어떤걸 하고 있는 건가요? / DB에다가 주고받고 --> 콤퓨타 작업

* 2. 다중 행 서브쿼리

* 서브쿼리의 조회 결과값이 여러 행일 때

* - IN(10, 20, 30) : 여러 개의 결과값 중 한 개라도 일치하는 값이 있다면

* X(컬럼) > ANY(값, 값, 값)

* X의 값이 ANY괄호안의 값 중 하나라도 크면 참

* > ANY(값, 값, 값) : 여러 개의 결과값중 하나라도 "클"경우 참을 반환

* < ANY(값, 값, 값) : 여러 개의 결과값중 하나라도 "작을"경우 참을 반환

* 3. 다중 열 서브쿼리

* 조회결과는 한 행이지만 나열된 컬럼의 수가 다수개일 때

* 5. 인라인 뷰(INLINE-VIEW)

* FROM 절에 서브쿼리를 작성

* SELECT문의 수행결과(Result Set)을 테이블 대신 사용

* 6. 스칼라 서브쿼리(Scalar Subquery)

* 주로 SELECT 절에 사용하는 쿼리를 의미(WHERE나 FROM이나 다 쓸 순 있음)

* 메인쿼리 실행마다 서브쿼리가 실행될 수 있으므로 성능이슈가 생길 수 있음

* 그렇기 때문에 JOIN으로 대체하는 것이 일반적으로는 성능상 유리함

* 단, 캐싱이 되기 때문에 동일한 결과에 대해선 성능상 JOIN보다 뛰어날 수도 있음

* 스칼라 쿼리는 반드시 단 한개의 값만을 반환해야함

--> 인라인 뷰를 주로 사용하는 예(클래식)

--> TOP-N 분석 : DB상에 있는 값들 중 최상위 N개의 데이터를 보기 위해서 사용

-- * ROWNUM : 오라클에서 자체적으로 제공해주는 컬럼, 조회된 순서대로 순번을 붙여줌

SELECT --3

ROWNUM

, EMP_NAME

, SALARY

FROM --1

EMPLOYEE

WHERE --2

ROWNUM <= 5

ORDER --4

SALARY DESC;

SELECT

EMP_NAME

, SALARY

FROM

EMPLOYEE

ORDER

SALARY DESC NULLS LAST

OFFSET 0 ROWS FETCH NEXT 5 ROWS ONLY;

< DML : DATA MANIPULATION LANGUAGE >

데이터 조작 언어

논외 ) SELECT : DML / DQL

INSERT / UPDATE / DELETE

디엠엘의 종류는 무엇이 있나요?

인설트, 업데이트, 딜리트가 있고 셀렉트는 디엠엘 범주에 포함되는데 요새는 디큐엘로 분류하기도 합니다.

테이블에 새로운 데이터를 삽입(INSERT)하거나,

테이블에 존재하는 데이터를 수정(UPDATE)하거나,

테이블에 존재하는 데이터를 삭제(DELETE)하는 구문

* 1. INSERT : 테이블에 새로운 행을 추가해주는 구문

* [ 표현법 ]

* 1) INSERT INTO 테이블명 VALUES (값, 값, 값, ...);

* => 해당 테이블에 모든 컬럼에 추가하고자 하는 값을 직접 입력해서 한 행을 INSERT할 때 사용

* ※ 주의할 점 : 값의 순서를 컬럼의 순서와 동일하게 작성해야 함

* 2) INSERT INTO 테이블명(컬럼명, 컬럼명, 컬럼명) VALUES(값, 값, 값);

* => 테이블 특정 컬럼만 선택해서 컬럼에 값을 추가하면서 행을 추가할 때 사용

* INSERT는 무조건 한 행 단위로 추가가 되기 때문에 작성하지 않은 컬럼은 NULL값이 들어감

* 주의할 점 ) NOT NULL이 달려있는 컬럼은 반드시 테이블 명 뒤에 컬럼명을 적어야함

* 예외 사항 ) NOT NULL제약조건이 달려있는데 기본값이 있는 경우는 DEFAULT VALUE가 들어감

* 3) INSERT INTO 테이블명 (서브쿼리);

* => VALUES 대신에 서브쿼리를 작성해서 INSERT 할 수 있음

* 4) INSERT ALL ☆★☆

* 하나의 테이블에 여러 행을 한꺼번에 INSERT 할 때 사용

* INSERT ALL

* INTO 테이블명 VALUES(값, 값, 값 ...)

* 2. UPDATE

* 테이블에 기록된 기존의 데이터를 수정하는 구문

* [ 표현법 ]

* UPDATE

* 테이블명

* SET

* 컬럼명 = 바꿀값

* , 컬럼명 = 바꿀값

* , ... => 여러 개의 컬럼값을 바꿀 수 있음(,써야함! AND아님!! AND아님!!!!)

* WHERE

* 조건식; => 생략 가능

* UPDATE 사용시 서브쿼리 사용해보기

* UPDATE

* 테이블명

* SET

* 컬럼명 = (서브쿼리)

* WHERE

* 조건;

* 3. DELETE

* 테이블에 기록된 행을 삭제하는 구문

* [ 표현법 ]

* DELETE

* FROM

* 테이블명

* WHERE

* 조건; => 생략가능

* WHERE 조건절을 작성하지 않으면 모든 행 삭제

* * TRUNCATE : 테이블의 전체 행을 삭제하는데 사용하는 구문(절삭)

* DELETE보다 빠름(이론적으로)

* 별도의 조건을 부여할 수 없음 ROLLBACK불가능!

* DDL(DATA DEFINITION LANGUAGE) : 데이터 정의 언어

구조자체를 정의하는 언어로 주로 DB관리자, 설계자가 사용함

오라클에서 제공하는 객체(OBJECT)를

새롭게 만들고(CREATE), 구조를 변경하고(ALTER), 구조를 삭제하고(DROP)하는 명령어

DDL : CREATE, ALTER, DROP

오라클의 객체(구조) : 테이블(TABLE), 사용자(USER), 뷰(VIEW), 시퀀스(SEQUENCE)

, 인덱스(INDEX), 패키지(PACKAGE), 트리거(TRIGGER)

, 프로시저(PROCEDURE), 함수(FUNCTION), 동의어(SYNONYM) ...

DQL : SELECT => 질의

DML : INSERT / UPDATE / DELETE => 데이터를 조작

DDL : CREATE / ALTER / DROP => 구조 조작

* < CREATE TABLE >

* 테이블이란? : 행(ROW), 열(COLUMN)로 구성되는 가장 기본적인 데이터베이스 객체

* 관계형 데이터베이스는 모든 데이터를 테이블 형태로 저장함

* (데이터를 보관하고자 하면 반드시 테이블이 존재해야함!!)

* [ 표현법 ]

* CREATE TABLE TB_테이블명 (

* 컬럼명 자료형,

* ...

* );

* < 자료형 >

* - 문자(CHAR(크기) / VARCHAR2(크기) / NVARCHAR2(크기)) : 크기는 BYTE단위

* (NVARCHAR는 예외)

* 숫자, 영문자, 특수문자 => 1글자당 1BYTE

* 한글, 일본어, 중국어 => 1글자당 3BYTE

* - CHAR(바이트크기) : 최대 2000BYTE까지 지정가능

* 고정길이(아무리 작은 값이 들어와도 공백으로 채워서 크기 유지)

* 주로 들어올 값의 글자수가 정해져 있을 경우

* 예) 성별 M/F

* - VARCHAR2(바이트크기) : VAR는 '가변'을 의미, 2는 '2배'를 의미

* 최대 4000BYTE까지 지정 가능

* 가변길이(적은값이 들어오면 맞춰서 크기가 줄어듬)

* --> CLOB, BLOB

* - NVARCHAR2(N) : 가변길이, 선언방식(N) --> N : 최대 문자 수

* 다국어 지원 아주 화끈함 완전 지원

* VARCHAR2보다 성능이 떨어질 수 있음

* - 숫자(NUMBER) : 정수 / 실수 상관없이 NUMBER

* - 날짜(DATE)

* 컬럼에 주석 달기 == 설명 다는 법

* COMMENT ON COLUMN 테이블명.컬럼명 IS '설명'

-- 테이블에 데이터를 추가

-- INSERT

INSERT

INTO

* < 제약 조건 CONSTRAINT >

* - 테이블에 유효한 데이터값만 유지하기 위해서 특정 컬럼마다 제약 == 데이터 무결섬 보장

* - 제약조건을 부여하면 데이터를 INSERT . UPDATE할 때마다 제약조건에 위배되지 않는지 검사

* - 종류 : NOT NULL, UNIQUEM CHECK, PRIMARY KEY, FOREIGN KEY

* - 제약조건을 부여하는 방법 : 컬럼 레벨 / 테이블 레벨

* 1. NOT NULL 제약조건

* 해당 컬럼에 반드시 값이 존재해야 할 경우 사용(NULL값을 막는다)

* INSERT / UPDATE 시 NULL값을 허용하지 않도록 제한

* NOT NULL제약조건은 컬럼레벨 방식으로만 부여할 수 있음

* 2. UNIQUE 제약조건

* 컬럼에 중복값을 제한하는 제약조건

* INSERT / UPDATE 시 기존 컬럼값 중 중복값이 있을 경우 추가 또는 수정을 할 수 없도록 제약

* 컬럼레벨 / 테이블레벨 방식 둘 다 가능

* 3. CHECK 제약조건

* 컬럼에 기록될 수 있는 값에 대한 조건을 설정할 수 있음!

* CHECK(조건식)

* 4. PRIMARY KEY(기본키, PK) 제약조건 ☆★☆★☆★☆★☆★☆★☆★중요

* 테이블에서 각 행들의 정보를 유일하게 식별할 용도로 컬럼에 부여하는 제약조건

* -> 행들을 구분하는 식별자의 역할

* 예 ) 학생번호, 게시글번호, 사번, 주문번호, 예약번호

* => 중복이 발생해선 안되고 값이 꼭 있어야만 하는 식별용 컬럼에 PRIMARY KEY를 부여

* 한 테이블 당 한 번만 사용 가능

CREATE TABLE TB_USER_PK(

USER_NO NUMBER CONSTRAINT PK_USER PRIMARY KEY, -- 컬럼레벨 방식

USER_ID VARCHAR2(15) NOT NULL UNIQUE,

USER_PWD VARCHAR2(20) NOT NULL,

USER_NAME VARCHAR2(30),

GENDER CHAR(3) CHECK(GENDER IN ('남', '여'))

-- PRIMARY KEY(USER_NO) -- 테이블레벨방식

);

-- 하나의 테이블은 하나의 PRIMARY KEY만 가질 수 있음

-- 두 개의 컬럼을 묶어서 하나의 PRIMARY KEY로 만들 수 있음 --> 복합키☆★

* 5. FOREIGN KEY(외래키) 제약조건

* 다른 테이블에 존재하는 값만 컬럼에 INSERT하고 싶을 때 부여하는 제약조건

* => 다른 테이블(부모 테이블)을 참조한다고 표현

* 참조하는 테이블에 존재하는 값만 INSERT 할 수 있음

* => FOREIGN KEY제약조건을 이용해서 다른 테이블간의 관계를 형성할 수 있음

* [ 표현법 ]

* - 컬럼 레벨 방식

* 컬럼명 자료형 REFERENCES 참조할테이블명(참조할컬럼명)

* - 테이블 레벨 방식

* FOREIGN KEYT(컬럼명) REFERENCES 참조할테이블명(참조할컬럼명)

* 컬럼명 생략 시 PRIMARY KEY컬럼이 참조할 컬럼이 됨

* * 자식테이블 생성 시 외래키 제약조건을 부여하면

* 부모테이블의 데이터를 삭제할 때 자식테이블에서는 처리를 어떻게 할 것인지 옵션 지정 가능

* 기본 설정은 ON DELETE RESTRTIRCTED(삭제제한)이 설정됨

* 2. ALTER

* 객체 구조를 수정하는 구문

* < 테이블 수정 >

* ALTER TABLE 테이블명 수정할내용;

* - 수정할 내용

* 1) 컬럼 추가 / 컬럼 수정 / 컬럼 삭제

* 2) 제약조건 추가 / 삭제 => 제약조건 수정은 X

* 3) 테이블명 / 컬럼명 / 제약조건명

-- 1) 컬럼 추가 / 수정 / 삭제

-- 1_1) 추가(ADD) : ADD 추가할 컬럼명 자료형 DEFAULT 기본값(DEFAULT 생략 가능)

-- LOCATION

ALTER TABLE JOB_COPY ADD LOCATION VARCHAR2(10);

-- 1_2) 컬럼수정(MODIFY)

-- 자료형 수정 : ALTER TABLE 테이블명 MODIFY 컬럼명 바꿀데이터타입;

-- DEFAULT 값 수정 : ALTER TABLE 테이블명 MODIFY 컬럼명 DEFAULT 기본값;

-- ALTER USER 계정명 IDENTIFIED BY 바꾸고 싶은 비밀번호;

-- JOB_CODE 컬럼 데이터 타입을 CHAR(3)로 변경

-- ALTER TABLE JOB_COPY MODIFY JOB_CODE NUMBER;

-- ALTER TABLE JOB)COPY MODIFY JOB_CODE CHAR(1);

-- 현재 변경하려고 하는 컬럼의 값과 완전히 다른 타입이거나 작은 크기러는 변경이 불가능함

-- 문자 -> 숫자(X) / 사이즈 축소(X) / 확대 (O)

-- JOB_NAME 컬럼 데이터 타입을 NVARCHAR2(40)

-- LOCATION 컬럼 데이터 타입을 NVARCHAR(40)

-- LOCATION_NAME컬럼 기본값을 '미국

-- 1_3) 컬럼 삭제 (DROP COLUMN) : DROP COLUMN 컬럼명

-- 2) 제약조건 추가 / 삭제

* 테이블을 생성한 후 제약조건을 추가 (ADD)

* - PRIMARY KEY : ADD PRIMARY KEY(컬럼명);

* - FOREIGN KEY : ADD FOREIGN KEY(컬럼명) REFERENCES 부모테이블명;

* - CHECK : ADD CHECK(컬럼명);

* - UNIQUE : ADD UNIQUE(컬럼명);

* - NOT NULL : MODIFY 컬럼명 NOT NULL

* 제약조건 달려있는걸 삭제

* PRIMARY KEY, FOREIGN KEY, UNIQUE, CHECK : DROP CONSTRAINT 제약조건명

* - NOT NULL : MODIFY 컬럼명 NULL;

-- 3) 컬럼명 / 제약조건명 / 테이블명 변경(RENAME)

-- 3_1) 컬럼명 바꾸기 : ALTER TABLE 테이블명 RENAME COLUMN 원래컬럼명 TO 바꿀컬럼명

ALTER TABLE JOB_COPY RENAME COLUMN LOCATION TO LNAME;

-- 3_2) 테이블명 변경 : ALTER TABLE 테이블명 RENAME 기존테이블명 TO 바꿀테이블명

ALTER TABLE JOB_COPY2 RENAME TO JOB_COPY3;

DROP TABLE PARENT_TABLE;

-- 1. 자식테이블을 DROP한 후 부모테이블을 DROP

-- 2. CASCADE CONSTRAINT

DROP TABLE PARENT_TABLE CASCADE CONSTRAINT;

< TCL : TRANSACTION CONTROL LANGUAGE >

트랜잭션 제어 언어

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★생각이 필요한 개념☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

* TRANSACTION

- 작업단위

- 데이터베이스의 상태를 변화시키는 논리적 연산단위

- 여러개의 DML구문을 하나로 묶어 처리하는 메커니즘

- 데이터의 변경사항(DML)들을 하나의 트랜잭션으로 묶어서 관리

COMMIT(확정)하기 전까지의 변동사항들을 하나의 트랜잭션에 담게됨

- 트랜잭션의 대상이 되는 SQL : INSERT, UPDATE, DELETE

COMMIT(트랜잭션을 종료 처리 후 확정), ROLLBACK(트랜잭션 취소), SAVEPOINT

* TRANSACTION의 4가지 속성

ACID

1. Atomicity(원자성) : 트랜잭션 내의 모든 작업은 전부 수행되거나,

전혀 수행되지 않아야 한다. 라는 원칙

2. Consistency(일관성) : 트랜잭션이 성공적으로 완료 된 후에도

데이터베이스는 유효한 상태를 유지해야한다는 원칙

3. Isolation(고립성) : 동시에 실행되는 여러 트랜잭션이 상호간에 영향을 끼치지

않도록 하는 원칙

4. Durablity(지속성) : 트랜잭션이 성공적으로 수행되었다면,

시스템에 문제가 발생하더라도 영구적으로 반영이 되어야한다.

* DDL 구문(CREATE, ALTER, DROP)을 수행하는 순간

* 트랜잭션에 있는 모든 작업사항을 무조건 COMMIT해서 실제 DB에 반영 한 후 DDL을 수행

* --> DDL을 써야하는데 이전 트랜잭션이 존재한다 ==> COMMIT / ROLLBACK 수행 후 처리

* < VIEW 뷰 > --> 논리적인 가상테이블

* SELECT문 저장하는 객체 -> 강사님 설명

* 1. VIEW 생성

* [ 표현법 ]

* CREATE VIEW 뷰이름

* AS 서브쿼리;

-- 뷰의 장점 : 쿼리문이 엄청 긴게 필요할 때 그때 그때 작성하면 힘들다...

-- 딱 한번 뷰로 만들어주면 그때부터는 뷰를 사용해서 간단하게 조회할 수 있음 (생산성 향상)

-- 해당 계정이 가지고 있는 VIEW에 대한 정보를 조회할 수 있는 데이터 딕셔너리

-- 뷰는 논리적인 가상테이블 => 실질적으로 데이터를 저장하고 있지 않음

-- (쿼리문을 TEXT 형태로 저장해놓음)

-------------------------------------------------------------------------------------

* CREATE OR REPLACE VIEW 뷰이름

* AS 서브쿼리;

* 뷰 생성 시 기존에 중복된 이름의 뷰가 존재한다면 갱신(변경)해주고

* 없다면 새로운 뷰를 생성해줌

-- 사원의 사원명, 연봉, 근무년수를 조회할 수 있는 SELECT문 정의

* 뷰 생성 시 SELECT절에 함수 또는 산술연산식이 기술되어있는 경우 뷰 생성이 불가능하기 때문에

* 반드시 별칭을 지정해주어야함

* < 시퀀스 SEQUENCE >

* 자동으로 번호를 발생시켜주는 역할을 하는 객체

* 정수값을 자동으로 순차 증가시켜 생성해줌

* -- 회원번호, 사원번호, 예약번호, 주문번호 등등 채번 할 때 주로 사용함

* 1. 시퀀스 객체 생성 구문

* [ 표현법 ]

* CREATE SEQUENCE 시퀀스명

* START WITH 시작숫자 -> 시작값을 지정하는 옵션

* INCREMENT BY 증가값 -> 값을 증가시킬 때 몇 씩 증가할건지 지정하는 옵션

* MAXVALUE 최대값 -> 최대값 지정 옵션

* MINVALUE 최소값 -> 최소값 지정 옵션

* CYCLE / NOCYCLE -> 순환 여부 지정

* ------------생략가능

* CACHE 바이트크기 / NOCACHE -> 캐시메모리 쓸건지 말건지

* -> CACHE_SIZE 기본값은 20BYTE

* * CACHE : 미리 발생할 값을 생성해서 저장을 해둘건지 말건지 여부 지정

* 값이 필요할 때마다 매 번 새롭게 값을 생성해내는 것보다는

* 캐시 공간에 미리 생성된 값들을 가져다 쓰는 것이 훨씬 속도적인 측면에서 이득이 있음

* 단, 접속이 끊기고나서 재접속 후 기존 생성된 값들이 다 날아가고 없음

* * 접두사

* - 테이블명 : TB_

* - 뷰 : VW_

* - 시퀀스 : SEQ_

* - 트리거 : TRG_

* 2. 시퀀스를 사용하는 방법

* 시퀀스명.CURRVAL : 현재 시퀀스의 값(마지막으로 성공적으로 만들어진 NEXTVAL 값)

* 시퀀스명.NEXTVAL : 시퀀스값을 증가시킨 뒤 증가된 시퀀스의 값

* 기존 시퀀스 값에서 INCREMENT BY값만큼 증가한 값

* (시퀀스명.CURRVAL + INCREMENT BY값(기본값 1))

* 시퀀스 생성 시 첫 NEXTVAL은 START WITH로 지정한 시작값으로 발생

-- NEXTVAL를 한 번이라도 수행하지 않으면 CURRVAL을 사용할 수 없음

-- CURRVAL은 마지막에 성공적으로 만들어진 NEXTVAL을 보여주는 임시값

-- LAST_NUMBER : 지금 NEXTVAL하면 나오는 값

-- 수정 : ALTER --> START WITH는 변경 불거능 너무 바꾸고 싶으면 DROP하고 다시 CREATE

-- 삭제 : DROP

* < DCL : DATE CONTROL LANGUAGE >

* 데이터 제어 언어

* 계정에게 시스템 권한 또는 객체 접근 권한을 부여(GRANT)하거나 회수(REVOKE)하는 언어

* * 권한 부여(GRANT)

* - 시스템 권한 : DB에 접근하는 권한, 객체를 생성할 수 있는 권한

* - 객체 접근 권한 : 특정 객체들에 접근해서 조작할 수 있는 권한

* -- 객체 접근권한 부여하는 법

* [ 표현법 ]

* GRANT 권한종류(SELECT, INSERT, UPDATE, DELETE) ON 객체명(테이블명) TO 계정명;

* * 시스템권한의 종류

* - CREATE SESSION : 계정에 접속할 수 있는 권한

* - CREATE TABLE : 테이블을 생성할 수 있는 권한

* - CREATE VIEW : 뷰를 생성할 수 있는 권한

* - CREATE SEQUENCE : 시퀀스를 생성할 수 있는 권한

* GRANT 권한1, 권한2, ... TO 계정명;

* < ROLE >

* 특정 권한들을 하나의 집합으로 모아놓은 것

* CONNECT, RESOURCE

* < 권한 회수 REVOKE >

* [표현법]

* REVOKE 권한1, 권한2... FROM 사용자명; -->

-- CREATE USER C##TEST IDENTIFIED BY TEST;

-- GRANT CREATE SESSION TO C##TEST;

-- REVOKE CREATE SESSION FROM C##TEST;

JDBC SQL

티모_ — Thu, 4 Sep 2025 12:47:36 +0900