HTML 개발을 위한 기본 지식 및 레이아웃 설명 - 웹사이트 개발

안녕하세요. 솔렐레 입니다.
요새 많은 사람들이 코딩에 대해서 관심이 많아지고 있습니다. 또한 자신의 웹사이트를 만들고 관리하고 싶어 하는 사람들도 많기 때문에 해당 포스팅을 작성하게 되었습니다. 이번 포스팅에서는 HTML에 대한 기본지식 및 레이아웃에 대하여 설명하고 두 번째 포스팅에서는 기본적인 HTML 태그들과 속성에 대해서 알아보는 시간을 가지도록 하겠습니다. 그럼 시작해보겠습니다.

---

[웹사이트를 구성하려면 어떤 언어를 알아야할까?]
기본적인 웹사이트를 구성하기 위해서는 HTML, CSS, JAVASCRIPT 가 기초가 되는 언어입니다. HTML 은 웹사이트의 전체적인 구성을 만들어주고 CSS는 디자인을 맡고 있습니다. JAVASCRIPT는 기능을 만들어주는 기능을 하게 됩니다. 예를 들면 HTML을 통해서는 눈에 보이는 정보(텍스트, 이미지 등)를 입력하고 이를 CSS를 통해 크기, 글자색 변경 등이 가능합니다. 또한 이 정보들을 슬라이드 효과나 애니메이션 등을 통해 주요한 기능들을 구현할 수 있습니다.

[웹사이트 레이아웃은 어떤 것이 있을까?]
- 정적 레이아웃: 정적 레이아웃이란 크기가 변하지 않는 고정 레이아웃을 의미합니다. 매체가 변경되어도 웹사이트의 크기가 고정되어 있어서 가로 스크롤이 나타납니다. 따라서 변화하는 기기에 맞춰 레이아웃이 출력되지 않기 때문에 사용자가 이용하기 불편함을 느낄 수 있습니다.

- 동적 레이아웃: 브라우저 넓이와 상관없이 콘텐츠가 꽉 채워지도록 만들어지는 웹사이트를 의미합니다. 웹사이트 공간의 크기가 브라우저에 맞춰 동적으로 변한다고 이해하시면 될 것 같습니다. 공간에 크기에 따라 콘텐츠가 나열되는 형태이기 때문에 전체 레이아웃이 틀어질 수 있는 가능성이 있습니다.

- 적응형 레이아웃: 공간의 크기는 고정되어 있지만 콘텐츠가 꽉 채워지도록 변경되는 방식입니다. 정적 레이아웃 방식처럼 전체적인 크기는 고정되어 있지만 사용자가 사용하는 넓이에 맞춰 레이아웃 형태가 변경되어 사용하기 편리합니다. 반응형 레이아웃에 비해 개발 기간이 짧은 장점이 있습니다.

- 반응형 레이아웃: 브라우저에 맞춰 공간과 레이아웃의 형태가 변경이 되는 방식입니다. 이에 따라 브라우저나 기기에 대응해 레이아웃이 맞춰지면서 사용자 입장에서는 가장 편리하게 사용할 수 있는 레이아웃입니다.

[크로스 브라우징]
크로스 브라우징이란 웹사이트에 접근하는 브라우저의 종류와 상관없이 정상적인 서비스가 가능하도록 대응하는 작업을 의미합니다. 인터넷 브라우저는 인터넷 익스플로러(IE), 크롬(Chrome), 파이어폭스(Firefox), 사파리(Safari) 등 다양하게 있고 각 브라우저마다 버전도 달라서 각각 지원해주는 기능이 상이합니다. 이에 따라 웹사이트에서는 각각의 브라우저의 어떤 버전이 내가 만들었던 개발 언어의 특징을 모두 표현할 수 있는지를 확인하는 것이 중요합니다.
따라서 각각의 특성을 태그별로 검색하여 한눈에 볼 수 있도록 정리해 놓은 Can I use (http://caniuse.com)에 접속해서 확인하시면 좀 더 편리하게 확인이 가능하니 참고해주시면 될 것 같습니다.

 

[웹 표준? 웹 접근성? 이게 무엇일까?]
- 웹 표준
웹 표준은 웹 사이트를 만드는 개발자 사이의 약속입니다. 이 약속을 만든 이유는 각각의 개발자들은 모두 각기 다른 스타일의 코딩 방식을 가지고 있습니다. 각기 다른 방식으로 개발이 진행되면 유지보수나 다른 담당자에게 인수인계 시 어려움이 발생합니다. 하지만 웹 표준을 따르는 코딩을 하게 되면 모든 사람들이 쉽고 편하게 코드를 이해하는데 도움을 줄 수 있습니다. 이에 따라 더 좋은 코드를 생성하여 좋은 개발자가 될 수 있는 지침이 됩니다.

- 웹 접근성
웹 접근성이란 장애인, 고령자 등 웹사이트에서 제공하는 정보를 모든 사람이 동등하게 접근하고 이용할 수 있도록 만든 가이드입니다. 예를 들어 시각 장애인의 경우 텍스트나 이미지를 접했을 때 바로 확인이 불가하지만 이를 대체할 수 있는 설명을 텍스트로 제공하여 이를 음성정보로 변환하여 제공이 가능합니다.

[웹퍼블리셔와 프런트엔드 개발자의 차이는 무엇일까?]
- 웹 퍼블리셔는 디자인된 작업을 토대로 코딩을 통해 웹사이트를 만드는 직업입니다. 따라서 웹 표준과 웹 접근성에 근거하여 코딩하는 것이 중요한 직종입니다. 클라이언트에 요구에 맞춰 디자인, 기획자와 협업하여 웹사이트의 전체적인 UI 구성에 대한 개발을 진행합니다. 웹퍼블리셔는  '마크업 작업' 이 주 업무로 볼 수 있습니다. 마크업이란 HTML 언어를 다루는 작업입니다. 따라서 웹 퍼블리셔는 HTML과 CSS를 주로 다루면서 업무를 진행합니다.

- 프런트엔드 개발자는 HTML, CSS는 물론이고 JAVASCRIPT를 기반으로 DB와 서버, 네트워크 기술들을 통해 코딩을 진행할 수 있는 개발자를 의미합니다. 기존에는 DB와 서버 등의 기술을 사용할 때 JAVA, PYTHON과 같은 백엔드 언어를 사용했지만 요즘은 JAVASCRIPT를 기반으로하여 AngularJS, ReactJS 의 기술을 사용하여 서버와 통신하면서 만들 수 있는 기능이 다양해졌습니다. 또한 React Native는 요즘 시대에 맞춰 모바일 환경에 적합한 네이티브 어플리케이션을 만들 수 있는 프레임워크로 프론트엔드 개발자의 영역이 점점 넓어지고 있습니다.

---

이렇게 실제 HTML, CSS, JAVASCRIPT에 대한 개발 언어를 배우기 전 배경적인 지식에 대한 내용을 설명드렸습니다. 앞으로 이어질 포스팅은 실제 태그 사용 및 기능들에 대해서 정리해보도록 하겠습니다. 감사합니다.