안녕하세요! 조신선입니다.
원래는 CSS 기초 문법을 작성하려고 했지만, 자바 삼총사의 개념을 먼저 잡는 것이 좋을 것 같아서 JAVA의 기초인 삼총사를 먼저 간단하게 짚고 넘어가도록 하겠습니다.
삼총사
HTML, CSS, JS는 웹 개발에서 가장 중요한 프론트엔드 언어입니다. 각 언어의 역할과 관계는 다음과 같습니다.
| 언어역할예시 | ||
| CSS | 웹 페이지의 스타일과 레이아웃을 정의하는 스타일 시트 언어 | color, font-size, margin, padding, border 등 |
| JavaScript | 웹 페이지의 동적인 기능을 담당하는 스크립트 언어 | 이벤트 핸들러, DOM 조작, AJAX 통신, 애니메이션 등 |
| HTML | 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어 | <html>, <head>, <body>, <p>, <img>, <table> 등 |
HTML은 웹 페이지의 구조와 내용을 작성하기 위해 사용됩니다. 즉, 텍스트, 이미지, 비디오 등의 콘텐츠를 표시하는 데 사용됩니다.
CSS는 HTML로 작성된 웹 페이지의 디자인과 레이아웃을 담당합니다. CSS를 사용하여 웹 페이지에 적용되는 스타일, 색상, 폰트 등을 지정할 수 있습니다.
JS는 웹 페이지에서 상호 작용적인 기능을 구현하기 위해 사용됩니다. 예를 들어, 사용자의 클릭 또는 마우스 움직임에 대한 반응을 처리하거나, 웹 페이지의 콘텐츠를 동적으로 변경하는 등의 작업을 수행할 수 있습니다.
따라서, 이 세 가지 언어는 각각 웹 페이지의 구조, 디자인 및 기능을 담당하며, 함께 사용하여 동적이고 인터랙티브한 웹 페이지를 만들 수 있습니다.
아주 쉽게 설명하자면
HTML : 명사
CSS : 부사, 형용사
JS: 동사
이렇게 설명할 수 있을 것 같아요.
완전히 똑같은 비유라고 할 순 없지만, JS는 행하게 하는 동사와 개념이 비슷하고, CSS는 동사나 명사를 꾸미는 역할을 수행합니다. 디자인적인 요소가 크죠.
HTML이 명사라고 보기가 조금 어려울 수 있는데, 웹페이지에서 눈에 보이는 것들을 표현해주니깐 목적어, 주어 같은 명사라고 보는 것도 괜찮은 것 같아요.
<자바 삼총사.jpg>
아래 사이트는 여러가지의 자바 코드 예시들이 있고, 내가 그것을 그대로 사용할 수도 있고, 내가 작성한 것을 바로 보여주는 기능을 제공합니다. 더 다양한 기능들이 있지만 제가 주로 사용하는 목적은 위와 같아요.
https://codepen.io/
이렇게 내가 작성한 코드를 바로 볼 수 있어서 연습할 때 굉장히 유용하게 사용하고 있습니다.
그리고 다른 개발고수들이 작성한 코드를 다양하게 볼 수 있습니다.
내가 원하는 내용을 검색하면 원하는 종류의 내용만 볼 수도 있습니다.
그리고 원하는 내용을 클릭하면 아래와 같이 수정할 수 있어서 내게 맞게 편집하거나, 기존 내가 만든 코드와 합쳐서 더욱 더 완성도 높은 코드를 짤 수 있습니다.
오늘은 여기까지 하겠습니다. 다음에는 css 기초 문법 강의로 돌아오겠습니다.
'programming > JavaScript' 카테고리의 다른 글
| [웹개발/html] 1탄_프론트_OPENAI API를 활용한 '오늘의 운세보기' 웹페이지 개발 (1) | 2023.05.05 |
|---|---|
| [JAVA/API활용] kakao maps API 활용해서 지도 만들기!! (0) | 2023.04.21 |
| node js 기초 문법 강의&필수 모듈(ex:express) 이용 방법 (0) | 2023.04.19 |
| HTML 기초 문법 강의 (0) | 2023.04.18 |
| JS 기초 문법 (0) | 2023.04.18 |