깡뇽

함수 프로그래밍을 할 때 코드를 사용하여 특정 작업을 여러 번 수행할 때, 함수를 만들어서 동일한 코드를 다시 작성하는 대신 코드 블록을 함께 그룹화하여 하나의 작업과 연결한 다음 작업을 다시 수행해야 할 때마다 해당 코드 블록을 재사용 할 수 있다. 즉, 함수는 특정 작업을 수행하기 위해 일련의 명령문을 그룹화하는 재사용 가능한 코드 블록이라고 할 수 있다. 1) 함수 선언 함수 선언은 함수를 이름 또는 식별자(identifier)를 사용한다. 형태: 「 function 함수이름( ) { 실행 코드; } 」 필수 => ① function키워드 ② 함수 이름 또는 식별자 뒤에 ( )소괄호 ③ { }중괄호 안에 실행 코드 2) 함수 호출 형태: 「 함수이름( ); 」 함수 호출로 함수의 중괄호 안에 모든 ..

조건문 조건문은 특정 조건을 확인하고 조건에 따라 작업을 수행한다. If 문 형태 : 「 if ( 조건 ) { 조건이 맞을 때 실행할 코드; } 」 if를 쓰고 ()소괄호 안에 조건을 작성하고 조건이 충족되면 {}중괄호 안에 코드가 실행된다. if (true) { console.log('This message will print!'); } // Prints: This message will print! If... Else 문 형태 : 「 if ( 조건 ) { 조건이 맞을 때 실행할 코드; } else { 조건이 틀릴 때 실행할 코드; } 」 if 문에 else와 {}중괄호를 추가로 사용하면 조건이 충족되었을 때는 if 뒤에 중괄호 속 코드가 실행되고, 조건이 충족되지 않았을 때는 else 뒤에 중괄호 속..

변수 변수는 컴퓨터 메모리에있는 정보의 작은 컨테이너라고 할 수 있다. 사용자 이름, 계정 번호 또는 개인화 된 인사말과 같은 정보를 변수에 저장하면 메모리에서 찾을 수 있다. 즉, 변수는 메모리에 데이터를 레이블링하고 저장한다. ① 설명이 포함된 이름으로 변수를 만든다. ② 변수에 저장된 정보를 저장하거나 업데이트한다. ③ 변수에 저장된 참조 또는 "가져 오기"정보 * 2015년 JavaScript ES6 버전에 많은 변경 사항이 도입되었고, 가장 큰 변경 사항 중 하나는 변수를 만들거나 선언하기 위해 사용되는 두 개의 새로운 키워드가 바로 let과 const 이다. 변수 만들기 : var var 키워드 : 변수 선언에 사용되며 ES6 이전에는 var 키워드만 사용할..

콘솔(Console) 콘솔은 개발자에게 오류와 같은 중요한 메시지를 표시하는 패널이다. 컴퓨터가 코드로 하는 작업들은 기본적으로 우리 눈에 보이지 않아서 콘솔에 직접 프린트하여 화면에 내용을 표시하고 볼 수 있다. ▶ console 키워드 : 코드에서 사용할 수 있는 객체, 데이터 및 작업 모음을 나타낸다. ▶ .log() 메서드 : console.log()로 사용하여 괄호 안에 넣은 내용을 콘솔에 프린트한다. ex) 콘솔에 5를 출력한다. console.log(3); +) 세미콜론은 줄 또는 문장의 끝을 나타내고, JavaScript에서 코드는 일반적으로 세미콜론없이도 실행되지만 세미콜론으로 각 문장을 끝내는 습관을 익히는 것이 좋다. 주석 주석은 코드가 수행하는 작업을 설명하고 코드를 사용하는 개발자..

그리드(Grid)란? CSS Grid를 사용하여 전체 웹 페이지를 배치할 수 있다. Flexbox는 주로 1차원 레이아웃에 항목을 배치하는 데 유용하고, CSS 그리드는 2차원 레이아웃에 가장 유용하며 행과 열 모두에서 요소를 정렬하고 이동하는 데 사용할 수 있는 많은 도구를 제공한다. Grid 생성 그리드를 설정하려면 grid container와 grid items가 있어야 한다. 그리드 컨테이너는 그리드 항목을 자식으로 포함하고 전체적인 스타일과 위치를 적용하는 부모 요소이다. HTML 요소를 그리드 컨테이너로 전환하려면, 요소의 display속성을 grid(블록 수준 그리드의 경우) 또는 inline-grid(인라인 그리드의 경우)로 설정해야한다. 그런 다음 다른 속성을 할당해서 그리드를 배치해야 ..

그리드(Grid) 란? 그리드는 교차하는 수평선과 수직선으로 구성된다. ex) 지도 속 거리들 - 도시 레이아웃에 명확한 구조를 형성. 그리드 시스템은 디자인을 구성하는 데 도움이 되며 페이지의 요소를 적절하게 정렬하기 위한 일련의 지침을 제공한다. 그리드는 일관성을 촉진하여 디자인 전체에 적용할 반복 패턴을 구축할 수 있다. → 반복 사용을 통해 웹 사이트 사용에 대한 학습을 빠르게 할 수 있으므로 사용자가 콘텐츠를 명확하게 탐색하고 사용할 수 있다. 그리드 유형 원고 스타일 그리드(manuscript-style grid), 블록 그리드(block grid)와 같이 텍스트를 구조적으로 보이기 위한 그리드 유형이 있다. 웹 디자이너가 사용하는 가장 일반적인 그리드 유형은 열 그리드(column grid)..

