웹페이지의 구성

Ryan·2025년 1월 28일

Python/Pandas

목록 보기

7/23

1. HTML: 구조와 구성

1.1 문서 구조

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html>: HTML 문서 전체를 감싸는 루트(Root) 요소.
<head>: 문서에 대한 메타데이터(제목, CSS 파일, JS 파일, 인코딩 정보 등)를 포함.
<body>: 실제 화면에 표시되는 콘텐츠(텍스트, 이미지, 버튼 등)를 담습니다.

추가 설명

<meta charset="UTF-8"> 과 같은 문자인코딩 설정은 한글이 깨지지 않도록 해주는 중요한 설정입니다.

<title>문서 제목</title>은 브라우저의 탭이나 북마크에서 보여지는 문서 이름을 지정합니다.

1.2 텍스트 및 제목

<h1> ~ <h6>: 제목을 나타내는 태그. <h1>이 가장 큰 제목이며, <h6>는 가장 작은 제목입니다.
<p>: 단락(문단)을 표현합니다.
<span>: 인라인 요소로서 특정 텍스트를 구분하거나 스타일을 적용할 때 사용합니다.

추가 설명

제목 태그 <h1>부터 <h6>는 검색 엔진 최적화(SEO) 측면에서도 중요합니다. 문서 구조를 명확히 하면 검색 엔진이 콘텐츠를 더 잘 파악할 수 있습니다.

1.3 레이아웃 및 섹셔닝

<div>: 블록 레벨 요소로, 구역(섹션)을 그룹화할 때 가장 많이 사용됩니다.
<main>, <section>, <header>, <footer>: HTML5에서 추가된 의미론적 태그로, 문서 구조를 더욱 명확하게 구분할 수 있습니다.

1.4 리스트와 링크

<ul>(순서 없는 리스트), <ol>(순서 있는 리스트)
- <li>: 리스트 아이템을 나타냅니다.
<a>: 하이퍼링크를 만드는 태그로, href 속성에 이동할 주소(URL)을 설정합니다.

1.5 인터랙티브 요소

<button>: 클릭 가능한 버튼을 만듭니다.
<input>, <label>: 폼(form) 관련 요소로, 사용자 입력을 받을 수 있습니다.

1.6 HTML 작성 예제


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>페이지 제목</title>
</head>
<body>
  <h1>여기는 제목입니다.</h1>
  <p>여기는 문장입니다.</p>
</body>
</html>

2. CSS: 디자인과 스타일링

2.1 CSS 핵심 개념

선택자(Selector): 어떤 HTML 요소에 스타일을 적용할지 선택합니다. 예) body, h1, .className, #idName
속성(Property): 적용할 스타일 종류를 지정합니다. 예) color, font-size, margin, padding
값(Value): 속성에 실제로 적용되는 값. 예) color: red; → 빨간색으로 지정

2.2 스타일 적용 예시

타입(요소) 선택자: h1 { color: red; }
클래스 선택자: .title { font-size: 24px; }
ID 선택자: #main { background-color: #f0f0f0; }

2.3 디자인 시 고려 사항

가독성: 글꼴, 글자 크기, 줄 간격(line-height)을 적절히 조정합니다.
컬러 팔레트: 메인 컬러, 서브 컬러를 미리 정해 일관성 있게 사용합니다.
반응형 디자인: 다양한 기기(모바일, 태블릿, PC)에서 올바르게 표시되도록 미디어쿼리를 고려합니다.

추가 설명

CSS 전처리기(Sass, LESS)나 CSS 프레임워크(Bootstrap, Tailwind CSS)를 사용하면 보다 효율적으로 스타일을 관리할 수 있습니다.

2.4 CSS 작성 예제


body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

3. JavaScript: 동작과 기능

3.1 JavaScript 핵심 개념

DOM(Document Object Model) 조작: HTML 요소를 선택하고 변경하는 방법.
- 예) document.querySelector(), getElementById() 등을 사용해 요소에 접근
이벤트 처리: 클릭, 마우스오버, 스크롤 등과 같은 사용자 동작을 감지하고 대응하는 로직 수행.

3.2 사용자 상호작용 예시

버튼 클릭 시 알림창 띄우기
마우스오버 시 특정 요소 강조(스타일 변경)
입력 폼을 제출할 때 데이터 유효성 검사

3.3 보안과 검증(비밀번호 처리)

