#1 Intro
프로그램 코드
: 컴퓨터 프로그램을 프로그래밍 언어로 작성한 글
프로그래밍
: 프로그램 코드를 작성하는 행위
프로그래밍 언어
: 컴퓨터에 명령을 내리기 위한 언어
Casecade
: css에서 디자인 요소가 폭포처럼 차례대로 적용되는 것
JavaScript
: 웹을 이용하는 유저와 상호작용 하기 위한 기능을 추가할 때 쓰는 언어
HTML - 구조 | CSS - 스타일 | JS - 동작
#2 HTML 기초
HTML 구조
태그 : 내용을 나누고 어떤 역할을 하는지 구조를 정의
시작 태그 : 컨텐츠의 시작을 표시
종료 태그 : 컨텐츠의 끝을 표시
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>재빈을 소개합니다.</title>
</head>
<body>
<h1>안녕하세요 저는 재빈입니다!</h1>
<p>저는 현재 웹 프로그래밍을 공부하는 학생입니다.</p>
</body>
</html>
HTML
복사
시맨틱 태그 (Semantic tag)
: 의미를 갖고 있는 태그
header
: 소개나 제목을 담는다
nav
: 페이지 이동을 위한 메뉴
section
: 기준에 맞게 구간을 나눈다
article
: 주 내용을 담는 용도
aside
: 광고나 사이트의 주변부분 내용
footer
: 웹 사이트 가장 아래에서 회사 정보등을 담는 내용
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>XX일보</title>
</head>
<body>
<header>
<p>여기는 로고와 이름이 들어갑니다.</p>
</header>
<nav>
<p>여기는 사이트 메뉴입니다.</p>
</nav>
<section>
<p>여기서 부터는 기사가 들어갑니다.</p>
<article>
<p>여기는 첫 번째 기사입니다.</p>
</article>
<article>
<p>여기는 두 번째 기사입니다.</p>
</article>
</section>
<aside>
<p>여기에 광고가 들어갑니다.</p>
</aside>
<footer>
<p>여기에 회사 정보가 들어갑니다.</p>
</footer>
</body>
</html>
HTML
복사
#3 텍스트와 관련된 태그
제목 태그
: 제목을 나타내고 싶을 때 사용, 중요도에 따라 1~6 까지 씀
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>텍스트</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<p>paragraph</p>
</body>
</html>
HTML
복사
본문 태그
•
<p>태그
: paragraphs 단란, 문단(본문)
•
<br>태그
: break 줄바꿈
•
<pre>태그
: preformatted 형식화된
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>텍스트</title>
</head>
<body>
<pre>사람을 답답하게 만드는 방법이 두가지 있습니다.
첫번째는 하던 말을 끝까지 안하는 거고,
두번째는</pre>
</body>
</html>
HTML
복사
글자와 관련된 태그
•
strong 태그
: 굵게
•
emphasized 태그
: 기울임꼴
•
subscripted
: 아래에 기입한
•
superscripted
: 위에 기입한
•
inserted
: 끼워 넣은
•
deleted
: 삭제된
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>텍스트</title>
</head>
<body>
<p>이것은 일반적인 문장입니다.</p>
<p>이것은 <strong>강조된 단어</strong>입니다.</p>
<p>이것은 일반적인 문장입니다.</p>
<p>이것은 <em>강조된 단어</em>입니다.</p>
<p>log<sub>10</sub>4</p>
<p>e<sup>2</sup></p>
<p>하루를 이겨내는 원동력은 <ins>맛있는 밥</ins>입니다.</p>
<p>하루를 이겨내는 원동력은 <del>맛있는 밥</del>입니다.</p>
</body>
</html>
HTML
복사
#4 링크 태그
<a> 태그
<a "속성">구글</a>
속성
: 태그에 대해 추가적인 정보 제공
HTML의 모든 태그는 속성을 가질 수 있음
<a 링크주소="www.google.com">구글</a>
<a 집="경기도 남양주시" 이름="재빈">재빈</a>
HTML
복사
href 태그
: 연결할 웹 사이트 주소를 담고 있음
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>재빈입니다.</title>
</head>
<body>
<a>구글</a>
<a href="https://www.google.com">구글</a>
</body>
</html>
HTML
복사
경로
"경기도 남양주시 XX아파트/A의 방/A"
URL
: 인터넷에서 HTML 페이지, CSS 문서, 이미지 등 자원(Resource)ㅡ의 위치를 나타냄
절대 URL
: 접근하는 최초 시작점부터 경유한 경로를 모두 기록하여 리소스의 위치를 나타냄
경기도 남양주시 XX아파트/A의 방/A
HTML
복사
상대 URL
: 기준점을 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타냄
A
HTML
복사
경로 예시
절대 URL : https://myblog.com/about/myface.jpg
상대 URL : about/myface.jpg
HTML
복사
target 속성
: 클릭으로 링크를 열 때 어디에 오픈 할 것인지 정하는 속성
target="_self"
: 현재 탭에서 링크를 여는 속성
target="_blank"
: 새 탭(창)에서 링크를 여는 속성
HTML
복사
#5 멀티미디어와 관련된 태그
이미지 태그
<img src="이미지 url">
: 불러올 이미지의 URL을 속성 값으로 가짐
src는 source(근원)의 약자
<img src="이미지 url" alt="사진 설명">
: 불러올 이미지가 없거나 불러오는데 실패했을 경우 대신 표시되는 문장
alternative text(대체 문구)의 약자
weight="수치"
height="수치"
: 이미지의 높이와 너비를 지정할 때 쓰는 속성
CSS에서 조정하기를 권장
HTML
복사
유튜브 태그
<iframe src="https://www.youtube.com/embed/"유튜브 영상 ID"></iframe>
HTML
복사
#7 폼 태그
<form> 태그
:폼에 포함되는 다양한 입력 양식 태그들을 감싸줌
action
: 데이터를 보낼 URL을 지정
method
: 보내는 방식을 지정
method="get"
: 데이터를 URL 끝에 붙여 눈에 보이게 보냄
method="post"
: 데이터를 URL에 적지 않고 내부에 숨겨서 보냄
HTML
복사