HTML 기초 (브라우저, 개발도구, 엘리먼트)
- 브라우저
브라우저는 크롬, 파이어폭스, 사파리 등이 있으며 주로 웹 정보를 화면에 표시해 주는 소프트웨어이다.
*( 이때 크롬, 파이어폭스, 사파리 등 브라우저마다 랜더링 방법이 다르다. )
브라우저에는 크게 네트워크와 랜더링 화면으로 나뉘는데
네트워크는 주로 랜더링을 가져오는 역할을 하고,
랜더링 화면은 HTML. CSS, JavaScript로 이루어진 영역으로 보여주는 역할을 한다.
- HTML
"Hyper Text Mark-up Language"
웹페이지를 만드는 데 사용하는 언어라고 보면 된다.
여기서 Mark-up은 <>를 의미한다.
또한 HTML은 기본적으로 <html>로 시작하며 </html>로 필수적으로 닫아주어야 한다.
- 개발 도구
사실 코딩은 메모장으로도 할 수 있다.
하지만 우리는 Visual Studio Code를 사용했다.
이유는 코딩을 할 때 정말 많은 타자를 쳐야 하는데 이런 프로그램을 사용하면 자동으로 단어를 완성해 주며
비슷한 단어를 알려주어 오타가 덜 나게 도와 시간이나 정확성 부분에서 훨씬 더 용이해서 그렇다.
이 외에도 많은 프로그램들이 있으나 우리는 Visual Studio Code로 수업을 진행했다.
우선 Visual Studio Code를 실행하면 좌측에 있는 마켓 플레이스에서
한국어 설정과 Live Server를 다운로드하게 된다.
Live Server 내가 작성한 코딩을 웹브라우저를 통해 볼 수 있게 해준다.
- 실습 내용
<html>
<head>
<tittle>타이틀</title>
</head>
<body>
hello,world!
ingoo
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>
교수님의 설명대로 좌측에 새 폴더를 만들고 index.html 이란 폴더를 생성했다.
HTML에는 <head> 와<body>라는 엘리먼트가 필수적으로 들어가야 하는데
<head>의 역할은 내용을 저장하는데 저장소 공간으로 쓰인다.
또한 <head>에는 title이라는 엘리먼트를 사용할 수 있는데 이것이 탭의 제목이다.
<body>의 역할은 내가 표출한 화면을 렌더링 영역에 보여주는 역할을 한다.
이때 <body>에 들어가는 엘리먼트들을 많이 알아야 HTML을 잘하는 것이다.
- 엘리먼트
<body>안에는 여러 가지 엘리먼트들을 사용할 수 있는데
주로 사용하는 엘리먼트들은
<h1 ~ h6> : 숫자가 클수록 글씨 크기가 작아진다.
<ul>: 리스트를 묶는데 사용
<li> : 리스트 (앞에 점이 붙는다)
<a> : 링크 설정 (href 속성)
<a href="http://naver.com>링크</a>
<a>가 시작하는 부분에 내용을 넣을수가 있는데, 이것을 주로 속성이라고 한다.
<a href="http://google.com">구글로 이동</a>(<a> 엘리먼트 사용 예시 href속성 사용)
속성="속성값" / querystring
href 링크를 거는 속성이고
그 안에 들어가는 값이 링크를 이동하는 값입니다.
<div> : 영역 (blcok 속성)
<span> : 작은 영역 (inline 속성)
block 속성이란 한 줄을 통째로 차지해 다음 줄로 넘어가는 것이고
inline 속성이란 엘리먼트의 크기만큼 자리를 차지하는 것이라 한 줄이 꽉 찼을 때 다음 줄로 넘어가는 것이다.
(<div>를 사용해 한 줄을 통째로 차지하는 영역과 <span>을 사용해 떨어져 있지 않는 작은영역)
<input> : 속성값이 매우 많고 input은 닫는 태그가 없어도 실행된다.
<input
type="text"
placeholder="아이디를 입력해 주세요"
/>
<input
type="password"
placeholder="패스워드를 입력해 주세요"
/>
<input type="button" value="로그인"/>
<button>로그인</button>
<input type="submit" value="로그인 제출"/>
<input type="radio" name="gender" id="men" checked="checked/>
<label for="men">남자</label>
<input type="radio" name="gender" id="women"/>
<label for="women>여자</label>
<input type="checkbox" > 컴퓨터
<input type="checkbox" > 영화
<input type="checkbox" > 독서
<input type="checkbox" > 운동
<input type="checkbox" > 잠*<input>의 여러 가지 속성
type : 입력 태그의 유형을 설정 (예 : password, radio, checkbo
x)
placeholder : 칸에 예시를 적어준다 (에 : 아이디를 입력해 주세요)
value : value의 텍스트가 버튼에 생성된다
button : 기본 버튼 생성
submit : 서버로 제출하는 버튼 생성
radio : 다수 중 한 가지를 선택할 때 사용한다 ( 예 : 성별, 나이 )
check box : 다수 선택할 때 사용한다.
- 주의 사항
-tap 키 잘 누르기
-ctrl + s로 저장 후 브라우저 확인
Author And Source
이 문제에 관하여(HTML 기초 (브라우저, 개발도구, 엘리먼트)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ash991213/HTML-기초-브라우저-개발도구-엘리먼트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
