남하준의 웹스토리 웹스토리

자바스크립트 문법 자바스크립트의 실행문은 세미콜론(;)으로 구분됩니다. var x = 10; var result = x + 3; 자바스크립트는 대소문자를 구분합니다. 자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용해야 합니다. var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨. var JavaScript = 20; Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음. 리터럴(literal) 리터럴은 직접 표현되는 값 그 자체를 의미합니다. 12 // 숫자 리터럴 "JavaScript" // 문자열 리터럴 '안녕하세요' ..

display display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다. 1. 블록(block) 2. 인라인(inline) 블록(block) display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 대표적인 블록(block) 요소입니다. 인라인(inline) display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 또한, 요소의 너비도 ..

테두리(border) 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정합니다. border-style border-style 속성을 이용하면 테두리(border)를 다양한 모양으로 설정할 수 있습니다. dotted : 테두리를 점선으로 설정함. dotted : 테두리를 점선으로 설정함. solid : 테두리를 실선으로 설정함. double : 테두리를 이중 실선으로 설정함. groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음. ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음. inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-col..

SEO 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다. 검색 엔진은 웹을 크롤링 (en-US)하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다. 검색 엔진은 일부 SEO 가이드라인을 제공하긴 하지만 대형 검색 엔진의 경우 결과 랭킹은 영업 비밀로 취급합니다. 따라서 SEO는 검색 엔진의 공식 가이드라인에 더해 경험적인 지식, 논문과 특허 등에서 가져온 이론적 지식을 결합한 과정입니다.

시멘틱 태그 틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다. 시맨틱 웹이란 웹이 존재하는 수많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상이다. 종류 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다 header 머리글, 제목, 헤더 nav 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현 aside 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그 article 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. footer 바닥글..

paddin이란? padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다. 패딩(padding) 속성 CSS에서는 HTML 요소의 패딩 영역을 설정하기 위해 다음과 같은 속성을 제공합니다. padding-top padding-right padding-bottom padding-left CSS padding 속성 속성 설명 padding 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있음. padding-top 윗쪽의 패딩(padding) 값을 설정함 padding..

for문은 주어진 조건이 만족되는 동안 코드를 반복해서 실행하게 됩니다. 단, for문은 처음 실행되기전에 초기화 작업을 한번 수행하고, 매번 실행이 반복될 때마다 증감식을 한번씩 실행하게 됩니다. for (초기화; 조건문; 증감){ // 조건문 범위 내로 실행 } for (var i = 0; i < 10; i++){ console.log("반복이 필요해"); } // "반복이 필요해" 10번 출력 for()문법 for in 특정 객체의 열거 가능한 모드 프로퍼티(enumerable properties)를 루프 처리 한다. for (변수명 in 객체(object)){ 조건문의 결과가 참인 경우 반복적으로 실행하고자 하는 명령문;} for of 특정 객체의 반복 가능한 객체(Array, Map, Set, ..

웹표준 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는데, 이는 우리가 흔히 생각하는 표준(standard)과는 조금 다릅니다. 웹에서의 표준은 W3C의 토론을 통해 나온 권고안(recomendation)을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 합니다. 웹접근성 웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있습니다. 웹 접근성에는 다음의 사항들을 고려하여야 합니다 시각: 실명, 색각 이상, 다양한 형태의 저시력을 ..