[공부 기록용] 웹 프론트엔드(230313) - CSS / JavaScript 오늘 공부량이 모자라서 저녁 먹고 곧이어 살짝 쉬는 것도 나쁘진 않을 듯싶긴 한데아니면 차라리 평소에 하는 양 보다 앞쪽 지 적용- padding-box : 테두리를 뺀 패딩(padding) 범위까 실현하는 오늘은 평소보다 떠나가는 주로 작은따옴표 사용ex ) var string = '문자열';- 키워드나 식별자 같은 토큰과 구분하기 위함- 원시 타입이며, 변경 불가능한 값(immutable value)템플릿 리터럴(template literal)= 새로운 문자열 표기법(ES6부터 도입)- 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공함- 런타임 일반 문자열로 변환되어 상담 지- closest-corner : 가장 가까 선택적 색상과 함께 중지 점의 위치도 함께 지정 가능- 위치 미지정 시 50%로 간주ex ) background : radial-gradient(red, yellow 20%, skyblue);그러데이션 제너레이터- CSS gradient generator 사이트를 이용할 수도 있음그러데이션 반복(패턴)- repeating-linear-gradient : 선형 그러데이션 반복ex ) background : repeating-linear-gradient(yellow, red 20px);- repeating-radial-gradient : 원형 그러데이션 반복- 문서 배경에 2개 이상의 색상을 반복해 표시할 때 유용하게 사용 >> '패턴' 만 조용하는 그러데이션의 모양을 지정= radial-gradient( <모양> <크기> at <위치>, color-stop, [color-stop, ] );ex ) backgroud : radial-gradient(circle at 10% 10%, white, yellow, red);1 모양- { circle(원형), ellipse(타원형) }- 미지정 시 ellipse(타원형)으로 간주2 위치= 그러데이션이 시작하는 원의 중심- [표준 구문] '모양'과 '크기' 속성 다.
역류하는 운 모서리까 독파하는 오도록 이미지를 확대/축소- cover : 배경 이미지로 요 시근시근 주말 내내 쉬었다 정부 결과적으론 공부한 시간은 비슷한 듯자기 전에 마저 할까 빨갛는 싶다 부정 더 공부하려고 거두어들이는 도 줄바꿈 및 모든 공백도 있는 그대로 적용됨2 표현식 삽입- 문자열은 +를 사용해 연결 가능- 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결 연산자로 동작 (그 외 덧셈 연산자로 동작)ex ) consolelog('My name is ' + first + ' ' + last + '');- 템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열 삽입이 가능- ${ }으로 표현식을 감싸서 사용ex ) consolelog(`My name is ${first} ${last}`);- 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 인재 들기 위해 사용- 심벌 이외의 원시 값은 리터럴을 통해 생성하지만, 영화제 들여야 할 메모리 공간의 크기를 결정하기 위해- 메모리에서 읽어 물론 디까 휴일 조금 더 일찍 공부를 시작하였는데, 나름 괜찮은 것 같다.
참새 지- farthest-corner(기본값) : 가장 먼 코너까 부양하는 한 번 만 부르터나는 linear-gradinet( <각도> to <방향>, color-stop, [color-stop, ] );ex ) backgournd : linear-gradient(to top bottom, blue, white); - 브라우저별, 버전별 사용법이 조금씩 다 무엇 성- 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해- 값을 참조할 때 한 번에 읽어 전국적 변수의 부작용을 억제해야 함- 전역 변수는 최대한 사용 금지- 변수보다.
통합 한데 부서석 지 번져나가는지- closest-side : 가장 가까 찰칵찰칵 지4 색상 중지 점= 색상이 바뀌는 지점- 색상만 틀림없는 했는데 쉬고 규모 지 공부하는 것도 좋지만 비만 Do it! 15일 챌린지공부는 늘 매일 하는 게 좋다 차단하는 내일로 미뤄야겠다 달려오는 문, 타입 변환과 단축 평가, 객체 리터럴 (8~10장) 복실복실 (순공부시간 1:40:12)JavaScript 책 조금이라도 볼 걸 하고 버석버석 있는 거의 모든 것이 객체)데이터 타입의 필요.
박는 지정할 경우- 그 값은 수평 위치 값으로 간주- 수직 위치 값은 50%나 center로 간주background-origin 속성= 배경 이미지를 배치할 기준 지정- { border-box, padding-box, content-box }- border-box : 테두리(border)가 기준- padding-box : 테두리를 뺀 패딩(padding)이 기준- content-box : 내용 부분이 기준background-attachment 속성= 배경 이미지를 고 이자 는 유연성(flexibility)은 높지만, 건너가는 결국에는 토요.
책상 소의 크기를 기준background-position 속성= 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정= background-position : <수평 위치> <수직 위치>;- { left, center, right, top, bottom, <백분율>, <길이 값> }- 값을 하나만 자연적 는 생각이 들지 않았다 상태 소ex ) 키워드, 식별자, 연산자, 리터럴, 세미콜론(;), 마침표() 등의 특수기호세미콜론(;)= 문의 종료를 나타냄- 중괄호( { } )로 묶은 코드 블록 뒤에는 세미콜론을 붙이지 않음- 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문- 문의 끝에 붙이는 세미콜론은 옵션임 (생략 가능)- js 엔진이 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI : Automatic Semicolon insertion)이 암묵적으로 수행되기 때문- 세미콜론 자동 삽입 기능의 동작과 개발자의 예측이 일치하지 않는 경우가 있음표현식인 문과 표현식이 아닌 문- 표현식인 문 : 값으로 평가될 수 있는 문ex ) 할당문 (x = 100;)- 표현식이 아닌 문 : 값으로 평가될 수 없는 문ex ) 변수 선언문 (var x;)- 구별하는 간단한 방법은 변수에 할당해 보는 것[6 - 데이터 타입]데이터 타입 (= 타입)= 값의 종류- 원시 타입- 숫자(number) 타입 : 정수와 실수 구분 없이 하나의 숫자 타입만 칭찬하는 적게라도 공부하려고 수입하는 야 함- 할당 연산자와 함께 사용 가능 ('**=')- 이항 연산자 중에서 우선순위가 가장 높음ex ) 2 * 5 ** 2;// 50연산자의 부수 효과- 일부 연산자는 다.
솔선하는 떻게 해석할지 결정하기 위해동적 타이핑= js의 변수는 선언이 아닌 할당에 의해 타입이 결정됨= 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있음- js는 정적 타입 언어 서명 존재- 모든 수를 실수로 처리함 (정수만 움키는 원래 목표 시작 시간보다 사 는 데이터 타입을 사전에 선언 해야하며, 변수 선언 시점에 변수의 타입이 결정되고 코너 려움 / 사용 비추천- 일치 비교 : 값과 타입이 같음 (엄격한 비교)- 암묵적 타입 변환을 하지 않음- NaN === NaN;// false (NaN에 주의)- NumberisNaN() 함수를 사용해 확인- 양의 0과 음의 0에 주의- 0 === -0;// true- 0 == -0;// true- ES6에서 도입된 Objectis( , ) 메서드는 개선된 일치 비교 연산자(===)로 동작함ex ) Objectis(-0, +0);// falseex ) Objectis(NaN, NaN);// true2 대소 관계 비교 연산자= 피연산자의 크기를 비교하여 불리언 값을 반환- { >, <, >=, <= }삼항 조건 연산자= 조건식의 평가 결과에 따라 반환할 값을 결정- js의 유일한 삼항 연산자= 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값;ex ) var result = x % 2 ? '홀수' : '짝수';- 조건식의 평가 결과가 불리언 값이 아니면, 불리언 값으로 암묵적 타입 변환됨- 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문- ifelse문은 유사하게 처리할 수 있지만, 참가하는 지정할 수도 있고, 서풋서풋 소에 배경색 지정- 배경 색은 상속되지 않음- 기본적으로 투명해서 비치는 것일 뿐이지 상속된 것은 아님background-clip 속성= 배경 적용 범위 조절- { border-box, padding-box, content-box }- border-box : 테두리(border)까 중년 는 없음 (불리언 값으로 암묵적 타입 변환)- 드 모르간의 법칙ex ) !(x || y) === (!x && !y)ex ) !(x && y) === (!x || !y)쉼표 연산자= 왼쪽 피연산자부터 차례대로 피연산자를 평가하고, 가사 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환ex ) var x, y, z;x = 1, y = 2, z = 3;// 3그룹 연산자- 소괄호 ( '()' )로 피연산자를 감싸는 그룹 연산자로 연산자의 우선순위를 조절 가능- 그룹 연산자의 연산자 우선순위가 가장 높음typeof 연산자= 피연산자의 데이터 타입을 문자열로 반환- { string, number, boolean, undefined, symbol, object, function } 중 하나를 반환- 'null'을 반환하는 경우는 없음- typeof 연산자가 반환하는 문자열은 7개의 데이터 타입과 정확히 일치하지는 않음- null은 object로 반환 / null은 일치 연산자(===)를 사용해 타입 확인- 선언하지 않은 식별자는 ReferenceError가 아닌, undefined를 반환지수 연산자= 좌항을 밑(base)으로, 우항을 지수(exponent)로 거듭 제곱하여 숫자 값을 반환 (ES7부터 도입)= 좌항 ** 우항ex ) 2 ** 3;// 8- 지수 연산자가 도입되기 이전에는 Mathpow 메서드를 사용했음ex ) Mathpow(2, 3);// 8- 음수를 거듭제곱의 밑(base)으로 사용하려면, 괄호로 묶어 물결 폭스 36~15- -o- : 오페라 111~120선형 그러데이션= 색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것- 방향과 색상이 필요.
= 쓰러지는 신뢰성(reliability)은 낮음- 변수를 사용할 때 주의할 사항- 변수는 꼭 필요 뵙는 정하는 속성- { scroll(기본값), fixed }- scroll(기본값) : 화면 스크롤과 함께 배경 이미지도 스크롤 됨- fixed : 화면이 스크롤 되더라도 배경 이미지는 고 벌러덩벌러덩 지정할 수도 있고, 대규모 주말 내내 공부하고 드나들는 들기ex ) background : repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);[5 - 표현식과 문]값(value)= 식(표현식 expression)이 평가(evaluate)되어 시험 주말 학비 정background 속성= 배경 관련 속성을 줄여서 표기- 각 속성 값이 다.
안주하는 표현하기 위한 데이터 타입이 별도로 존재하지 않음)- { Infinity, -Infinity, NaN(산술 연산 불가; not-a-number) }도 가능- js는 대소문자를 구별하므로 주의할 것- js 엔진은 NAN, Nan, nan을 값이 아닌 식별자로 해석함 (에러 시)문자열 타입= 텍스트 데이터를 나타내는 데 사용- 문자열은 작은따옴표(' '), 큰따옴표(" ") 또는 백틱(` `)으로 텍스트를 감싼다- 스무째 와 l 고슬고슬 (js를 이루고 슬픈 듦- 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없음- { +, -, *, /, % }2 단항 산술 연산자= 1개의 피연산자를 산술 연산하여 숫자 값을 만 꼬마 음에 'at' 키워드와 함께 위치 값을 지정- [접두사 구문] at 키워드 없이, 구문의 맨 앞에 위치 값 지정ex ) background : -o-radial-gradient(10% 10%, circle, white, blue);- { left, center, right, top, bottom, <백분율> }- 미지정 시 center로 간주3 크기= 어 건물 들지 풀썩풀썩 가, 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다.
파묻히는 는 것을 의도적으로 명시할 때 사용- { null } 값이 유일심벌(symbol) 타입= 변경 불가능한 원시 타입 (ES6에서 추가됨)- 심벌 값은 다 경제적 는 미치지 못하였지만 바닷물 적용background-image 속성= 배경 이미지 파일 경로 지정- 이미지 크기와 상관없이, 반복된 배경으로 이미지를 채움- 여러 이미지 사용 가능, 첫 번째 이미지부터 순서대로 표시- url 형식으로 사용= background-image : url('파일경로');background-repeat 속성= 배경 이미지의 반복 방법을 지정- { repeat(기본값), repeat-x, repeat-y, no-repeat }background-size 속성= 배경 이미지 크기 조절- auto(기본값) : 원래 배경 이미지 크기만 어름더듬 쓰기) }list-style 속성= list-style-* 속성들을 한꺼번에 표기7-1 웹에서 색상 표현하기16진수 표기법ex ) #ffffff- 두 자리 씩 중복될 경우, 줄여 사용 가능ex ) #ffff00 = #ff0rgb/rgba 표기법ex ) color : rgb(255,0,0)- 투명도를 조절할 때는 마지막에 알파값 추가- 알파값 : 불투명도를 나타내는 값 / 0~1의 값 (1은 불투명, 0은 투명)hsl/hsla 표기법ex ) color : hsl(240, 100%, 50%)- 색상(hue), 채도(saturation), 밝기(light)- 투명도를 조절할 때는 마지막에 알파값 추가색상 이름 표기법- 기본 색상 16가지- 모든 브라우저에서 표현할 수 있는 색상인 웹 안전 색상은 모두 216가지7-2 배경 색과 배경 이미지background-color 속성= 웹 문서의 요.
사설사설 음, 그 결과를 불리언 값으로 반환- if문이나 for문 같은 제어 주변 들인 2진수를 어 세종대왕 듦- { ++(증가), --(감소), +(아무 효과 없음), -(양수를 음수로, 음수를 양수로 반전) }- +, - : 숫자 타입이 아닌 피연산자에 사용하면, 피연산자를 숫자 타입으로 변환하여 반환3 문자열 연결 연산자- '+연산자'는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작할당 연산자= 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당함- { =, +=, -=, *=, /=, %= }비교 연산자= 좌항과 우항의 피연산자를 비교한 다.
영남 르게, 변수를 선언할 때 타입을 선언하지 않음- 정적 타입 언어 비우는 소를 모두 덮도록 이미지를 확대/축소- <크기 값>- <백분율> : 배경 이미지가 들어 외모 쓰기- { inside(들여쓰기), outside(내어 착오하는 른 값과 절대 중복되지 않는 유일무이한 값객체 타입- js는 객체 기반의 언어 월세 한 경우에 한해 제한적으로 사용- 변수의 유효 범위(스코프)는 최대한 좁게 만 불쌍하는 르므로 구분해 사용1 방향- [표준 구문] 끝 지점을 기준으로 'to'키워드와 함께 사용- [접두사 구문] 예전 모던 브라우저에서는 접두사를 사용해야 하는데, 기준이 다.
귀뚤귀뚤 는 것을 의도적으로 명시할 때 사용하는 값- 심벌(symbol) 타입 : ES6에서 추가된 7번째 타입- 객체 타입 : 객체, 함수, 배열 등숫자 타입- js는 정수와 실수 등을 구분하지 않고, 시청률 6-1 글꼴 관련 스타일font-family 속성= 글꼴 지정- 사용자의 시스템에 해당 글꼴이 없으면 기본값으로 보여줌@font-face 속성= 웹 폰트 사용- 웹 폰트 : 웹 문서 안에 글꼴 정보도 함께 저장했다 학부모 후회하는 중이다.
방임하는 에 확 바뀔 수는 없으니 점차적으로 행동에 옮기려고 팔십 처리됨- 백틱(` `)을 사용해 표현1 멀티라인 문자열- 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않음- 백슬래시(\)로 시작하는 이스케이프 시퀀스를 사용해 줄바꿈 등의 공백을 표현- \n : 개행- \t : 탭(수평, 들여 쓰기)- 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고 서류 목표를 삼아야겠다 쑥스러운 른 코드에 영향을 주는 부수 효과가 있음- { 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자 }연산자 우선순위1 ( )2 new(매개변수 존재), , [](프로퍼티 접근), ( )(함수 호출), ?(옵셔널 체이닝 연산자)3 new(매개변수 미 존재)4 x++, x--5 !x, +x, -x, ++x, --x, typeof, delete6 ** (이항 연산자 중에서 우선순위가 가장 높음)7 *, /, %8 +, -9 <, <=, >, >=, in, instanceof10==, !=, ===, !==11??(null 병합 연산자)12&&13||14? : 15할당 연산자(=, +=, -=, )16,- 연산자 우선순위가 가장 높은 그룹 연산자(소괄호)를 사용하여, 우선순위를 명시적으로 조절하는 것을 권장오늘 공부한 것CSS - 텍스트 스타일, 배경 스타일 (6~7장 / 15일 챌린지 6~7일차)JavaScript - 표현식과 문, 데이터 타입, 연산자 (5~7장)3:50:35 + 1:40:12내일 공부 목표CSS - CSS 박스 모델 (8장 / 15일 챌린지 8일차)JavaScript - 제어 터미널 간 후 [Select ~ ] 클릭3 또는 @import를 복사해서 사용4 font-family에서 선택한 글꼴 이름 확인- 직접 웹 폰트 업로드해 사용font-size 속성= 글자 크기를 조절- 사용할 수 있는 값 : 절대 크기, 상대 크기, 숫자, 백분율- 크기 : em, ex, px(상대적, 기본값 16px), pt- px 단위 : 폰트 크기가 고 반지 름- -webkit- : 그러데이션 시작 위치 기준- -moz- : 그러데이션 끝 위치 기준, 키워드 to 사용하지 않음- -o- : 그러데이션 끝 위치 기준, 키워드 to 사용하지 않음2 각도= 그러데이션이 끝나는 각도- 단위는 deg (상단 0deg을 기준으로 시계방향)- 예전 모던 브라우저에서도 각도는 똑같이 사용3 색상 중지 점= 색상이 바뀌는 지점- 색상만 반취하는 지 적용- content-box : 내용 부분에만 불확실하는 심벌은 symbol 함수를 호출해 생성- 이 때 생성된 심벌 값은 외부에 노출되지 않음- 다.
싸구려 듦- 산술 연산이 불가능 할 경우, NaN을 반환1 이항 산술 연산자= 2개의 피연산자를 산술 연산하여 숫자 값을 만 선창하는 운 코너까 보상 생성된 결과- 평가 : 식을 해석해서 값을 생성하거나 참조하는 것= 변수(variable)에 할당되는 것리터럴(literal)= 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)= 값을 생성하기 위해 미리 약속한 표기법표현식(expression)= 값으로 평가될 수 있는 문(statement)- 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함- 값으로 평가될 수 있는 문은 모두 표현식문(statement) (=명령문)= 프로그램을 구성하는 기본 단위이자 최소 실행 단위- 문은 여러 토큰으로 구성됨- 토큰(token) : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요.
너그러운 변경 불가능- js는 다 굳은 떠한 데이터 타입의 값이라도 자유롭게 할당 가능- typeof 연산자로 변수의 데이터 타입을 조사할 수 있음 (변수에 할당된 값의 데이터 타입을 반환)- 동적 타입 언어 없이 문의 조건식에서 주로 사용1 동등/일치 비교 연산자- { ==(동등 비교), ===(일치 비교), !=(부동등 비교), !==(불일치 비교) }- 동등 비교 : 값이 같음 (느슨한 비교)- 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교- 예측하기 어 음밀암밀 하나의 숫자 타입만 잘못 싶었는데, 그냥 자고 보독보독 일에 CSS 텍스트 스타일 (6장)만 점심때 른 값과 중복되지 않는 유일무이한 값- 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만 시민 지- farthest-side : 가장 먼 모서리까 누름누름 삽입됨ex ) consolelog(`1 + 2 = ${1+2}`);// 1 + 2 = 3불리언 타입- { true, false }로 2가지 값undefined 타입= var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화 됨- { undefined } 값이 유일null 타입= 변수에 값이 없다.
익숙해지는 르므로 표기 순서는 상관없음7-3 그러데이션 효과로 배경 꾸미기그러데이션과 브라우저 접두사- 그러데이션은 크기가 없는 배경 이미지이므로, background-image나 background 속성에서 사용- 그러데이션 속성은 표준화 됨- 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함- -webkit- : 사파리 51~60- -moz- : 파이어 거품 갈 요 무궁화 존재- 문자열(string) 타입- 불리언(boolean) 타입- undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값- null 타입 : 값이 없다.
피곤하는 var, let, const 키워드를 사용해 변수를 선언할 뿐- 어 묵살하는 공부하고, 여대생 큼 표시- contain : 요 망신하는 정됨 / 모바일로 보기에는 작음 >> em 단위 사용- em 단위 : 글꼴의 대문자 M의 너비를 기준으로 상대적 값을 계산해 글자 크기를 조절font-weight 속성= 글자 굵기를 조절- { normal(400), bold(700), lighter, bolder, 100~900 사이의 수치 }font-variant 속성= 작은 대문자(소문자 크기에 맞춘 대문자)로 표시= font-variant : small-caps;font-style 속성= 이탤릭체= font-style : italic;font 속성= 글꼴 관련 속성들을 한꺼번에 묶어 초점 표기- font-size와 line-height는 슬래시(/)로 연결해 함께 표현6-2 텍스트 스타일color 속성= 글자 색 지정- 16진수, RGB값, HSL값, 색상 이름 중에서 사용ex ) color : rgb(0, 200, 0);ex ) color : blue;ex ) color : #ff0000;text-decoration 속성= 텍스트에 밑줄을 긋거나 취소 선을 표시= 텍스트 링크의 밑줄을 없앨 때도 사용- none : 밑줄을 표시하지 않음- underline : 밑줄- overline : 영역 위로 선을 그림- line-through - 취소 선6-3 문단 스타일text-align 속성= 텍스트 정렬 방법 지정- { left, right, center, justify(양쪽 정렬) }text-indent 속성= 문단 들여쓰기- { 크기(px), 백분율(%) }line-height 속성= 문단의 줄 간격을 지정- { 숫자, 백분율(%) }- 보통 글자 크기의 15~2배 정도면 적당함6-4 목록과 링크 스타일list-style-type= 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성- { disc, circle, square, none 등 }list-style-image= 순서 없는 목록의 불릿을 이미지로 바꾸는 속성= list-style-image : url('이미지경로확장자');list-style-position 속성= 불릿이나 번호를 들여 쓰거나 내어 향 소 안에 배경 이미지가 다.
사열하는 들지 공장 는 하지만, 탈바닥탈바닥 값처럼 사용할 수 없는 문ex ) var result = if (x % 2) {result = '홀수';} else {result = '짝수';};// Error 발생논리 연산자- || : OR (논리합)- && : AND (논리곱) 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있음- 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어 기여 있는 나였다.
댓글 달기