책으로 공부하는 비전공자 코딩 챌린지 2일차 - HTML 구조와 코딩 상식

2022. 11. 23. 12:52·Etc/코딩 챌린지

* 주석: 컴퓨터가 인식하지 못하며 개발자에게 설명을 제공하는 글이다.

 ctrl + / 키를 사용해 주석처리할 수 있다.

언어 HTML CSS JavaScript
주석 형태 <!----> /**/ 단일주석 : // , 여러줄: /**/

* 태그: 꼬리표라는 뜻으로 웹 문서에 정보를 정의해주는 형식이다. <> 태그로 데이터를 감싸 데이터 형식과 의미를 브라우저에게 알려준다.

 

여는 태그와 닫는 태그가 존재하며 닫는 태그는 </head>와 같은 </> 형태로 작성한다.

 

참고하면 좋은 사이트

1. https://developer.mozilla.org/ko/2.

 

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

2. https://www.w3schools.com/

 

W3Schools Free Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

3. https://stackoverflow.com/

 

Stack Overflow - Where Developers Learn, Share, & Build Careers

Stack Overflow | The World’s Largest Online Community for Developers

stackoverflow.com

- 스택 오버플로우는 개발 지식인 사이트이다.

HTML 구조

- 비주얼 스튜디오 코드에서 index.html파일을 만들었을 때 기본적으로 생성되어 있는 구조이다.

- 파일 명은 index.html을 기본으로 한다.

- 코드창에   ! + Tap  키를 누르면 아래와 같이 기본 구조가 만들어진다.

① <!DOCTYPE html>

모든 html문서의 시작 선언으로 문서 유형에 대한 정보를 브라우저에게 알려주는 역할을 한다.

② <html lang = "en"> 

lang은 웹의 인식 언어 설정이다. en=영어 ko=한국어 zh=중국어 ja=일본어

③  head 태그

여기에 작성한 정보는 페이지에 표시되지 않으며 메타데이터를 제공한다.

 

1. title 태그 : html 문서의 제목을 표현

2. meta태그 : 메타데이터(데이터를 설명하는 데이터)를 알려준다.

`

<meta charset = "UTF-8"> 

charset은 문자열을 나타내며 안에 들어가는 속성 값 UTF-8은 유니코드를 위한 문자 인코딩 방식을 나타낸다.

 

<meta name = "description" content = " ">

name은 메타요소가 어떤 형태의 정보를 갖고 있는지 나타낸다.

name="description"일 때 content는 실제 메타 데이터의 요소이다. 사이트의 소개 문구라고 생각하면 된다.

 

<meta name = "viewport" content = "width=device-width, initial-scale=1">

viewport는 요소를 볼 수 있는 화면을 뜻한다.

일반적으로 웹 페이지는 화면보다 크거나 길다. 브라우저가 스크롤 기능을 제공하기 때문에 사용할 수 있는 것인데 위 device-width와 initial-scale=1은 기기별 화면에 크기를 맞춘다는 의미이다.

 

 코딩 상식 (용어) 

1. 코딩 vs 프로그래밍

코딩은 컴퓨터에 명령(코드)를 작성하는 일이다.

프로그래밍은 코딩을 포함해 분석 및 구현, 디버깅, 컴파일, 테스트, 구현 등 원하는 프로그래밍을 만드는 모든 영역 포함한다.

 

2. 웹페이지 vs 웹 사이트

웹페이지는 하이퍼 텍스트로 작성된 문서로 대부분 html로 작성되어 있다.

웹 사이트는 URL 기반으로 인터넷에서 서비스되는 웹 페이지의 집합이다.

 

3.URL & WWW

URL(uniform resource locator): 네트워크에서 자원의 위치를 알려주는 규약으로 웹페이지 주소라고 한다.

WWW: url의 시작 주소로 인터넷에서 하이퍼텍스트 문서를 제공하는 시스템이다. 

 

4. 컴퓨터 언어(프로그래밍 언어)

프로그래밍 언어는 컴퓨터에 명령을 내리는 언어이다. 참고로 html, css는 단독으로 프로그램을 만들 수 없기 때문에 프로그래밍 언어가 아니다. html은 하이퍼텍스트 문서를 코딩하는 언어이며 하이퍼 텍스트 문서는 브라우저가 문서를 해석해서 결과를 보여주는 데 사용될 뿐 자체적으로 프로그램이 될 순 없다.

 

'Etc > 코딩 챌린지' 카테고리의 다른 글

프로그래머스 코딩테스트 - 배열 중간값 구하기 (Array.sort , 시프트연산)  (0) 2023.08.25
VScode에서 프로젝트 Git Hub에 업로드하기 & 배포하기  (0) 2023.03.14
책으로 배우는 비전공자 코딩 챌린지 4일차 - HTML 태그와 특징(inline & box요소)  (0) 2022.11.24
책으로 배우는 비전공자 코딩 챌린지 3일차 - VSCode 확장 프로그램 추천  (0) 2022.11.23
책으로 공부하는 비전공자 코딩 챌린지 1일차 - 웹 용어와 HTML  (0) 2022.11.23
'Etc/코딩 챌린지' 카테고리의 다른 글
  • VScode에서 프로젝트 Git Hub에 업로드하기 & 배포하기
  • 책으로 배우는 비전공자 코딩 챌린지 4일차 - HTML 태그와 특징(inline & box요소)
  • 책으로 배우는 비전공자 코딩 챌린지 3일차 - VSCode 확장 프로그램 추천
  • 책으로 공부하는 비전공자 코딩 챌린지 1일차 - 웹 용어와 HTML
시녜's
시녜's
성장중인 새싹 개발자 🌱
  • 시녜's
    개발기록
    시녜's
  • 전체
    오늘
    어제
    • 분류 전체보기
      • FE
        • React
        • javascript(jQuery)
        • HTML & CSS
      • BE
        • Java [Servlet , Spring]
        • C & C++
        • Node.js
        • node.js
        • SQL (Oracle, mysql)
      • CS
        • 프로그래밍 이론(정보처리기사)
      • OS
        • Linux
      • Etc
        • 코딩 챌린지
        • 개발 성장 일지
        • 코딩테스트
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바기초
    jsp
    자바배열
    코테기초
    프로그래밍
    자바반복문
    mysql
    백준코딩테스트
    자바
    자바문자열
    코딩입문
    jquery
    CharAt함수
    자바스크립트
    React
    백준브론즈
    백준단계별문제
    스프링
    백준문제풀이
    자바조건문
    코딩기초
    코딩테스트입문
    리액트
    코테
    제이쿼리
    백준
    Java
    코딩테스트
    javascript
    html
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
시녜's
책으로 공부하는 비전공자 코딩 챌린지 2일차 - HTML 구조와 코딩 상식
상단으로

티스토리툴바