[1주차 TIL] KnockOn Bootcamp HTML, CSS, Javascript란?

1. HTML, CSS, JS의 기본 개념

• HTML (HyperText Markup Language)
  • 웹 페이지의 구조를 정의하는 언어.
  • 태그를 사용해 텍스트, 이미지, 링크, 버튼 등을 배치한다.
  • 주요 역할: 콘텐츠의 뼈대 제공.
• CSS (Cascading Style Sheets)
  • HTML로 만들어진 구조에 디자인을 추가하는 언어.
  • 색상, 크기, 배치, 애니메이션 등을 지정한다.
  • 주요 역할: 웹 페이지의 꾸미기 담당.
• JS (JavaScript)
  • 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어.
  • 버튼 클릭, 입력값 처리, 애니메이션 등 사용자의 행동을 처리한다.
  • 주요 역할: 웹 페이지에 인터랙션 제공.

---

2. HTML 태그들

• 기본 태그
  • <h1>~<h6>: 제목 태그.
  • <p>: 문단 태그.
  • <a>: 하이퍼링크 태그.
  • <img>: 이미지 삽입.
  • <button>: 버튼.
• 구조 태그
  • <div>: 블록 컨테이너.
  • <span>: 인라인 컨테이너.

---

3. CSS 기본 문법과 속성

• 문법: 선택자 { 속성: 값; }
  • 예:

h1 { color: blue; } p { font-size: 16px; }

 

• 주요 속성
  • color: 글자 색상.
  • background-color: 배경 색상.
  • margin: 외부 여백.
  • padding: 내부 여백.
  • border: 테두리.

---

4. JavaScript 기본 문법

• 변수 선언: 
  var name = "John"; // 변수 선언 (전역 스코프)
  let age = 30; // 변수 선언 (블록 스코프)
  const pi = 3.14; // 상수 선언
• 함수:
   
  function greet() { alert("Hello, World!"); }
• DOM 조작:
   
  document.getElementById("demo").innerHTML = "Hello!";

---

HTML, CSS, JS 활용 예제 1: 배경색 변경

 

<button onclick="changeColor()">배경색 변경</button>
<script>
function changeColor() {
  document.body.style.backgroundColor = "yellow";
}
</script>

• 버튼을 클릭하면 changeColor() 함수가 실행되어 배경색이 변경된다.

---

HTML, CSS, JS 활용 예제 2: 배열 출력

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

• 배열에 저장된 값을 HTML에 표시한다.

---

도전 과제

1. 자기소개 페이지 만들기
   • http://gibeom0522.life:15723
2. 간단한 계산기 페이지 만들기
   • http://gibeom0522.life:15724

 

박기범 자기소개

 

접속이 안되시면 HTTP로 접속 시도해주세요.

위 도전과제 웹사이트는 1개월 뒤 닫힐 예정이며, 소스코드는 KnockOn TIL 1주차 모든 제출이 완료되면 여기에 업로드하겠습니다.

 

정보통신망 이용촉진 및 정보보호 등에 관한 법률 (정보통신망법)

• 제48조(정보통신망 침해행위의 금지)
  정보통신망에 대한 무단 접근, 정보 탈취, 파괴 또는 변조 등의 행위를 금지.
• 제49조(악성프로그램의 제작 및 유포 금지)
  해킹 도구나 악성코드의 제작, 배포, 유포를 금지.