본문 바로가기
오즈코딩스쿨

[OZ코딩스쿨] Part 3-4 웹 구조 및 서비스 데이터 추적_회고

msysena08 2026. 6. 25. 14:54

[DAY 43]

 

<개발 기초>

  • 웹 Web World Wide Web
    • 3대 구성 요소
      • HTML HyperText Markup Language : 웹 콘텐츠의 이미와 구조 정의 → 웹사이트의 뼈대, 화면에 들어갈 내용과 구조 (제목, 문장, 버튼 등)
      • CSS Cascading Style Sheets : 웹페이지의 모양/표현 담당 → HTML로 만든 구조 어떻게 보일지 정함 (색상, 글자 크기, 여백, radius, 정렬 방식, 배경색, 반응형 등), 보기 좋게 꾸며주는 역할
      • JavaScript : 웹페이지의 기능/동작 담당 → 사용자의 행동에 따라 반응 (클릭, 스크롤 등)
    • 동작 원리
      • 브라우저와 서버 간의 요청과 응답 프로세스 - 요청 Request, 응답 Response, 렌더링 Rendering

<개발 환경 세팅>

  • IDE 안티그래비티 설치
    • 안티그래비티 IDE 다운로드 > macOS 다운로드 > 구글 로그인 > 실행 후 Next > 인터페이스 설정 > Modern Web Guidance 체크 > 우측 AI 모델 설정 - Gemini Flash 선택
  • 플러그인 설치
    • 좌측 6번째 아이콘 ‘확장’ 클릭 > 한국어 모드 플러그인 설치 후 재실행 > 나머지 플러그인 설치
    • Prettier - 코드 포맷 자동 정리
    • Live Server - HTML 파일 실시간 웹 미리보기 제공
    • ESLint - 코드 문법 및 오류 검사 제공
    • HTML CSS Support - CSS 파일 속성 자동 완성 및 HTML CSS Class 가져다 쓸 수 있게 해줌
    • Auto Rename Tag - HTML 시작 태그 변경 시 자동으로 종료태그 변경
  • 폴더 생성
    • 우측 상단 ‘탐색’ 클릭 > ‘폴더 열기’ > ‘새로운 폴더’ > ‘생성’
    • 폴더 닫기 - 폴더 닫기 클릭 or Cmd + K > F

<주요 태그>

  • <!DOCTYPE html> : 브라우저에게 ‘이 문서는 최선 HTML 규칙으로 읽어주세요’라고 알리는 선언문
    • DOCTYPE 없으면 브라우저가 최신 HTML이 아닌 오래된 웹 표준 방식으로 페이지 해석할 수 O
    • 오류 방지 : 선언문이 없으면 여백, 크기, 정렬 등이 브라우저마다 다르게 보임
    • 문서 최상단에 한 줄만 작성하면 O
  • 사용 이유
    • 브라우저에게 의미 알려주기 위해
    • 화면에 올바르게 표시하기 위해
    • SEO 검색엔진이 내용을 이해할 수 있도록 최적화하기 위해
    • 접근성 높이기 위해
  • <h> : 제목 Heading - 숫자 작을수록 더 중요한 제목, 크면 하위 제목
  • <p> : 문단 Paragraph
  • <a> : 링크 Anchor - 외부 사이트로 연결할 때 사용
    • href : 링크의 주소 넣는 곳 - ‘여기 클릭’보다 어디로 가는지 드러나게 쓰기
    • target : 새 창 열기
  • <img> : 이미지 삽입 - 경로와 설명 필요
    • src : 이미지 파일의 경로(주소)
    • alt : 이미지가 로드되지 않을 때 대신 표시되는 대체 텍스트
  • <ul> : Unordered List 약자 순서 X
    • HTML, CSS, JavaScript
  • <ol> : Ordered List 약자 순서 O
    • 기획하기, 디자인하기, 개발하기
  • <li> : List Item 약자 목록 안에 들어가는 각각의 항목

[DAY 44]

 

