왜 HTML/CSS를 배워야 할까?

기본적인 웹 이해

  • HTML과 CSS는 웹 개발의 기본적인 기초를 이루는 기술이다.
  • 모든 팀원이 이 두 기술에 대한 이해를 갖추면, 웹 개발의 구조와 디자인을 보다 잘 이해할 수 있다.
  • 이는 프론트엔드, 백엔드, 디자이너, 프로젝트 매니저 등 모든 역할에서 중요한 기반이 된다.

협업을 위한 공통 언어

  • 각 역할이 다르지만, 웹 개발에서 HTML과 CSS는 모든 개발자가 직면하는 핵심 요소!
  • 이를 이해하면, 다른 팀원들과 원활한 커뮤니케이션과 협업이 가능해진다.
  • 예) 디자이너: 프론트엔드 개발자님, 푸터의 패딩 값 다시 한 번 확인해주세요!
  • HTML과 CSS는 웹 개발의 기초이자, 모든 역할에서 원활한 협업과 효율적인 프로젝트 진행을 위한 중요한 출발점이다.

 

Product Manager

  • 어떤 서비스가 웹에 적합할까?
  • ex) 데스크탑 뷰 vs 모바일 뷰

Product Designer

  • 데스크탑 웹에서만 줄 수 있는 스타일링
  • ex) hover style

BackEnd

  • 뷰 구현할 일이 있을 수도?!
  • ex) 이메일전송

FrontEnd

  • 웹사이트나 애플리케이션의 기본적인 뼈대와 스타일을 구성하는 핵심적인 기술

Web

 

Web

  • World Wide Web (줄여서 WWW나 W3, 대중적으로는 웹(Web)으로 불림)
  • 웹은 인터넷을 통해 접근할 수 있는 정보 시스템으로, 주로 웹사이트와 웹 애플리케이션을 의미한다.
  • 웹은 하이퍼텍스트 시스템(HTML, CSS, JavaScript 등)으로 구성된 콘텐츠와 애플리케이션을 제공하며, 이를 사용하기 위해 웹 브라우저가 필요하다.
  • 웹은 인터넷 상의 서비스 중 하나에 해당한다.

인터넷

  • 전 세계를 연결하는 국제 정보 통신망, 디지털 기기로 연결되어 사람들이 정보를 공유할 수 있는 공간

웹 브라우저

  • 웹을 탐색하는 도구이며, 인터넷을 통해 웹에 접속할 수 있도록 해준다.
  • ex)Chrome, Firefox, Safari

Web의 특징

  • Web은 인터넷 상에서 텍스트나 그림, 영상 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다.
  • 하이퍼텍스트란 문서내부에 또 다른 문서로 연결되는 참조를 집어넣음으로써 여러 문서끼리 서로 참조할 수 있는 기술을 의미한다.
  • 문서 내무에서 또 다른 문서로 연결되는 참조를 “하이퍼링크" 라고 한다.  

Web의 구성

  • Web상에 있는 개개인의 문서 => 웹 페이지
  • 웹 페이지들 중에서 서로 연결된 웹페이지들의 집합 => 웹 사이트

Web의 동작

  • user/client/server 간의 상호작용

HTML

HTML

  • HyperText Markup Language의 약자
  • 하이퍼 텍스트와 콘텐츠를 브라우저에 표시해주는 언어
  • 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어

Mark Up

  • 태그를 사용해 문서나 데이터의 구조를 명시하는 언어
  • < > 안의 텍스트가 해당 태그가 무엇을 의미하는지 마크업 해준다고 할 수 있다.

요소(elements)

  • HTML 페이지를 구성하는 각 부품

태그(tag)

  • 요소를 만들 때 사용하는 작성법

속성(Attribute)

  • 요소에 추가적인 정보를 제공

식별자 속성

  • 요소를 구별해서 식별할 수 있는 속성
  • id : 문서 내에 유일한 요소 식별자, 중복 X
  • class : 성격이 동일한 태그를 그룹으로 나타내기 위한 식별자, 중복 O
  • name : <a>,<img>,<form>태그에 적용가능, 태그의 의미를 식별하는 용도가 아닌 서버전송과 내부 스크립트에 사용

img 태그

<img src="" alt="">
  • 웹 페이지에 이미지를 넣는 역할
  • src : img태그의 필수 속성으로 이미지 소스의 경로를 명시
  • alt : 이미지의 설명, 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줌
  • alt는 필수 속성은 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 사용하는 것을 추천

단축키 : img + Tab

 

a 태그

<a href=""></a>
  • 하이퍼링크를 넣는 역할, anchor
  • href : 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.

단축키 : a + Tab

 

주석

<!--  -->
  • 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다.

단축키 : ctrl + /

 

리스트 요소

<ol>
    <li></li>
</ol>
<ul>
    <li></li>
</ul>
  • <ol> : ordered list의 약자로, 리스트에 번호가 붙는다.
  • <ul> : unordered list의 약자로, 리스트에 번호가 붙지 않는다.
  • <li> : 리스트의 한 목록을 작성한다.

