IT/Programming

HTML, CSS & Javascript 배우기

루벤초이 2021. 3. 14. 19:03

HTML

HTML(HyperText Markup Language)은 웹페이지를 위한 언어인데요,

웹페이지를 구성하는 HTML, CSS 및 Javascript에 대한 훌륭한 튜토리얼은 엄청나게 많아요.

당장 구글에 'html '만 쳐봐도 쉽고 빠르게 배울 수 있는 링크들이 쏟아져내립니다.

 

그 중 단언컨대 가장 좋은 튜토리얼은 w3schools.com/ 입니다.

 

HTML Tutorial

HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try it Yourself" With our "Try it Yourself" editor,

www.w3schools.com

예제마다 Try it Yourself 버튼이 있어서 곧바로 실행해볼 수 있어요.

튜토리얼 순서대로 따라가다 보면 몇 시간이면 HTML을 이해하실 수 있을 거에요.

 

 

CSS

CSS(Cascading Style Sheets)는 HTML을 어떻게 보여줄지 스타일을 정의한 코드인데요,

CSS도 마찬가지로 w3schools 사이트의 두 번째 탭에 있는 CSS 강좌를 따라가면 대충 아 이런 거구나 싶은 순간이 올 겁니다.

 

CSS는 한번에 이해하기엔 조금 버거울 수 있어요. id, class 개념의 차이점부터, class에서 계층적 구조를 어떻게 가리킬지도 처음엔 많이 헷갈리죠. 무엇보다 내용이 방대하고 헷갈리기 때문에, CSS는 외운다고 생각하지 말고 그때그때 인터넷에 찾아가면서 해결하는 것이 좋습니다. 

 

(Tip) Color Picker

CSS를 건드리다 보면 가장 빈번하게 고치는 것들 중 하나가 색상인데요,

색은 아래와 같이 hex 값으로 표현될 수도 있고 rgb 값으로 표현되기도 해요. (가끔 'orange' 같은 문자열을 쓰기도 하죠)

<!DOCTYPE html>
<html>
<body>
	<h1 style="background-color:#d6c085">Color by hex </h1>
	<h1 style="background-color:rgb(214,192,133)">Color by rgb</h1>
</body>
</html>

 

원하는 색을 골라 hex나 rgb 값을 찾을 때 유용한 것이 Color Picker 인데요,

w3schools에서도 Color Picker를 제공하지만, 저는 구글에서 color picker 검색해서 바로 나오는 창을 사용해요.

구글에서 color picker를 검색하면 나오는 화면

 

Javascript

자바스크립트도 w3schools에서 제공하지만, 저는 4~5년 전에 책으로 공부해서 w3schools가 좋을지는 잘 모르겠어요.

4~5년전에는 jQuery나 Ajax 등 유행하는 라이브러리/프레임워크들이 있었는데 지금은 React나 Angular 같은 웹 프레임워크로 많이들 갈아탄 듯 해요. 

더보기

최대 개발자 사이트중 하나인 Stack Overflow의 2020 트렌드를 살펴 보면,

2020 개발자들이 가장 많이 사용하는

   - 프로그래밍 언어 1위 Javascript (67.7%) 2위 HTML/CSS (63.1%) 3위 SQL (54.7%)

   - 웹 프레임워크 1위 jQuery (43.3%) 2위 React.js (35.9%) 3위 Angular (25.1%)

로 나타나고 있어요.

 

2016년만 해도 프로그래밍 언어는 Javascript - SQL - Java 순이고 웹 프레임워크 항목은 없었는데,

2018년에 오면 프로그래밍 언어는 Javascript - HTML - CSS 순이고 웹 프레임워크는 Node.js (49.6%) - Angular (36.9%) - React (27.8%) 였어요.

 

이것만 보더라도 Javascript가 대세이고 React가 급부상하고 있음을 알 수 있죠.

SQL은 데이터베이스를 다루기 위한 언어이니 부동의 3위를 지킬만 하고 jQuery는 원체 널리 퍼져있던 라이브러리라 한동안 유지되겠죠. 점유율보다 추세를 보고 트렌디한 언어를 배우고 개발하는 것이 바람직할 것 같습니다.

 

인터넷 사이트나 책을 통해 자바스크립트의 기초를 다지고 나면, 실제로 개발하면서는 주로 인터넷을 찾게 되겠죠. 

특히 자바스크립트 개발 시 장점은 즉시 실행 가능한 것인데요, 웹 상에서 즉시 실행해볼 수 있는 Codepen 같은 툴도 있어요.

codepen.io/HowToDevCode/pen/ozbWKN

 

Very Simple JavaScript innerHTML Example

Very simple JavaScript example that displays a "Hello, Name" message after user enters a name in the text field. ...

codepen.io

위 예제에서처럼 코드펜은 HTML, CSS, Javascript를 나눠서 작성하면 즉시 결과를 볼 수 있도록 되어있어요.

간단한 프로그램은 이렇게 코드펜을 활용해서 짜거나 검증할 수 있고 복잡한 프로그램은 Visual Studio Code 같은 무료 개발 툴을 이용하는 것이 현명합니다.

 

 

728x90
반응형