SteadyDrills

웹 개발 - 웹 페이지의 구성 요소 본문

웹개발

웹 개발 - 웹 페이지의 구성 요소

Drills 2024. 8. 19. 22:11

 

목차

     

     

     

    240819

    출처: https://www.linkedin.com/pulse/building-blocks-web-development-html-css-javascript-sahil-kavitake

     

     

    HTML(Hyper Text Markup Language)

    HTML(Hyper Text Markup Language)이란?

    흔히 말하는 웹 페이지의 뼈대를 구성하는 언어로, 웹 페이지의 내용과 구조를 정의 마크업 언어이다.
    또한 HTML은 웹 문서를 정의하는 태그들로 구성되어 있으며, 각 태그는 문서의 속성을 나타낸다.

     

     

    HTML(Hyper Text Markup Language)의 구성

    태그(Tag)
    -열기 태그와 닫기 태그로 구성 ex) <열기Tag> </닫기Tag>
     웹 페이지의 콘텐츠를 구조화하는 데 사용.
    속성(Attribute)

    -HTML 태그는 추가적인 정보를 제공하기 위해 속성을 가짐.

     태그의 기능을 조절하거나 내용을 수정하는 데 사용.

     

    <!--HTML 예시 -->

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 페이지 제목</title>
</head>
<body>
    <h1>여기에서 제목을 입력하세요</h1>
    <p>여기에 단락을 입력하세요.</p>
    <!--href 속성 (하이퍼링크의 대상 URL을 지정) -->
    <a href="https://www.example.com">링크 텍스트</a>
</body>
</html>

     

     

     

    CSS(Cascading Style Sheets)

    CSS(Cascading Style Sheets)란?

    작성된 웹 문서의 스타일을 정의하고 제어하는 언어. CSS는 웹 페이지의 시각적 요소, 즉 레이아웃, 색상, 글꼴, 여백, 테두리 등을 설정하는 데 사용.  CSS는 HTML이 정의한 구조와 콘텐츠가 화면에 어떻게 보일지를 결정한다.

     

     

    CSS (Cascading Style Sheets) 적용 방법

    • 인라인 스타일 (Inline CSS):

    HTML 요소에 직접 스타일을 적용하는 방법.

    <!-- 예시 -->
<p style="color: blue; font-size: 14px;">파란색 텍스트</p>
    • 내부 스타일 (Internal CSS):

    HTML 문서의 <head> 섹션 내 <style> 태그 안에 CSS 코드를 작성하는 방법.

    <style>
	/* 주석 */
	p {
    color: blue;
  }
</style>
    • 외부 스타일 (External CSS):

    별도의 CSS 파일을 작성하고 HTML 문서에서 링크하여 사용하는 방법.

    <link rel="stylesheet" href="styles.css">

     

     

    JavaScript

    JavaScript란? (js)

    웹 페이지의 동적 동작을 제어하는 프로그래밍 언어.
    JavaScript는  웹 페이지에 생동감을 더해주며,
    페이지의 내용이나 구조를 동적으로 변경하거나 사용자와의 상호작용을 처리.

     

    JavaScript 적용

    • <script> 태그
      • JavaScript 코드를 HTML 문서에 포함시키기 위해 <script> 태그를 사용
      • <script> 태그는 HTML 문서의 <head> 태그 내부나 <body> 태그 내부에 배치 가능
      • 외부 JavaScript 파일을 링크하는 것도 가능
    • 내부 스크립트

    HTML 문서의 태그 내부나 태그 내부에 배치하는 방법.

    <script>
	console.log("Hello, world!");
</script>
    • 외부 스크립트

    별도의 JS 파일을 작성하고 HTML 문서에서 링크하여 사용하는 방법.

    <script src="script.js"></script>

     

     

     

    *JavaScript를 선언하는 script 태그의 위치로 적절한 곳

     

    ● 문서의 <head> 태그 내에 위치

     

    (장점)
    초기화된 자바스크립트: 스크립트가 페이지 로딩 이전에 로드되므로, 초기화된 JavaScript가 바로 사용할 수 있음. 예를 들어, 페이지 로딩 이전에 이벤트 핸들러를 설정해야 할 경우 유리
    SEO(검색 엔진 최적화): 검색 엔진 크롤러가 페이지의 스크립트를 쉽게 인식하고 분석할 수 있음
    (단점)

    렌더링 지연: 스크립트 파일이 크면 페이지 로딩 속도가 느려질 수 있음 (스크립트를 로드하고 실행하는 동안 HTML 렌더링이 차단되기 때문) ➡️ 사용자의 부정적인 경험(느린 로딩)

     

     

    ● 문서의 <body> 태그 끝에 위치

    (장점)
    빠른 페이지 로딩: HTML 콘텐츠가 먼저 로드되므로 페이지가 빠르게 보임 JavaScript는 콘텐츠가 모두 로드된 후에 실행되므로 렌더링이 차단되지 않음.
    (단점)
    초기화 문제: JavaScript가 HTML 요소를 조작하기 전에 로드될 때까지 기다려야 하기 때문에, 페이지 초기화 시점에 문제 발생.

     

     

    ●  <head>에 defer 또는 async 속성을 사용

    장점(defer)
    병렬 로드: HTML 로드와 JavaScript 로드를 병렬로 진행. 그러나 JavaScript는 HTML이 모두 파싱 된 후에 실행되므로 렌더링을 방해하지 않음.
    안전한 DOM 접근: HTML이 완전히 로드된 후에 스크립트가 실행되므로, DOM을 안전하게 조작 가능.

    장점 (async)
    병렬 로드 및 즉시 실행: 스크립트가 로드되는 즉시 실행. 이 방법은 스크립트 간의 의존성이 없을 때 유용.

     

    단점
    스크립트 순서:     async를 사용할 경우, 스크립트 로드 순서가 보장되지 않음. 이는 스크립트 간 의존성이 있을 때 문제가 될 수 있음.

    '웹개발' 카테고리의 다른 글

    장고 프로젝트(: spartamaket) - 검색기능 구현  (0) 2024.08.27
    장고 프로젝트(: spartamaket) - 프로필 이미지 삽입기능 & 기본값(default)  (0) 2024.08.27
    장고 프로젝트(: spartamaket) - 목록 정렬기능 구현  (0) 2024.08.23
    [TIL]웹 구조 기본  (0) 2024.08.13
    Django란?  (0) 2024.08.09
    '웹개발' Related Articles more