[유튜브] web1. html 강의 리뷰 및 실습(~14강) / 생활코딩
퇴근 후 돌아온 나롱입니다. 저는 게임회사 비개발 직군에서 일하고 있는데요. 직접 개발을 하진 않지만 종종 데이터를 뽑을 땐 SQL을 다루기도 합니다. 젊었을 때 코딩이란 기술을 놓쳐버리면 나중에 정말 후회할 것 같아 2021년 부터 큰 맘먹고 공부하려 합니다! 관심있는 분들이 있다면 함께 공부했으면 좋겠어요 😊
파이썬을 공부하려니 html 강의를 먼저 보고 오라길래 오늘은 html 14강까지의 내용을 실습물로 기록하고자 합니다.
1. 실습 결과물
- 웹에서 Ctrl/Command + O 를 눌러 파일 열기
2. HTML 코딩 준비물
- 만들고 싶은 내용이 출력 될 웹페이지 ← 출력(결과)
- 만들고 싶은 내용이 담긴 에디터 ← 입력(원인)
(+) 에디터는 영상에 사용된 아톰을 사용 atom.io/
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
3. HTML 검색 시 키워드 팁
- 에디터 찾기 : Best html editor
- html 사용서 : html specification
- 특성 태그 검색 : html h1 tag
※ 밑줄은 유연하게 변경하여 검색 가능
4. html 웹/에디터 사용 방법
● 에디터에서 html 파일 만들기
- 컴퓨터에 폴더 만들기
- Atom > File > Open Folder에서 폴더 선택
- 왼쪽 project에 선택한 폴더가 나타났다면 > 오른쪽 클릭 > new file > 이름 입력
※ 이름은 영문으로 쓸 것
※ .html 확장자를 붙일 것
- 엔터를 치면 폴더 안에 html 파일이 만들어짐
● 웹에서 html 파일 열기/보기
- 인터넷 브라우저를 열기
- Ctrl + O, 또는 Command + O를 입력
- 아까 저장했던 html 파일을 열기
※ 에디터에서 파일 내용을 변경/저장한 후, 웹에서 새로고침하면 변경 내용 실시간 확인 가능
5. 태그 공부하는 법
● 태그(TAG)란?
: 옷의 상태를 설명하는 옷 태그 처럼 웹페이지 내 정보의 상태를 설명하는 문법
(ex) 글을 볼드 처리 → <strong>
(ex) 이미지를 넣음 → <img src="">
: 영역이 있는 경우 열고 닫는 태그가 있음
(ex) <strong> 퇴근 후 연화 </strong>
: 태그 이름은 사전을 참고하면 쉽게 예측할 수 있다.
● 중요 태그
- 150개가 넘는 태그가 있으나 실제로는 20~30개 태그들이 중점적으로 사용되고 있음
- 자주 사용되는 태그를 확인하고 중점 공부하면 좋음
6. 수업으로 배운 태그
● <strong> 텍스트 </strong>
- 볼드 처리할 수 있는 태그
: 지정하고 싶은 영역 앞뒤로 여는 태그 <strong>
닫는 태그 </strong>을 달면 된다.
● <u> 텍스트 </u>
- 밑줄을 그을 수 있는 태그 (underline)
: 밑줄 긋고 싶은 영역 앞뒤로 <u>,</u>를 단다.
(ex) <strong> <u> 텍스트 </u> </strong>
● <h1> 텍스트 </h1> ‥‥‥ <h6> 텍스트 </h6>
: 제목 형태로 만드는 태그 (headline)
: 종류는 h1~h6 6개가 있으며 점점 크기가 작아짐
: 영역 앞뒤로 <h1> 텍스트 </h1>을 단다.
● <br> 또는 <p> 텍스트 </p>
<br>은 단순한 줄 바꿈의 역할
<p>는 단락을 나누는 역할을 함 (정보 의미가 더 큼)
<br>은 줄 바꾸기를 희망하는 곳에 입력하면 끝
<p>는 영역 앞뒤로 여는 태그, 닫는 태그를 달아야 함
: <p>는 CSS를 이용 해 디테일하게 적용 가능
● <img src="이미지 주소">
: 사진을 넣는 태그(image)
: img는 이미지를 넣겠다는 뜻, src는 source의 줄임말로 넣고 싶은 이미지가 여기에 있다는 것을 의미 함
: 넣고 싶은 사진을 프로젝트 폴더에 저장 후 소스 주소에 파일의 이름과 확장자명까지 입력하기
: 이미지 크기를 조절하고 싶으면 아래를 추가, 따옴표 안에는 사진 크기 또는 퍼센트가 들어갈 수 있음
<img src="~" width="크기">
● <ul> 텍스트 </ul> & <li> 텍스트 </li>
<li>는 목차를 만드는 태그 (list)
: 각 목차 내용 앞 뒤로 여는 태그, 닫는 태그를 달면 리스트로 구분 할 수 있게 됨
: <li>는 리스트화 된 내용을 카테고리처럼 묶을 수 있는 부모 태그가 존재한다. 바로 <ul></ul>
: 영역 앞 뒤에만 태그를 붙인다. 겉으로 볼때는 차이가 없으나 문법적으로 정보적인 의미를 강화시킬 수 있다. (문법이 길어지면 알아보기 힘드니 정리한다는 개념)
● <ul>과 비슷한 <ol>
: <ol>은 숫자를 자동으로 매긴 목차 태그(ordered list), <ul>은 숫자 없는 목차 태그란 뜻(unordered list)
: <li>로 리스트 구분을 하되 순번을 매기냐/마느냐를 부모 태그로 정한다는 개념
▶[예시] <ul>&<li>로 목차를 짤 경우
- 순번을 매길 경우 내가 직접 숫자를 입력해야 함
- 순번이 변경되면 하나하나 손으로 바꿔야 함
- 그래서 <ul>은 순번 없는 목차를 쓸 때 사용해야 한다.
▶[예시] <ol>&<li>로 목차를 짤 경우
- <ul>과 달리 순번을 매길 경우 사용한다.
텍스트에 숫자를 적을 필요가 없다.
- 저장하고 웹에서 리로드하면 자동으로 순번이 매겨짐
- 순번이 바뀌거나 추가 되더라도 쉽게 변경 가능
● <a href="링크 주소"> 텍스트 </a>
: 링크를 연결하는 태그 (Hypertext, anchor)
: a는 링크를 달거나, h는 하이퍼텍스트 링크라는 것, ref는 reference로 이 링크를 참조해서 링크하라는 뜻
: 링크를 달고싶은 영역 앞뒤로 위 태그를 달아줌
: 새창에서 열기 희망하는 경우 아래를 추가한다. <a href="주소" target="_blank"> 텍스트 </a>
: 툴팁으로 링크 정보를 알리고 싶다면 아래를 추가한다. <a href="주소" title="링크 정보"> 텍스트 </a>
● <title> 제목 </title>
: 브라우저에서 표시되는 웹페이지 제목을 나타냄
● <meta charset="utf-8">
: 웹에서 에디터로 작성된 양식으로 불러오게 하는 태그
span style="color: #333333;">(웹에서 한글을 못읽어서 깨지는 등의 문제 방지)
: meta는 규칙/치환의 의미, char는 character(문자) set는 setting을 의미, ""에 에디터 파일 형식을 적음
● <head> 영역 </head> & <body> 영역 </body>
: 페이지에 대한 정보 영역을 <head>로 페이지 내 들어가는 본문을 <body>로 구분함
: 일반적으로 <title>, <meta~>가 헤드로 구분됨
● <html> 전체 </html>
: html 코드 위 아래로 최고위 태그인 <html>을 넣음 여는 태그부터 다는 태그까지 html 코드가 사용된 것을 구분/알려주는 태그
● <!doctype html>
: 이 웹페이지 문서는 html로 이루어졌다는 정보를 전달
7. 태그가 검색에 미치는 영향
- 태그를 활용한 웹 문서의 경우 검색 엔진에 더 잘 걸림
(ex) 에디터에서 소제목을 꾸밀 경우
① 헤드라인 태그 <h1~h6>을 사용해서 소제목을 적음 → <h1> 소제목 <h1>
② 글 꾸밈 효과로 소제목을 적음 (글자 크기& 볼드) → <strong><span style="font-size:22px;"> 소제목 </span></strong>
※ 웹 텍스트들은 수많은 태그로 이루어져 있고 검색 엔진은 태그를 포함하여 검색 결과를 찾음
※ 작성자는 두가지 방법 모두 소제목을 강조하기 위해 사용했으나, 엔진에서는 <h1>으로 작성된 제목을 더 중요한 정보로 인식할 확률이 높음
※ 검색 엔진도 매일매일 진화하고 보완되고 있으나, 키워드로 확실하게 인식되기 위해서는 태그가 중요
여기까지 14강 내용이었고 내일부터는 인터넷에 대해 공부하려고 합니다. 마지막 내용은 저도 처음 알아서 오늘은 에디터에 소제목 기능을 써봤어요! 같이 열심히 공부해서 인공지능도 마스터하면 좋겠어요ㅎㅎ 그럼 퇴근 후에 만나 안녕🧡
'주경야독 > 언어' 카테고리의 다른 글
| 영어 공부 - 잠 깨며 이야기 나누기 (0) | 2023.11.17 |
|---|---|
| 영어 공부 - 아침에 일어나기 (1) | 2023.11.10 |
| [중국어][작문] 可不理喻 (0) | 2016.07.27 |
| [중국어][작문] 글쓰기와 해방 (0) | 2016.07.25 |
| [중국어][작문] 너도 떠나보면 나를 알게 될거야 (0) | 2016.07.20 |