HTML&CSS

[CSS] 배치관련 속성

대표적인 속성 2가지 1. float 속성 2. position 속성 float 정렬하기 위한 속성으로, 보통의 흐름(normal flow)를 벗어나 텍스트 및 인라인 요소가 그 주위를감싸는 자기 컨테이너(부모 요소)의 좌우측을 따라 배치되는 것을 지정합니다. 예를 들어 left나 rigth를 주게되면 해당 요소는 부모 요소의 왼쪽 또는 오른쪽에 배치되게 됩니다. 이처럼 float는 다른 요소의 배치에 영향을 주는 속성값입니다. float는 화면에 떠있는 블록이기 때문에 블록이 지정되어 있는 넓이와 높이가 반드시 지정되어 있어야 합니다. 이 중 하나의 속성이 빠져도 float 속성을 사용할 수 없습니다. inherit 부모 요소에서 상속함 left 요소가 자신의 포함(containing) 블록의 좌측에 ..

HTML&CSS

[HTML] 제목 요소 (h1 ~ h6)

제목 요소 종류 h1 ~ h6로 총 여섯 가지 사용 가능하다. 숫자가 높아질 수록 하위제목이다. 사용 방식 제목 레벨 1 제목 레벨 2 제목 레벨 3 제목 레벨 4 제목 레벨 5 제목 레벨 6 [결과] 제목 요소는 블록 요소를 포함할 수 없으며 인라인 요소와 텍스트만 사용가능!! 사용 이유 잘 구성된 제목 요소는 기기에서의 정보 인식성을 높일 수 있다. 즉, SEO관점에서 좋다. 스크린 리더 사용 시 웹 페이지의 제목구조를 파악해 제목 사이의 이동 기능을 제공해주기때문에 빠르게 탐색이 가능하다. 따라서, 제목 요소는 순서대로 사용해주는 것이 바람직하다. 제목 요소가 순차적으로 사용되어야지 정보의 순서를 파악할 수 있고 구조를 파악할 수 있다. 추후 유지 보수를 위해서도 순서를 지켜주는 것이 좋다. 제목 ..

자료구조&알고리즘/알고리즘

[LeetCode][JS] 136번 Single Number

문제 유형 배열, 비트 연산 문제 Given a non-empty array of integers nums, every element appears twice except for one. Find that single one. You must implement a solution with a linear runtime complexity and use only constant extra space. 비어있지 않은 숫자를 담은 배열이 주어진다. 배열에서 2번 나타나지않은 요소를 찾아라. 반드시 선형 시간 복잡도로 풀어야 하며 O(N)가 아닌 O(1) 시간으로 풀어라 constant extra space - 사용하는 메모리 영역의 constant 제약이 있음 - 즉, 입력값에 따라 변하는 variable 이..

HTML&CSS

[HTML] 웹 표준(Web Standards)

웹 표준 📜 웹에서 표준적으로 사용되는 기술이나 규칙 🔉 W3C의 토론을 통해 나온 권고안을 말함 🔉 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정 웹 표준 관련 기술 구조 : (X)HTML 표현 : CSS 동작 : Script 구조 언어 (X)HTML & XML HTML ‘HyperText Markup Language’의 약자로, 하이퍼텍스트를 표현하기 위한 마크업 언어라고 정의할 수 있다. HTML은 SGM(Standard Generalizes Markup Language)을 모체로 하여 국제 표준 기구인 ISO가 1986년에 채택한, 웹에서 사용하는 표준 마크업 언어이다. HTML은 매우 느슨한 언어이기 때문에 코드의 일관성이 떨어졌다. 태그의 운용법이나 오류..

HTML&CSS

[HTML] WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)

정의 WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미 ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공함. 등장 배경 1. 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족함 2. Ajax를 통한 실시간 변경 콘텐츠와 SPA 방식의 콘텐츠 변경이 일어나는 데 스크린리더를 사용자들은 실시간으로 갱신되는 정보를 알 수 없음 3. 화면 확대 시 화면 밖으로 콘텐츠가 변경되어도 이를 파악하기가 힘듦 웹 접근성이란? 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것 웹 접근성 기대 효과 1. 장애인, 고령자 등 다양한 사용..

