본문 바로가기

Java/자바 기반 웹 개발자 과정 필기

[200428.46일차] HTML 1

반응형

 

HTML 프로젝트 만들기

=> HTML은 고정된 형식이 없고, 마지막 형식이 .html이면 된다.

 

저장 단축키

 

 

 

 

만든 파일 확인하는 방법

 

1. 직접 파일 열어보기

 

 

2. 자바 내에서 Web Browser로 확인

3. Web Browser 설정을 통해 chrom으로 확인

 

 

 

 

 

html 기본 형식을 지워도 문제없이 실행된다.

=> F12를 누르면 기본적인 형식이 자동으로 처리되서 나와있는걸 알 수 있다.

 

 

 

 

title => 상단바

body => 내용

 

 

 

 

EUC-KR => 한글자당 2byte

=> 모든 문자들이 저장되어 있는게 아님

되도록이면 한글은 UTF-8로 처리

UTF-8은 한글자당 3byte로 처리하고,

한글을 자음과 모음 따로 구현해두어 유동성이 좋다.

 

인코딩 방식을 통일하기 위해 자바내 인코딩 방식을 UTF-8로 설정한다.

 

 

 

 

 

 

줄 바꿈

<br>

 

 

 

주석 <!-- -->

 

 

<p></p>

 

 

 

text, bgcolor

=>글씨색, 배경색

 

 

 

<h1></h1> ~ <h6></h6> => 제목, 내용

=> 블럭단위. 한줄을 통채로 차지함

<hr> => 구분선

 

 

 

글자 크기

font size="1~7"

=> inline 단위. 특정 영역만 차지한다.

 

 

 

 

블럭 방식과 인라인 방식의 차이

=> 블럭 방식은 한줄을 통채로 차지함 : h1~6

=> 인라인 방식은 특정 영역만 차지함 : size="1~7

 

 

 

 

 

태그 안에 태그 중첩 사용

=> 추후에 많이 사용함

 

 

 

 

글씨체

face

 

 

각종 태그

=> 태그는 대소문자가 상관없다.

 

 

 

<pre>

공백을 아무리 줘도 하나로 인식함

=> <pre> 사용 : 원하는 형태로 나옴

 

 

 

 

특수문자

&nbsp; => 공백

&copy; => 카피라이트

 

 

 

 

구분선 <hr>

 

 

리스트

ul => 기호

ol => 순번이 있는 리스트

 

 

 

 

들여쓰기

<dt> => 제목

<dd> => 내용

 

 

 

 

 

Table 테이블

<tr> => 행

<th> / <td> => 열

 

 

 

 

 

테이블 병합

colspan => 열 병합

rowspan => 행 병합

 

 

 

 

 

 


예제

테이블 만들어서 git hub에 올리기

 

 

 

 

 

 


 

 

이미지

=> img src="파일명"

 

이미지 주소 복사 를 통한 이미지 올리기

 

 

 

img alt=""

이미지가 깨졌을 때를 실행

 

 

 

 

 

링크

target="_blank" => 해당 링크를 새창에서 연다. (크롬에서는 새탭)

title="" => 마우스 커서를 가져다대면 보이는 글자 설정

 

 

 

 

 


 

예제

 

 

 

반응형