chapter.03 웹페이지를 이루는 삼총사: HTML, CSS, JavaScript

* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며,

그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다.

 

 

| 목차

1. 강의 내용 학습

1.(1) HTML

1.(2) CSS

1.(3) JavaScript

2. 학습 후기

---

1. 강의 내용 학습

1.(1) HTML

• HTML(* .html)(HyperTect Markup Language) (구조, 내용)
  • HyperText: 정적인 활동에서 벗어나 다른 페이지에 접속할 수 있는 ‘링크’
  • Markup: 텍스트의 구조 혹은 의미를 부여하는 것
    • 의미 부여 방법: <tag>어쩌고 저쩌고</tag>

1.(2) CSS

• CSS(Cascading Style Sheets) (* .css) (모양, 스타일)
  • Cascading: ‘폭포처럼 떨어지는, 계단식의’

1.(3) JavaScript

• JavaScript(≠Java) (* .js) (이벤트, 반응)

 

*개발자도구 단축키: ctrl+shift+i / ctrl+shift+f12

 

2. 학습 후기

  고등학생 시절 공학 동아리에서 아두이노 코드를 참고할 때, 동아리 선배님이 개발자도구를 활용하여 우클릭 방지 기능을 해제하는 법을 알려주신 적이 있었다. 바로 개발자도구를 사용하여 'disable javascript' 를 사용하는 방법이었는데, 그 당시에는 멋도 모르고 이걸 누르면 우클릭 방지가 해제되는 구나 싶었다.

  오늘 강의를 들으면서 우클릭 방지 기능이 이벤트 및 반응을 담당하는 'JavaScript'를 활용한 기능이라는 것을 깨달았다.

그렇지만 가끔 어떤 페이지에서는 'disable javascript' 기능으로는 우클릭 방지 해제가 불가능하였는데, 그런 경우에는 어떤 식으로 웹페이지를 구성했을지 궁금해졌다. 또한, 개발자 도구를 활용하면 너무나도 쉽게 우클릭 방지 기능이 해제되어 버리는 경우, 어떤 방법을 사용하여 이 기능을 막을 수 있을지 또한 궁금해졌다.