HTML&CSS(2)

안정태·2021년 4월 18일

html

HTML&CSS

목록 보기

3/10

HTML 기본 문서 만들기

HTML과 첫 만남

솔직히 처음 만나는 건 아니다. 그러니 패스...

HTML 구조 파악하기

웹 브라우저로 HTML파일 실행하기 - HTML파일 더블클릭 "확인"
비주얼스튜디오 코드에서 예제 파일 불러오기 - vscode에서 파일 열기 "확인"

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>HTML 기본 문서</title>
</head>

<body> <!--웹 브라우저 화면에 나타날 내용-->
  <h1>프런트엔드 웹 개발</h1>
  <hr>
  <p>HTML</p>
  <p>CSS</p>
  <p>자바스크립트</p>
</body>

</html>

<!DOCTYPE html> - 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻

<html lang="ko"> - 웹 문서의 시작과 끝을 나타내는 태그, lang="ko"는 문서에서 사용할 언어를 지정한다. 표시하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문이다. 그리고 낭독기에서 해당 언어에 맞게 읽어준다.

<head> - 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분이다.

<meta> : 문자 세트를 비롯해 문서 정보가 들어 있는 태그, 가장 중요한 역할은 화면에 표시할 때 어떤 인코딩을 사용할지 지정한다. 만약 한글로 내용을 표시할 때는 <meta charset="UTF-8">로 알려줘야 한다.
< 다양한 사용법 >
<meta name="keywords" content="html의 구조"> - 웹 문서의 키워드
<meta name="description" content="html의 구조를 알아봅시다"> - 웹 문서의 설명
<meta name="author" content="Kyunghee KO"> - 웹 문서의 소유자나 제작자
<title>HTML 기본 문서</title> : 문서의 제목을 나타내는 태그, 거의 모든 웹 브라우저의 제목 표시줄에 표시된다.

<body> - 웹 브라우저에 내용을 표시하는 태그,

HTML 파일 만들기

새 파일을 만들고 확장자명을 html로 해준다. 파일이름.html 이런 형식으로 이후에 그 파일에 '!'를 치고 tab키를 누르면 필수적인 요소들이 자동완성 된다. 혹은 필요한 태그의 일부만 타이필 이후 tab키를 눌러도 자동완성이 가능한데 이걸 이용해서 필요한 태그를 추가하면서 직접 만드는 것도 방법이다.

웹 문서 구조를 만드는 시맨틱 태그

HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그(Semantic tag)라고 한다.
ex) paragraph를 줄인 <p> 태그, anchor를 줄인 <a> 태그 ...

시맨틱 태그가 필요한 이유

HTML의 소스 코드만 보고도 구조를 알 수 있다.
문저 구조가 정확히 나눠지므로 표현하기가 쉽다.
웹 사이트에서 검색할 때 필요한 내용을 정확히 찾을 수 있다.

웹 문서 구조를 만드는 주요 시맨틱 태그
웹을 만들 때 시맨틱 태그를 필수적으로 사용할 필요는 없다. 정말 자주 사용되는 것만 쓴다. 다음에서 소개하는 태그들이 그 대표적인 것들이다.

<nav> : 내비게이션 영역을 나타내는 태그
<main> : 핵심 콘텐츠를 담는 태그, 웹 문서에서 한 번만 사용 가능
<article> : 독립적인 콘텐츠를 담는 태그, 여러 개 사용 가능, <section>태그 넣기 가능
<section> : 콘텐츠 영역을 나타내는 태그, 몇 개의 콘텐츠를 묶는 용도로 사용 (단순히 스타일 적용이 목적이라면 <div>태그 사용)
<aside> : 사이드 바 영역을 나타내는 태그, 본문 왼쪽 혹은 오른쪽에 사이드 바 생성, 생략 가능
<footer> : 푸터 영역을 나타내는 태그
<div> : 여러 소스를 묶는 태그

웹 문서에 다양한 내용 입력하기

텍스트 입력하기

<h(1~6)> : 제목을 나타내는 태그, 다른 텍스트 보다 크고 진하게 표시
<p> : 텍스트 단락을 만드는 태그, 텍스트 단락이 만들어지고 편집기에서 줄을 바꿔도 브라우저에서는 한줄로 보인다.
<br> : 줄을 바꾸는 태그, 단독으로 사용 닫는 태그가 필요 없다. CSS적용 어려움 단락 나눌 땐 그냥 <p> 태그 사용
<blockquote> : 인용할 때 쓰는 태그, 브라우저는 인용문으로 인식하고 들여쓰기 해서 보여준다.
<strong>,<b> : 텍스트를 굵게 표시하는 태그, 낭독기는 <strong>은 강하게 읽어주고 <b>는 단순히 글자만 굵어진다.
<em>,<i> : 기울인 텍스트를 입력해 주는 태그, <em> : 강조용 <i> : 구분용

