랜더링?
우리가 흔히 인터넷 서핑을 할 때 http:// ~~ 로 시작하는 주소를 입력해 네트워크 연결이 이루어진다.
주소 창 아래 보이는 시각적 자료 영역은 전부 렌더링을 한 것이다.
이 때 랜더링을 할 수 있는 3가지 언어는 HTML, CSS, Java Script가 있다.
즉, 랜더링의 역할 3가지는
1. html 해석
2. css 해석
3. 자바 스크립트 해석
이라고 볼 수 있다.
랜더링 기법은 각 브라우저마다 상이하다.
랜더링된 영역에서 HTML을 알려면?
크롬 환경에서 키보드에 있는 f12를 눌렀을 때 개발자도구가 나오는데
파란색 영역을 클릭하고 알고싶은 랜더링 영역을 선택해서 html을 확인 할 수 있다.
단축키는 ctrl + Shift + c
Visual Studio Code
html에 대해 공부하기에 앞서 비주얼 베이직 코드를 다운받는다.
우리는 언제 어디서나 텍스트를 입력할 수 있는 모든 프로그램을 이용하여 코드를 작성할 수 있다.
그런데 한 가지 불편함이 존재한다. 반복되는 코드 (<html> </html>, <head></head>등)을 계속해서 작성해야한다.
이를 보완하기 위한 프로그램이 비주얼 베이직 코드이다.
코드를 편하게 칠 수 있어, 코딩 시간을 단축하는데 큰 도움이 된다.
HTML이란?
HTML : Hyper Text Markup Language의 앞글자를 하나씩 딴 언어이다.
쉽게 얘기하자면, 텍스트를 뛰어넘는 마크업-무언가 표시를 하는- 언어이다.
html에서 마크업이란 <> 들을 의미한다.
HTML의 사용 형식과 명칭
1. 항상 <html>로 시작해, 반드시</html>로 닫아준다.
2. html 안에 있는 것들 즉, <> 를 엘리먼트라고 읽는다. 예전에는 태그라고 하기도 했으나, 이는 잘못 된 표현 방식이다.
<head>와 <body> 처럼 존재하는데, 이것들을 엘리먼트라고 칭한다.
3. 헤드(head)는 페이지가 로드 되었을 때 표시하지 않는 부분으로, 페이지 제목과 같은 여러 정보에 대한 링크나 기타 메타데이터를 포함한다.
head 아래의 엘리먼트 중에서는 title이란 것을 활용하여 탭 이름을 표현할 수 있다.
<title> txt </title> 같은 방식으로 사용한다.
txt라고 쓰여진 영역에는 사용하고 싶은 이름을 입력하면 된다.
만약, '타이틀'로 하고자한다면,
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
</body>
</html>이렇게 표현가능하다. hello world는 그냥 넣었다.
파란색으로 표시한 부분에 '타이틀'이라는 탭의 이름이 생성된 것을 확인할 수 있다.
4. body는 단어 그대로, 몸통. 보여주고자 하는 내용을 포함한다.
파란선 아래 보이는 화면(랜더링 된 곳)은 현재는 허전하지만..
전부 body 영역이다.
그렇다보니, html에서 body가 제일 중요하다.
이 영역 안에서 사용하는 엘리먼트를 많이 아는것이 html을 잘하는 것이라고 볼 수 있다.
Body 의 대표 태그
대표적인 태그 <h1> ~ <h6> (1~6까지있음)
<ul>, <li>, <a>, <div>, <span> 정도가 있다. 얘들도 마찬가지로, 열었으면 닫아야한다.
예시 : <h1> </h1>
<h1> 태그를 사용하여 간단하게 제목을 넣어보자. (위 코드에 연결하겠음)
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<h1>제목임</h1>
</body>
</html>출력 결과
<h2>, <h3> ... <h6>까지 전부 사용해보겠다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<h1>제목임</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
</body>
</html>출력 결과
이로써 알 수 있는 사실, h뒤에 붙은 숫자는 글자의 크기이다. 1일 때 제일 크고 6일 때 제일 작다.
이번에는 <ul> 태그와 <li> 태그를 사용해보자.
계속 코드를 추가하는 형태로 설명함.
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<h1>제목임</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>
</body>
</html>출력 결과
<li>는 list인 건 알겠는데, <ul>은 대체 무엇일까?
한 번 빼고 코드를 입력해보겠다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<h1>제목임</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</body>
</html>출력 결과
이 차이다. <ul> 태그를 사용해야 위에 사용했던 <h6> 태그 아래로 리스트가 들어간다.
태그의 display 속성
블럭 속성
코드를 입력했을 때 한 줄을 다 차지하는 것을 블럭 속성이라고 한다.
무슨 말이냐면,
이렇게 태그마다 자연히 한 줄씩 띄어진 것을 볼 수 있다. 이런 태그들을 블럭 속성이라고 한다.
코드에 엔터를 쳐서 그런 것 아니냐고? <span> 태그를 이용해서 코드를 입력해보겠다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<h1>제목임</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>
<span>영역1</span>
<span>영역2</span>
</body>
</html><span> 을 두번사용했고 똑같이 엔터를 쳐 줄을 바꿔 코드를 입력했다.
실행결과
줄을 바꿔 코드를 쳤음에도 불구하고 다닥다닥 옆으로 붙어 출력된 것을 확인할 수 있다.
이런 태그들이 인라인 속성을 가진 것이다.
이로써 알 수 있는 사실
1. 코드를 칠 때 엔터는 출력 결과와 상관 없다.
2. 옆으로 붙어서 나오느냐, 줄이 바꿔서 나오느냐는 태그의 속성과만 연관이 있다. (블럭이냐 인라인이냐, 속성을 바꾸는 방법도 있으나, 다루지 않겠다.)
태그를 블럭 속성과 인라인 속성으로 분류해보자.
블럭 속성: h1~h6, div
인라인 속성: span, a, input
만약, 인라인 속성 태그 사이에 블럭 속성 태그가 낀다면?
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<h1>제목임</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>
<span>영역1</span>
<div>블럭속성 태그</div>
<span>영역2</span>
</body>
</html>인라인 속성이라는 <span>태그 사이에 <div> 태그를 끼워넣었다.
출력 결과
div 태그 자체가 한 줄을 다 잡아먹기 때문에(블럭속성) span 태그도 자연히 줄이 바뀌었음을 확인할 수 있다.
<a> a 태그
a 태그를 사용하는 방법에 대해 알아보자.
링크를 눌러 주소를 바꾸기 위해 a 태그를 사용한다.
(주소를 바꾸는 html의 엘리먼트가 <a>이다.)
<a>라는 엘리먼트가 시작하는 부분에 내용을 넣을 수 있는데, 이것을 주로 속성이라고 한다.
<a>에는 href라는 속성값이 존재하는데,
<a href="https://green-grapes.tistory.com/">링크</a>와 같은 형태로 사용한다.
"링크" (원하는 글자 입력 가능)라는 하이퍼 텍스트를 클릭하면 해당 링크로 이동한다.
코드를 연결해서 쳐보겠다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<h1>제목임</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>
<span>영역1</span>
<div>블럭속성 태그</div>
<span>영역2</span>
<a href="https://green-grapes.tistory.com/">링크</a>
</body>
</html>
출력 결과
파란색 링크라는 글자를 누르게 되면, 지정한 주소로 이동하게 된다.
그 와중에 a태그 역시 인라인 속성이라 span 태그 옆에 바로 붙어서 출력된 것을 확인할 수 있다.
<input> input 태그
input이라는 엘리먼트가 속성이 많다.
지저분한 것같아 hello world를 제외한 body는 지우고 시작하겠다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<input type="text" placeholder="아이디를 입력해주세요."/>
<input type="text" value="값은 무엇인가?"/>
<input type="password" placeholder="패스워드를 입력해주세요.">
</body>
</html>출력 결과
placeholder는 회색 글씨로, 화면을 보고 있는 사용자에게 전달하고자하는 내용을 전달할 수 있다.
value는 초기값을 설정하는 함수이다.
type="password" 로 설정하게 된다면, 비밀번호나, 주민등록번호같은 민강 정보로 안보이게 입력할 수 있다. ●●●●●●●● 이런 형태로 출력된다.
버튼생성하기
클릭 가능한 버튼을 생성해보겠다.
이 때 버튼을 입력하는 방법은 두 가지가 있다.
1. <input type="button" value="로그인">
2. <button>로그인</button>
submit 같은 경우 클릭을 통해 정보를 제출할 수 있다.
세 가지를 모두 입력해보겠다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
hello, world!
<input type="button" value="로그인">
<button>로그인</button>
<input type="submit" value="로그인 제출"/>
</body>
</html>출력 결과
라디오 박스
둘중하나 반드시 선택하려면?
<html>
<head>
<title>타이틀</title>
</head>
<body>
<input type="radio" name="gender"/> 남자
<input type="radio" name="gender"/> 여자
</body>
</html>name이라는 속성안에 같은 그룹을 묶어주어야 한다. 라디오 박스의 기능이 단일체크를 위한 것이기 때문이다.
출력 결과
웹 접근성이란?
체크박스를 체크하지 않고, 그 근방의 텍스트만 눌러도 체크가 되는것.
label이라는 엘리먼트 사용하면? 웹접근성을 높일 수 있다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
<input type="radio" name="gender" id="men"/>
<label for="men">남자</label>
<input type="radio" name="gender" id="women"/>
<label for="women">여자</label>
</body>
</html>
id로 구역 설정해서, label for로 실행을 한다.
출력결과는 같으나, 아까와는 다르게 글씨를 클릭해도 체크박스가 체크가 됨을 확인할 수 있다.
이때 디폴트값 설정을 원한다면
checked="checked" 를 추가해주면 된다.
<html>
<head>
<title>타이틀</title>
</head>
<body>
<input type="radio" name="gender" id="men" checked="checked" />
<label for="men">남자</label>
<input type="radio" name="gender" id="women"/>
<label for="women">여자</label>
</body>
</html>출력 결과
디폴트값이 설정된 것을 확인할 수 있다.
checkbox
복수 체크 가능한 체크박스를 만들어보자.
<html>
<head>
<title>타이틀</title>
</head>
<body>
<input type="checkbox" > 컴퓨터
<input type="checkbox" > 영화
<input type="checkbox" > 독서
<input type="checkbox" > 운동
<input type="checkbox" > 잠
</body>
</html>
출력 결과
'프론트엔드 > html, css' 카테고리의 다른 글
| CSS 나머지 기능, 선택자 (0) | 2021.12.27 |
|---|---|
| HTML/CSS 본문(contents)영역 만들기 (0) | 2021.12.23 |
| margin: 0 auto 와 text-align: center의 차이점 (0) | 2021.12.22 |
| HTML/CSS 홈페이지 헤드 만들기 기초 (0) | 2021.12.22 |
| HTML id, class, CSS, margin 과 padding (0) | 2021.12.21 |