모던 자바스크립트 Deep Dive

[JS][Deep Dive] 자바스크립트 개발 환경과 실행방법

자바스크립트 실행 환경 모든 브라우저, Node.js는 자바스크립트 엔진 내장 (JS 해석 & 실행) NODE.JS (목적) 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것 파일을 생성하고 수정할 수 있는 파일 시스템 제공 ECMAScript와 NODE.JS 고유의 API를 지원함 브라우저 (목적) HTML, CSS, JS를 실행해 웹 페이지를 브라우저 화면에 렌더링 DOM API(파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합) 제공 보안상의 이유로 파일 시스템 미제공 ECMAScript, DOM, BOM, XMLHttpRequest,fetch, requestAnimation Frame, SVG, Web Storage, Web Component, Web Worker 같은 클라이언트 사이드..

모던 자바스크립트 Deep Dive

[JS][Deep Dive] 자바스크립트 특징

특징 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 기본 문법은 C, 자바와 유사하고 셀프(Self)에서는 프로토타입 기반 상속을, 스킴(Scheme)에서는 일급함수의 개념을 차용 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점 해결 인터프리터 : 소스코드를 즉시 실행하고 컴파일러 : 빠르게 동작하는 머신 코드를 생성하고 최적화함 이를 통해 컴파일 단계에서 추가적인 시간이 필요함에도 빠르게 코드 실행함 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 강력한 객체지향 프로그래밍 능력을 가지고 있음 → 자바스크립..

모던 자바스크립트 Deep Dive

[JS][Deep Dive] 자바스크립트와 ECMAScript

ECMAScript란 👉🏻 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정함. 각 브라우저 제조사는 ECMAScript사양을 준수해서 브라우저에 내자오디는 자바스크립트 엔진을 구현함. 자바스크립트란 👉🏻 프로그래밍 언어로 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web APl, 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame,SVG,Web Storage, Web Component, Web Worker 등을 아우르는 개념 ECMAScript는 스크립팅 언어를 어떻게 만들어야 하는지를 설명하는 일종의 설명서라고 생각하면 되고, JavaScript는 EC..

모던 자바스크립트 Deep Dive

[JS][Deep Dive] 자바스크립트의 역사, 탄생

🔎 자바스크립트 탄생 1. 1995년 자바스크립트탄생 : 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 웹에서 동작하는 프로그래밍 언어 도입 2. 1996년 모카로 이름 변경 → 라이브스크립트로 이름변경 → 자바스크립트로 이름 변경 📜 자바스크립트 표준화 1. 1996년 마이크로소프트에서 자바스크립트 파생ver인 Jscript 도입 문제는 Jscript와 자바스크립트가 표준화 되지 못하고 적당히 호환됨 서로 시장 점유율 높이려고 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가 따라서!!!!!!! 크로스 브라우징 이슈 발생 2. 넷스케이프 커뮤니케이션즈에서 컴퓨터 시스템의 표준을 관리하는 ECMA인터내셔널에 자바스크립트의 표준화를 요청 3. 1997년 자바스크립트 초판사양이 완성..

JavaScript

[JS] 예외 처리(exception handling)

📖 정의 코드 실행 중에 예기치 못한 에러가 발생했을 때, 코드의 실행 흐름을 복구할 수 있는 기능 ⏳ 오류의 종류 1️⃣ 코드가 실행조차 되지 않는 오류 프로그램 실행 전에 발생하는 오류를 구문 오류(syntax error)라고 부름. 2️⃣ 코드 실행 중간에 발생하는 오류 프로그램 실행 중에 발생하는 오류를 예외(exception) 또는 런타임 오류(runtime error)라고 부름. 📚 예외 처리 1️⃣ 기본 예외처리 조건문을 사용 예제 body에 h1 태그가 없는 상태이기 때문에 예외가 생길 것이다. 조건문을 넣어줘서 예외 처리를 해준다. 2️⃣ try catch finally 예제 try { // 예외가 발생할 가능성이 있는 코드 } catch (e) { // try 에서 에러 발생할 경우 실..

놀이터주인장
'분류 전체보기' 카테고리의 글 목록 (8 Page)