[포스코x코딩온] 웹 풀스택 과정 1주차 | HTML

K1mhappy·2023년 10월 26일

[포스코X코딩온]

포스코x코딩온

목록 보기

2/13

💡HTML

hypertext markup language
마크업 언어: 태그를 이용해서 구조화하는 언어
웹 페이지는 HTML 문서라고도 하며 HTML 태그들로 구성된다.

🔗 HTMl 구조

🔻HTML 기본 구조

<html></<html> 사이에 작성

🔹`<head>` 태그

HTML문서의 메타 데이터와 문서 정보를 정의
ㄴ 메타데이터 : HTML 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보
title, style, meta, link, script, base 등이 포함된다.

🔹`<title>` 태그

HTML문서의 제목을 정의
ㄴ 웹 브라우저의 툴바 에 표시됨
ㄴ 검색 엔진의 결과 페이지에 제목으로 표시됨

🔹`<body>` 태그

HTML문서의 실제 콘텐츠를 정의하는데 사용되는 태그
다양한 태그를 사용하여 웹 페이지의 구조를 설계할 수 있다.

🔻HTML 요소 구조

HTML요소(element)는 여러 속성을 가질수 있고, 이러한 속성(attribute)는 해당 요소에 대한 추가적인 정보를 제공한다.

속성은 언제나 시작 태그 내에서만 정의되고 속성이름과 속성값으로 표현된다.
속성값은 언제나 따옴표로 감싸기!

1) 요소(Element) : 시작태그와 종료태그 사이에 위치한 내용으로 구성
2) 중첩(Nested) : 중첩 관계(부모자식 관계)로 웹페이지의 구조를 표현한다
3) 빈 요소(Empty) : 내용이 없는 요소(가질수 없거나, 필요x) 속성만 소유한다
meta, br, hr, img, input, link 등이 존재
검색 키워드, 설명, 저자 등의 데이터를 설정
4) 속성(Attribute) : 요소에 추가적 정보 (ex.이미지 파일의 경로,크기 등)를 제공한다.
5) 주석(Comments) : 개발자에게 코드를 설명하기 위해 사용한다.

🔗HTML 요소

🔻제목

<h1> ~ <h6>
제목을 표현할 수 있는 다양한 크기의 <h> 태그 사용
** 검색엔진들은 h태그를 이용하여 키워드를 검색하기 때문에, 제목은 h태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있다.

🔻단락

<p>
본문을 적기 위한 태그. 내용상 끊어서 구분할 수 있는 하나하나의 부분 = 문단
<br>
띄어쓰기 가능한 태그. 종료태그가 없는 빈 태그 이다.
<pre>
코드에서 작성한 텍스트 서식을 그대로 표현할 때 사용
<hr>
수평 가로 구분선

🔻서식

<b> / <strong>
텍스트를 굵게 표현할 때

b태그는 단순히 화면의 텍스트를 굵게 표현
strong 태그는 굵게 + 내용 중요하다는 의미 포함

<i> / <em>
이탤릭체 표현

i태그는 단순히 화면의 텍스트를 이탤릭체로 표현
em태그는 텍스트 변환 + 내용 중요하다는 의미 포함

<mark>
하이라이팅 효과

<del>
텍스트 중앙 가로줄 만들어 지운 효과

<ins>
텍스트 밑 가로줄

<sup> / <sub>
위첨자와 아래첨자 표현할 때

X2 + Y3 = Z
H2O

🔻인용구

<q>
짧은 인용구. 앞뒤로 "" 붙음

<blockquote>
별도의 단락으로 구분

<abbr>
용어의 축약형을 표현. abbr태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타남

<address>
주소 표현. 이탤릭체로 표현되고 위아래로 공백이 자동으로 삽입됨

🔻엔티티

HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋

그 외 발음구별 부호, 심볼 특수문자 등 여러가지 엔티티가 있다.

🔻링크

<a>

<a href="링크주소">HTML 링크</a>

a태그의 target 속성은값은 링크로 연결된 문서를 어디에서 열지를 명시함.
<a href="#" target="_blank">blank</a>
<a href="#" target="_self">self</a>

🔻이미지

<img>
종료태그 없는 빈 태그. width와 height 사용해서 크기 설정하면됨

<img src="이미지주소" alt="대체문자열">

이미지에 a태그를 사용하면 이미지 눌렀을때 링크 설정도 가능

a href="#" target="_blank">
    <img src="" alt="" style="width:320px; height:214px">
</a>

<border>
테두리 사용과 굵기 설정

🔻리스트

<ul>
순서가 없는 리스트

<ol>
순서가 있는 리스트

** ul,ol 둘다 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경 가능

<li>
리스트 요소

<dl>
정의 리스트
<dt>
정의할 용어이름
<dd>
해당용어에 대한 정의

🔻테이블

<table>
여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표

<tr>
테이블의 열(가로줄)
<th>
각 열의 제목
<td>
테이블의 열을 각각의 셀로 나누어줌
<border-collapse>
두줄로 표현되는 테두리를 한줄로 설정하려면 collaps 로 설정

<style>

    table, th, td { border: 1px solid black; border-collapse: collapse }

</style>

<colspan>
테이블의 열(가로줄) 합치기

<rowspan>
테이블의 행(세로줄) 합치기

<caption>
테이블 상단에 제목이나 짧은 설명

🔻블록 & 인라인

html의 모든 요소는 display 속성을 갖는다.
대부분 블록 또는 인라인 속성값을 가지게 된다.

