[Front-End] HTML (1)

23390 단어 htmlfront endfront end

HTML BASIC

1. 블록과 인라인

1) Block

: "최대 가로 너비" 사용하는 요소 (FOR 레이아웃)
ex)div, h1, p

  • 기본 크기: width:auto->100%, height:auto->0에서 시작해서 내용 포함하는 만큼;
  • 가로, 세로 크기를 수정할 수 있음
  • "수직"으로 쌓임
<body>
	<div>안녕하세요!</div>
    <div>안녕하세요!</div>
    <div>안녕하세요!</div>
</body>

안녕하세요!
안녕하세요!
안녕하세요!

  • margin, padding의 위, 아래, 좌, 우 사용 가능

2) Inline

: "필요한 만큼의 너비"만을 사용하는 요소 (FOR TEXT)
ex) span, img

  • 기본 크기: width:0, height:0;
  • 가로, 세로 크기 수정할 수 없음
  • "수직"으로 쌓임
<body>
	<span>안녕하세요!</span>
   	<span>안녕하세요!</span>
   	<span>안녕하세요!</span>
</body>

안녕하세요! 안녕하세요! 안녕하세요!

  • margin, padding의 위, 아래 사용 불가 (ONLY 좌, 우)

+) DISPLAY 속성

: Inline요소와 Block요소를 각각 다른 요소로 작용할 수 있도록 돕는 속성

span{
	//Inline 요소를 Block처럼 작용
    display: block;
}

div{
	//Block 요소를 Inline요소처럼 작용
    display: inline;
}

2. 기본 구조

1. HTML 태그

: 문서의 처음과 끝을 show
PLUS) 느낌표 + tab => 자동으로 기본 서식 보여줌

<!DOCTYPE html>
// 이 이하의 범위는 html5로 해석할 것
<html lang="ko">
	<head></head>
    <body></body>
</html>

i) HEAD

: 문서의 '정보' 부분

  • 문서의 제목 : title 태그
  • 기타 정보
  • 스타일 직접 입력 or 외부에서 연결

ii) BODY

: 문서의 '구조' 부분

2. 메타데이터

1) META 태그

: HEAD 부위의 주요 태그로, title을 제외한 모든 기타 정보를 나타내는 빈 태그
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

  • 닫히는 태그 없음
  • 속성 필수
  • main으로 두고 공부할 필요는 없음

i) charset

: 문자가 인코딩되는 방법을 명시하므로, title태그보다 위에 주로 작성
ex) UTF-8, EUC-KR(깨지는 형상)

ii) http-equiv

iii) name

iv) content

<head>
<meta charset="UTF-8">
<meta name="author" content="zoom-in">
<meta name="description" content="zoom-in의 우당탕탕 기록지">
</head>

2) LINK 태그

: 외부의 파일을 가져올 때 필수 사용 (CSS)

i) rel 속성

: relationship 약자 > 외부 문서와 현 문서와 관계 지정

ii) href 속성

: 파일 위치 호출

<head>
<link rel="stylesheet" href="./css/main.css">
</head>

3) STYLE 태그

: CSS 내용
-> body 태그 안에 작성할 수도 있긴 하지만, 효율적이지 X
-> type은 생략 가능

i) media 속성

: 미디어 쿼리

ii) MIME Type

: 가져온 문서의 타입에 대해 나타내는 방식 (중요한 내용은 X)
ex) text/html, audio/mpeg, image/jpeg

<style type="text/css">
div{ 내용 }
</style>

4) BASE 태그

: 경로를 축소해 표현하고 싶을 때 사용 (once in file)
-> link에 경로 작성한 것보다 위에 작성 (잘 사용하지는 X)

<head>
<base href-"./css/">
<link rel="stylesheet" href="main.css">
</head>

3. 콘텐츠 구분

1) HEADER 태그

: 상단바와 같은 부분 (로고, 명칭, 메뉴, 검색 바 등)

  • header 태그 안에 다시 등장할 수는 없음

https://developer.mozilla.org/ko/docs/Web/HTML/Element/header

2) FOOTER 태그

: 하단바와 같은 부분 (작성자, 저작권, 주소, 연락처 등)

  • header 태그 안에 다시 등장할 수는 없음

3) H1~H6 태그

: 6단계의 문서 제목을 정리 -> 중요성대로 목차 가능 (h1이 제일 큼)

  • 중요: 정보의 중요성을 내포하는 태그이기 때문에 단순히 폰트 크기를 바꾸려는 용도로 사용하면 안됨
  • h1은 최대한 적게 (1 per pg)

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements

4) MAIN

: 문서 내부의 핵심적 PART 나타냄 (1 per 문서)

5) ARTICLE

: '독립적'으로 구분되거나 '재사용' 가능한 영역
주로 h1~h6 태그로 실현 (애매한 것 같으면 다른 태그로 대체 사용)
ex) 기사, 블로그

6) SECTION

: 일반적인 영역 묶는 것
문서의 type에 따라 section 안에 article이 있거나 반대일 수 있음

7) ASIDE

: 별도 콘텐츠 (광고

8) NAV

: 다른 페이지의 링크를 제공하는 영역 (안에 li 들로 여러 개 묶으며 실현)
ex) 메뉴, 목차 등