블럭/인라인 요소

  • 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성

  • block과 inline 요소의 공통점
    • 둘 다 그 자체로는 의미를 가지지 않는다.
    • 구역을 나누는 태그로, 그 자체로는 화면에선 아무것도 보이지 않는다.
    • 일종의 주머니이므로, 태그 안에 내용물(다른 태그들)이 들어가있어야 한다.
  • block과 inline 요소의 차이점
    • div는 블록 요소이기에 자동으로 줄바꿈이 일어나면서 전체 넓이를 100% 차지하는 것이 기본값이다.
    • span은 태그 내 요소가 차지하는 영역만 차지하며, 자동으로 줄바꿈이 일어나지 않는다.

블럭 요소

  • 화면의 전체 가로 너비 영역을 차지
  • css로 width,height를 통해 사이즈 조절 가능(지정하지 않으면 height는 컨텐츠 높이만큼)
  • <div>, <p> 등등

인라인 요소

  • 컨텐츠 만큼의 영역 차지
  • width, height 지정 불가
  • margin,padding은 좌,우에만 적용
  • 자손으로 block요소 가질 수 없음 (a태그는 예외)
  • <span>, <a> 등등

HTML 문서 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

  • <!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시
  • <html> : HTML 문서의 루트(root) 요소를 정의
  • <head> : HTML 문서의 메타데이터(metadata)를 정의
  • <body> : 웹 브라우저를 통해 보이는 내용(content) 부분
  • <title> : HTML 문서의 제목(title) 정의
    • 웹 브라우저의 툴바(toolbar)에 표시
    • 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목
    • 검색 엔진의 결과 페이지에 제목으로 표시
  • 메타데이터 : HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미
  • 오픈그래프 : 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보 에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소 들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 약속

단축키 : ! + Tab

 

Semantic 태그

  • Semantic : '의미의, 의미론적'이라는 뜻
  • 시멘틱 태그는 말 그대로 의미가 있는 태그
  • 기계, 브라우저가 잘 이해할 수 있도록 하는 태그(태그 이름만 봐도 용도를 짐작할 수 있도록)

semantic 태그를 사용하는 이유

  • 가독성 향상 : HTML 문서의 직관성과 유지보수 용이
  • 웹 접근성 향상 : 웹페이지와 상호작용하는 기술이 웹사이트에 대한 정보를 얻는데 용이(모든 사용자가 웹에 접근할 수 있도록 하는 것)
  • 검색엔진최적화(SEO) 향상 : 검색 엔진 같은 프로그램에서도 콘텐츠를 쉽게 이해할 수 있게 된다. 따라서 검색 엔진 최적화 등 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와준다.

semantic 태그 종류

  • <header>
    • 페이지 맨 위에 삽입하는 머리말.
    • 사이트 전체의 헤더는 주로 로고를 중심 으로 내비게이션, 메뉴, 검색 창 등이 들어간다.
  • <nav>
    • 해당 태그를 사용하면 어떤 부분이 메뉴인지 쉽게 파악할 수 있고 사이트 내의 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
    • 문서의 모든 링크가 에 포함되어 있을 필요는 없다.
    • 주요 탐색 링크 블록을 위한 요소이다.
  • <main>
    • 메인 내용 즉, 문서의 핵심을 담는 태그이다.
    • 웹 사이트의 텍스트 본문이나 콘텐츠를 나타낸다.
    • 문서에서 단 한 번만 사용되어야 하므로 주요 내용을 모두 감싸는 구조로 들어간다.
    • 또한 어떤 태그의 자식으로 들어갈 수 없다.
  • <section>
    • 콘텐츠 영역을 포함하는 태그이다.
    • 해당 콘텐츠를 주제별로 묶을 때 사용한다.
    • 태그 안에 다른 태그 를 넣을 수도 있다.
  • <article>
    • 웹 상의 실제 내용을 작성하는 태그이다.
    • 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당한다.
    • 태그는 문맥의 흐름 중 콘텐츠를 주제 별로 묶을 때 사용하지만, 태그 는 독립적인 하나의 콘텐츠이다.
    • 블로그 게시물, 뉴스 기사, 제품 리뷰 등이 있다.
    • <section>태그 안에 <article>을 넣어 도 되고, <article>태그 안에 <section>태그를 넣을 수도 있다.
  • <aside>
    • 웹 문서 왼쪽이나 오른쪽 또는 하단에 사이드 바 가 표시되는 것을 볼 수 있는데, 이런 사이드 바를 만드는 태그이다.
    • <aside>태그는 필수 요소는 아니며 광고나 일반적인 링크 모음처럼 문서의 메인 내용에 영향을 미치지 않는 내용을 넣을 때 사용한다.
  • <footer>
    • 웹 문서의 하단에 들어가며 저작권 표시와 같은 내용과 연락처 정보 등을 표시한다.
    • 도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크도 포함될 수 있다.

파비콘 삽입하기

<link rel="icon" alt=""/>
  • 웹사이트 주소창에 뜨는 아이콘, head내부에 link태그로 넣어줌

폰트 적용하기

  • head에 link로 넣는 방법

  • head에 넣어준 후, css에서 font-family를 설정해주어야한다.

'멋쟁이사자처럼 > CO:SSION' 카테고리의 다른 글

CO:SSION Week3 - Figma  (0) 2025.04.28
CO:SSION Week2 - Git  (0) 2025.04.05
CO:SSION Week2 - CSS  (0) 2025.04.05

티스토리툴바