다양한 텍스트 관련 태그

<addr> : 줄임말을 표시하고 title속성을 함께 사용 가능
<cite> : 웹 문서나 포스트에서 참고내용을 표시
<code> : 컴퓨터 인식을 위한 소스 코드
<small> : 부가 정보처럼 작게 표시되는 텍스트
<sub> : 아래 첨자를 표시 합니다. ex) 1
<sup> : 위 첨자를 표시합니다. ex) 1
<s> : 취소선을 표시합니다. ex) apple
<u> : 밑줄을 표시합니다. ex) apple
<ins> : 공동 작업문서에서 새로운 내용을 삽입 ex) apple
<del> : 공동 작업문서에서 기존 내용을 삭제 ex) ~~apple~~

목록 만들기

<ol>,<li> : 순서 있는 목록을 만드는 태그,<ol>태그 안에 <li>태그를 삽입한다.
<ol>태그에 type 속성 : '1'(숫자), 'a'(영문 소문자), 'A'(영문대문자), 'i'(로마자 소문자), 'I'(로마자 대문자)
<ol>태그에 start 속성 : 이 속성에 주는 숫자가 제일 처음 숫자가 된다.
<ul>,<li> : 순서 없는 목록을 만드는 태그,<ul>태그 안에 <li>태그를 삽입한다.
순서 없는 목록 앞에 붙는 모양을 불릿이라고 한다.
<dl>,<dt>,<dd> : 설명 목록을 만드는 태그, 이름과 형태로 된 목록

 <h2>상품 구성</h2>
  <dl>
    <dt>선물용 3kg</dt> <!--설명 목록의 이름(단어명)부분을 지정-->
    <dd>소과 13~16과</dd> <!--값(설명)부분을 지정-->
    <dd>중과 10~12과</dd>
  </dl>
  <dl>
    <dt>선물용 5kg</dt>
    <dd>중과 15~19과</dd>
  </dl>

표 만들기

<table>,<caption> : 표를 만드는 태그
<tr> : 행을 만드는 태그
<td>,<th> : 셀을 만드는 태그 - 제목 행의 셀에는 <th>사용
행이나 열을 합치는 속성 rowspan, colspan
<td rowspan = "합칠 셀의 개수">셀의 내용</td>
<td colspan = "합칠 셀의 개수">셀의 내용</td>
```
<table>
  <tr>
    <tb>1행 1행</tb>
    <tb>1행 2행</tb>
  </tr>
  <tr>
    <tb>2행 1행</tb>
    <tb>2행 2행</tb>
  </tr>
</table>
```
<thead>,<tbody>,<tfoot> : 표의 구조를 지정하는 태그
<col>,<colgroup> : 열을 묶어 주는 태그, 특정 열에 배경색을 넣거나 너비를 바꿀 때 사용 <colgroup>은 <col>을 2개 이상 묶어서 사용

이미지 삽입하기

<img> : 이미지를 삽입하는 태그
<img src="이미지 파일 경로" alt="대체용 텍스트"> - 기본형
whidth 속성, height 속성 : 이미지의 넓이와 높이를 설정하는 속성
% : 이미지 크기의 값을 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기 결정
px : 이미지 크기의 값을 픽셀(px) 크기만큼 표시

오디오와 비디오 삽입하기

<object>,<embed> : 다양한 멀티미디어 파일을 삽일할 때 쓰는 태그
<object width="너비" height="높이" data="파일"> - 기본형
<embed src="파일 경로" width="너비" height="높이"> - 기본형
<audio>,<video> : 오디오와 비디오 파일을 삽입하는 태그
<audio src="오디오 파일 경로" controls></audio> - 기본형
<video src="비디오 파일 경로" controls width="너비"></video> - 기본형

주요 속성
controls : 플레이어 화면에 컨트롤 바를 표시한다.
autoplay : 오디오나 비디오를 자동으로 실행한다.
loop : 오디오나 비디오를 반복 재생한다.
muted : 오디오나 비디오의 소리를 제거한다.
preload : 파일을 어떻게 로딩할 것인지 정한다. /사용 가능값 - auto, metadata, none
width, height : 너비와 높이를 지정, 둘 중 하나만 지정하면 나머지 하나는 자동으로 계산해서 표시
poster="파일 이름 : 썸네일을 지정한다.