🌎 Web

[CSS] 중앙 정렬의 3가지 방법(position, flex, table)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 중앙 정렬에 대해 알아보자! 화면 정중앙에 요소를 정렬하는 방법은 크게 3가지가 있다. position 속성과 transform 속성 사용 flex 속성 사용 table 속성 사용 1. position 속성과 transform 속성 사용 [HTML] [CSS] .position-center { width: 400px; height: 300px; background-color: green; position: relative; } .position-center > div { width: 100px; height: 100px; background-color: lightgreen; position: absolute; top: 50%; left: 50%; transfo..

[JavaScript] 자바스크립트의 함수(Function)

함수란? 함수(Function)란 특정 작업을 수행하도록 설계된 독립적인 코드 블록을 의미한다. 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. (호출이 되어야만 작동한다.) 함수의 정의 일반적으로 function 키워드 사용 기능적 의미를 담은 함수의 이름 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter) (없어도 가능하다.) 중괄호({})로 둘러싸인 자바스크립트 실행문 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } // addNum라는 이름의 함수를 선엄함. (함수 선언문) function addNum(x, y) { // x, y는 이 함수의 매개변수임. document.write(x + y); } add..

[JavaScript] 자바스크립트의 연산자(Operator)

연산자란? 연산자(Operators)란 데이터를 원하는 형태로 변경 및 판단하기 위한 코드를 의미한다. 산술 연산자 : 사칙연산, 나머지 연산, 제곱, 루트 등 대입 연산자 : 변수에 값을 대입할 때 사용하는 이항 연산자(재귀적 연산) 증감 연산자 : 미리 정해진 일정 크기를 증가 혹은 감소시키는 연산자 비교 연산자 : 이상, 이하, 미만, 초과, 같음, 다름을 판단하여 참(true)과 거짓(false)을 반환 논리 연산자 : and, or, not and, not or, not 연산자로 판단하여 참(true)과 거짓(false)을 반환 비트 연산자 : 비트 단위로 논리 연산 수행(웹 분야에서는 활용도가 낮음) 그 외 연산자 : 특정 목적이나 형태를 갖는 연산자 산술 연산자 사칙연산을 다루는 가장 기본적..

[JavaScript] 자바스크립트의 데이터 타입(Data type)

데이터 타입이란? 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다. 변수에 대해 연산을 수행하려면 타입에 대해 아는 것이 중요하다. 데이터 타입 숫자(number) 정수(-1, 0, 1), 실수(소수점이 있는 숫자), NaN(Not a Number, 숫자가 아님이라는 값) 자바스크립트는 다른 언어와 다르게 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다. let num1 = 100; // 소수점을 사용하지 않은 표현 let num2 = 100.00 // 소수점을 사용한 표현 // 둘 다 값은 100 이다 문자열(string) 문자열은 작은따옴표(''), 큰따옴표(""), 백 틱(``)으로 둘러싸인 문자의 집합을 의미한다. let str1 = '작은따옴포'..

[JavaScript] 자바스크립트의 변수(Variable)

변수란? 변수(Variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 그 값이 변경될 수 있다. 변수의 선언과 초기화 변수를 선언(배정, 할당, 정의)할 때 var, let 키워드 사용 ES6(2015)부터는 let 사용 권장 CamelCase - 자바, C, C++, C#에서 주로 사용 snake_case - 자바스크립트, 파이썬에서 주로 사용(권장 방식) // 변수의 선언 let myFirstVariable; let my_first_variable; // 변수명만 선언, 값 X -> 변수를 메모리에 할당 // 변수의 초기화 myFirstVariable = 100; my_first_variable = "thousand"; // 변수의 선언 및 초기화 let mySecondVar..

[JavaScript] JavaScript란?

JavaScript란? JavaScript (객체 기반의 스크립트 언어) HTML로 뼈대를 만들고 CSS로 디자인을 했다면, 자바스크립트로 웹의 동작을 구현한다. JavaScript의 특징 서버가 아닌 브라우저가 해석한다. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. JavaScript 문법 var x = 10; var result = x + 3; 실행문(statement)은 세미콜론(;)으로 구분된다. 대소문자를 구분하기 때문에 변수나 함수의 이름, 예약어 등을 작성할 때 정확히 구분해서 사용해야 한다. 식별자(identifier) 식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다. 영문자(대소문자), 숫..

[CSS] 수직 정렬의 3가지 방법(padding, line-height, position)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 수직정렬에 대해 알아보자! 수직정렬에는 3가지 방법이 있다. padding 속성 사용 line-height 속성 사용 position 속성과 transform 속성 사용 전체적으로 사용할 예제 제목 내용 부모 를 간단하게 컨테이너라고 지칭하겠다. 1. padding 속성 사용 .padding { width: 400px; background-color: orange; padding: 100px 0; } padding-top 과 padding-bottom 에 동일한 값을 준다. (예시에서는 padding: 100px 0; 으로 한 번에 top과 bottoom 값 설정) 장점 - 컨테이너의 높이값이 정확하지 않을 때 간단하게 사용할 수 있다. 단점 - 내가 설정한 ..

[CSS] background-size, origin, clip

background의 다양한 속성 중 다음 3가지에 대해 알아보자! background-size background-origin background-size background-size 배경 이미지의 크기를 설정한다. 직접 수치를 입력할 수도 있고, contain 또는 cover 중에 선택할 수도 있다. 속성값 설명 contain 이미지의 비율은 유지하면서, 크기를 가능한한 크게 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 됨. cover 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 됨. (↓background img를 화면에 꽉 차게 설정하는 방법은 아래 게시글 참고↓) 2022.03.25 - ..