웹개발
[생활코딩 HTML & Internet] 정리노트
하금12
2023. 3. 15. 19:51
1. 코딩 준비
1. visual stuio code 설치
2. File > Open file > 원하는 파일 위치 선택
3. html 파일 생성 (원하는이름.html) .html = 확장자
4. 생성된 웹 켜놓고 실행화면 같이 보면서 코딩 (저장 눌러야 반영된다!)
2. 웹 개발을 위해 기본적으로 세팅해놔야 할 것
visual studio code 에서 ! 치면 등장
| <!DOCTYPE html> | html 버전이 무엇인지 알려주는선언 |
(html 의 버전 및 내용을 잘 출력하도록 도와주는 역할) <!DOCTYPE html>은 Html 5 버전을 의미 html 태그는 아님 (! 을 붙인 이유 |
| <meta charset="utf-8"> | Character set 설정 | charset = character set > utf-8로 문서를 읽으라는 명령, utf-8이 가장 많이 사용 |
| <html></html> | html | |
| <head></head> | 본문 외에 안보이는 정보 묶기 | |
| <body></body> | 본문 정보 묶기 |
3. HTML 주요 태그 정리
태그는 자주 쓰는 것만 외워놓고 대부분 구글링 통해 필요할 때 그때그때 찾으면 된다.
(br태그 찾기 위해 html new line tag 라고 검색할 있다)
| tag | 의미 | 사용방법 / 비고 |
| <h1> </h1> | heading 제목 | h1 - h6 까지 존재, h1 가장 크고 굵고 h6 가장 작음 |
| <strong> </strong> | 볼드 | |
| <u> </u> | underline 밑줄 | |
| <br> | 줄바꿈 | Closting tag 필요 없다 |
| <p></p> | Paragraph | |
| <img> | image | <img src width = 100%> width로 사이즈 조정 |
| <ul> <li> </li> </ul> |
unordered list (bullet point 로 표시) |
<ol> = ordered list, 숫자 자동 생성 <ul>, <ol> 둘다 <li> 를 자식태그를 세트로 갖고 있음 |
| <title></title> | 웹페이지 제목 설정 | |
| <a> | anchor 링크 | hred 속성 필요! href = hypertext (링크) + reference 링크가 새탭에서 열리게 하는 방법 target = "_blank" 속성 추가) 링크 클릭 전 설명 title = "원하는 설명" |
| <div></div> | 의미 없음, 구분용 | block level element (줄바꿈됨) |
| <span></span> | 의미 없음, 구분용 | inline element (줄바꿈 안됨) |
<기타>
- tag 이름 만으로는 정보가 부족할 때 source (속성)을 같이 넣어줘야한다. source 줄여서 src
- <img scr = "__.jpg width =100%>
- 부모 자식 태그: 한줄 띄고 Tab 로 구분
- 주석처리: Ctrl + /
실습화면
저는 제가 좋아하는 조성진 피아니스트 설명 웹사이트를 만들어봤습니다.
4. 인터넷 개념
인터넷이 탄생하기 위해서는 최소 두 대의 컴퓨터가 필요하다.
웹브라우저가 있는 컴퓨터(클라이언트)가 웹 주소를 치면 서버가 있는 컴퓨터(서버)에게 주소 달라고 요청 ->웹 서버 컴퓨터가 그 웹의 코드를 클라이언트에게 전송
즉 클라이언트가 request 서버가 response
Hosting, Cloud = 웹 서버 제공해주는 서비스
그 중 하나가 Github