웹 프론트엔드

웹 기초1

토리쟁이 2022. 6. 2. 00:51

<웹을 구성하는 요소>

 

웹사이트 제작 == 건물 짓기

웹사이트를 제작하는데에는 HTML, CSS, JavaScript가 필요하다.

웹 기초1에서는 HTML에 대한 정말 기초적인 부분만 다루어보도록 하겠다.

먼저 HTML이란 무엇일까?

1. HTML

  • 정보 또는 설계도 (건물 설계도)
  • 프로그래밍 언어가 아닌 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
  • 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
  • HTML은 요소들로 구성되어 있으며, 여는 태그, 닫는 태그, 내용을 통틀어 요소라고 함(요소는 대소문자 구분x)
  • HTML 태그들로 구성되어 있으며, 각각의 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됨

 

 

<HTML 요소의 구조>

<열린태그 속성="속성값"> 컨텐츠 </닫힌태그>

 

  • 태그명: HTML이 갖고 있는 고유한 기능
  • <열린태그></닫힌태그>형태로 입력(단, 닫힌 태그가 없는 태그들도 있음)
  • 여는 태그와 닫는 태그 사이에 내용을 채워 넣음(반드시 여는 태그와 닫는 태그 모두 작성해줘야 오류 발생X)
  • 속성: HTML 태그가 갖고 있는 추가적 정보(이미지 파일 경로, 크기 등..)
  • 속성값: 속성을 바탕으로 해서 어떠한 기능을 수행시킬지 구체적인 명령을 진행하는 것
  • HTML에는 블록 레벨 요소와 인라인 요소 두 가지 종류의 요소가 존재
    • 블록 레벨 요소: 웹페이지 상에 블록을 만드는 요소/ 앞뒤 요소 사이에 새로운 줄을 만들어냄 즉, 줄을 바꿈
      • 일반적으로 페이지의 구조적 요소를 나타낼 때 사용됨(ex-단락, 목록, 네비게이션 메뉴, 꼬리말 등 표현 가능)
      • 인라인 요소에 중첩될 수 X/ but, 다른 블록 레벨 요소에는 중첩될 수 O  
    • 인라인 요소: 항상 블록 레벨 요소 내에 포함되어 있음
      • 큰 범위에는 적용될 수 X, only 작은 부분에 대해서만 적용 가능
      • 새로운 줄을 만들지 X=> 즉, 인라인 요소를 작성하면 그것을 작성한 단락 내에서 나타나게 됨 ex) <a>, <em>,<strong>
<em>first</em><em>second</em><em>third</em>
<p>fourth</p><p>fifth</p><p>sixth</p>
  • 모든 요소가 여는 태그- 내용- 닫는 태그 패턴을 따르지는 않음=> 단일 태그를 사용하는 요소도 존재 ex) <img>

 

<HTML 속성>

  • 속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용
  • 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 함
  • 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 함
  • 속성 이름 다음엔 등호(=)가 붙음
  • 속성 값은 열고 닫는 따옴표로 감싸야 함

 

<HTML 문서의 구조>

1. <!DOCTYPE html>

:html 문서 형식을 나타냄

이  html 문서는 html5라고 하는 업그레이드 된 언어로 구성되어 있기 때문에 과거에 사용되었던 것 중 일부가 사용이 불가능할 수 있다는 것을 인지해야 함

 

2. <html></html>

:<html>요소

이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로 알려져 있음

 

3. <head></head>

:<head>요소

이 요소는 홈페이지 이용자에게는 보이지 않지만, 검색 결과에 노출될 키워드, 홈페이지 설명, CSS스타일, character, set declaration 등 HTML 페이지의 모든 내용을 담고 있음

메타 데이터(데이터를 위한 데이터)를 포함하기 위한 태그(title, style, link, script, meta)

즉, 웹사이트의 간단한 요약 정보를 담는 영역이자 웹사이트에서 노출되지 않는 정보

 

4. <meta charset="utf-8">

:HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며, 이 설정을 사용하면 페이지에 포함된 모든 텍스트 처리 가능

모든 문자를 웹 브라우저에서 깨짐없이 표시하겠다는 의미

 

5. <title></title>

:<title>요소/ 이 요소를 사용하면 페이지 제목이 설정되며, 브라우저 탭에 표시되는 제목으로 사용됨

 

6. <body></body>

:<body>dyth/ 텍스트, 이미지, 비디오, 게임, 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됨

웹사이트에서 눈에 보이는 정보를 담는 영역(이미지 or 텍스트처럼 출력되는 정보)

 

7. <!--주석-->

 

예시)

<body>
<h1>Some music</h1> <!--기본 제목-->
<!--아래는 p태그를 사용하여 단락 컨텐츠를 작성한 것-->
<p>I really enjoy <strong>playing the drums</strong>.<!--강조 태그를 사용하여 굵게 표시-->
One if my favorite drummers is Neal Peart,who plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.<!--Rush에 링크를 추가--> 
My favorite Rush album is currently Moving Pictures.</p>
<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"> <!--싱글 태그를 사용하여 관련 이미지 추가-->
</body>
  • HTML 요소 내용 내에서 얼마나 많은 공백을 사용하든 코드를 렌더링 할 때 공백 시퀀스를 단일 공백으로 줄임
  • 즉, 코드 내용에 공백 하나와 여러 개를 같게 취급
  • 코드 내에서 공백 시퀀스의 사용은 just 코드 가독성을 위한 것

 

2. CSS

디자인 또는 스타일링 (인테리어 디자인)

 

3. JavaScript

기능과 효과

 

 

  • 웹사이트 제작시 고려 사항
    • 웹 표준: 웹 사이트 작성시, 따라야 하는 공식 표준이나 기술 규격
    • 웹 접근성: 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있도록-
    • 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록-

 

  • 열린 태그와 닫힌 태그 안에 있는 모든 것이 컨텐츠 =태그 자체도 컨텐츠가 될 수 있음
<!-- 주석-->
<!-- 태그는 열린 태그와 닫힌 태그로 구성되어 있음-->
<!DOCTYPE html> <!--이 html문서는 html5라고 하는 신조어로 구성, 따라서 과거에 사용된 언어중 일부는 사용 불가능 -->
<html>
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
    </head>
    <body>
        <h1 style="color:navy">안녕 엘리스!</h1> <!--h1태그는 타이틀 정보를 입력할 때 사용하는 태그-->
    </body>
</html>

 

 

참조 문서

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started