<주요 태그>

  • <div> : 구역 나누기
  • 목적
    • 브라우저에게 의미 알려주기 위해
    • 화면에 올바르게 표시하기 위해 - 태그마다 역할 다르기 때문에 브라우저가 적절현 형태로 화면 보여줌
    • SEO(검색엔진)이 내용을 이해할 수 있도록 최적화하기 위해 - 태그별 역할과 위계를 파악함
    • 접근성을 높이기 위해
  • 블록(Block) 태그 요소 : <h1> ~ <h6> <p> <ul> <ol> <div> <header> <main> <footer>
    • 브라우저에게 의미 알려주기 위해 줄 전체를 차지함
    • 자동으로 줄바꿈됨
    • width, height, 설정 가능
    • 레이아웃 구성할 때 주로 사용
  • 인라인(Inline) 태그 요소 : <a> <img> <span> <strong> <em> <br>
    • 필요한 만큼의 공간만 차지
    • 줄바꿈 X
    • 텍스트 안에서 사용
  • 빈 태그(Empty Tag), (Self-closing Tag) = 예외 : 닫는 태그가 없는 태그 : <img> <br> <hr> <input> <link> <meta> <source> <area> <col> <embed>
  • 문법 - <h1> 태그 이름, 시작 태그 + Text 콘텐츠 + </h1> 종료 태그

