웹사이트를 만드는 프로그래밍 언어
- HTML: 웹사이트에 들어갈 내용 담당
- CSS (Cascading Style Sheets): 웹사이트에 들어갈 스타일을 담당
웹사이트 인터넷에 올리기
- Netlify: 웹서비스 배포를 도와주는 클라우드 서비스 / 웹사이트를 인터넷에 올리려면 서버가 필요한데 서버 공간 일부를 빌려줌
Netlify
내 첫번째 웹사이트
HTML
기본문법
HTML 파일의 기본 구조
<!--index라고 이름 붙이면 해당 폴더 안에서 홈페이지 역할을 하는 것임--> <!DOCTYPE html><!--document type이 html이라는 뜻이며 이 파일을 html로 써줄거라는 뜻--> <html> <head> </head><!--head: 페이지에 대한 정보(화면에서 안 보임)--> <body> </body><!-- body: 페이지 내용(화면에서 보임) --> </html>태그(Tag)
- 꺾쇠
<>로 감싸준것- 유형 1: 시작 태그
<태그_이름>와 종료 태그</태그_이름>로 내용 감싸기<p> 단락은 이렇게 넣습니다. </p>
- 유형 2: 시작 태그만 있는 경우
<img src="https://example.com/my-image.png"> <img src="https://example.com/my-image.png" />속성
- 시작 태그 안에
속성_이름="속성_값"을 넣는 문법으로 태그의 속성을 정함<a href="https://codeit.kr">코드잇</a> <img src="https://example.com/my-image.png">
배운 태그들
사이트 이름
<title>태그로 감싸기- 웹 브라우저 탭이나 창에 보이는 제목
- 페이지에 대한 제목이므로
<head>안에 넣기인코딩 정하기
<meta>태그 이용- 인코딩: 컴퓨터에서는 문자를 저장할 때 숫자 형태로 저장하는 데 어떤 숫자가 어떤 문자에 해당하는지 정해 놓은 규칙
- 인코딩에는 여러가지 종류가 있음 따라서 잘 못 사용하면 엉뚱한 문자를 보여줌
- 모든 브라우저에서 같은 인코딩을 사용하게 하려면 우리가 정해주면 됨
- utf-8: 한글을 지원하는 대표적인 인코딩 방식
- 한글 -> 숫자 -> 인코딩(utf-8) -> 한글
<head> <meta charset="utf-8"> ... </head>제목
- 제일 큰 것부터 작은 것까지
<h1>, <h2>, ... <h6>태그를 사용- heading의 약자로 영어로 제목이라는 뜻
단락
<p>태그로 감싸기- paragraph의 약자로 영어로 단락이라는 뜻
줄바꿈
<br>시작 태그 이용- break line의 약자
링크
<a>태그로 감싸기href(hypertext reference) 속성으로 이동할 주소나 경로 적기<a href="https://ko.wikipedia.org/wiki/%EC%84%9C%EC%8B%9C_(%EC%8B%9C)"> 위키 문서 보기 </a>이미지
<img>시작 태그 이용src(source) 속성으로 이미지 주소나 다운받은 이미지 이름 적기- 방법 1: 이미지 주소 이용
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Yun_Dong-ju.jpg">
- 방법 2: 다운받은 이미지 이용
<img src="yun-dong-ju.jpg"> <!--html파일과 같은 폴더에 이미지가 있는 경우--> <img src="images/yun-dong-ju.jpg"> <!--이미지가 images 폴더에 있는 경우-->영역 나누기
<div>태그로 여러 태그를 감싸거나,<span>태그로 텍스트 일부만 감쌀 수 있음- 이렇게 영역을 나누는 건 나중에 CSS를 사용할 때 스타일을 적용하는 용도로 사용함
꺽쇠 기호 넣는 법
- 꺾쇠를 글자로 입력하고 싶을 때는 꺾쇠를 그대로 쓰는 게 아니라,
<(앰퍼샌드 엘 티 세미콜론)>(앰퍼샌드 지 티 세미콜론) 이렇게 입력해 줘야 함<p> HTML 파일을 작성하려면 DOCTYPE, <html>, <head>, <body> ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다! </p>
HTML 코드를 편하게 입력하는 법
- VS Code 열기 -> 빈 HTML 문서에
!입력 ->Tab-> HTML 기본 코드 완성- 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드
궁금점: 최신 표준 모드가 뭐야?
IE브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드
[출처] IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")|작성자 Developer<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 모바일 기기에서 보여줄 비율을 조정하는 코드
<meta name="viewport" content="width=device-width, initial-scale=1.0">궁금점:
initial-scale=1.0의 의미
Controls the zoom level when the page is first loaded. Minimum: 0.1. Maximum: 10. Default: 1. Negative values: ignored.
-> 최대 줌 가능 정도를 정해주는 것으로 이해하면 되나?
아이디어와 구현을 좋아합니다!