HTML 1.0 ~ 2.0에 대한 개념에 대해서 한번 알아보겠습니다. HTML은 웹 문서를 만들기 위한 기본적인 웹 언어 중 1가지입니다. HTML은 문서의 글자 크기, 글자색, 글자 모양, 그래픽, 문서 이동 등 명령어를 작성하여 홈페이지를 구성하는 큰 기반이 됩니다. 실제로 우리가 운영하고 있는 홈페이지를 만들기 위해서는 HTML 4.0 넘어가야만 적용되지만, 기본적인 구성 및 명령어를 알아야 합니다. HTML 1.0 ~ 2.0에 대한 개념을 자세하게 알아보겠습니다.
HTML 1.0 ~ 2.0 명령어 알아보기
HTML 1.0 ~ 2.0 설명하기 앞서서, 기본적인 내용에 대해서 알아보겠습니다. 리눅스, 유닉스, 윈도우 서버에 따라서 사용하는 HTML이 다릅니다. 리눅스와 유닉스는 index.html를 웹페이지를 메인으로 진행하며 윈도우 서버는 default.html 웹페이지로 메인으로 합니다.
html 코드를 작성하기 위해서는 기본적인 코드에 대한 정의를 알아야 합니다.
1. html : html 태그는 기본 페이지 작성시 사용됩니다.
2. head : head 태그는 html 기본 엔진, 언어셋, 타이틀, 스크립트를 이용할 때 사용합니다.
3. meta charest="A" : 언어를 지원하는 태그입니다. A라는 값에는 UTF-8 : 영문, 다국어를 지원합니다. euc-kr : 한국어를 지원하며, euc-jp : 일본어를 지원합니다. 통상적으로 홈페이지를 제작할 때는 "UTF-8"로 작성합니다.
4. title : title 태그는 탭 제목 또는 Seo 사용 시, 적용됩니다.
5. body : body 태그는 html 전체 몸통이며, 이미지, 파일, 영상 등 다앙하게 표현하는 항목입니다.
홈페이지 구성 시, 기본 HTML 구성은 아래와 같습니다.
<html>
<head>
<meat charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
HTML 1.0 태그 알아보기
1. <br> : 한 줄 아래로 내리는 기능으로 enter 기능 역할을 수행합니다. 예시는 "홍길동입니다. <br>"입니다.
2. <u> : 본인이 쓴 글자 내에 밑줄을 치기 위해서 사용됩니다. 예시는 "<u> 아무개입니다. </u>"입니다.
3. <i> : 글자 내에 기울기를 적용하기 위해서 사용됩니다. 예시는 " <i> 빨간색입니다. </i> "입니다.
4. <b> : 글자 내에 굶은체를 적용하기 위해서 사용됩니다. 예시는 "<b> 스타벅스입니다. </b>"입니다.
5. <a href="링크"> : 링크 태그이며, 본인이 적은 웹사이트로 이동할 때 사용됩니다. 예시는 "<a bref="http://naver.com"> 네이버 바로가기 </a>"입니다.
6. <img src="이미지 정보"> : 이미지를 불러올 때 사용되는 링크입니다. src는 로드 경로를 의미합니다.
HTML 2.0 태그 알아보기
1. : 글자와 글자 사이의 한 칸을 띄우기 위해서 사용됩니다. 2칸을 띄우기 위해서는 2번 입력해야 합니다.
2. <font color="색상 번호" size="폰트 크기"> : font 태그는 글자 색상과 크기를 변경할 때 사용됩니다. 색상 코드는 #6744 f4처럼 #버튼과 6자리 숫자를 입력해야 합니다. size 크기는 최대 6까지만 적용됩니다.
3. <img width="숫자" height="숫자" src="이미지 주소"> : img 태그 내에 가로 및 세로 크기를 조절할 수 있는 속성이 추가되었습니다.
4. <iframe src "주소" width="크기" height="크기" frameborder="숫자" scrolling="Yes 또는 No"></iframe> : iframe은 외부 페이지를 가져올 때 사용할 수 있습니다. iframe 기능은 페이지, 동영상, 자신의 페이지를 가져올 때 많이 사용됩니다. frameborder는 가져온 외부 페이지의 외곽선을 조절할 수 있으며 단위는 0(사용하지 않음) ~10입니다. scrolling는 스크롤바를 조정할 수 있으며 No(사용하지 않음), Yes(사용함)입니다.
5. <p> : p 태그는 웹 페이지 내에서 타이틀로 입력할 때 사용됩니다.
6. <a href="주소" target="기능"> 아무 글자 입력 </a> : 하이퍼 링크 내에 target 속성이 추가되었습니다. _black는 신규 탭에 링크 페이지가 생성됩니다. _self는 같은 탭 내에서 링크 페이지로 이동합니다. _top는 팝업창을 열기 위해서 사용됩니다. _new는 black와 같은 속성이지만, 신규 페이지로 접속하게 됩니다.
7. 상대 경로 및 절대경로 : 상대경로 및 절대 경로는 웹퍼블리셔와 프론트엔드 엔지니어 관점에서 차이가 발생합니다. 글쓴이는 웹퍼블리셔 관점에서 작성하겠습니다. 상대경로 : .././ 이며 절대경로는 http:// 로 사용됩니다. 해당 경로는 파일 질라 내에 있는 파일을 불러오기 위해서 사용됩니다.
VS Code FTP Simple 오류 대체 Extension FTP-Sync 설치 방법
비쥬얼 스튜디오 코드 내에 확장 버전이 업데이트되면서 본인이 작업한 HTMP, CSS 코드가 보이지 않는 현상이 발생했습니다. HMTL 수업을 들으면서, 현재 FTP-SIMPLE 개발자도 오류 건 현상에 대해서
smartkorea.tistory.com
Visual Studio Code 비주얼 스튜디오 코드 필수 Extension 5가지 추천
비주얼 스튜디오 코드 내에서 필수적으로 다운로드해야 하는 익스텐션 5가지에 대해서 한번 알아보도록 하겠습니다. HTML5, CSS3, Java Script, Jqeury를 적용하기 위해서는 Vscode를 사용하시는 분들이
smartkorea.tistory.com
Visual Studio Code 비주얼 스튜디오 코드 다운로드 방법 알아보기
오늘은 무료 호스팅 내에서 HTML, CSS, Jqurcy를 사용하는 Visual Studio Code 다운로드 방법에 대해서 한번 알아보겠습니다. 호스팅을 제작하는 사람들에게는 간편한 프로그램입니다. 해당 프로그램을
smartkorea.tistory.com
닷홈 무료 웹호스팅 도메인 제작 방법 절차 알아보기
닷홈 내에서 무료 웹호스팅 도메인 제작 방법에 대해서 한번 알아보겠습니다. 무료 웹호스팅이기에 트래픽에 대한 부분이 제약이 될 수 있습니다. 다만, 저처럼 HTML5, CSS3에 관련된 내용을 공부
smartkorea.tistory.com
파일질라 공식 홈페이지 주소 및 다운로드 방법 정리하기
파일질라 공식 홈페이지 다운로드 신청 홈페이지 및 다운로드 방법에 대해서 한번 알아보겠습니다. 웹호스팅 또는 이미지 호스팅, 홈페이지 제작을 해야할 때, 파일 전송을 통한 작업이 FTP입니
smartkorea.tistory.com
'웹퍼블리싱' 카테고리의 다른 글
| HTML4 태그 정리 (1) (0) | 2021.03.17 |
|---|---|
| HTML 3.0 태그 정리 (0) | 2021.03.11 |
| VS Code FTP Simple 오류 대체 Extension FTP-Sync 설치 방법 (1) | 2021.03.08 |
| Visual Studio Code 비주얼 스튜디오 코드 필수 Extension 5가지 추천 (0) | 2021.02.25 |
| Visual Studio Code 비주얼 스튜디오 코드 다운로드 방법 알아보기 (0) | 2021.02.24 |