반응형 웹 디자인 화면 크기는 기기에 따라 크게 다를 수 있으므로 웹 사이트에서 모든 크기의 화면에 가장 잘 맞도록 콘텐츠의 크기를 조정하고 재구성하는 것이 중요함. → 웹 사이트가 표시되는 화면의 크기에 반응하는 것을 반응형 웹 사이트라고 함. ⤷ 반응형 웹 디자인 설명 사이트 www.taniarascia.com/you-dont-need-a-framework/ Understanding the Fundamentals of Responsive Design Responsive web design is an approach to creating websites in which the layout adapts to fit the device's screen - whether it's a phone… www.ta..

반응형 웹사이트 디자인이란? 디자인과 개발이 화면 크기, 플랫폼 및 방향 같은 사용자의 행동과 환경에 반응하는 것을 말한다. → 웹사이트에 있는 다른 콘텐츠의 크기와 웹사이트를 보고 있는 화면의 크기를 기반으로 콘텐츠의 크기를 조정하고 재구성한다. Pixel(픽셀)은 고정된 하드 코딩 값. 즉, 화면 크기가 변하면 픽셀 크기의 요소가 너무 작게 보이거나 화면을 넘치게 된다. → CSS를 사용하여 하드 코딩 측정을 피하고 상대 측정을 사용해야 한다. ∴ 상대 측정을 통해 화면 크기나 레이아웃에 관계없이 웹 사이트의 비율을 유지시킬 수 있다. ⤷ 반응형 웹 디자인에 대해 자세히 설명하고 있는 사이트 www.smashingmagazine.com/2011/01/guidelines-for-responsive-we..

주요 내비게이션 vs 보조 탐색 주요 내비게이션은 일반적으로 사이트의 모든 페이지에 표시되어야 하는 가장 중요한 링크와 버튼을 가지고 있다. 보조 탐색은 일반적으로 현재 페이지로 연결되는 클릭 가능한 페이지 또는 속성으로 구성된다. 보조 탐색 보조 탐색(Secondary navigation or breadcrumb navigation)은 헨젤과 그레텔 이야기에서 길을 잃은 아이들이 돌아갈 길을 찾을 수 있도록 해 준 "빵 부스러기"의 의미를 가진다. Breadcrumbs를 사용하면, 사용자가 사이트의 어느 위치에 있는지 빠르게 파악하고 사이트의 범위를 예측할 수 있음. 이동 경로는 일반적으로 페이지의 가로 형태로 표시되며 최소한의 공간을 차지함. 사용자는 헤더, 왼쪽 부분, 주요 내비게이션 아래 등에서 ..

브라우저 링크 스타일 일반적으로 파란색 텍스트와 밑줄을 사용하여 일반 텍스트와 구별하고 사용자의 주의를 끔. 아직 열리지는 않았지만 클릭한 링크는 빨간색 텍스트, 이전에 방문한 링크는 보라색 텍스트 스타일로 지정. + css 스타일링) 텍스트 밑줄 : text-decoration: underline; ⤷ text-decoration 정보 developer.mozilla.org/en-US/docs/Web/CSS/text-decoration 링크 스타일링 ★ 링크를 주변 텍스트와 구별해야 한다! 기본 파란색 텍스트는 밑줄 링크 스타일이 CSS 속성을 사용하여이 차별화를 수행 : color와 text-decoration. 링크의 텍스트 자체인 태그 안에 Anchor text는 링크 된 리소스를 설명함. }◎ ..

★ 어떤 사용자도 웹 사이트의 모든 문장을 꼼꼼히 읽지 않을 것이다. 그러므로 사용자가 읽고 싶은 내용과 건너뛸 수 있는 내용을 쉽게 구분할 수 있도록해야한다. - HTML 헤더 제목 및 부제목과 같은 중요한 텍스트 부분을 구별해 보여줌. ex) HTML요소 — 제목에 사용. 페이지 당 하나의 헤더만 존재. — 제목에 사용. 사용자가 주로 주목해야 하는 주요 섹션. — 부제목에 사용. → 시각적 계층 구조를 생성. - 글꼴 텍스트를 구분하는 데 유용한 역할을 함. 그러나 각 단락을 새 글꼴로 구분하거나 모든 제목을 다른 글꼴로 사용하면 페이지가 혼란스럽고 읽기 어려움. 대부분의 텍스트를 serif 글꼴로 만든 다음 sans-serif 글꼴로 제목이나 부제목과 대비를 만드는 것이 일반적임. 글꼴의 스타일,..

UI는 무엇일까? 사용자 인터페이스(영어: user interface, UI)는 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 사용자 인터페이스는 사람들이 컴퓨터와 상호 작용하는 시스템이다. ... 출처: 위키백과 → 즉, 웹 사이트를 만들 때는 적절한 색상을 적용하여 사이트의 UI를 개선하려고 노력해야 한다. - 대비 : 페이지의 요소를 구별하는 좋은 방법. 그러나 모든 요소에 대비를 사용하면 지배적인 요소가 없도록 만들고, 사용자들이 인지할 때 과부하가 발생할 수 있음.즉, 웹 페이지에서 사용할 대비를 고려하여 전체적인 대비 정도를 제한하는 것이 중요함. +) neu..