HTML
1)기본적인 HTML 코드 시작
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
</body>
</html>2)기본적인 태그
<head>: 브라우저가 웹페이지를 구성하는데 필요한 태그를 포함
<meta>: 브라우저가 페이지를 구성하는 상세한 정보를 줌
<title>:브라우저가 페이지의 제목을 정하고 브라우저의 상단에 보여주거나 즐겨찾기나 검색 결과에 보이는데 사용
<h1>~<h6>: 제목
<p></p>: 내용3)리스트 만들기
<ul></ul> (unordered list - 불규칙 리스트): 기호가 있는 리스트를 작성할 때 - 브라우저는 리스트의 항목 앞에 숫자를 붙이지 않는다
<ol></ol> (ordered list - 규칙 리스트): 브라우저가 각 항목에 숫자를 붙여줌. B
--> 숫자를 넣은 리스트가 좋은 이유는 브라우저가 항목을 잘 다뤄주기 때문 항목을 지우거나 추가해도 숫자가 올바르게 바뀜
<li></li> (list item): 새로운 항목을 추가할 때 <ul> or <ol> 아래에 새로운 <li>를 추가해야 함4)레이아웃 나누기
<br>: 띄어쓰기(Enter 의미)
띄어쓰기(Space Bar 의미)
<div>: 레이아웃을 나누는데 주로 사용(가상의 레이아웃을 설계하는데 사용)
<span></span>: CSS와 함께 쓰이고 display 속성이 block이 아닌 inline
--> <div>와의 차이5)링크 접속
<a></a>: (anchor)하이퍼링크를 걸어주는 태그
- <a href=””> : 클릭 시 이동하는 링크
- <a target=””> : 링크를 여는 방법
_self: 현재 페이지(기본값)
_black: 새 탭
<a href=”./contact.html”>: 상대 페이지에 연결5-1)Linking to same page
1) ID설정하기
ex)<p id="top">This is the top of the page!</p>
<h1 id="bottom">This is the bottom! </h1>
2) 해시태그로 설정하기
ex)
<ol>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ol> 6)특정 내용의 강조
<em></em>: 이태리체로 변경
<strong></strong>:글자체 굵게 표시8)이미지, 비디오 삽입
<img src="" alt=""> - URL을 말해줘야 함(단 인터넷에 있는 이미지만 삽입 가능, 컴퓨터 내에 있는 이미지는 불가)
- src속성값은 항상 따옴표로 둘러싸여 있음
- alt값은 이미지를 묘사하는 텍스트를 적어줌 (alt는 항상 들어가야 한다!!)
<video src=””> </video> - <img>와의 차이는 꼭 닫아줘야 함!!
<controls> - 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어가 표시됨을 명시
<Video not supported> 브라우저가 비디오를 로드할 수 없는 경우에만 표시됨
<width> (너비), <height>크기 조정 - 둘 중 하나만 사용해야 함. 그렇지 않을 경우 이미지가 왜곡될 수 있음
내실 있는 프론트엔드 개발자가 되기 위해 오늘도 최선을 다하고 있습니다.