<block>
언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지

p, div, h, ul, ol, form 은 대표적 블록 태그

<div>
다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소
주로 여러 요소들의 스타일을 한번에 적용하기 위해 사용

<inline>
새로운 라인에서 시작하지 않음. 요소의 너비도 라인 전체가 아닌 내가 쓴 내용만큼 차지한다.

span, a, img 는 대표적 인라인 태그

<span>
텍스트의 특정 부분을 묶는데 자주 사용된다.
주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용

🔻입력 양식

🔹form 요소

<form>
form 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

사용자가 입력한 데이터를 서버로 보낼 때도 사용한다.

<form action="처리할페이지주소" method="get|post"></form>
action은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시
method는 입력받은 데이터를 서버에 전달할 방식을 명시

=>  form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달!!

<method>
get 방식과 post 방식으로 나눠지는데

get 방식 : 주소에 데이터를 추가하여 전달하는 방식

데이터가 주소 입력창에 그대로 나타남.
전송할 수 있는 데이터 크기가 제한적.
so, 크기가 작고 중요도가 낮은 정보를 보낼 때 사용한다.

post 방식 : 데이터를 별도로 첨부하여 전달하는 방식

데이터가 외부에 드러나지 않음.
데이터 크기제한도 없음
so, 보안성 및 활용성이 훨씬 좋음

🔹input

<input>
사용자로부터 입력 받을 수 있음.

input의 여러가지 타입

"radio" : 한가지만 선택가능
checked 속성을 이용하면 처음 미리 선택되는 옵션 지정 가능

"checkbox" : 여러개 선택가능
disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 가능
checked 속성도 사용 가능
 <form>
 	<input type="radio" name="lecture" value="html" checked> HTML
     <input type="checkbox" name="lecture" value="css"> CSS
</form>
"file" : 파일 전송받을 수 있음
accept 속성 이용해서 확장자 및 종류 명시 가능

<select> : 와 같은 드롭다운 리스트로 되어 있음
option요소 사용해서 리스트에 선택할 수 있는 옵션을 명시
selected 사용해서 첨 미리 선택되는 옵션 설정 가능
<select name = "fruit">
	<option value = "apple"> 사과
  <option value = "orange" selected> 오렌지
</select> 
<textarea> : 텍스트 입력 받을 수 있음
rows, cols 속성 사용해서 크기 지정 가능
<textarea name="message" rows="5" cols="30">
  여기에 적으세요.
</textarea>
<button> : 버튼이지롱

"submit" : 사용자로부터 입력받은 데이터를 서버의 폼 핸들러로 제출하는 버튼
=> 폼 핸들러란? 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지
action 속성 사용해서 폼핸들러 주소 명시
<form action="폼핸들러 주소">
    어릴 때 자신의 별명을 적어주세요 : <br>
    <input type="text" name="nickname" value="별명"><br><br>
    <input type="submit" value="전송">
</form> 
<fieldset> : form과 관련된 데이터를 하나로 묶어준다..
legend요소는 필드셋 제목을 나타내고, 필드셋안에서만 사용가능하다.
<form action="폼핸들러 주소">
  <fieldset>
      <legend>입력 양식</legend>
      이름 : <br>
      <input type="text" name="username"><br>
      이메일 : <br>
      <input type="text" name="email"><br><br>
      <input type="submit" value="전송">
  </fieldset>
</form>

input요소의 속성

value : 입력 필드(input field)에 나타나는 초깃값을 설정
readonly : 수정할 수 없게 설정
disabled : 입력 필드를 아예 사용할 수 없도록 설정
전송버튼을 눌러도 초깃값이 서버로 전송x
maxlength : 입력할 수 있는 문자의 최대 길이
size : 보여지는 인풋요소의 크기 설정

🔻 레이아웃

div 요소를 이용한 레이아웃이 있고
의미(semantic)있는 요소를 이용한 HTML5 레이아웃이 있다.

HTML5 레이아웃

Semantic tag

HTML 요소는 Semantic하게 작성되어야 한다.
div는 구역구분이 어려워 의미를 알기 어렵다.
웹 페이지를 이루는 요소의 의미와 맞는 태그를 사용하자!

태그	설명	비고
`<header>`	헤더	사이트의 도입부, 로고나 제목 등. 한 문서 내 여러개의 header 존재 가능
`<nav>`	탐색	HTML 문서 사이를 탐색할 수 있는 링크의 집합 정의
`<section>`	섹션	제목을 가지고 여러 가지 콘텐츠들을 주제별로 묶어주는 역할을 담당.
`<article>`	글	하나의 독립적인 기사 부분 정의, 웹 사이트의 나머지 부분과 별도로 읽을 수 있어야 한다
`<footer>`	푸터	웹 문서 끝자락에 보통 저작권 정보나 연락처 등을 명시, 한 문서 내 여러개의 footer 요소 존재 가능
`<main>`	메인	주요 콘텐츠 정의. 반드시 한 번만 사용되어야함.
`<aside>`	페이지 외	페이지 부분 이외의 콘텐츠 정의

<출처 및 레퍼런스>
포스코X코딩온
TCP school https://www.tcpschool.com/html-tags/intro

K1mhappy

킴코린의 개발일지😗

이전 포스트

[포스코x코딩온] 웹 풀스택 과정 1주차 | Git

다음 포스트

[포스코x코딩온] 웹 풀스택 과정 1주차 | HTML