1. 코딩 프로그램 다운로드
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
2. 새폴더로 저장할 곳 만들기
3. 기본 태그 설명
html의 tag는 여러개가 있다. (150개 이상)
<strong></strong> 은 글자 굵기
<u></u>는 밑 줄 긋기
<h1></h1>은 글자 크기. h1~h6까지 있다. 제목 넣을 떄 유용
https://www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
어떤 태그가 많이 사용되고 있는지 나타낸 사이트인데 많이 사용되는 태그 26개 정도만 알면 된다.
freuqncy of chinese words 검색해보면 的 자가 제일 높은 비율을 차지한다.
한 페이지의 4퍼 정도 차지 이와같이 중요한 것을 잘 아는 것이 중요하다.
html new line tag = <br> (한 웹에 70% 사용됌)
애는 문장 사이 공백 만들기 이니까 끝 </br>은 없음 (줄 바꾸는 것임) 붙여서 여러개 쓰기 가능
<br><br>... 이렇게
html paragraph tag = </p><p> (문단 바꾸는 것) (80% 사용됌)
여기다가 </p><p style="margin-top:100px;"> 이런거 입력 가능
CSS에서 많이 쓰이는 것 - margin은 여백, margin-top은 위쪽 여백이라는 것
<h1>im big</h1>4. 이미지 넣기
이미지를 넣고 싶을 떄 태그의 이름을 <img> (85% 사용) 라고 넣는다. 껍데기만 넣으면 안되니까
source = src = "xxxx" xxx에다가 이미지 파일 이름을 넣으면 된다. ex) <img src="xx">
Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
unsplash.com
저작권 구애없이 공공재처럼 사용가능한 사이트.
이미지를 같은 파일 안에 넣고 너무 크다면 width 를 추가하면 된다.
<img src="coding.jpg" width="100%">
초록색을 Attribute 속성이라고 부른다. 속성끼리는 누가 먼저 와도 상관없다.
태그가 태그의 이름만으로는 정보가 부족할 때는 이런 속성을 통해서 더 많은 의미를 부과할 수 있다.
포함 하는 태그:부모 태그
포함 되어진 태그: 자식 태그
목차 , 목록을 뜻하는 <list> 앞글자 <li>(74% 사용)
Ctrl 누른 상태에서 클릭시, 중복 선택 가능
Tab을 누르면 안쪽으로 들여쓰기가 가능
<li>1.html</li>
<li>태그의 부모태그 - <ul> unordered list (74% 사용)
<li>태그는 어디서 부터 어디까지가 서로 연관된 항목인지를 경계를 하기위한 부모 태그가 필요하다.
<ol>을 쓰면 ordered list (순위권 밖)
ex) 1. 사랑해 2. 야야야 3. 안녕
였는데 1.사랑해를 지워야 한다. 2를 1번으로 바꿔야하는 데 이런 게 많으면 시간이 너무 많이 걸리니까 이 떄 유용하다.
<ol> 태그를 쓰면 1번 2번 이런식으로 알아서 바꿔준다.
5. 제목 선정
<title></title> 은 웹 제목 선정하는 것
우리가 가끔식 파일을 열면 이상한 외계어로 글자가 나열돼있는 것을 볼 수 있는데 이것은
우리글자가 출력될 때 보내는 0과 1이 UTF-8 방식으로 저장됨으로 이 방식으로 쓴다고 입력해줘야 한다
<Meta charest="utf-8"> 이렇게 하면 글자가 안 깨진다.
ㄴ 본문이 utf-8 방식으로 되어있다. 것을 알려줌
html에 있는 모든 태그는 <head> 태그 또는 <body>태그 이 둘 중에 하나 아래에 놓이게 된다. 고위직 태그.
최고위층 태그 <html></html>
<!doctype html> 이 사이트는 html로 되어있다! 라는 뜻 <html> 위에다가 써주면 된다. 대부분의 웹 첫 문장이 다 가지고 있다.
본문은 <body>로 묶기로 한다. 본문을 설명하는, 바디를 설명하는 태그는 <head>로 묶기로 약속했다.
<a> 태그는 anchor 의미로. 정보의 바다에 정박한다 링크를 단다는 뜻
html specification
공식 html을 만든 W3C라는 국제기구 사이트
<hypertext> 의 약자 h
<reference> 의 약자 ref
<a href="주소"> xxxx </a>
이렇게 하면 xxxx에 링크가 걸린다.
만약에 눌렀을 때 새 링크가 뜨게 하고 싶다 하면 속성(주황색) 을 넣어주면 된다.
<a href="주소" target="_blank">
만약에 마우스 커서를 위에 올려뒀을 때 어떤 사이트인지 표시해주고 싶다 하면
<a href="주소" target="_blank" title="html5specification"> 하면된다.
www.youtube.com/watch?v=iRZJHhjh8DU&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=5
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| <유튜버 - 생활코딩> WEB2 - JavaScript 14~ (0) | 2021.01.19 |
|---|---|
| <유튜버 - 생활코딩> WEB2 - JavaScript (0) | 2021.01.16 |
| <유튜버 - 생활코딩> WEB2 - CSS - 2 (0) | 2021.01.13 |
| <유튜버 - 생활코딩> WEB2 - CSS (0) | 2021.01.12 |
| <유튜버 - 생활코딩> WEB1 - INTERNET 17~32 따라하기 (0) | 2021.01.12 |
