[데이터_공예소]

CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용되는 것이 셀렉터(Selector)이다. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. CSS Rule Set Hello World! This paragraph is styled with CSS. 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다. h1, p { color: red; } Heading paragraph 1 paragraph 2 paragraph..

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. HTML과 CSS (CSS Zen Garden) HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느 정도의 스타일 표현이 가능하였으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가됨으로서 복잡하고 혼란스러운 언어가 되어 버렸다. H..

구글의 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 범용 개발 언어가 되었다. 하지만 자바스크립트가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션이다. 대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능하다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 ..

1. 자바스크립트의 탄생 1995년 당시 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈(Netscape comunications)는 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 도입하기로 결정했다. 그래서 탄생한 것이 브렌던 아이크(Brendan Eich)가 개발한 자바스크립트이다. 자바스크립트는 1996년 3월 넷스케이프 커뮤니케이션즈의 웹 브라우저인 Netscape Navigator 2에 탑재되었고 “Mocha”로 명명되었다. 그해 9월 “LiveScript”로 이름이 변경되었고, 12월 “JavaScript”로 최종 명명되었다. Netscape Navigator 2 이렇게 탄생한 자바스크립트는 현재 모든 브라우저의 표준 프로그래밍 언어가 ..

프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이를 위해 먼저 무엇을 실행하기 원하는지에 대한 정의가 필요하다. 다시 말해, 프로그래밍에 앞서 문제(요구사항)를 명확히 이해한 후 적절한 문제 해결 방안의 정의가 필요하다. 이때 요구되는 것이 문제 해결 능력이다. 혹자는 문제 해결 능력을 알고리즘과 동일시하려는 경향이 있지만 반드시 그런 것은 아니다. 물론 문제 해결 능력의 함양에 있어 알고리즘 학습은 큰 도움이 되지만 문제 해결 능력은 더 큰 차원의 능력이다. 대부분의 문제(요구사항)는 복잡하며 명확하지 않을 수도 있다. 따라서 문제(요구사항)를 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해(Decomposition)하고 자료를 정리하고 구분(Modeli..

웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다. 공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에서 작동하지 않기 때문에 주의가 필요하다. tagDescription header 헤더를 의미한다 nav 내비게이션을 의미한다 aside 사이드에 위치하는 공간을 의미한다 section 본문의 여러 내용(article)을 포함하는 공간을 의미한다 article 분문의 주내용이 들..

1. 검색엔진최적화(SEO) 란? 검색엔진최적화란 영어로 ‘Search Engine Optimization’으로 SEO로 줄여서 불립니다. 사람들은 검색결과 사이트의 첫 번째 페이지를 넘어가는 일이 거의 없습니다. 우리도 그렇듯이 보통 상위 3개 글 중 하나를 택하여 읽습니다. 따라서 아무리 좋은 콘텐츠, 좋은 제품 등을 가지고 있어도 검색엔진최적화를 충족 시키지 못하면 절대로 첫 페이지에 노출 될 수 없고 그렇기에 고객에게 나의 존재를 알릴 수가 없습니다. 그럼 검색엔진의 역할은 무엇일까요? 검색엔진이 하는 일은 매우 간단합니다. 고객의 검색어(Query)에는 고객이 원하는 니즈가 담겨 있습니다. 따라서 검색엔진은 고객의 질문 의도에 제일 가까운 답을 제공해 줍니다. 여기서 중요한 것은 “질문 의도에 ..

form form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다. ... form elements (input, checkbox, radio button, submit button...) ... attribute Value Description action URL 입력 데이터(form data)가 전송될 URL 지정 method get / post 입력 데이터(form data) 전달 방식 지정 GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라..

웹에서 사용 가능한 이미지 파일 형식 JPEG (Joint Photographic Experts Group): JPEG 이미지는 주로 사진이나 복잡한 그래픽을 표현할 때 사용. 그림 손실이 있긴 하지만, 보통은 무시할 정도로 작음. PNG (Portable Network Graphics): PNG 이미지는 투명 배경을 지원하며, 로스리스(무손실) 이미지 형식. 그래픽이나 아이콘 이미지에 주로 사용돼. 투명도와 이미지 품질을 유지하면서 파일 크기를 줄일 수 있음. GIF (Graphics Interchange Format): GIF 이미지는 주로 애니메이션 이미지를 만들 때 활용. 이미지 시퀀스를 지원하며, 256색 팔레트를 사용해 파일 크기를 작게 유지할 수 있음. SVG (Scalable Vector ..

자바스크립트에서 배열은 데이터 요소의 컬렉션을 나타내는 데이터 구조입니다. 배열은 여러 종류의 값을 저장할 수 있으며, 각 요소는 순서대로 나열됩니다. 배열은 특정 인덱스를 사용하여 요소에 접근할 수 있으며, 배열의 길이를 동적으로 조정할 수 있습니다. 배열 생성: 자바스크립트에서 배열을 생성하는 방법은 다음과 같습니다: 배열 리터럴 사용: 배열 리터럴은 대괄호 []를 사용하여 배열을 만들 수 있습니다. let fruits = ['사과', '바나나', '딸기']; Array 생성자 사용: Array 생성자를 사용하여 배열을 만들 수 있습니다. let numbers = new Array(1, 2, 3, 4, 5); 배열 요소 접근: 배열의 각 요소에 접근하려면 인덱스를 사용합니다. 자바스크립트의 배열 인덱..