비밀번호나 민감 정보는 클라이언트(브라우저)가 아닌 서버에서 주로 검증합니다.
JavaScript로는 형식 검사나 UI 상 인터랙션 정도만 담당하는 것이 일반적입니다.

추가 설명

만약 문을 잠그거나 열 때 쓰는 ‘비밀번호 기능’을 만든다면, JavaScript 단에서 임시로 입력 값을 확인하고, 실제 로직은 서버나 백엔드 시스템에서 처리하는 것이 안전합니다.

3.4 JavaScript 작성 예제


document.querySelector("button").addEventListener("click", function() {
  alert("버튼이 눌렸습니다!");
});

4. HTML, CSS, JavaScript의 협업

4.1 협업 예제 코드


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>웹 페이지 예제</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .button:hover {
      background-color: darkblue;
    }
  </style>
</head>
<body>
  <h1>HTML, CSS, JavaScript의 협업</h1>
  <!-- onclick 속성을 통해 바로 JavaScript 함수를 호출 가능 -->
  <button class="button" onclick="alert('안녕하세요!')">클릭</button>
</body>
</html>

4.2 페이지 구조, 스타일, 동작 결합

HTML로 버튼을 생성(구조).
CSS로 버튼의 색상, 크기, 모양 등을 지정(디자인).
JavaScript로 버튼 클릭 시 팝업 띄우기(동작).

5. 정리 및 추가 팁

HTML은 웹 페이지의 뼈대(구조)를 담당합니다.
CSS는 뼈대에 디자인(색, 크기, 위치, 레이아웃)을 입히는 역할을 합니다.
JavaScript는 페이지를 동적이고 반응형으로 만들어 줍니다(이벤트 처리, 데이터 검증, 페이지 조작 등).
코드 작성 순서: 구조(HTML) → 디자인(CSS) → 동작(JS)으로 진행하면 큰 그림이 잡히고 효율적으로 개발할 수 있습니다.
유지보수 편의성:
- CSS 파일, JS 파일을 분리해서 관리하면 협업에 유리합니다.
- 클래스와 ID를 신중하게 정의해서 CSS, JS가 쉽게 접근하도록 합니다.

추가로 알아두면 좋은 것들

반응형 웹을 위해 @media 쿼리를 배우고 적용하면 모바일 환경에서도 깔끔한 레이아웃을 만들 수 있습니다.

접근성(Accessibility): 시각장애인을 위한 스크린 리더나 키보드 내비게이션, 색맹을 고려한 디자인 등 접근성 표준(ARIA 속성 등)을 충족하는 것이 중요합니다.

프레임워크 & 라이브러리: React, Vue, Angular 같은 JS 프레임워크를 사용하면 규모가 큰 프로젝트에서 구성 요소를 체계적으로 관리할 수 있습니다.

한눈에 보는 스터디 요약

HTML: 시멘틱 태그(의미론적 태그)를 잘 활용하여 구조를 명확히 잡기.
CSS: 선택자, 박스 모델, 레이아웃(Flexbox, Grid)을 중점적으로 학습.
JavaScript: DOM 조작, 이벤트 처리, 데이터 검증 로직에 집중.
협업: 파일을 분리하고, 코드의 가독성과 유지보수성을 항상 고려.

이상으로, HTML, CSS, 그리고 JavaScript를 이용한 웹 개발의 기초를 스터디 노트 형태로 정리해 보았습니다.

Ryan

이전 포스트

실습 - 축구 선수 데이터셋 살펴보기

다음 포스트

웹페이지의 구성

Python/Pandas

1. HTML: 구조와 구성

1.1 문서 구조

1.2 텍스트 및 제목

1.3 레이아웃 및 섹셔닝

1.4 리스트와 링크

1.5 인터랙티브 요소

1.6 HTML 작성 예제

2. CSS: 디자인과 스타일링

2.1 CSS 핵심 개념

2.2 스타일 적용 예시

2.3 디자인 시 고려 사항

2.4 CSS 작성 예제

3. JavaScript: 동작과 기능

3.1 JavaScript 핵심 개념

3.2 사용자 상호작용 예시

3.3 보안과 검증(비밀번호 처리)

3.4 JavaScript 작성 예제

4. HTML, CSS, JavaScript의 협업

4.1 협업 예제 코드

4.2 페이지 구조, 스타일, 동작 결합

5. 정리 및 추가 팁

한눈에 보는 스터디 요약

실습 - 축구 선수 데이터셋 살펴보기

CSS 기초

0개의 댓글