inline, block 태그는 웹 브라우저에 탑재된 스타일시트에 따라 기본적인 CSS속성을 가지고 있다. 그 중에 inline과 block이라는 속성은 화면 레이아웃과도 직접적인 연관성이 있다. inline 속성 inline요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포할될 수 있다. 그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다. 그래서 임의로 width, height로 변형을 줄 수가 없다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙,좌,우측 정렬을 할 수 있다. 인라인 요소의 다음에는 줄바꿈이 없고 우측으로 바로 이어서표시가 된다. inline 요소 inline 요소들은 위와 같은 요..
그리드 시스템 그리드 시스템(Grid System)이란 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말한다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자이너는 아래 그림과 같이 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 된다. 그리드 시스템의 장점 정렬에 도움을 주고 정돈된 결과물을 얻을 수 있다. 일관적이고 규칙적인 배치로 통일성이나 일관성을 얻을 수 있다. 내부 협업하는 과정에 도움을 주며 기준(Rule)으로 활용한다. 반응형 디자인 설계 시 해상도 대응이 용이해진다. 그리드 시스템의 기본 요소 칼럼(Column), 거터(Gutter), 마진(Margin)..
else문 else문은 조건식을 만족(true)할 경우와 만족하지 않을 경우(flase)에 따라 실행되는 코드가 달라집니다. 즉, 두 가지 결과가 나올 수 있습니다. 다음은 조건식의 만족 여부에 따라 실행되는 코드가 달라지는 else문의 기본형이다. 기본형: { if(조건식) { 자바스크립트 코드1; }else { 자바스크립트 코드2; } } 다음 예제를 통해 else문에 대해 알아보자 방문자에게 질의응답 창으로 좋아하는 숫자를 입력받고 if~else문을 사용하여 입력된 값이 짝수인지, 홀수인지에 따라 출력되는 결과가 다르게 나타나도록 했다. { 01. } 04~08행 num의 값을 2로 나눈 나머지의 값이 0이면 코드1을 실행하고 0이 아니면 코드2를 실행한다. if else문 if else문은 두 가..
SEO란? SEO(검색엔진최적화)는 사용자의 검색의도를 명확히 이해하여 고객니즈 기반으로 웹사이트 기능을 개선,콘텐츠를 제작하는 방법이다. 즉, 단순히 검색엔진의 로직에만 맞추는 것이 아니라 웹사이트의 품질,콘텐츠의 질이 함께 개선되어야 페이지 퀄리티가 높아져서 실질적인 효과를 거둘 수 있다. 이런 이유로 검색엔진의 기술적인 요건을 만족하기 위한 테크니컬SEO 키워드 리서치를 통해 컨텐츠의 질을 높이기 위한 콘텐츠SEO 검색엔진과 인터넷의 가장 중요한 원리인 내 웹사이트 링크 확산을 목적으로 하는 링크빌딩SEO로 분류되고 이에 따라 전문화된 프로세스가 있다. 또한 검색엔진은 수집, 정제, 색인, 랭킹 이라는 일련의 과정을 거쳐서 웹사이트의 품질을 결정하게 된다고 밝히는데 이런 과정 또한 앞서 말한 테크니..
데이터 타입 (자료형) 변수에는 여러가지 유형이 들어갈 수 있습니다. 프로그램 언어에 있어 가장 기본적인 요소이며, 데이터 타입이라고 합니다. 데이터 타입에는 숫자, 문자열, 논리값, 특수값, 심벌, 객체, 함수 등을 표현할 수 있습니다. 숫자 (Number) 숫자형 (Number)은 숫자를 표현하거나 산술 연산을 하는데 사용되는 데이터 타입이다. { var 변수명 = 숫자; 또는 Number("숫자"); } 문자열(String) 문자열은 문자열을 표현하는데 사용되는 데이터 타입이다. { var 변수명="사용할 문자" } 논리값 (Boolean) 논리값 데이터는 true(참) 또는 false(거짓)가 있다. 이 데이터는 주로 2개의 데이터를 비교할 때 나오는 결과이다. 예를 들어 '100보다 10이 크다..
웹 표준 웹 표준은 W3C가 권고한 표준안에 따라 웹사이트를 작업하는것이다 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화 되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 웹 접근성 웹 접근성은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모둔 사용자들은 정보와 기능에 동등하게 접근할 수 있다. 웹 호환성 웹 호환성은 표준 웹 기술을 사용하여 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 웹 사이트 사용 시 운영체제 및 브라우저 간 동일한 결과를 ..
CSS의 단위 CSS는 길이를 표현하기위한 여러 가지 장치가 있다. 많은 CSS속성을 가지고 "length"등의 폭, 마진, 패딩, 글꼴크기, 테두리 폭 등의 값을 길이는 길이 부 뒤에 숫자 같은 10px,2em 등이며 공백으로는 수와 유닛 사이에 나타나지 않을 수 있다. 값이 0인 경우,이 장치는 생략 될 수 있다 일부 CSS속성의 경우 음의 길이가 허용된다 단위 길이의 종류에는 상대 길이 단위, 절대 길이 단위가 있다 절대 길이 단위 cm mm Q in pc pt px 상대 길이 단위 em ex ch rem lh vw vh vmin vmax