<css>

  • h1 선택자{color스타일 속성:#5f5f5f;} 스타일 값
  • .card : Classs는 여러 곳에 사용 가능 = 교실, 반
  • #card : ID는 한 곳에만 사용 가능 = 주민등록증 고유의 값

<텍스트 스타일링>

  • color - 글자 색상 변경 - 정보의 중요도와 분위기 전달 - Fill
  • font-size - 글자 크기 조절 - 정보의 위계 구분 - Size
  • font-weight - 글자 굵기 조절 - 제목이나 중요한 내용 강조 - Weight (Regular, Medium, Bold)
  • text-align - 텍스트 정렬 설정 - 콘텐츠 보기 좋게 배치 - Alignment
  • line-height - 줄과 줄 사이의 간격 조절 - 가독성 높이고 읽기 쉽게 만듦 - Line Height
  • letter-spacing - 글자와 글자 사이의 간격을 조절 - 제목이나 로고 등의 분위기 조절 - Letter Spacing

<Box Model>

  • margin - 요소 외부 여백을 설정 - 요소와 요소 사이 간격 확보
  • padding - 요소 내부 여백을 설정 - 콘텐츠와 테두리 사이 간격 확보 - Padding
  • gap - 자식 요소 사이 간격 설정 (display : flex; display : grid;일 때 적용 가능) - 요소 간 일정한 간격 유지 - Gap / Spacing
  • width - 요소의 가로 크기 설정 - 콘텐츠의 너비 조절 - Width(W)
  • height - 요소의 세로 크기 설정 - 콘텐츠의 높이 조절 - Height(H)
  • border - 요소의 테두리 설정하는 속성 - 영역 구분하고 강조 - Stroke
  • border-radius - 모서리 둥글게 만드는 속성 - 부드러운 UI 표현 - Corner Radius

<Flex Layout>

  • display: flex - 요소를 Flex 컨테이너로 만드는 속성 - 자식 요소를 가로 또는 세로로 쉽게 배치 - auto layout
  • justify-content - 주축 main axis 방향 정렬 - 좌우로 정렬 (가로가 main axis) - alignment
  • align-items - 교차축 cross axis 방향 정렬 - 상하로 정렬 (세로가 cross axis) - alignment
  • gap - 자식 요소 사이 간격 설정 (display : flex; display : grid;일 때 적용 가능) - 요소 간 일정한 간격 유지 - Gap
  • flex-direction - 요소 배치 방향 설정 - 가로 또는 세로 배치 변경 (row 가로, column 세로) - Horizontal 가로, Vertical 세로

<이미지 스타일링>

  • width - 이미지의 가로 크기 설정 - 이미지 너비 조절하거나 부모 영역에 맞춤 - width : Fill(%) Fixed(px)
  • height - 이미지의 세로 크기 설정 - 이미지 높이 조절 - height
  • object-fit - 이미지가 영역 안에 채워지는 방식 설정하는 속성 - 이미지 비율 유지 및 잘림 제어 - Fill / Fit
  • border-radius - 이미지 모서리 둥글게 만드는 속성 - 프로필 이미지나 카드 디자인 구현 - corder radius

[DAY 45]

 

<시맨틱 태그>

  • <header> : 머리글
    • 상단 부분 - 로고, 제목, 검색창, 메뉴 버튼 등
  • <nav> : 길 안내
    • 네비게이션 링크 모음 - 메인 메뉴, 목차, 색인 등
  • <main> : 핵심 본문(페이지당 한번만 사용)
    • 페이지마다 바뀌는 중요한 내용 들어가는 곳, 유일하고 중심적인 콘텐츠
  • <article> : 그 자체로 독립적인 내용이 되는 콘텐츠 정의
    • 블로그 포스터, 뉴스 기사, 댓글 등
  • <section> : 주제별 연관 콘텐츠 군집
    • 서비스 소개, 특징 목록, 뉴스 섹션 등
  • <aside> : 본문 옆의 보조 정보
    • 주요 내용과는 별개인 사이드바나 주변 정보 - 광고, 관련 링크, 태그 클라우드 등
  • <footer> : 문서나 구획의 바닥글
    • 페이지나 섹션의 하단 부분 - 저작권 정보, 연락처, 사이트 맵 등
  • <details> + <summary> : 펼치고 접을 수 있는 정보
    • 숨겨진 내용을 만들 때 사용하는 태그, 자바스크립트 없이도 동작, FAQ, 스포일러 방지 글, 복잡한 상세 옵션 숨기기 등
  • <figure> & <figcaption> : 독립적인 미디어와 설명
    • 사진, 도표, 코드 등 독립적 미디어 감싸는 상자 / 상자에 대한 설명
  • <mark> : 관련성 강조
    • 텍스트 시각적으로 드러나게, 중요성보다는 현재 맥락에서의 관련성 강조
  • <time> : 날짜 / 시간
    • 사용자에게는 읽기 쉬운 텍스트, 컴퓨터에게는 정확한 시간 정보 제공 (게시글 작성 날짜, 이벤트 시작 시간, 기념일 같은 정보를 표준화된 값으로)
  • <form> : 입력 구획
    • 사용자로부터 정보를 입력받는 영역 / 로그인, 검색, 댓글 작성처럼 데이터 입력 후 서버로 전송하는 행위

[DAY 46]

 

  • 실습한 깃허브 주소

⛓️[웹 포트폴리오] 실습 :  https://minsena.github.io/web-portfolio/**

⛓️[바이브코딩] 실습 : https://minsena.github.io/Stardew-Valley-Guide-by-SINEMA/

[DAY 47]

 

<Github 배포>

  • 로그인 > 좌측 상단에 Create Repository 클릭 > 이름 설정 > Add Readme 활성화 > Create Repository > Add file에 Upload File > 파일 업로드 (html, js, css) > Commit changes - 이름 입력 후 > Commit changes 클릭
  • Settings > Pages에 Source - Deploy from a branch > Branch - main, /root, save > “GitHub Pages source saved” 메시지 뜨면 성공 > 약 1~2분 후 페이지 새로고침 > Visit Site 클릭

'오즈코딩스쿨' 카테고리의 다른 글

[OZ코딩스쿨] Part 3-3 생성형 AI 활용한 데이터 분석(ChatGPT)_회고  (0) 2026.06.19
[OZ코딩스쿨] 스탠포드가 가르치는 AI 생산성 10배 높이는 방법 | 제레미 어틀리 핵심 정리  (0) 2026.06.16
[OZ코딩스쿨] Part 3-2 문제 발굴과 데이터 스크래핑/시각화_회고 (2)  (0) 2026.06.12
[OZ코딩스쿨] Part 3-2 문제 발굴과 데이터 스크래핑/시각화_회고 (1)  (0) 2026.06.12
[OZ코딩스쿨] Part 3-1 IT 직무 이해와 커뮤니케이션/협업_회고  (0) 2026.06.05

'오즈코딩스쿨' Related Articles

티스토리툴바