9) ADDRESS

: 연락처, 주소 등의 정보 묶음을 제공할 때 쓰는 영역

10) DIV

: 별 의미 없는 영역으로, 어떤 거에도 막 갖다 쓸 수 있음

4. 문자 콘텐츠

1) OL, UL, LI

: 정렬된 목록(ol) 또는 정렬되지 않은 목록(ul) 속 각 항목들(li)

i) OL 안의 LI

: 정렬된 목록 (1. 2. 3. )
-> 순서가 중요도를 의미할 수 있음

  • type 속성으로 list명 변경 가능 (1, a, A, I 등)

ii) UL 안의 LI

: 정렬되지 않은 목록 ( o o o)
-> 더 많이 사용됨

2) DL, DT, DD

: 쌍(dl) of 용어(dt)와 정의(dd) == key:value

  • 스타일링이 까다로움 (DIV 태그 불가)
  • ul 이나 ol 사용으로 '대체' 가능 for 스타일링
<dl>
<dt>COFFEE</dt>
<dd>원두와 물</dd>

<dt>LATTEE</dt>
<dd>원두와 우유</dd>
</dl>

3) P, HR

i) p 태그

: 하나의 문단을 설정 - "시각적"으로 문단이 나뉘는 것에 중심

ii) hr 태그

: 의미상 필요성을 위해 문단을 '분리' - "의미적"인 관점

4) PRE

: 문자의 서식을 그대로 출력
ex) pre 영역 안에 있으면, 띄어쓰기가 100개여도 그대로 출력되는 것

5) BLOCKQUOTE

: 인용문 설정하는 영역

<blockquote cite="http://어쩌고">
인용문
</blockquote>

5. 인라인 텍스트

1) A 태그

: 현재 문서에서 다른 곳으로 나갈 때를 위해 하이퍼링크 설정

  • 같은 문서 안에서 특저 위치로 움직일 수도 있음 (예시의 # 부분 확인)

i) href 속성

링크 URL 연결 (거의 필수)

ii) target 속성

링크 URL의 표시 위치 (브라우저의 탭 상에서)

iii) rel 속성

문서들 간의 관계

iv) 추가 속성

: download, type, etc

<a href="http://www.google.co.kr" target="_blank">Google</a>


<ul>
<li><a href="#title1">제목 1</a></li>
<li><a href="#title2">제목 2</a></li>
</ul>

<h2 id="title1">제목1</h2>
<h2 id="title2">제목2</h2>

2) SPAN 태그

: 별 의미 없는 태그 (div와 유사, 근데 inline인)
텍스트 일부의 굵기, 크기, 색상 변경할 때 사용가능

3) CODE

: 코드가 들어갈 때, 문서를 바꾸려는 게 아니라 문서의 내용 중 일부임을 명시

<code>document.getElementById('id-value')</code>는 코드의 일부이다.

4) BR

: 줄바꿈 하는 태그 - 닫는 태그 필요없음
줄 간에 br 여러개 쓰지 말고 css로 줄 간 간격 높이기 (전체 p로 묶은 다음)

p{
line-height=50px;
}

5) ABBR 태그

: 약어 지정하는 태그

  • 전역 변수 -> 커서 위에 올려두면 풀네임 보임
<abbr title="HyperTextMarkup Language">HTML</abbr>

6) DFN

: 용어 정의할 때 쓰는 태그
(유사: dl, dt, dd)

<dfn id="def-internet">Internet</def>

7) CITE

: 창작물에 대한 참조 (책, 영화, 논문 등의 제목)

8) Q

: 짧은 인용문 (긴 경우 blockquote)

9) KBD

: keyboard의 약어로, 키보드에의 입력임을 나타냄
-> 비주얼적으로 키보드 버튼처럼 보여짐

<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>K</kbd>

10) SUP, SUB

: 각각 위 첨자, 아래 첨자

11) 서식

i) B

: 문체가 다른 글자의 범위 설정으로, 보통 굵게 표시 (별 의미X)

ii) MARK

: 관심있는 부분에 하이라이팅 표시 (의미보다는 시각)

iii) EM

: 기울림체 표시로 단순 의미 강조 (Emphasis)
중첩가능하며, 중첩될수록 강조 의미가 강함

iv) STRONG

: 의미의 중요성을 나타내기 위해 굵게 표시 (b와 같은 출력이지만 의미가 다름)

v) I

: 위의 태그로 표현하긴 애매하고, 암튼 다른 글자랑 구분하기 위해 사용 (아이콘, 기호)

vi) U

: 밑줄 사용 -> 의미 없어서 그냥 css로 대체 가능

<span style="text-decoration: underline;">
으로 주로 대체함

vii) TIME

: 시간 관련 -> 거의 사용 안함

12) DEL, INS

: 삭제, 수정된 정보와 관련

i) del

: 삭제된 텍스트의 범위 지정 (있었지만 삭제한 정보) -> 중간선

ii) ins

: 새로 추가된 텍스트의 범위 지정 (새로 추가된 정보) -> 언더바

Java에서 문자열 메모리 위치 상세 정보 기반
[Project 배민서바이벌] Footer 하단 고정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage