본문 바로가기
웹 프로그래밍/기초

웹 프로그래밍 기초 1일

by JJong | 쫑 2024. 5. 18.

chatGPT와 코드잇 강의를 보며 공부.

개인적으로 HTML - CSS - JS 순으로 공부하는게 좋을 것 같아서 HTML, CSS를 병행하고 JS는 차차 공부해볼 생각.

우선, 평소에 궁금해 했던 내용들 먼저 질문

 

1.

Q. html에선 태그를 왜 붙여야할까?

A. 가독성, 유지보수도 있지만 검색엔진에 효과적으로 노출될 수 있음. SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정 이라고 함.

 

2.

Q. <link rel="stylesheet" href="csstest.css"> 이 부분에서 <link rel="stylesheeeeet" href="csstest.css"> 으로 수정했더니, css파일이 제대로 링크되지 않았어. 'rel'이 의미하는건 무엇이고, rel에는 정해진 이름들로만 대입해야하는거야?

A. 네, rel 속성은 HTML 문서와 외부 리소스의 관계를 정의하는 속성입니다. rel 속성에 사용되는 값은 미리 정의된 값들로 제한되며, 브라우저는 이 값을 통해 링크된 리소스의 종류와 목적을 이해합니다. 따라서, 올바른 값을 사용해야 브라우저가 리소스를 올바르게 처리할 수 있습니다.

더보기

주요 rel 값들

여러 rel 값들이 있지만, 몇 가지 중요한 값들을 소개하면 다음과 같습니다:

  • stylesheet: CSS 스타일시트를 링크합니다.
  • icon: 사이트 아이콘(파비콘)을 링크합니다.
  • alternate: 대체 문서를 링크합니다. 예를 들어, 다른 언어 버전의 페이지를 링크할 때 사용합니다.
  • preload: 리소스를 미리 로드하여 페이지 로딩 성능을 향상시킵니다.
  • prefetch: 나중에 사용될 리소스를 미리 가져와 캐시에 저장합니다.
  • dns-prefetch: 특정 도메인의 DNS 정보를 미리 가져옵니다.

 

1. <body> 태그의 역할

<body> 태그는 HTML 문서의 본문을 정의합니다. 즉, 사용자가 브라우저에서 보게 되는 모든 콘텐츠는 <body> 태그 안에 포함되어야 합니다.

주요 이유:

  • 명확한 구조: HTML 문서의 구조를 명확히 정의하여 유지보수와 가독성을 높입니다.
  • 브라우저 렌더링: 브라우저는 <body> 태그를 기준으로 콘텐츠를 렌더링합니다. <body> 태그가 없으면 일부 브라우저는 문서를 올바르게 렌더링하지 못할 수 있습니다.
  • 검색 엔진 최적화(SEO): 검색 엔진은 <body> 태그 안의 내용을 콘텐츠로 인식하고 인덱싱합니다. 구조화된 문서는 검색 엔진이 더 잘 이해할 수 있습니다.

2. <head> 태그의 역할

<head> 태그는 HTML 문서에 대한 메타데이터를 포함합니다. 이 메타데이터는 문서의 제목, 스타일, 스크립트, 메타 정보를 정의합니다.

주요 이유:

  • 메타데이터 제공: <title>, <meta>, <link>, <style>, <script> 등의 태그를 포함하여 문서에 대한 정보를 제공합니다.
  • SEO: <meta> 태그를 통해 검색 엔진에 중요한 정보를 제공합니다. 예를 들어, 문서의 설명, 키워드, 저자 등을 정의할 수 있습니다.
  • 외부 리소스 연결: CSS, JavaScript 파일 등을 링크하여 문서의 스타일과 기능을 확장합니다.
  • 문서 설정: <head> 태그는 브라우저가 문서를 해석하는 데 필요한 정보를 제공합니다. 예를 들어, <meta charset="UTF-8"> 태그는 문서의 문자 인코딩을 정의합니다.

중요 태그 설명

  • <!DOCTYPE html>: HTML5 문서를 선언합니다.
  • <html lang="en">: 문서의 언어를 정의합니다.
  • <head>: 메타데이터, 제목, 외부 리소스 링크 등을 포함합니다.
  • <meta charset="UTF-8">: 문서의 문자 인코딩을 설정합니다.
  • <title>: 브라우저 탭에 표시될 문서의 제목을 정의합니다.
  • <link rel="stylesheet" href="styles.css">: 외부 CSS 파일을 링크합니다.
  • <script src="script.js"></script>: 외부 JavaScript 파일을 링크합니다.
  • <body>: 문서의 본문을 정의하며, 사용자가 보게 될 모든 콘텐츠를 포함합니다.

 

3.

Q. 오, 추가로 궁금한게 생겼어. <html lang="en"> 대신, <html lang="ko">를 넣으면 기존의 en과 무슨 차이가 생기는거야? html 작성을 한글로 할 수 있게 되는게 아니잖아. 문서 내용이 ko라고 알리는걸까?

A. <html lang="ko">를 사용하면 HTML 문서의 기본 언어가 한국어(ko)임을 브라우저와 검색 엔진, 그리고 보조 기술(예: 스크린 리더)에게 알리는 역할을 합니다. 이 속성은 문서의 내용을 한글로 작성할 수 있게 해주지는 않지만, 여러 가지 중요한 용도로 사용됩니다.

더보기

주요 역할과 차이점

  1. 브라우저의 언어 설정:
    • <html lang="ko">를 사용하면 브라우저는 문서의 기본 언어가 한국어임을 인식합니다. 이 정보는 맞춤법 검사, 폰트 렌더링, 그리고 페이지의 기본 텍스트 방향(좌에서 우)이 한국어에 맞게 조정되도록 도와줍니다.
  2. 검색 엔진 최적화(SEO):
    • 검색 엔진은 문서의 언어 정보를 통해 해당 문서를 적절한 언어로 인덱싱하고, 검색 결과에서 올바른 언어로 제공할 수 있습니다. 예를 들어, 한국어를 사용하는 사용자가 검색할 때 해당 문서가 더 적절하게 노출될 수 있습니다.
  3. 보조 기술(Accessibility):
    • 스크린 리더와 같은 보조 기술은 lang 속성을 통해 문서의 기본 언어를 인식하고, 그에 맞는 발음 규칙을 적용하여 더 정확한 음성 출력을 제공할 수 있습니다. 예를 들어, 영어로 설정된 스크린 리더가 한국어 문서를 만났을 때, lang="ko" 속성을 통해 발음과 억양을 한국어에 맞게 조정합니다.
  4. 국제화 및 현지화:
    • 다국어 사이트의 경우, 문서의 기본 언어를 명확히 지정함으로써 사용자 경험을 향상시킬 수 있습니다. 예를 들어, <html lang="ko">는 한국어 사용자에게 친숙한 환경을 제공합니다.

 

chatGPT한테 메모장 코딩 팁을 받았다.

더보기

3. 메모장 사용 시 팁

메모장을 사용할 경우 코드 작성과 디버깅이 불편할 수 있지만, 몇 가지 팁을 통해 작업 효율을 높일 수 있습니다.

  • 파일 확장자: 파일을 저장할 때 .html, .css, .js 확장자를 사용하세요. 예: index.html, styles.css, script.js
  • 브라우저로 테스트: 작성한 HTML 파일을 브라우저에서 열어 결과를 확인하세요.
  • 간단한 템플릿: HTML 파일을 작성할 때 기본 템플릿을 사용하면 도움이 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 여기에 CSS를 작성하세요 */
    </style>
</head>
<body>
    <!-- 여기에 HTML을 작성하세요 -->

    <script>
        // 여기에 JavaScript를 작성하세요
    </script>
</body>
</html>
 

내 웹을 인터넷에 올리기.

netlify에서 내 html, css, js 파일이 있는 폴더를 업로드하면 웹을 인터넷에 올릴 수 있음.

STUDY WEB

Study web

  1. HTML
  2. css
  3. javascript

explaination

여기에 각 언어의 특징을 설명해줄 겁니다.
It will explain the characteristics of each languages here.
STUDY WEB

Study web

  1. HTML
  2. css
  3. javascript
STUDY WEB

Study web

  1. HTML
  2. css
  3. javascript
STUDY WEB

Study web

  1. HTML
  2. css
  3. javascript

이렇게 네 개의 html 파일을 만들어서 각 언어별 설명을 볼 수 있게 하이퍼링크를 걸어봤다.

 

저작자표시

'웹 프로그래밍 > 기초' 카테고리의 다른 글

웹 프로그래밍 기초 4일 - 피아노 건반 구현🎹  (0) 2024.05.26
HTML - 클래스 특징  (0) 2024.05.26
웹 프로그래밍 기초 3일 - 스도쿠 채점기  (0) 2024.05.22
HTML - 하이퍼링크 걸기  (0) 2024.05.22
웹 프로그래밍 기초 2일  (0) 2024.05.19

관련글

댓글

티스토리툴바