-
7 분 HTML 핵심 feat. 테크보이 워니님 강의Programming/Web 2021. 8. 1. 19:30
<html> <head> // 헤드섹션, 문서 정보 명시 <title> 웹사이트 타이틀, 탭에서 볼 수 있음. </tytle> <link href="style.css" rel="stylesheet" //다른 곳에 저장된 파일들 이 html에 불러오는 것. href 파일의 위치. 뒤에는 이 파일이 어떤 건지 알려주는 것. type="text/css"/> <meta name="description" ccontent="문서"> // 공유될 때 웹사이트 소개뜨는데 그때 뜨는 간단 설명. <style> // 스타일태그(css코드 바로 쓰게 하는 태그)는 html과 함께쓰면 복잡하니 따로 써 link태그에서 참조. .item { color: red; } </style> </head> <body> <div class="item">안녕</div> </body> </html>
* <div class="box"> 여기서 class="box"는 속성이며 이 class속성 이용해 나중에 css로 스타일링 가능 합쳐서 엘레먼트라고 한다.
* 텍스트 관련 태그 : <b>굵게 <i>기울인 <p>문단 <br>한줄 띄고
* 미디어 관련 태그 : <image src=""/> <video src="" controls /> video는 controls를 넣어주어야 재생가능.
* 링크 태그 : < a href="" target="_blank"> 구글 </a> 하이퍼링크, target="_blank"를 넣으면 새창을 넣으라는 것.
* 테이블 태그
<table borde="1"> // 테두리 <thead> <tr> <th>이름</th> <th>나이</th> </tr> </thead> <tbody> <tr> <td>워니</td> <td>3살</td> </tr> <tr> <td>제니</td> <td>1살</td> </tr> </tbody> </table>
위의 코드는 아래와 같은 표로 그려진다.
이름 나이 워니 3살 제니 1살 *목록 태그 : <ol>순서ㅇ 목록 <ul>순서x 목록 <li> ol태그와 ul태그 아래 목록 넣을 때 태그
*구역 나누는 태그 : <div>block element <span> inline element 내용물 있는 공간만.
*인풋 태그
텍스트 <input type="text"/> <input type="checkbox"/> <input type="radio"/> <input type="color"/> <textarea></textarea> <select name="name"> <option value="워니">워니</option> <option value="제니">제니</option> </select> <form> <input type="email" placeholder="이메일"/> <input type="password" placeholder="비밀번호"/> <button type="submit">로그인</button> </form>
위의 코드는 아래와 같이 나온다.
아래의 강의를 듣고 정리한 글입니다. [ 웹사이트 코딩할때 필요한 HTML 이 영상 하나로 끝내세요 ]
'Programming > Web' 카테고리의 다른 글
코딩애플 JavaScript 입문과 웹 UI개발 Lv2(a) (1) 2022.11.24 코딩애플 JavaScript 입문과 웹 UI개발 Lv1(b) (0) 2022.11.24 코딩애플 JavaScript 입문과 웹 UI개발 Lv1(a) (0) 2022.11.23 220813 React JS 로 영화 웹 서비스 만들기 (2) (0) 2022.08.15 220812 React JS 로 영화 웹 서비스 만들기 (1) (0) 2022.08.13