내가 정리한 HTML

c o d i n g . . 🍉/HTML & CSS

내가 정리한 HTML

H J 2021. 3. 15. 17:59

진짜 내가 나중에 보려고 정리하는 거라서 엄청 두서없을 듯,,,

이제 시작🙀🙀🤍🤍

HTML은 웹페이지의 내용과 구조를 담당하는 언어!

<!-- HTML의 기본 구조! -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>doc의 제목으로 지정</title>
  </head>
  <body>
    웹페이지에 보이고 싶은 내용
  </body>
</html>

non_sementic 요소: 콘텐츠에 대한 설명이 없음
sementic 요소: 콘텐츠에 대한 의미를 포함함

-> sementic 요소를 잘 사용하면 의미가 잘 파악되기 때문에 가독성이 좋고 유지보수가 쉬운 코드가 된다

여러 가지 태그들

🐰살짝 기본적인 태그!🐰(*: 어트리뷰트 언급)

h1~h6	제목 태그 h1부터 h6까지 있으며 숫자의 크기가 커질수록 글자의 크기가 줄어듬 (중요한 의미로 받아들임!)
b	볼드체로 지정
strong	볼드체로 지정(중요한 의미로 받아들임!)
i	이탈릭체
em	이탈릭체 (중요한 의미로 받아들임!)
small	글씨 크기 작음
mark	형광펜 효과(?)
del	취소선
ins	insert 텍스트 (밑줄?)
sub	아래첨자 느낌
sup	위첨자 느낌
p	단락 지정
br *닫는 태그 없음	줄바꿈
pre	pre 태그 내의 콘텐츠를 브라우저에 그대로 표시
hr *닫는 태그 없음	구분선
q	짧은 인용문 지정, ""로 감싸줌
blockquote	긴 인용문 지정, 들여쓰기로 구분
a	링크 연결 href = "링크" target = "_self": 현재 창에서 오픈(기본값) *target = "_blank": 새 창에서 오픈

🐰리스트🐰

ul - li	순서 없는 리스트
ol - li	순서 있는 리스트 type = "1"(기본값), "A", "a", "I", "i" start = "숫자": 시작 값 지정 *reversed: 순서 거꾸로

🐰테이블(표)🐰

<table>
	<tr>
		<th>제목</th>
	</tr>
	<tr>
		<td>내용</td>
	</tr>
</table>

table	테이블을 감쌈
tr	행
th	행 내부의 제목 셀
td	행 내부의 일반 셀

*border: 테두리 두께 지정

*rowspan: 해당 셀의 행의 수 지정

*colspan: 해당 셀의 열의 수 지정

(음 행을 추가하려면 tr 태그를 추가해야 하고 열을 추가하려면 필요 목적에 따라 th, td 태그를 추가하면 됨)

🐰이미지🐰

img

*src = "경로"

*alt = "~": 이미지 파일이 표시되지 않을 때 표시되는 글

*width/height: 너비, 높이

미디어는 나중에,,, (총총)

🐰폼, 입력🐰

form	입력 양식
input	*정말 여러 어트리뷰트가 있음(아래에서 다시 정리)
select -(optgroup)- option	아이템 선택! optgroup으로 옵션 그룹핑
textarea	여러 줄 입력
button	버튼 생성(input의 버튼보다 좋음)
fieldset - legend	양식 그룹핑 (legend 태그 사이에 그룹명? 작성)

공간 분할(레이아웃 구성)

헥헥,,,,,, 2시간 동안 html 달렸다,,,,,😛😛

'c o d i n g . . 🍉 > HTML & CSS' 카테고리의 다른 글

[생활코딩] CSS (0)	2021.03.17
[생활코딩] html (0)	2021.03.15
Visual code 설치 & 파일 만들기 (0)	2021.03.15
[생활코딩] 웹 애플리케이션 만들기(5): CSS 실습 (0)	2021.02.01
[생활코딩] 웹 애플리케이션 만들기(4): CSS 이론 (0)	2021.01.31

현재글내가 정리한 HTML

🍃🛋🧤🍋🍧🍈🐈🎧

내가 정리한, 백엔드, 웹프, 42 seoul, JavaScript, 코딩, 자바스크립트, python, 인프런, 웹프로그래밍, css, 파이썬, 생활코딩 nodejs, 웹 프로그래밍, 프론트엔드, Nodejs, html, html 독학, 생활코딩 웹, 생활코딩,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

🐹's tory