1. ✌HTML (자기소개서 제작)
생활코딩 강좌를 학습하면서 따라해본 일지를 기록해보려고 한다.
1) 태그
Hypertext Markup Language (HTML) is the standard markup language
for <strong>creating <u>web</u> pages </strong>and web applications.-위 내용을 전부 소스라고한다
-웹을지배하는 중요한문법 : tag 앞태그를 열린태그<> 뒤는 닫힌태그</>
-strong:진하게 표시 , u:밑줄
2) 제목Tag: H1
✔입력
<h1> W3C </h1>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6> 👏결과
h1태그: 제목태그 h1~h6 갈수록 크기는작아진다
3) 태그사용빈도
https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7624.png
다음과같이 빈도수 높은 태그들 부터 완벽히 숙지하자
4) br vs p 태그
<h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<br><Br>HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
<p> Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p><p style="margin-top:40px;">
>HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
</p> -br:새로운 줄바꿈 ,하나당 한줄
-p: 단락을 표현
두태그 사용시 같게보여지나 p태그가 보여지는것을 정보로서 가치있게 표현해주기떄문에 p가 더 많이 쓰임
연습사이트
-<style="margin-top:40px;"> 은 css문법으로서 위문단과의 간격을 40px만큼 벌린다
5) HTML이 중요한 이유
만약 사용자가 검색엔진에게 coding이라는 정보를 검색했다면
검색엔진은 'h3'로 감싸진 페이지와
'strong' 'span style="font-size:22px"'로
감싸진 페이지 중에 어떤 페이지를 먼저 보여줄까요?
h3로 감싸진 페이지를 더 먼저 보여줄 것입니다.
h3는 제목을 의미 하지만,strong, span style="font-size:22px"는 시각적인 장식이기 때문입니다.
6) 속성과 img
✔입력
<h1>HTML</h1>
<p> Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<img src="coding img1.jpg" width="450>
</p> <p style="margin-top:40px;">
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
</p>👍결과
위 소스에 사진을 넣기위해 img 태그에서 어떤이미지를 알려주기로 약속된 속성 src를 쓰고, 이미지 주소="coding img1.jpg"를 적자 <확장자 꼭기입>
<img src="주소.확장자" "크기속성">
✔https://unsplash.com/ : 저작권구애받지않는 이미지 사이트위 img태그에서 속성(attribute)은 src, width 이다, 둘의 위치는 바뀌어도 괜찮다.
