프론트엔드 공부
-
flexbox의 기본 개념 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 CSS 그리드 레이아웃의 2차원 모델과는 대조됩니다. Flexhttps://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox Flexbox - Web 개발 학습하기 | MDN flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해..
CSS flex (부모요소 적용 속성)flexbox의 기본 개념 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 CSS 그리드 레이아웃의 2차원 모델과는 대조됩니다. Flexhttps://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox Flexbox - Web 개발 학습하기 | MDN flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해..
2022.12.28 -
의미 요소(semantic element) HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다.하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다. 시맨틱 요소를 사용해야 하는 이유 ..
semantic element 시멘틱 요소의미 요소(semantic element) HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다.즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다.하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다. 시맨틱 요소를 사용해야 하는 이유 ..
2022.12.24 -
선택자(selector) CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다. 대표적인 선택자는 다음과 같습니다. 전체 선택자 HTML 요소 선택자 아이디(id) 선택자 클래스(class) 선택자 그룹(group) 선택자 자식 선택자 후손 선택자 형제 선택자 인접 형제 선택자 기타선택자 전체 선택자 // * CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다. HTML 요소 선택자 // 해당 요소 태그 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. ... 이 부분에 스타일을 적용합니다. 아이디(id) 선택자 // # 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이..
CSS 선택자 (css selector)선택자(selector) CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다. 대표적인 선택자는 다음과 같습니다. 전체 선택자 HTML 요소 선택자 아이디(id) 선택자 클래스(class) 선택자 그룹(group) 선택자 자식 선택자 후손 선택자 형제 선택자 인접 형제 선택자 기타선택자 전체 선택자 // * CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다. HTML 요소 선택자 // 해당 요소 태그 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. ... 이 부분에 스타일을 적용합니다. 아이디(id) 선택자 // # 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이..
2022.12.24 -
함수 정의 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음입니다. 함수 - JavaScript | MDN 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 developer.mozilla.org 함수선언문과 함수표현식 JavaScript에서 함수를 정의하는 방법은 여러 가지가 있습니다. 그중에서 가장 대표적인 함수 정의 방법인 함수선언문과 함수표현식을 배워보도록 하겠습니다. 먼저 문자열 ‘hello world’를 출력하는 함수를 함수선언문으로 정의해 보겠습니다. // 함수선언문으로 정의한 함수 function..
자바스크립트 함수(함수선언, 함수호출, 매개변수, 전달인자, return)함수 정의 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음입니다. 함수 - JavaScript | MDN 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 developer.mozilla.org 함수선언문과 함수표현식 JavaScript에서 함수를 정의하는 방법은 여러 가지가 있습니다. 그중에서 가장 대표적인 함수 정의 방법인 함수선언문과 함수표현식을 배워보도록 하겠습니다. 먼저 문자열 ‘hello world’를 출력하는 함수를 함수선언문으로 정의해 보겠습니다. // 함수선언문으로 정의한 함수 function..
2022.12.24 -
HTML HTML: Hypertext Markup Language | MDN HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기 developer.mozilla.org HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 "요소"를 사용하는데, 요소에는 많은 종류가 존재합니다. , , , , , , , , , , , , , , ,..
HTML, CSS 란?HTML HTML: Hypertext Markup Language | MDN HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기 developer.mozilla.org HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 "요소"를 사용하는데, 요소에는 많은 종류가 존재합니다. , , , , , , , , , , , , , , ,..
2022.12.22 -
반복문 다수의 기본적인 계산에서부터 완료해야 할 비슷한 작업들을 가지고 있는 상황들에 대해서까지, 반복문은 같은 것을 계속 그리고 계속 다시 하는 것에 모든 관련이 있는데, 이는 빠르게 반복적인 일을 완료하는 데 뛰어납니다. 반복문에는 for, while, do while 이 있습니다. for문 JavaScript의 대표적인 반복문인 for문에 대해서 학습해 보겠습니다. for문의 다음과 같이 이루어져 있습니다. for 뒤에 오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어갑니다. 코드블록에는 반복해서 실행할 코드가 들어갑니다 for (초기값; 조건식; 증감식) { // 실행할 코드 } 초기값 : 증감식 반복횟수를 카운트하는 역할을 하는 변수, 이것은 보통 숫자로 설정된 변수인데, 반복문이 실..
반복문 for, while, do while반복문 다수의 기본적인 계산에서부터 완료해야 할 비슷한 작업들을 가지고 있는 상황들에 대해서까지, 반복문은 같은 것을 계속 그리고 계속 다시 하는 것에 모든 관련이 있는데, 이는 빠르게 반복적인 일을 완료하는 데 뛰어납니다. 반복문에는 for, while, do while 이 있습니다. for문 JavaScript의 대표적인 반복문인 for문에 대해서 학습해 보겠습니다. for문의 다음과 같이 이루어져 있습니다. for 뒤에 오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어갑니다. 코드블록에는 반복해서 실행할 코드가 들어갑니다 for (초기값; 조건식; 증감식) { // 실행할 코드 } 초기값 : 증감식 반복횟수를 카운트하는 역할을 하는 변수, 이것은 보통 숫자로 설정된 변수인데, 반복문이 실..
2022.12.22 -
조건문(conditional statements) https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/conditionals 판단 내리기 — 조건문 - Web 개발 학습하기 | MDN 어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해 developer.mozilla.org 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 조건문 중에서 가장 기본이 되는 실행문은 if 문입니다. 자바스크립트에서 사용할 수 있는 조건문의 형태는 다음과 같습니다...
조건문 if, else, else if (ft.조건에 필요한 연산자)조건문(conditional statements) https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/conditionals 판단 내리기 — 조건문 - Web 개발 학습하기 | MDN 어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해 developer.mozilla.org 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 조건문 중에서 가장 기본이 되는 실행문은 if 문입니다. 자바스크립트에서 사용할 수 있는 조건문의 형태는 다음과 같습니다...
2022.12.19 -
Boolean 타입 (볼린형, 논리타입) Boolean - JavaScript | MDN Boolean 객체는 불리언 값을 감싸고 있는 객체입니다. developer.mozilla.org 불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형이며 불린형은 긍정이나 부정을 나타내는 값을 저장할 때 사용한다. 컴퓨터과학에서 주로 참은 1, 거짓은 0에 대응하나 언어마다 차이가 있다. 숫자를 쓰지 않고 참과 거짓을 나타내는 영단어 true와 false를 쓰기도 한다. Javascript에서 불리언 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 사용한다. true; false; /* Java..
Boolean 타입 (볼린형, 논리타입), 비교연산자, 논리연산자Boolean 타입 (볼린형, 논리타입) Boolean - JavaScript | MDN Boolean 객체는 불리언 값을 감싸고 있는 객체입니다. developer.mozilla.org 불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형이며 불린형은 긍정이나 부정을 나타내는 값을 저장할 때 사용한다. 컴퓨터과학에서 주로 참은 1, 거짓은 0에 대응하나 언어마다 차이가 있다. 숫자를 쓰지 않고 참과 거짓을 나타내는 영단어 true와 false를 쓰기도 한다. Javascript에서 불리언 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 사용한다. true; false; /* Java..
2022.12.17