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

2024. 12. 6. 05:48ㆍKnockOn Bootcamp (녹온 부트캠프 3기)

1. HTML, CSS, JS의 기본 개념과 관계

  • HTML (HyperText Markup Language):
    • 웹 페이지의 구조를 정의하는 언어.
    • 요소(Element)와 태그(Tag)로 구성.
    • 예: 텍스트, 이미지, 링크, 버튼 등.
  • CSS (Cascading Style Sheets):
    • 웹 페이지의 디자인 및 스타일링을 담당.
    • 색상, 글꼴, 레이아웃 등 시각적 요소를 제어.
  • JS (JavaScript):
    • 웹 페이지에 동적 기능을 추가하는 스크립트 언어.
    • 이벤트 처리, 애니메이션, 데이터 검증 등 구현.
  • 세 언어의 관계:
    • HTML → 구조 제공.
    • CSS → 구조에 스타일 입힘.
    • JS → 사용자 상호작용 및 동작 추가.

2. 웹 페이지 제작에 필요한 기본적인 HTML 태그들

  • 구조 태그:
    • <html>: 문서의 최상위 요소.
    • <head>: 메타데이터, 제목, 스타일 정의.
    • <body>: 실제 페이지 내용.
  • 텍스트 태그:
    • <h1> ~ <h6>: 제목.
    • <p>: 단락.
    • <span>: 인라인 요소.
  • 링크와 이미지 태그:
    • <a href="URL">: 하이퍼링크.
    • <img src="URL" alt="설명">: 이미지 삽입.
  • 폼 태그:
    • <form>: 사용자 입력 폼.
    • <input>: 텍스트, 버튼 등 입력 요소.
    • <button>: 클릭 가능한 버튼.
  • 리스트 태그:
    • <ul>: 순서 없는 리스트.
    • <ol>: 순서 있는 리스트.
    • <li>: 리스트 항목.
  • 테이블 태그:
    • <table>: 테이블 구조 정의.
    • <tr>: 테이블 행.
    • <td>: 테이블 데이터 셀.
    • <th>: 테이블 헤더 셀.

3. CSS 기본적인 문법과 속성들

  • CSS 문법 구조:
  • css
    코드 복사
    선택자 { 속성: 값; }
  • 기본 선택자:
    • *: 모든 요소 선택.
    • #id: 특정 ID 선택.
    • .class: 특정 클래스 선택.
    • tag: 태그 선택.
  • 주요 속성:
    • 텍스트:
      • color: 글자 색상.
      • font-size: 글자 크기.
      • text-align: 정렬.
    • 박스 모델:
      • margin: 외부 여백.
      • padding: 내부 여백.
      • border: 테두리.
    • 레이아웃:
      • display: 블록, 인라인, 플렉스 등.
      • position: 요소 위치(정적, 절대, 고정 등).

4. 웹 페이지 동적 기능을 위한 JS 기본 문법과 함수들

  • JS 기본 문법:
    • 변수 선언:
      • let: 재할당 가능.
      • const: 재할당 불가.
      • var: 이전 방식, 권장되지 않음.
    • 조건문:
      if (조건)
      { // 실행 코드 }
      else
      { // 다른 실행 코드 }
       
    • 반복문:
      for (let i = 0; i < 10; i++)
      { console.log(i); }
  • DOM 조작:
    • HTML 요소 선택:
       
      const element = document.querySelector("#id");
    • 이벤트 처리:
       
      element.addEventListener("click", () => { alert("클릭됨!"); });
  • 기본 함수:
    • alert(): 알림창 표시.
    • console.log(): 디버깅용 메시지 출력.
    • setTimeout(): 일정 시간 후 코드 실행.
    • setInterval(): 일정 간격으로 코드 실행.

'KnockOn Bootcamp (녹온 부트캠프 3기)' 카테고리의 다른 글

[2주차 TIL] HTML  (1) 2024.12.16
[1주차 TIL] KnockOn Bootcamp 프록시  (0) 2024.12.06
[1주차 TIL] KnockOn Bootcamp 패킷  (0) 2024.12.06
[1주차 TIL] KnockOn Bootcamp 쿠키와 세션  (0) 2024.12.06
[1주차 TIL] KnockOn Bootcamp HTTP/HTTPS  (0) 2024.12.06

관련글

티스토리툴바