HTML, CSS, JavaScript는 웹 개발에서 주요한 역할을 하는 세 가지 언어입니다. 이 세 가지 언어는 협력하여 웹 페이지를 구성하고 사용자에게 풍부한 경험을 제공하는 데 사용됩니다. HTML은 페이지 구조를 정의하고, CSS는 디자인을 꾸미며, JavaScript는 상호작용과 동적인 기능을 구현하는 데 활용됩니다. 이러한 조합을 통해 다양하고 매력적인 웹 페이지를 만들 수 있습니다.
HTML (HyperText Markup Language) - 페이지의 구조 TEXT
HTML은 웹 페이지의 구조와 콘텐츠를 정의하기 위해 사용되는 마크업 언어입니다. 웹 페이지의 텍스트, 이미지, 링크, 표, 목록 등을 구조화하고 표시하는데 사용됩니다. HTML은 요소(element)와 태그(tag)로 이루어져 있습니다. 요소는 콘텐츠를 나타내며, 태그는 요소의 시작과 끝을 표시하는 역할을 합니다. 예를 들어, <h1> 태그는 큰 제목을 정의하고, <p> 태그는 단락을 정의합니다.
CSS (Cascading Style Sheets) - 페이지의 디자인
CSS는 웹 페이지의 디자인과 레이아웃을 정의하기 위한 스타일 시트 언어입니다. HTML 요소의 색상, 폰트, 크기, 간격 등의 스타일을 지정하여 웹 페이지를 시각적으로 꾸미는 역할을 합니다. CSS는 HTML 요소에 스타일을 적용하기 위해 선택자(selector)와 선언(declaration)으로 구성됩니다. 선택자는 어떤 HTML 요소를 스타일링할 것인지 선택하고, 선언은 선택한 요소에 적용할 스타일 속성과 값으로 이루어집니다.
JavaScript - 상호작용과 동적인 기능 구현
JavaScript는 웹 페이지에 동적인 기능을 추가하기 위한 프로그래밍 언어입니다. 사용자와 상호작용하거나 웹 페이지의 내용을 변경하거나 업데이트하는 데 사용됩니다. JavaScript를 사용하여 사용자 입력에 응답하거나 웹 페이지 요소를 조작하고 변경할 수 있습니다. 예를 들어, 버튼 클릭 시 메뉴를 열거나 닫는 애니메이션을 만들거나, 사용자가 입력한 데이터를 처리하여 웹 페이지 내용을 업데이트하는 등의 작업을 할 수 있습니다.
네이버 사이트를 부셔버리겠어
자 이제 네이버에 접속하여 F12 버튼을 누르고 Elements 이 탭에 있는 아래 영어 문장들을 Delete키를 이용하여 하나 씩 지워보자
어떤가 이제 네이버는 웹 페이지가 부셔졌기 때문에 비상일 것이다. 내가 큰 대기업의 웹사이트를 부셨고, 나는 경찰에게 잡혀갈 것이다...
과연 그럴까? 똑같이 해보고 F5버튼(새로고침)을 눌러보아라. 뭔 일이 있었냐는 듯이 원래대로 돌아오지 않았는가? 이렇게 될 수 있는 이유는 우리가 얻는 웹은 사본 이기 때문이다. 새로고침을 하면 원본이 다시 다운 받아지기 때문에 상관 없다. 웹의 단점으로는 매번 다운로드 하기 때문에 네트워크가 느려지면 그만큼 뜨는 속도도 느려지게 되어있다.
브라우저 버전의 파편화
이제 우리는 웹을 만들 때 브라우저 종류 별로 웹을 다 만들어야 한다. 각자, 다 다르기 때문 이러한 현상을 브라우저 버전의 파편화 라고 한다. 그런데 브라우저의 종류는 너무 많다. 그래서 보통 개발자들은 점유율을 따져서 만든다.
반응형
모바일과 PC버전 웹 페이지를 따로 만들어서 출시하는 것은 불편하다. 디자인을 바꾸기 위해서는 서로 다른 CSS 파일을 수정해야 하기 때문이다. (내용을 수정 한다면, HTML) 작업이 중복되기에 비효율적이고 버그가 생길 수도 있다. 이러한 불편함을 해결하기 위해 등장한 기술이 '반응형 웹'이다. 레이아웃 위주로 나눠 작업해 각 기긱의 디자인을 구현할 수 있다. 즉, 웹페이지의 크기(비율)가 사용자의 기기에 맞춰 자동으로 변형된다는 의미이다. 반응형으로 웹을 만들면 작업시간이 오래 걸리고, 비용이 더 많이 들어가게 된다.