HTML 생활코딩 정리
1.HTML 태그
<head></head>
body 즉 본문을 제외한 위쪽 부분을 감싸줌. 본문과 구별하기 위한 약속<body></body>
본문 쪽을 감싸주는 태그<html></html>
html 전체를 감싸줌. 일종의 표시<title>제목내용</title>
해당 페이지의 제목을 나타내줌<li>list로 나열할 내용들</li>
list의 약자로 ol 또는 ul의 규칙 내부에서 나열을 해줌<ol></ol>
ordered list의 약자로 각 li마다 번호를 매겨줌. 1. 2. 3. 이런식으로<ul></ul>
unordered list 의 약자로 각 li마다 하나씩 나눠줌<h1>제목으로 쓸 내용</h1>
글에서 제목으로 사용. 음 마크다운의 # 과 비슷함. h2는 ##으로 h3는 ###으로 생각하면 됨.<br>
주로 글 뒤에다 씀. 새로운 행을 만들어줌. 즉 엔터역할을 함.<p>단락내용</p>
pargraph의 약자로 단락을 설정해줌. 즉 위아래 margin을 주는 것.<a href= "연결할 사이트의 링크">무엇을 링크로 만들고 시픈지</a>
링크를 연결해줌. 링크로 연결해주기 위해선 href내부에 내용을 적어야함.<img src="가져올 이미지의 위치"></img>
이미지를 불러오기
2. html 사용정리
<!DOCTYPE html>
<html>
html으로 모든 head와 body를 감싸야함 Doctype은 html이라는 것을 설명하는것 <br>
<head>
head는 본문을 제외한 선언 부분
<title>WEB1 - html</title>
제목을 작성하는 title 태그 <br>
<meta charset="utf-8">
글씨 깨짐을 방지하는 meta charset="utf-8"
</head>
<body>
본문을 묶을 땐 body를 사용해야함
<ol>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
<li>li는 바로 옆에 있는 것처럼 list를 만듬</li>
<li>ol은 ordered list의 약자같음 아무튼 list에 order를 주는 부모테크임</li>
</ol>
<ul>
<li>ul은 li들을 grouping하기 위한 부모테그 , unordered list 의 약자</li>
<li>따라서 li는 반듣시 부모테크 ul을 가지고 있고</li>
<li>ul은 반드시 li를 가지고 있음</li>
</ul>
<h1>제목으로 사용 headline 가장 큰건 h1</h1>
<h2>제목으로 사용 headline 가장 두번째로 큰건 h2</h2>
<h3>이렇게 h1 h2 h3 h4 h5 h6 까지 이런식으로 필요한 크기의 헤드라인을 사용할 수 있다.</h3>
Hello HTML
<a href="https://www.naver.com/" target="_blank" title="네이버">링크를 내개 위해서는 a태그를 사용한다. 또한 href = 링크 를 저장해주면 그 링크로 이동하게 된다. </a>
더 두껍게 표현 <strong>더 진하게 표현 가능</strong>
밑줄 치기 <u>밑줄 치기는 underline의 약자</u>
br태그를 쓰기전
<br> br이라는 태그를 쓰면 줄 바꿈이 생긴다. 닫는 괄호를 쓸 필요 없음
또한 단락을 만들기 위해서는
<p>p라는 태그를 사용한다. 이 태그같은 경우에는 닫는 태그도 필요한다. 어디서부터~어디까지가 한 단락인지를 표현해야하기 때문이다.</p>
단락이후에는 이런식으로 나타난다. P태그는 정해진 여백이 고정되어있기때문에 더 많이 여백을 만들고 싶으면 br을 여러번 사용해야한다. 하지만 CSS를 사용하면 P만 사용해도 여백을 더 크게 만들 수 있다.
<p style="margin-top: 40px ;">CSS는 p태그 내부에 style을 적기 시작하여 사용한다. CSS는 다음수업에서 더 다룬다. </p>
<img src="./draw.jpeg" width = "100%">
<p style="margin-top: 40px ;">이미지를 부르는 법, unsplash.com에서는 저작권 상관없이 사용 가능 이미지 </p>
</body>
</html>해당 코드를 실행하면 다음과 같은 결과가 나온다.
Author And Source
이 문제에 관하여(HTML 생활코딩 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gomster_96/HTML-생활코딩-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
