기본기를 갖추지 못 하면 나중에 어려운 문제에 직면했을 때 무너질 가능성이 크기에
이제부터는 정말.. 우리가 흔히 사용하는 브라우저가 무엇이고.. 등등
기초부터 차근차근 공부해 가보도록 하겠습니다.
우리가 사용하는 크롬, 인터넷 익스플로러, 사파리 등을 뜻하는
'브라우저'는 무엇일까?
브라우저에는 아래와 같은 종류가 있다.
여기서 1개 이상은 사용해보았을 것이다.
'브라우저(Browser)'란 무엇인가?
브라우저는 간단히 말하면 '웹 정보를 화면에 표시하는 소프트웨어'를 말한다.
Browse 는
둘러보다, 훑어보다, 인터넷을 돌아다니다라는 뜻을 가지고 있는 영어단어로,
브라우저가 무엇인지 영어 해석으로 조금 유추해볼 수 있을 것 같다.
조금 더 깊게 들어가면
브라우저는 인터넷 상에 연결된 '웹 서버'에 저장되어 있는 하이퍼텍스트 및 하이퍼미디어 등의 모든 정보를
가져와 컴퓨터나 휴대폰 등이 디지털기기 화면에 보여주는 역할을 한다.
예를 들어보겠다.
우리가 크롬(Chrome) 브라우저 주소창에
' https://parkjh7764.tistory.com/ '라는 URL 치고 들어갔을 때를 보자.
tistory.com 라는 도메인을 사용하는 웹 서버에 접속을 해서,
parkjh7764 아이디를 사용하는 사용자와 관련된 모든 문서를 웹서버에 요청을 해서 브라우저가 가져오는데,
해당 문서는 HTML, CSS, JavaScript 등의 언어로 작성된 '텍스트(Text)'의 형태로 되어 있다.
브라우저는 이러한 텍스트 형식을 해석해서 사용자에게
시각적으로 보여주는 '사용자 인터페이스'의 역할도 하게 된다.
쉽게 말해 우리와 같은 클라이언트, 즉 사용자가 쉽게
웹 서버에 저장된 컨텐츠들을 볼 수 있게 해주는 응용 프로그램인 셈이다.
그렇다면 웹 개발 공부를 하기 위해서 어떤 공부를 해야 하는 것인가?
사용자는 '브라우저'를 통해서 웹 사이트를 보게 된다.
그렇다면 브라우저가 띄워주는 웹 사이트는?
바로 웹 서버에 저장된 문서를 해석해서 띄워주는 것이다!
그렇다면 우리는 브라우저가 해석하는 그 '문서'를 만드는 법을
공부하면 된다.
그러한 문서는 HTML, CSS, JavaScript 등의 언어로 작성되어 있다.
그 언어를 공부하면 된다.
매우 Simple 하다.
그렇다면 위에서 언급한 HTML, CSS, JavaScript는 무엇인가?
간단히만 집고 넘어가자.
'HTML'이란 무엇인가?
HTML은
'HyperText Markup Language'의 약자로 가장 단순한 형태의 웹 언어를 말하는데,
어디에 어떤 컨텐츠가 들어가야 하는 지, 구조적인 의미를 나타내는 마크업 언어이다.
쉽게 말해,
브라우저에게 해당 웹페이지에
어디 부분에는 제목(headings)이 들어가고,
어디는 단락(paragraphs),
어디는 목록(list),
어디는 링크(links),
어디는 사진(image) 등
어디에 무엇이 들어가야 한다는 것을 알려주는 언어인 셈이다.
브라우저에 어디에 어떤 컨텐츠가 위치하는지만 알려주는 것이므로
HTML 언어로만 작성을 한다면
매우 '정적인(static)' 웹 페이지라고 말할 수 있다.
그러면 'CSS'는 무엇인가?
CSS는
'Cascading Style Sheets'의 약자로 웹 문서의 전반적인 스타일을 저장해둔 시트를 말하는데,
해당 컨텐츠를 클라이언트에게 어떤 식으로 보여주고 싶은지를 나타내는 언어이다.
쉽게 말해,
브라우저에게 해당 웹페이지에
어떤 요소는 어떤 글씨체(Font),
어떤 요소는 어떤 크기(Size),
어떤 요소는 어떤 배경(Background),
어떤 요소는 어떤 색상(Color),
어떤 요소는 어느 위치(Align) 등
컨텐츠를 어떻게 보여줄 것인지 알려주는 것이다.
CSS는, HTML과 같이 써야 한다.
HTML로 작성된 구성요소들을 CSS로 꾸며주는 느낌이다.
다시 정리하자면
HTML은 브라우저(Browser)에게 웹사이트의 컨텐츠가 무엇인지에 대해 알려주는 것이고
CSS는 브라우저(Browser)에게 웹사이트의 그 컨텐츠가 어떻게 보여야 하는지를 알려주는 것이다.
쉽게 비유를 하면
우리 몸의 뼈, 골격은 HTML이고
뼈를 둘러싼 어느 뼈에 붙었는 지에 따라 이름이 다른
삼두근, 이두근, 대흉근, 광배근 등의 '근육'이 CSS인 셈이다.
자.. 내 티스토리 블로그를 CSS 빼고 HTML만 있을 때를 보도록 하자.
CSS가 있을 때와 없을 때 확연히 차이가 나지 않는가?
아래에서 보면 알 수 있듯이 HTML 코드는 제목, 이미지, 메뉴, 리스트 등의
어떤 요소인지를 나타내고 CSS가 이 요소들을 '디자인'하는 것이다.
그렇다면 마지막 'Javascript'는 무엇인가?
Javascript는
자바스크립트라고 읽으며 '객체 기반의 스크립트 프로그래밍 언어'를 말한다.
사용자로부터 이벤트나 입력을 받아 '동적'인 처리를 하기 위한 언어이다.
쉽게 말해,
어떤 버튼, 이미지, 텍스트를 눌렀을 때,
마우스의 커서를 올렸을 때,
텍스트를 입력했을 때 등의
이벤트나 입력이 있을 때
크기를 커지게 하거나,
색을 바뀌게 하거나,
관련 검색어를 보여주거나,
없던 게 나타나거나 등의
동적인 처리를 하는 것이다.
요약을 하면 아래와 같다.
사진 하나만 봐도 무엇인지 이해가 쏙 가지 않는가?!
댓글