웹개발의 정의
웹 개발은 인터넷 혹은 인트라넷(폐쇠적인 근거리 통신망 ex. 사내 인트라넷 등등..) 에서 사용되는 웹사이트를 개발하는 과정을 의미한다.
이때, 웹 개발은 가장 단순한 형태인 정적 웹페이지에서 복잡한 웹 기반의 어플리케이션, SNS 커뮤니티 사이트에 이르기까지 그 범위가 다양하다.
웹개발에 사용되는 언어
웹 개발에는 기본적으로 세가지의 언어가 사용되며 각각의 정의는 다음과 같다.
HTML(Hypert Text Markup Language)
: 웹페이지의 구조(Structure를 표현하기 위한 마크업 언어이다.
CSS(Cascading Style Sheet)
: 마크업 언어로 구조된 웹페이지 표시 방식(Presentation) 을 결정하는 스타일 언어이다.
JavaScript
: HTML과 CSS 작성된 웹페이지를 동적으로(Client 환경에서) 변경해주는 언어이다. 즉, 웹페이지가 사용자와 상호작용(Interaction) 하게 만들어준다. > 웹페이지 내 기능을 구현하기 위함
HTML(Hyper Text Markup Language)
HTML의 특징
1) html은 tag들의 집합이다. / tag는 부등호(<,>)로 묶인 html의 기본요소를 의미한다.
2) .html 확장자를 사용한다.
3) html은 트리구조로 구성되어 있다.
4) tag 중 self-closing tag가 존재한다. / < ~ />
HTML의 대표적인 태그
-
div VS span
div와 span은 모두 웹페이지에서 영역을 지정하는 태그이다. 이때, div는 기본 css 설정이 콘텐츠가 존재하는 라인 전체로 되어있고 span은 해당 콘텐츠가 존재하는 공간만을 영역으로 지정한다.<div> hi </div> // div는 해당 라인의 영역을 모두 차지한다.(기본값) <span> hi </span> // span은 'hi'라는 콘텐츠가 존재하는 영역만을 차지한다.(기본값) -
a 태그
앵커 태그는 html에서 가장 중요한 기능 중 하나로 href 속성값을 통해 다른 페이지나 사이트로 이동할 수 있게 한다.<a href="#">링크제목</a> // 해당 링크의 주소는 "#"이며, 링크제목으로 표시된다. -
img 태그
웹페이지 내에서 이미지 요소를 사용하는 태그로 src(이미지의 주소를 설정하는 속성), alt(대체문자열을 설정하는 속성) 으로 구성된다.<img src="#" alt="이미지가 존재하지 않습니다."/> // '#'주소의 이미지를 불러오고, 해당 이미지가 존재하지 않을 경우 문자열을 표시한다. -
ul VS ol
ul과 ol은 모두 list라는 의미로 여러 요소들이 일렬로 나열된 목록을 의미한다. 이때, ul은 정렬되지 않은 리스트, ol은 정렬된 리스트라는 의미로 각 태그에 따라 요소 앞의 마커(Marker) 형태가 달라진다.<ul> <li>이름 // •이름 <li>나이 // •나이 </ul> <ol> <li>이름 // 1) 이름 <li>나이 // 2) 나이 </ol> -
input 태그 / 입력 양식인 form 태그 내에서 사용되는 입력 태그
input 태그는 type, name, value 등의 다양한 속성을 가지며, 속성에 따라 형태와 기능이 상이하다.<input type="text"> // text 입력창 표시 <input type="password"> // text 입력창 표시 but, 입력 내용이 감추어진다. <input type="checkbox"> // checkbox 생성 <input type="radio"/> // radio 생성 -
textarea 태그
textarea는 text를 입력할 수 있는 영역을 생성하는 태그로, text 속성의 input과는 다르게 줄바꿈이 가능하다.
-
button 태그
클릭을 통해 상호작용하는 button을 생성, 속성 혹은 별도의 JS를 통해 button에 기능을 부여해야한다.
버튼입니다.
시맨틱 요소란?
HTML의 최신버전인 HTML5에서는 시맨틱(semantic) 웹 이 중시되면서 시맨틱 요소가 새롭게 생겨났다.
즉, HTML의 요소에 의미를 부여하는 방식을 추구하기 시작했다.
그렇다면, div 태그도 css를 사용한다면 h1과 같은 요소와 동일하게 표시될 수 있지만 어째서 요소에 의미를 부여하는 것이 중요하게 된 것일까?
- 첫번째로, 검색엔진이 결과를 노출할 때 시멘틱 요소를 중요 키워드로 고려하기 때문입이다.
즉, 시맨틱 요소를 적절히 활용한 웹페이지가 검색엔진에 노출될 가능성이 더 높다.
- 두번째로, 개발자 간 협업에서 div 요소를 탐색하는 것보다 의미가 존재하는 시맨틱 요소가 훨씬 편리하기 때문이다. 또한 태그안에 담길 데이터를 예측하기도 쉬워진다.
따라서 HTML을 작성할 때, 해당 데이터를 가장 잘 설명할 수 있는 시맨틱 요소를 고려하는 것은 중요하다.
