에디터 프로그램
The collaborative browser based IDE
Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS
repl.it
HTML 태그의 기본
<head> 태그 안의 태그들
<div class="box">박스</div>
<a href = "naver.com">네이버</a>
1. <div></div>는 태그라고 하고 항상 열림/닫힘 한 쌍이 있다.
2. class="box"은 속성이라고 함. 이 class 속성을 이용해서 나중에 css로 스타일링을 할 수 있음.
3. 합쳐서 "엘레먼트"라고 부름<body>태그 관련텍스트 관련 태그들
미디어 관련 태그들
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
</head>
<body>
<!-- 미디어 관련 태그들 -->
<!-- 사진을 불러 올 때 쓰는 태그
src 는 소스의 줄임말이다. -->
<img src="이미지주소"/>
<!-- 비디오를 불러 올 때 쓰는 태그 -->
<video src="비디오주소" controls />
<!-- 링크 태그 -->
<a href="naver.com">네이버</a>
<!-- 새 창을 열어서 랑크 주소로 이동 -->
<a href="google.com" target="_blank">구글</a>
</body>
</html>테이블 태그
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
</head>
<body>
<!-- 테이블 태그 -->
<table border="1">
<!-- 테이블의 칼럼 개수, 칼럼 이름 -->
<thead>
<!-- 칼럼 2개 생성 -->
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<!-- 표의 내용이 들어감 -->
<tbody>
<!-- 첫 줄 -->
<tr>
<td>고양이</td>
<td>6살</td>
</tr>
<!-- 두번째 줄 -->
<tr>
<td>물고기</td>
<td>1살</td>
</tr>
</tbody>
</table>
</body>
</html>
목록 태그들
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
</head>
<body>
<!-- 목록 태그들 -->
<!-- <ol>은 ordered list (순번을 붙여줌) -->
<ol>
<li>보비</li>
<li>쵸비</li>
<li>예쁘니</li>
</ol>
<!-- <ul> : unordered list / 앞에 점을 찍어주는 태그 -->
<ul>
<li>보비</li>
<li>쵸비</li>
<li>예쁘니</li>
</ul>
</body>
</html>
구역을 나누는 태그들
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
<style>
.top{
background: red;
height : 100px;
}
.mid{
background: blue;
height : 100px;
}
.bot{
background: green;
height : 100px;
}
</style>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<!-- <div> vs <span> -->
<div class ="top">상단</div>
<div class="mid">중단</div>
<div class="bot">하단</div>
</body>
</html>
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
<!--style태그는 css를 적어 줄 수 있다.-->
<style>
.top{
background: green;
height : 100px;
}
.mid{
background: yellow;
height : 100px;
}
.bot{
background: red;
height : 100px;
}
.like{
background: green;
height : 100px;
}
.sub{
background: yellow;
height : 100px;
}
.comment{
background: red;
height : 100px;
}
</style>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<!-- <div> vs <span> -->
<!-- <div> -->
<div class ="top">상단</div>
<div class="mid">중단</div>
<div class="bot">하단</div>
<!-- <span> -->
<span class ="like">좋아요</div>
<span class="sub">구독</div>
<span class="comment">댓글</div>
<!-- <div>(block element)는 한 줄 전체 공간을 차지
<span>(inline element)은 자기 내용물 만큼의 공간만 차지 -->
</body>
</html>
인풋 태그
<!-- html 라는 것을 표현한다.-->
<html>
<!-- html 안에는 <head>,<body> 두 가지 태그가 있음 -->
<head>
<!-- 어떤 문서가 들어가는지 명시한다.-->
<title>타이틀을 적어주면 탭 창의 제목이 바뀝니다.</title>
<!--link 태그는 다른 곳에 저장되어있는 파일들을 불러와라라는 뜻이다.-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- mata 태그는 이 파일이 어떤 정보를 갖고 있는지를 나타내는 태그 이다. 스크랩할 때 간단하게 소개하는 멘트가 보여진다.-->
<meta name="description" content="HTML을 공부하는 문서">
</head>
<body>
<!-- 인풋 태그들 -->
텍스트 : <input type="text" />
체크박스 : <input type="checkbox" />
라디오 : <input type="radio" />
색깔 : <input type="color" />
여러문장 : <textarea></textarea>
드랍다운 : <select name="name">
<option value="보비">보비</option>
<option value="보비">쵸비</option>
</select>
<br>
로그인 :
<form>
<input type="email" placeholder="이메일" />
<input type="password" placeholder="비밀번호" />
<button type="submit">로그인</button>
</form>
</body>
</html>
':: IT > HTML' 카테고리의 다른 글
| [HTML] 모바일 지원 메타태그 (0) | 2020.06.01 |
|---|---|
| [HTML] 의미론적인 태그 (0) | 2020.06.01 |
| [HTML] from: hidden / lable (0) | 2020.05.31 |
| [HTML5] 태그 (0) | 2020.03.25 |
| [HTML] 기초문법과 태그 (0) | 2020.03.24 |