startdeveloping웹 개발

웹 사이트 이미지 표현 방법 웹 사이트에서 이미지를 표현하는 방법은 세 가지가 있습니다. 세가지 방법을 아래에 기술해 보았습니다. 첫번째 - HTML 태그를 통해서 표현 img 태그를 사용하여 표현합니다. img 태그를 사용할 때는 웹표준을 준수하기 위해 의미가 있는 이미지를 사용합니다. 거의 의미가 없는 이미지는 CSS를 이용하여 표현해줍니다. 웹표준을 준수하기 위해서는 img태그의 alt 속성을 이용하여 어떤 이미지 인지 설명 해주어야 합니다. 두번째 - CSS 속성을 통해서 표현 CSS에서 이미지를 표현하기 위해서는 background 속성을 이용해서 이미지를 넣어줍니다. background-image를 이용하여 url( )에 이미지의 주소를 넣어줍니다. 주로 의미가 없는 이미지(배경, 색 표현)를..

반복문 반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다. while문 while 문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있습니다. let num = 1; while(num

CSS 색상 CSS 색상을 표현하는 방법은 색상명을 쓰는것과 16진수 표현법(hexadecimal code)이 있습니다. 색상명 색상명을 씁니다. .test { background-color: red; } 16진수 표현법(hexadecimal code) 16진수를 사용하여 색상을 표현합니다. .test { background-color: #FF0000; } 위의 코드의 FF0000이 뜻하는 것은 red: FF, green: 00, blue: 00을 16진수로 나타낸 것을 표현한 것입니다. 00이 가장 작은 수, FF가 가장 큰 수 이고 큰 숫자가 될 수록 밝은 색을 나타냅니다.

그리드 시스템이란? 그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자이너는 아래 그림과 같이 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 됩니다. 웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는 데 사용됩니다. 그리드 시스템은 웹 디자인에 있어 아래와 같은 긍정적인 역할을 합니다. 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 준다. 격자 형식에 따르므로 블록을 쌓듯 디자인이 편리하다. 일관되고 통일성 있..

조건문 조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다. if문 if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 조건식은 Boolean() 내장 메서드와 마찬가지로 그 어떤 데이터를 입력해도 true 또는 false를 반환합니다. if(조건식){ 자바스크립트 코드; } 예제 var num=10; if(num

CSS 단위 CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰입니다. 크게보면 절대 크기가 변하지 않는 절대단위와 상황에 따라 크기가 변하는 상대단위로 나뉩니다. 절대 단위 고정된 값을 출력하며 절대 크기가 변하지 않습니다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있습니다. ※px(픽셀) 값을 주로 사용합니다. cm (센티미터) mm (미리미터) in (인치) px (픽셀) pt (포인트) pc (파이카) 상대 단위 부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변합니다. 반응형 웹사이트를 작업할 ..

검색엔진 최적화(SEO)란? 검색엔진 최적화(SEO)란 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말합니다. 기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것입니다. 검색엔진에 알고리즘이? SEO의 첫 단계는 구글, 네이버 등 타겟팅 하고 있는 검색엔진이 어떻게 동작하는지, 홈페이지 내 콘텐츠를 검색봇이 잘 인식해 수집해갈 수 있게 하려면 어떻게 구성해야 하는지를 알아야 합니다. 네이버의 경우, 블로그/카페/지식인 위주로 콘텐츠가 노출되기 때문에 독립적인 홈페이지에서 제공하는 콘텐츠로는 노출이 쉽지 않습니다. 즉, 동일한 내용의 콘텐츠라도 네이버 서비스 내에 자리잡은 콘텐..

연산자 연산자란 프로그래밍에서 쓰이는 기호입니다. 이를 톨해 계산 작업을 합니다 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 비교등을 하는 작업을 연산 작업이라 합니다. 자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입, 증감, 비겨, 논리, 삼항 조건 연산자가 있습니다. 산술연산자 산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다. 산술 연산자로 연산을 하기 위해서는 연산 데이터가 반드시 2개 있어야 합니다. 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 아래의 예시를 통해 산술 연산자를 어떻게 사용하는지 알아보겠습니다. 문자 결합 연산자 문자 결합 여산자는 피연산자(..