-
1. 브라우저의 개념과 HTML 기초HTML, CSS 2021. 12. 20. 16:53
<0> 목차
1. 개발도구준비
2. 브라우저와 웹
3. HTML 기초 - 엘리먼트와 속성
3-1. HTML의 구조
3-2. 자주 사용하는 엘리먼트
3-3. 엘리먼트에 속성주기
4. html 파일 작성 시 유의할 점
<1> 개발도구준비
- 비주얼스튜디오코드 사용 + 확장프로그램으로 Korean, live server 설치
- 비주얼스튜디오코드란?
코드를 쓰는건 텍스트를 저장하는 기능을 가진 어디서든지 다 가능하나,
코딩 시 사용하는 단어들 자동완성 + 그 외 여러가지 기능으로 코드작성을 쉽게 할 수 있도록 기능을 강화시킨 편집기(메모장)
Extension 탭에서 다양한 확장프로그램 설치 가능
<2> 브라우저와 웹
- 브라우저란?
웹 정보를 화면에 표시해주는 응용프로그램 (ex. 크롬, 사파리, 파이어폭스...)
브라우저는 크게 1. 주소입력영역 2. 랜더링영역 으로 나누어짐.
- 주소입력영역 (=네트워크)
- 랜더링영역(=화면을 띄움) : HTML, CSS, JavaScript 세가지로 이루어짐
랜더링영역은 브라우저마다 조금씩 그 랜더링방법이 다름.
기존에는 각 브라우저 별로 호환되도록 하는 것이 복잡했으나 현재는 W3C라는 표준개발기구가 등장하고 웹 표준화 작업이 진행중이라 많이 개선됨
<3> HTML 기초 - 엘리먼트와 속성
<3-1> HTML의 구조
- HTML이란?
Hyper Text Markup Language의 약자.
여기서 Markup이란 < > 기호로 이루어진 태그(엘리먼트)방법을 말함
예전에는 '태그'라고 불렀지만 지금은 'element'가 맞는 표현
HTML은 <head>와 <body> 라는 요소가 반드시 필요함
<html>
<head>
저장소느낌. 내용을 보여주는 게 아니라 필요한 내용을 끌고 오기 위한 부분.
ex) <title></title> 등..
</head>
<body>
화면에 나타낼 내용. body영역 안에서 사용하는 엘리먼트들을 많이 아는 것이 HTML을 잘하는 것.
ex) <h1></h1> , <ul>, <li>, <input> 등..
</body>
</html><3-2> 자주 사용하는 엘리먼트
- <h1> ~ <h6> 제목 : 숫자가 클수록 폰트사이즈 작아짐
- <ul> 리스트묶음 : 반드시 묶어서 리스트 사용해야함
- <li> 리스트 : 앞에 점이 붙음
- <a> 링크
- <div> 영역 : block속성
- <span> 작은영역 : inline속성
- <input>
- <table> 표 : <tr>, <td> 엘리먼트를 사용하여 표 작성, 게시판 만들 때 자주 사용함
#사용예시
<html> <head> <title>Title</title> </head> <body> hello world <h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h4>제목4</h4> <h5>제목5</h5> <h6>제목6</h6> <ul> <li>리스트1</li> <li>리스트2</li> <li>리스트3</li> <li>리스트4</li> </ul> <a href="http://naver.com">링크</a> <div>영역</div> <span>작은영역</span> <span>작은영역2</span> <div>영역2</div> </body> </html>
#<table>엘리먼트 사용예시
<table> <tr> <td>번호</td> <td>제목</td> <td>작성자</td> <td>작성일</td> <td>조회수</td> </tr> <tr> <td>1</td> <td>안녕하세요</td> <td>ingoo</td> <td>2021-12-21</td> <td>10</td> </tr> <tr> <td>2</td> <td>안녕하세요</td> <td>ingoo</td> <td>2021-12-21</td> <td>11</td> </tr> </table>
<table> 결과화면 행의 수 = <tr> 수
열의 수 = <tr>엘리먼트 내의 <td> 수, 행마다 열의 수가 다르다면 좌측열부터 순서대로 입력되며 모자라는만큼 빈칸으로 출력됨.
<3-3> 엘리먼트에 속성주기
- 속성이란?
html 태그(엘리먼트)의 동작을 제어하기 위해 태그 내부에 사용되는 요소
ex) <a> 엘리먼트는 링크의 기능을 가지므로 이동할 주소값을 부여해줘야함
따라서 <a href="http://www.naver.com"> 텍스트 </a> 형태로 사용함.
(위와 같은 key="내용" 형식으로 값을 넣는 것을 queryString 이라고 함.)
<a href="http://www.naver.com" target="_blank"> : target속성으로 새 탭에서 링크열기
- 디스플레이 속성 : inline / block
block속성은 해당 엘리먼트가 있는 줄 한 칸을 모두 차지하는 성질을 띔. 따라서 다음 엘리먼트는 옆이 아닌 아래로 한 칸 밀려서 화면에 랜더링 됨.
inline 속성은 해당 엘리먼트의 크기만큼만 차지함. 다음 엘리먼트는 아래가 아닌 옆에 나타나며 한 줄이 꽉 찬 경우 다음줄로 밀리게 됨.
(위 예시화면에서 block 속성인 <div> 엘리먼트와 inline 속성인 <span> 엘리먼트의 결과값 비교)
html은 위에서 아래로, 좌에서 우로 구현됨. 블록/인라인 속성을 가진 엘리먼트를 정확히 구분해서 아는 것이 중요함.
- <input> 엘리먼트의 속성
<input> 엘리먼트는 닫는 태그 (</input>) 가 불필요.
<input> 엘리먼트는 속성이 매우 많음.
속성의 종류 (아래 외에도 많음)
- type=" 인풋의 타입 종류 (텍스트, 체크박스, 버튼 등) "
- value=" 인풋 상자 내에 들어갈 초기값 "
- placeholder=" 빈 인풋 상자에 나타나는 텍스트 "
- name=" 인풋의 이름(그룹화 용) "
- id=" 인풋의 고유한 이름(하나만!) "
- checked="checked" : 라디오박스, 체크박스의 기본값을 체크된 상태로.
사용예시
1 
2 
3 - input 타입 별 상세설명
1. text
<input type=“text" value="hello world!" placeholder="아이디를 입력해주세요.”/>텍스트박스 형태의 인풋박스가 화면에 나오고 초기 값으로는 "hello world!" 라는 텍스트가 입력된 상태.
해당 텍스트를 지운 빈 텍스트박스에는 "아이디를 입력해주세요."라는 텍스트가 써져있음.
이때, type="text"가 아닌 "password"로 설정하면 입력한 텍스트가 보이지 않게 나옴.
2. button
<input type=“button" value="로그인" />버튼 형태의 인풋박스가 화면에 나오고 버튼 내에는 value의 텍스트가 있음.
<button>로그인</button>이라는 독립된 엘리먼트로도 나타낼 수 있으나 인풋 엘리먼트로 더 많이 사용함.
<input type="submit"> 으로 변경하면 조금 다름 (나중에 더 배울 예정)
3. radio와 checkbox
라디오박스 = 여러 개의 선택지 중 하나만 선택 가능
체크박스 = 여러 개의 선택지 중 복수 선택 가능라디오박스의 속성을 줄 때, 여러 선택지를 하나의 주제로 묶기 위해 name 속성을 사용함.
해당 name 값을 가진 라디오박스 엘리먼트 중 하나만 선택이 가능함.
라디오박스와 체크박스에서 중요한 것은 웹 접근성 개념.
체크박스 엘리먼트와 관련된 텍스트, 이미지 등과 연결해 하나의 요소로 인식하게끔 하는 것.
이를 위해 id 속성과 <label> 엘리먼트를 사용
<input type=“radio" name="gender" id="women" /> <label for=“women">여자</label>input 엘리먼트인 라디오박스와 label 엘리먼트인 '여자'라는 텍스트를 하나의 요소로 인식해 텍스트를 클릭해도 체크가 됨.
(❗️name속성과 id속성은 매우 중요한 개념이니 잘 알아두기)
<4> html 파일 작성 시 유의할 점
1. 파일명은 영어로, 확장자는 .html
파일명에는 특수문자나 띄어쓰기 사용X ( -, _ 만 가능)
2. <!-- 주석 -->
단축키는 command + /
3. ! 만 입력하고 엔터 치면 아래처럼 기본구조가 자동으로 나옴. 편하다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>4. 태그명만 입력하고 엔터치면 알아서 꺽쇠로 열고 닫아줌. 편하다.
5.
들여쓰기 잘하기
html파일 수정 후 저장해야 브라우저에 반영됨. 까먹지 말기
+) 시멘틱 태그
같은 기능을 가지고 있지만 명시적으로 구별하기 위해 사용하는 엘리먼트
<img>, <input>, <table> 등과 같이 고유한 기능이 있는 엘리먼트도 있지만
<header>, <aside>, <section>, <address> 등과 같이 <div>와 기능적으로 차이가 없는 엘리먼트도 있음.
이런 엘리먼트는 작성자가 각각의 역할을 쉽게 이해하기위해 사용함.
'HTML, CSS' 카테고리의 다른 글
6. CSS활용 - 팝업창, 회원가입 폼 (1) 2021.12.28 5. CSS로 애니메이션 효과 넣기 (0) 2021.12.27 4. 실습 - 홈페이지 클로닝하기 (2) (0) 2021.12.24 3. 실습 - 홈페이지 클로닝하기 (1) (0) 2021.12.22 2. CSS 기초 (0) 2021.12.21