웹 페이지는 주로 원거리 통신을 통해 전달되는 경우가 많으며, 이때 사용하는 통신 방식을 HTTP라고 부른다.
웹 프론트엔드 개발에서 가장 중요한 프로그래밍 언어는 자바스크립트이다.
나는 VScode 개발 환경을 사용하겠다.
마크업 언어는 우리 주변에서 쉽게 발견할 수 있다.
아무 사이트에 접속해서 F12 키를 누르면 <개발자 도구> 창이 실행된다.
여기서 상단 메뉴의 [요소]탭을 클릭하면 해당 페이지의 HTML파일을 볼 수 있다.
HTML은 여러 가지 도구를 이용해 웹 페이지를 제작한다.
CSS는 홈페이지에 디자인적 요소를 추가해준다.
JS는 웹 페이지에 각양각색의 기능들을 추가한다.
HTML 시작하기
파일생성
VScode에서 index.html 파일을 생성한다.
코드를 실행하면 웹 페이지가 실행된다.
여기서 브라우저는 코드를 웹 페이지로 변환해 주는 도구이다.
HTML 코드를 작성할 때 코드의 맨 윗줄에
<DOCTYPE html>을 입력한다.
이는 브라우저에게 해당 문서가 html로 만든 것임을 알려주는 것이다.
생략을 하더라도 브라우저가 html파일이겠거니 추측하여 문제가 되지는 않는다.
그렇게 하면 코드에 <html>과 <head>, <body>라는 문구가 입력된다.
<>로 감싸진 동일한 단어 두 개가 앞과 뒤에 등장하며, 그 사이에 들어간 내용물의 특징에 대해 설명하는 구조이다.
코드에 삽입된 <>로 감싸진 단어들을 전문 용어로 태그라고 부른다.
VScode 확장 프로그램 설치
마켓플레이스에서 'html preview'를 설치한다.
Ctrl + K, V 단축키를 누르면 간이 웹브라우저를 통해 실시간으로 코드의 결과를 눈으로 확인할 수 있다.
깃허브 연동
- 깃허브에서 리포지토리 생성 후 해당 주소를 복사해둔다
- VScode에서 [터미널] -> [새 터미널] 메뉴 클릭
- 터미널에 아래의 명령어를 입력한다.
git config --global user.name 깃허브닉네임
git config --global user.email 깃허브아이디(이메일)
git init
git add.
git commit -m "first commit"
git remote add origin 복사한 URL
git push origin master깃허브에 코드 푸시하기
깃허브에 코드를 푸시하기 이전에는 pull을 먼저 한 상태여야 한다.
작업 중이던 코드를 푸시하는 방법은 아래의 코드를 터미널에 입력한다.
git add .
git commit -m "ver 1.1"
git puch origin master깃허브의 버전에 따라 푸시하는 브랜치가 master일 때도 있고 main일 때도 있다.
commit에는 내가 관리한 버전에 해당하는 커밋 메세지를 입력해주면 된다.
HTML 태그
태그 사용법
HTML에서는 <>로 감싸진 태그를 코드에 두 번 삽입한다. '여기서부터''저기까지'라는 범위를 표현하기 위해서이다.
각각을 여는 태그, 닫는 태그라고 부른다.
둘을 구분하기 위하여 닫는 태그에는 슬래시 기호(/)를 삽입한다.
태그의 종류는 영어로 기재한다.
범위를 지정할 필요가 없는 태그들도 있다.(줄 바꿈 등)
이런 태그를 활용할 때는 슬래시(/)를 태그의 뒤에 적어준다.
ex. <태그이름/>태그가 제공한 정보를 받아와 해독하는 존재는 바로 브라우저이다.
자주 사용하는 태그
| 태그이름 | 기능 | 활용예시 |
|---|---|---|
| <html> | html 코드임을 표현 | <html>... (html 코드를 이 사이에 삽입) </html> |
| <head> | 웹 페이지 헤드 부분임을 표현 | <head>... (헤드/웹 페이지 정보 등) </head> |
| <body> | 문서의 본문임을 표현 | <body>... (html 문서 본문) </body> |
| <title> | 사이트 제목을 표현 | <title>웹 사이트 제목 입력</title> |
| <meta> | 메타데이터 표현 | <meta name="description" conetn="sample"/> |
| <div> | 콘텐츠를 담는 그릇(줄 바꿈O) | <div>...</div> |
| <a> | 하이퍼링크 | <a href="url">콘텐츠</a> |
| <script> | 자바스크립트 삽입 | <script>... (자바스크립트 코드 삽입) </script> |
| <link> | 외부 파일을 html 문서와 연결 | <link rel="style.css" type="text/css"/> |
| <img> | 문서에 이미지 삽입 | <img src="이미지 경로"/> |
| <span> | 콘텐츠를 담는 그릇(줄 바꿈X) | <span style="color:red">빨간색</span> |
| <p> | 문단(단락) 표현(줄 바꿈O) | <p>그런데 말입니다.</p> |
| <li>와 <ul> | 목록(리스트) 표현을 위해 사용 | <ul><li>항목1</li></ul> |
| <style> | CSS 코드 삽입 | <style>... (CSS 코드 삽입) </style> |
| <br> | 줄 바꿈 | 줄 바꿈<br/>예시 |
| <h1> | 가장 큰 제목 | <h1>대제목을 입력</h1> |
| <input> | 화면에 입력창 삽입 | <input type="text" name="name"/> |
| <form> | 정보를 모아 한번에 전송 | <form action="서버주소" method="POST"...(폼 작성을 위한 코드) </form> |
| <iframe> | 다른 콘텐츠를 현재 문서에 삽입 | <iframe src="https://www.youtube.com/embed/r-848re0"/\> |
| <nav> | 하이퍼링크를 모아 두는 영역 표시 | <nav><a href="#">메인</a></nav> |
| <strong> | 글자 굵게 | <strong>굵게</strong> |
| <footer> | 웹 사이트 푸터 작성 | <footer>... (푸터 코드 작성) </footer> |
| <header> | 웹 사이트 헤더 작성 | <header>... (헤더 코드 작성) </header> |
| <button> | 화면에 버튼 삽입 | <button type="submit">전송하기</button> |
줄바꿈-<br>
HTML에서 줄 바꿈을 담당하는 태그는 <br>이다.
이때 여는 태그와 닫는 태그를 각각 기재해주지 않고 <br/> 한 개만 사용한다.
ex) 문장1<br/>
문장2<br/>
문장3<br/>단락 구분-<p>
<p>태그의 이름은 단락을 의미하는 'paragraph'에서 유래했다.
한 덩어리로 묶고 싶은 내용물들을 <p></p>태그 내부에 삽입하면 된다.
이를 사용하면 단락과 단락 사이에 자동으로 줄 바꿈이 추가된다.
<p>태그에는 줄 바꿈을 표현하는 'block'이라는 속성이 있기 때문이다.
따라서 이미 작성돼있는 <br>태그 중 일부를 삭제할 수 있다.
완성된 코드를 다듬어 개선하는 행위를 리팩터링이라고 한다.
제목 표현-<h>
<h>태크는 본문의 내용 중 제목이나 부제목, 소제목 등에 해당하는 영역을 강조할 때 사용한다.
이 태그의 이름은 제목을 의미하는 'heading'이라는 단어에서 유래했다.
<h>태그는 이대로 사용하지 않고, 뒤에 숫자를 붙여서 사용한다.
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<h> 태그 내부에 적힌 숫자가 커질수록 화면에서 작은 글자로 표현된다.
다만 <h1> ~ <h6>까지만 적용된다.
없는 태그를 입력하면 화면에 평문이 출력된다.
또한 <h>태그는 자동 줄 바꿈 기능이 있다.
볼드체 표현-<strong>
<strong>태그는 굵은 글자를 표현할 때 사용한다.
<strong>
본문
</strong><br/><br>과 같이 <strong>이 적용될 필요가 없는 정보는 <strong>태그의 외부에 기재하는 것이 좋다.
하이퍼링크-<a>
하이퍼링크를 구현하는 태그는 <a>이다.
<a href="https://booksr.co.kr">생능출판사</a> 이 태그의 의미를 해석해보면
<a> : 하이퍼링크를 동작시키겠다.
<href> : 어디로 이동할 거냐면 "https://bookrs.co.kr" 로 이동할 것이다.
라는 의미이다.
버튼의 표현-<button>
버튼을 표현할 때는 <button>태그를 활용한다.
<button>프로필 편집</button>여는 태그와 닫는 태그 사이에 입력한 문자가 버튼에 기재된다.
이미지 삽입-<img>
웹 페이지에 이미지를 삽입할 때는 <img>태그를 사용한다.
'image'의 줄임말이다.
<img src="이미지 경로"/>태그는 위와 같이 사용한다.
이미지의 크기를 변경하는 방법에는 크게 두 가지가 있다.
width 속성을 이용하여 너비를 변경하는 것과
height 속성을 이용하여 높이를 변경하는 것이다.
ex) <img src="이미지 경로" width="200px"/>px는 사각형의 점으로, 비트맵 방식의 디지털 이미지를 구성하는 가장 작은 단위이다.
px를 이용하지 않고, 퍼센트를 이용하여 너비나 높이를 지정할 수도 있다.
그러면 부모 너비의 퍼센트만큼의 값이 지정된다.
ex) <img src="이미지 경로" width="33%"/> 이렇게 창 크기의 변화에 맞추어 화면의 정보나 사진의 크기가 함께 바뀌는 웹 페이지를 반응형 웹이라고 부른다.
정보의 단위-<div>
<div>는 정보를 담는 그릇이다.
이를 이용하여 웹 페이지의 화면의 골격을 정돈한다.
그 자체로는 별 다른 기능은 없고, 줄 바꿈이 자동으로 된다.
이 태그는 전 세계의 모든 웹 페이지에서 가장 자주, 많이 등장하는 태그이다.
<div>태그는 CSS와 함께 사용할 때 그 능력이 극대화된다.
오늘은 이렇게 HTML에서 주로 사용하는 태그에 대하여 공부하였다.
0개의 댓글
