코딩 스터디

[코딩 스터디] HTML, CSS 용어 사전

Hana’s UX Journey 2025. 2. 27. 11:48
Html, CSS의 차이

 

1. HTML (HyperText Markup Language)

  • HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지에 들어갈 내용(텍스트, 이미지, 비디오 등)을 나타내는 데 사용됩니다.
  • HTML은 태그(Tag)로 구성되어 있으며, 이를 통해 다양한 웹 요소를 구조적으로 배치할 수 있습니다.
    • 예시: <h1>, <p>, <img>, <a> 등이 HTML 태그입니다.
  • 구성 요소:
    • 헤더(Head): 문서의 메타데이터를 정의합니다. <meta>, <title>, <link> 등을 포함합니다.
    • 본문(Body): 실제 콘텐츠를 담는 부분으로, 텍스트, 이미지, 링크 등을 포함합니다.
     

2. CSS (Cascading Style Sheets)

  • CSS는 웹 페이지의 스타일을 정의하는 언어입니다. HTML로 구조를 만들고 CSS로 이를 꾸미고 스타일을 입힙니다.
  • CSS는 웹 페이지의 디자인을 다루며, 글꼴, 색상, 레이아웃, 애니메이션 등을 설정할 수 있습니다.
  • **선택자(Selector)**와 속성(Property), **값(Value)**으로 구성됩니다.
    • 선택자: 스타일을 적용할 HTML 요소를 선택합니다.
    • 속성: 스타일을 정의할 속성 (예: color, font-size 등).
    • 값: 속성에 설정할 값 (예: red, 16px 등).
     
  • CSS의 특징:
    • 선택자: 특정 HTML 요소에 스타일을 적용
    • 클래스와 ID: HTML 요소에 클래스를 지정하여 여러 요소에 스타일을 재사용하거나 고유한 스타일을 지정
    • 반응형 디자인: 화면 크기에 따라 스타일을 다르게 적용하는 미디어 쿼리 사용

 

3. 웹 개발에서의 개념

웹 개발은 프론트엔드와 백엔드로 나누어집니다.

프론트엔드(Front-End)

  • 프론트엔드는 사용자와 상호작용하는 웹 페이지의 부분을 개발하는 것입니다. HTML, CSS, JavaScript 등을 사용하여 웹사이트의 시각적 요소와 인터페이스를 만듭니다.
    • HTML: 웹 페이지 구조와 콘텐츠를 정의
    • CSS: 웹 페이지의 시각적 스타일을 설정
    • JavaScript: 웹 페이지에 동적인 기능을 추가 (예: 버튼 클릭 시 동작)
    프론트엔드 프레임워크 및 라이브러리 예:
    • React.js, Vue.js, Angular.js (컴포넌트 기반 UI 개발)

백엔드(Back-End)

  • 백엔드는 웹 애플리케이션의 서버 측과 데이터베이스를 처리하는 부분입니다. 사용자가 요청한 정보를 서버에서 처리하고 결과를 프론트엔드로 보내는 역할을 합니다.
    • 서버: 웹 애플리케이션에서 요청을 처리하는 시스템
    • 데이터베이스: 데이터를 저장하고 관리하는 시스템 (예: MySQL, MongoDB 등)
    • API (Application Programming Interface): 서버와 프론트엔드 간에 데이터를 주고받을 수 있도록 하는 인터페이스
    백엔드 언어 예:
    • Node.js, Python (Django, Flask), Ruby on Rails, Java (Spring)

풀스택 개발(Full-Stack Development)

  • 풀스택 개발자는 프론트엔드와 백엔드를 모두 다룰 수 있는 개발자를 말합니다. 즉, 웹 애플리케이션의 전체 개발을 담당할 수 있습니다.

 

4. 개발의 중요한 개념들

  • DOM (Document Object Model): HTML 문서의 구조를 객체로 나타내는 모델. JavaScript에서 DOM을 수정하면 웹 페이지에 실시간으로 반영됩니다.
  • API (Application Programming Interface): 서로 다른 소프트웨어 시스템 간에 데이터를 주고받는 방법을 정의합니다.
  • 반응형 웹 디자인 (Responsive Web Design): 다양한 화면 크기에서 웹 페이지가 잘 보이도록 스타일을 적용하는 기법.
  • 버전 관리 (Version Control): 코드의 변경 사항을 추적하고 여러 개발자가 협업할 수 있도록 돕는 시스템 (예: Git).

 

웹 개발의 기본을 배우는 것은 HTML부터 시작하는 것이 좋습니다. HTML은 웹 페이지의 구조를 만들어주고, 그 다음에 CSS로 스타일을 입혀서 디자인을 하고, 마지막으로 JavaScript로 동적인 기능을 추가하는 과정으로 학습할 수 있습니다.

  1. HTML (먼저 배우기)
    • HTML은 웹 개발의 기초 중의 기초입니다. 웹 페이지의 구조를 이해하고, 어떻게 텍스트나 이미지를 배치하고 링크를 만들 수 있는지 배웁니다.
    • 학습할 내용:
      • 기본적인 HTML 태그 (<h1>, <p>, <a>, <ul>, <img>)
      • HTML 문서 구조
      • 폼 요소 (입력폼, 버튼 등)
  2. CSS (그다음 배우기)
    • CSS는 HTML로 만든 구조에 스타일을 추가하는 역할을 합니다. 웹 페이지를 미려하게 꾸미는 방법을 배웁니다.
    • 학습할 내용:
      • CSS 선택자와 속성
      • 색상, 글꼴, 배경 등 기본적인 스타일 지정
      • 레이아웃 (박스 모델, Flexbox, Grid 등)
      • 반응형 웹 디자인 (화면 크기에 따라 레이아웃을 변경하는 기법)
  3. JavaScript (나중에 배우기)
    • JavaScript는 웹 페이지에 동적인 기능을 추가하는 데 사용됩니다. 사용자와 상호작용할 수 있는 기능을 만들고, 데이터를 처리하는 방법을 배웁니다.
    • 학습할 내용:
      • 변수, 함수, 이벤트 처리
      • DOM (Document Object Model) 조작
      • 조건문, 반복문 등 기본적인 프로그래밍 문법
      • JavaScript로 간단한 동작 구현 (예: 버튼 클릭 시 텍스트 변경)

학습 순서 및 추천 자료

  1. HTML부터 시작:
    • 추천 사이트: MDN Web Docs - HTML
    • HTML을 배우고, 다양한 태그와 구조를 실습하면서 익힙니다.
  2. CSS로 디자인 적용:
    • 추천 사이트: MDN Web Docs - CSS
    • CSS 기본 속성부터 시작해, 박스 모델, Flexbox, Grid 시스템 등을 공부합니다.
  3. JavaScript로 인터랙션 추가:
    • 추천 사이트: MDN Web Docs - JavaScript
    • JavaScript의 기본적인 문법을 배우고, 간단한 웹 애플리케이션을 만들어 보세요. 예를 들어, 버튼 클릭 시 화면이 바뀌는 기능을 만들어 볼 수 있습니다.

'코딩 스터디'의 다른글

  • 현재글[코딩 스터디] HTML, CSS 용어 사전

티스토리툴바