네비게이션 영역 GNB, LNB, SNB, FNB에 대해 알아보자
네비게이션 영역 GNB, LNB, SNB, FNB에 대해 알아보자
2021.09.09👋 들어가며 웹사이트 개발, 기획 등을 하다보면 GNB, LNB 등의 단어를 듣게 된다. 필자도 실무를 하면서 알게되었고, 항상 들을때마다 헷갈려서 이번 기회에 한 번 정리해보려한다. 네비게이션 영역? 네비게이션 영역은 이름처럼 네비게이션 즉 특정 페이지 이동을 위해 필요한 영역을 의미한다. 또한, 이러한 영역들은 모든 페이지에서 항상 고정된 영역을 차지하는 특징을 가지게된다. GNB(Global Navigation Bar) 사이트 전체에 동일하게 적용되는 최상위 공통 네비게이션 포함되는 콘텐츠 사이트 로고 - 홈페이지 링크 메인 메뉴 - 대분류 메뉴라고도 하며, 주요 페이지 링크 버튼 역할을 하거나 호버시 서브 메뉴를 볼 수 있는 버튼 역할을 한다. 서브 메뉴가 있는 경우 클릭시 메인 서브 메뉴로 가는..
input 태그의 type 속성 종류와 예제
input 태그의 type 속성 종류와 예제
2021.01.21HTML에서 양식을 만들 때, form 태그를 사용하고, input 태그를 통해 입력 영역을 만듭니다. 입력 영역의 종류는 다양하며 type 속성의 값에 따라 동작 방식이 현격히 달라집니다. 특성을 지정하지 않는 경우 기본값은 text입니다. input 태그의 type 속성값 속성 설명 text 기본값으로 한 줄의 텍스트 입력 칸을 만듭니다. (기본 너비 문자는 20입니다.) password text 속성과 같지만, 입력 문자를 별표(*)로 대체해서 표시합니다. checkbox 선택 항목 중 여러개를 선택할 수 있는 체크박스를 만듭니다. radio 선택 항목 중 1가지만 선택 가능한 라디오 버튼을 만듭니다. button 누를 수 있는 기본 버튼을 만듭니다. submit 전송 버튼을 만듭니다. reset ..
Creative Coding 개발환경 설정 및 기본 프로젝트
Creative Coding 개발환경 설정 및 기본 프로젝트
2020.11.22개발 환경 설정 코드 에디터 Visual Studio Code Visual Studio Code 확장 프로그램 ESlint, jslint - JavaScript용 코드 lint 확장 프로그램 Beautify - 코드 포메터 확장 프로그램 Live Server - HTML 파일을 서빙하는 가상의 서버를 띄우는 확장 프로그램 추가 팁 파일이 크지 않기 때문에 로컬영역이 아닌 클라우드에 저장해서 사용하는 것도 좋다. 구글 드라이브 + 드라이브 파일 스트림으로 로컬 드라이브처럼 사용 가능) 기본 프로젝트 index.html style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%;..
tsconfig.json 컴파일 옵션 정리
tsconfig.json 컴파일 옵션 정리
2020.05.28tsconfig.json Typescript는 동적 타입언어인 JavaScript를 타입이 있는 형태로 코딩할 수 있게 해주는 언어입니다. 따라서 TypeScript로 짜여진 코드를 JavaScript로 변환해 줄 트랜스파일러(컴파일러)가 필요합니다. 컴파일은 다음과 같은 커맨드로 사용 가능합니다. tsc foo.ts 해당 컴파일 과정에 여러 옵션을 정할 수 있는데 이 옵션을 작성하는 파일이 tsconfig.json입니다. tsconfig.json의 기본 형태는 다음 커맨드를 통해 생성할 수 있습니다. npx tsc --init 해당 커맨드로 생성되는 기본 형태의 tsconfig.json 및 옵션들은 다음과 같습니다. tsconfig.json의 컴파일 옵션 정리 { "compilerOptions": { ..
[HTML] 🤔 HTML이란?
[HTML] 🤔 HTML이란?
2020.01.11🤔 HTML이란? HTML은 웹페이지를 만들기 위한 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 다음과 같은 특징을 가지고 있다. HTML은 태그를 통해 웹 페이지의 구조를 알려준다. HTML은 다양한 요소들로 이루어져있다. HTML은 브라우저에게 어떤 것이 보여질 지를 알려준다. HTML은 태그를 통해 표현된다. HTML 태그는 머릿말, 문단, 표 같은 것들을 라벨링한다. 📄 간단한 HTML 문서 첫 머릿말 첫 문단 해당 문서의 의미는 다음과 같다. 라는 선언은 해당 문서가 HTML5라는 것이다. 요소는 HTML 페이지의 root 요소이다. 요소는 문서에 대한..
나만의 보석함 만들기
나만의 보석함 만들기
2019.10.24특이한 걸 만드는 걸 좋아하는 성격이라 가만히 있다가 아이디어가 나오면 메모해놓곤한다. 이런 메모를 처음 했던 건 아마 훈련소때였던 것 같다. 당시 전공에는 흥미가 없었지만 '게임'을 좋아한다는 이유로 입대 전에 유니티로 게임을 끄적이면서 만들고 여러 아이디어를 생각해냈다. 결국 어떤 결과물도 없이 입대를 하긴 했지만, 입대하고 나서도 게임에 대한 아이디어는 계속 떠올랐다. 특히 불침번이라는 영겁의 시간동안은 마치 정신과 시간의 방에 나 혼자 갖힌 듯 생각에 생각이 꼬리를 물듯이 나왔다 메모장을 들고 아무도 없을 때를 틈타 키워드만 메모에 옮겨 적었다. 그 때 생각했던 아이디어중 하나가 육군, 해군, 공군, 해병대, 의경 등등 각 군인들의 특징을 이용하여 애니팡 같은 게임을 만드는 것이였다. 의경 한 줄..