1. 시작하기
- HTML 이란?
→ HTML은 웹 사이트 내용을 담당하고 CSS는 웹 사이트의 스타일을 담당하는 언어
→ HTML은 Hyper Text Markup Language의 약자로
Hyper Text의 의미는 서로 링크로 연결된 문서를 의미하며,
Markup Language는 마크업하는 프로그래밍 언어
즉, 내용에 추가적인 정보를 표시하는 프로그래밍 언어를 뜻한다.
→ 다시 말해서 HTML은 서로 링크로 연결된 문서를 만들 때 쓰이며, 내용 뿐만 아니라 추가적인
정보도 표시 한다.
→ 글쓴 사람이 어떤 내용이 제목이고 본문인지 정확하게 표시해주는 것이 마크업의 역할
→ 마크업을 사용하면 왼쪽과 같이 이런 글로 쓰인 정보를 문서의 구조와 의미를 만들 수 있다.
- HTML의 기본 문법
<a href="reservation.html">예약</a>
→ 꺾쇠로 감싸져 있는 것을 태그라고 부르고, 꺾쇠 바로 옆에 적혀 있는 것이 태그의 이름을 뜻한다.
→ 태그 중에서도 앞에 있는 것을 시작 태그, 뒤에 있는 것을 종료 태그라고 한다.
→ 시작 태그와 종료 태그 사이에 있는 것은 내용이라고 한다.
→ 시작 태그에는 속성이 있는데, 속성에는 속성 이름과 값으로 나누어진다.
→ 참, 거짓을 값으로 하는 속성에서는 속성 이름만 쓰는 방법이 있다.
→ 속성 값을 참으로 하고 싶으면 이렇게 속성 이름만 작성하고, 속성 값을 거짓으로 하고 싶으면
아예 아무 것도 쓰지 않는 방식
→ 기본적으로 HTML 파일의 구조는 위와 같다
→ 맨 처음에는 무조건 <!DOCTYPE html> 이라고 작성해야 하는데
이것은 이 문서가 HTML로 작성되었다고 적어주는 것
→ 그 다음에는 <html></html> 태그로 전체를 감싸준다.
이 태그는 HTML 문서 전체를 감싸는 용도의 태그
→ <head></head>에는 페이지에 대한 정보가 들어가고,
<body></body>에는 화면에 보이는 내용이 들어간다.
→ HTML 문서에서 태그를 작성할 때에는 위와 같이 들여쓰기를 하는데
<html></html>태그로 <body></body> 태그를 감싼 것처럼 태그로 태그를 감싸는 경우에는
그 안에 있는 시작 태그와 종료 태그를 두 칸씩 들여쓰기를 해서 사용한다.
→ 들여쓰기는 동작이나 내용에 영향을 주지는 않고, 코드를 읽기 편하도록 만드는 용도
- 코멘트
→ 코멘트는 웹사이트에 아무런 영향을 주지 않는다. (브라우저가 무시하기 때문)
→ 코멘트는 메모를 남길 때 사용한다.
코드를 쓰다보면 메모를 남기고 싶을 때가 있는데 코드에 코멘트를 작성하면 다른사람이 코드를
볼 때에도 도움이 된다.
→ 또, 코멘트는 코드를 잠깐 감추고 싶을 때 사용한다.
코드에서 문제가 생기면 어떤 부분이 문제인지 확인하기 위해 잠깐 숨길 때 사용
→ CTRL + /를 누르면 해당 코드가 코멘트(주석)처리가 된다.2. 링크
- 링크의 상대 주소
→ 웹사이트에서 링크는 페이지와 페이지를 이어주는 것으로 링크를 만들 때에는 <a>태그를 사용
→ href라는 속성이 있고, 여기에 주소를 속성 값으로 적으면 링크를 클릭했을 때 해당 주소로 이동
→ index.html 파일에는 링크가 2개가 있는데 하나는 네이버 영화 사이트로 이동,
다른 하나는 contents.html 파일로 이동하는 링크이다.
→ 이런식으로 파일 경로를 써주면 현재 경로를 기준으로 이동한다.
→ href의 값으로는 기본적으로 사이트 주소 전체를 쓰거나 경로를 쓸 수 있다.
→ 여기서 http://127.0.0.1:3000 이런식으로 적혀져 있는데
이것은 라이브 프리뷰가 서버를 실행해서 내 컴퓨터에서만 쓰는 주소로 접속할 수 있게 해준 것
→ index.html 파일에는 숨은 기능이 있는데 같은 index.html 파일이지만 하나는 movies라는
폴더 내에 있을 때, 경로를 movies/라고만 써도 된다.
→ index.html 파일은 이런 식으로 폴더의 경로로 접속했을 때 기본으로 보여주는 파일
→ 상대적인 주소에서는 지금처럼 파일의 이름만 써도 되지만, 상대적인 경로를 써서 표현할 수 있다.
→ 상위 폴더로 이동할 때에는 ../ 여기서 .는 현재 폴더를 의미하고, ..는 상위(부모)폴더를 의미
→ 상위의 상위폴더로 이동할 때에는 ../../를 두 번 써주면 된다.
→ 문제는 폴더가 많아지고 폴더에 폴더의 폴더가 생기면 여러번 써서 쓸 수가 없으로
최상위 폴더를 기준으로 작성한다.
- 페이지 안에서 이동하기
→ URL 프래그먼트는 주소 맨 마지막에 붙어서 해당 주소의 일부분을 가르키는 용도
→ id 속성에다가 이름을 지정해놓으면 주소의 맨 마지막에 프래그먼트로 사용할 수 있다.
→ id와 URL 프래그먼트는 꼭 똑같을 필요는 없다.
→ 주의할 점은 id 값을 주소에 쓰는 것이므로 띄어쓰기 등은 쓸 수 없다.
→ href 속성 뒤의 속성 값으로 각 태그의 id 값을 넣어주었다.
- 새 창 열기
→ a태그에서 href속성 값만 쓰게 되면 현재 탭에서 링크로 이동하는데
만일 새 창에서 href의 속성 값으로 쓰인 주소 혹은 경로로 이동하길 원한다면 target이라는 속성을
사용할 수 있다.
→ href 속성값 뒤에 target속성을 사용할 수 있는데 다양한 속성 값을 필요에 의해 지정하여 사용
(1) target="_blank"는 새 창 혹은 새 탭으로 여는 것
(2) target="_self"는 현재 창에서 열리는 것을 의미하며 target을 정하지 않으면 이 값이 기본값
(3) target="movie" 이런식으로 내가 원하는 단어로 지정하게 된다면 새 탭에서 열린다.
그렇다면 해당 창의 이름은 movie라는 이름의 창이 된다.
- 다양한 링크 동작
→ 링크는 보통 해당 주소의 페이지로 연결해준다.
→ [페이지연결] 외에도 다른 동작들도 가능한데 https:// 혹은 http:// 대신에 다른 내용을 넣는
이러한 약속들을 URL 스킴(URL SCHEME)이라고 한다.
이메일 보내기
→ mailto:<이메일 주소>를 사용하면 이메일을 보낼 수 있다.
→ 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고,
받는 사람의 주소에 링크에 적힌 이메일 주소를 자동으로 입력해준다.
<!-- test@example.com으로 이메일 보내기 -->
<a href="mailto:test@example.com">메일 보내기</a>
전화 걸기
→ tel:<전화번호>를 사용하면 전화를 걸 수 있다.
→ 데스크톱 컴퓨터에서는 전화 기능이 없지만, 스마트폰에서 이 링크를 클릭하면 전화앱으로 연결
<!-- 한국의 010-1234-0123으로 전화걸기 -->
<a href="tel:+821012340123">전화 걸기</a>IANA의 URL 스킴 목록
- 링크 정리
링크의 상대 주소(Relative URL)
→ 현재 폴더는 점 한 개(./)로 표시하고, 상위 폴더는 점 두 개(../)로 표시
→ 최상위 폴더는 경로 맨 앞에 / 로 시작
→ index.html 파일은 이름을 생략하고 폴더 이름만 쓸 수 있다.
→ myeong-ryang.html에서 최상위 폴더에 있는 index.html로 연결하는 링크 예시
<a href="../../index.html">홈페이지로 가기</a>
<a href="../../">홈페이지로 가기</a>
<a href="/index.html">홈페이지로 가기</a>
<a href="/">홈페이지로 가기</a>
URI 프래그먼트(URI Fragment)
→ 페이지의 특정 부분을 가리키는 주소
→ 원하는 곳에 id 속성을 지정해 두고, 링크 주소로 사용할 때는 맨 끝에 #으로 시작하는
#아이디-이름을 쓴다.
팀 버너스리는 "인터넷 사용 자체가 인권"<a href="#note-1">[1]</a>이라고 말했다.
...
<p id="note-1">[1] 서울디지털포럼 2013 기조연설</p>
target 속성
→ 새 창(새 탭)으로 열거나 현재 창 또는 내가 원하는 창으로 열 수 있다.
<a href="https://movie.naver.com" target="_blank">
<!-- 새 창으로 열기 -->
네이버 영화
</a>
<a href="https://movie.naver.com" target="_self">
<!-- 현재 창 -->
네이버 영화
</a>
<a href="https://movie.naver.com" target="movie">
<!-- 내가 원하는 창 -->
네이버 영화
</a>
<a href="https://movie.daum.net" target="movie">
<!-- 내가 원하는 창 -->
다음 영화
</a>
<a href="https://imbd.com" target="movie">
<!-- 내가 원하는 창 -->
imbd
</a>3. 텍스트
- 자주 쓰는 텍스트 태그
마크업의 의미를 이해하자
제목 태그 <h1> ~ <h6>
→ 문서의 제목을 나타내는 태그
<h1>한국 영화</h1>
<h2>한국 영화의 역사</h2>
<h3>1950년대: 침체기</h3>
<h3>1960년대: 황금기</h3>
<h3>1970년대: 쇠퇴기</h3>
<h3>1980년대: 암흑기</h3>
<h3>1990년대: 전환점</h3>
<h3>2000년대: 르네상스</h3>
<h3>2010년대: 최전성기</h3>
<h3>2020년대: 대격변</h3>
<h2>유명한 한국 감독</h2>
<h3>박찬욱</h3>
<h3>봉준호</h3>
<h3>임권택</h3>
<h3>김기덕</h3>
<h3>김기영</h3>
<h3>최동훈</h3>
→ 위 HTML 코드에 담겨 있는 정보의 구조를 그려보면 아래처럼 나타난다.
이런 식으로 문서에서 제목을 나누는 태그
- 한국 영화
- 한국 영화의 역사
- 1950년대: 침체기
- 1960년대: 황금기
- 1970년대: 쇠퇴기
- 1980년대: 암흑기
- 1990년대: 전환점
- 2000년대: 르네상스
- 2010년대: 최전성기
- 2020년대: 대격변
- 유명한 한국 감독
- 박찬욱
- 봉준호
- 임권택
- 김기덕
- 김기영
- 최동훈
본문 <p>
→ 본문을 작성할 때 쓰는 태그
<h1>한국 영화</h1>
<h2>한국 영화의 역사</h2>
<h3>1950년대: 침체기</h3>
<p>
1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이
제작되었습니다.
</p>
<h3>1960년대: 황금기</h3>
...
→ 위 HTML 코드에 담겨 있는 정보의 구조는 다음과 같습니다.
- 한국 영화
- 한국 영화의 역사
- 1950년대: 침체기
- 1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어 ...
- 1960년대: 황금기
...
줄바꿈 <br>
→ 제목이나 본문 같은 데서 줄을 바꿀 때 사용하는 태그
→ 줄 바꿈이 없으면 보통 아래처럼 한 문단으로 이어서 보여준다.
<p>
1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이
제작되었습니다.
</p>
→ 만약에 여기에 강제로 줄 바꿈을 하고 싶으면 <br> 태그를 사용
<p>
1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.<br>
하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이 제작되었습니다.
</p>
중요 <strong>
→ 중요한 내용을 강조해서 표시할 때 사용하는 태그
<p>
코드잇 영화관에서는 영화 상영 전 광고없이 정시에 상영을 시작합니다.
정시에 입장하여 관람중인 관객들을 위해
<strong>상영 시작 10분 후에는 입장이 제한됨을 알려드립니다.</strong>
</p>
→ 크롬 브라우저에서는 기본적으로 <strong> 태그를 두꺼운 글씨로 보여준다.
주의할 점은 두꺼운 글씨를 쓰고 싶다고 이 태그를 사용해서는 안된다.
→ 꾸미기를 위해 두꺼운 글씨를 쓸 때에는 CSS로 두꺼운 글씨를 만들고 의미상 강조의 의미인 경우만
<strong>태그를 사용
강조 <em>
→ HTML에서도 <em> 이라는 태그를 사용해서 강조를 나타낼 수 있다.
<p>
제 이름은 윤 <em>여정</em>입니다. 요정도 아니고 유정도 아니고 여정이죠.
</p>
→ 참고로 크롬 브라우저에서는 <em> 태그의 기본 디자인을 기울어진 글씨로 보여주는데
영어권에서 강조할 때 주로 사용하는 표시
취소 <s>
→ 어떤 내용을 적었다가 지우지 않고, 지웠다는 표시만 남기고 싶을 때 내용이 취소 혹은 제거 되었다는
의미를 표현할 때 <s>태그를 사용
<p>
<s>단체 관람을 원하시는 분들은 코드잇 홈페이지에서 예약해주세요.</s>
<br>
현재 코로나 방역으로 인해 극장 입장을 20인으로 제한하고 있어 단체 관람이 어렵습니다.
</p>
인용 <blockquote>, <q>
→ 다른 곳에서 가져온 내용을 긴 글로 인용할 때 사용
<blockquote>
또 감사드릴 분이... 저는 경쟁을 싫어합니다. 제가 어떻게 글렌 클로즈를
이기겠어요? 저는 그녀의 영화를 수없이 많이 봤습니다. 5명 후보가 모두 각자 다른
영화에서의 수상자입니다. 우리는 각자 다른 역을 연기했잖아요. 우리끼리 경쟁할
순 없습니다. 오늘 제가 여기에 있는 것은 단지 조금 더 운이 좋았을 뿐이죠.
여러분보다 조금 더 운이 좋았네요. 그리고 아마도 미국인들이 한국 배우를
대접하는 방법일 수도 있죠. 아무튼 감사합니다.
<br>
- 윤여정, 오스카 수상소감 중에서
</blockquote>
→ 글 안에서 짧게 인용할 때는 <q> 를 쓰면 된다.
<p>
윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
<q>
저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.
아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.
</q>
수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.
</p>
→ 크롬 브라우저에서는 기본적으로 <q> 태그를 따옴표로 감싸는 디자인으로 보여진다.
위 첨자, 아래 첨자
→ 약간 작은 크기의 글자를 위나 아래에 붙여서 쓰는 걸 위 첨자, 아래 첨자라고 한다.
<p>
물의 화학식은 H<sub>2</sub>O이고, 3의 제곱(3<sup>2</sup>)은 9이다.
</p>
주제 전환(Thematic Break)
→ 과거에는 가로 선(Horizontal Line)이라고 불러서 <hr> 라고 쓰지만,
최근 HTML에서는 글에서 주제를 전환할 때 쓰는 태그
→ 브라우저에서는 기본적으로 가로 선을 그어서 보여진다.
<p>
윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
<q>
저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.
아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.<sup>[1]</sup>
</q>
수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.
</p>
<hr>
<p>
[1] "윤여정, 오스카 최고의 수상소감"…미국 '들썩', KBS뉴스 2021.04.27.
</p>
미리 서식이 정해진 텍스트 <pre>
→ 본문 태그인 <p> 처럼 글을 이어서 보여주는 게 아니라, HTML에 적혀있는 그대로 보여주는 태그
→ 보통 코드 같을 것을 쓸 때에 많이 사용
<p>body 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
<pre>
body {
background-color: #000000;
color: #ffffff;
}
</pre>
코드 <code>
→ 글 안에서 짧은 코드를 작성할 때 사용한다.
<p><code>body</code> 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
<pre>
body {
background-color: #000000;
color: #ffffff;
}
</pre>
4. 리스트
- 순서 리스트 (Ordered List, ol)
→ 위와 같이 상영작의 순위를 작성한다고 하였을 때, 숫자를 일일이 입력하여 순위를 작성할수도 있으나
다음주가 되어 새로운 1위가 나타나고 나머지 순위를 내려야 하는 경우에는 작업이 귀찮아진다.
→ 이럴때 순서 리스트를 쓰면 훨씬 편하게 바꿀 수 있다.
→ 순서 리스트는 <ol></ol>태그를 사용하여 작성할 수 있으며 각 항목에는 List Item이란 뜻의
<li></li>태그를 사용하여 감싸준다.
→ 순서 리스트는 태그 자체가 순서의 의미를 가지고 있기 때문에 코드에 적혀 있는 순서대로
내용에 순서가 생긴다.
- 순서 없는 리스트 (Unordered List, ul)
→ 순서가 없는 리스트를 작성할 때에는 <ul></ul>태그를 사용하고, 마찬가지로 List Item,
<li></li>태그를 사용
- 리스트 스타일링
→ 순서 리스트와 순서 없는 리스트를 쓰면 HTML로 그 의미를 분명하게 나타낼 수 있어 좋다.
→ 리스트의 스타일링을 위해서는 type이라는 속성을 사용할 수 있다.
→ 겉모양만 스타일링하는 것이 아니라 마크업으로 순서를 어떻게 표시할지 정하는 것
→ <ol type="a">라고 작성하면 abc 순서로 순서가 매겨진다.
→ <ol type="A">라고 작성하면 ABC 순서로 순서가 매겨진다.
→ <ol type="i">라고 작성하면 소문자로 로마 숫자를 사용할 수 있다.
→ <ol type="I">라고 작성하면 대문자로 로마 숫자를 사용할 수 있다.
→ 이러한 방식 외에도 CSS로 보여주는 모양만 바꿀 수도 있다.
→ 이렇게 다양한 속성 값들이 있어서 필요에 따라 맞춰서 속성 값을 사용하면 된다.
→ 여기서 decimal-leading-zero라는 값은 앞에 숫자 0을 채워서 보여주는 것을 의미
→ 또, hangul이라는 속성 값은 한글로 순서를 표기하는 방식을 의미
→ 이런 식으로 ul태그의 list-style을 none으로 설정하면, 리스트가 마치 그냥 본문처럼 보인다.
→ 개발자 도구로 확인해보면 li 태그들이 div 태그처럼 보인다.
→ HTML태그 상으로는 리스트이지만 겉모습은 내가 원하는 대로 꾸미고 싶을 때 사용한다.
→ 예를 들어서 ul 태그 안에 있는 li 태그들을 인라인 블록으로 만들고, 테두리를 넣으면 위와 같다.
→ 이런 식으로 스타일을 넣어주면 내가 원하는 디자인으로 보여주면서도, HTML에서는 목록이라는
의미를 분명하게 나타낼 수 있다.
- 글로벌 내비게이션 바
웹사이트는 주로 화면 맨 위쪽에 메뉴가 있습니다.
이런 걸 글로벌 내비게이션 바(Global Navigation Bar)라고 하는데요.
style.css 파일을 수정해서 아래 스크린샷처럼 리스트 스타일링을 해 보세요.
→ 먼저 리스트에 있는 동그라미 기호부터 없앤 뒤에
→ 리스트 항목 앞에 붙는 기호를 바꾸려면 list-style이라는 CSS 속성을 사용
→ ul.menu 선택자에다 list-style: none이라고 추가한다.
→ 이렇게 하면 HTML 코드 상으로는 목록이라는 의미가 있지만, 겉모습은 내가 원하는 대로 꾸밀
수 있습니다.
ul.menu {
display: inline-block;
margin: 0;
list-style: none;
}
→ 각 리스트 항목을 한 줄로 만들고, ul.menu > li라는 선택자에서 display: inline-block을 추가
ul.menu > li {
margin: 16px;
display: inline-block;
}index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>코드잇</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="gnb">
<img id="logo" src="logo.svg">
<ul class="menu">
<li>커리어</li>
<li>스킬</li>
<li>챌린지</li>
<li>커뮤니티</li>
</ul>
</div>
<div class="main">
<h1>배움의 기쁨을 세상 모두에게</h1>
</div>
</body>
</html>
style.css
.gnb {
border-bottom: 1px solid #dddddd;
}
#logo {
height: 20px;
}
ul.menu {
display: inline-block;
margin: 0;
list-style: none;
}
ul.menu > li {
margin: 16px;
display: inline-block;
}
.gnb,
.main {
padding: 16px;
}
- 리스트 정리
순서 리스트(Ordered List)
→ 항목들 사이에 순서가 있는 목록을 작성할 때 <ol>이라는 태그를 감싸고, 그 안에 항목은
<li> 태그를 사용
<h2>상영작 순위</h2>
<ol>
<li>라라랜드</li>
<li>명량</li>
<li>극한직업</li>
<li>신과함께: 죄와 벌</li>
<li>국제시장</li>
<li>어벤져스: 엔드게임</li>
</ol>
순서 없는 리스트(Unordered List)
→ 항목들 사이에 순서가 없는 목록을 작성할 때 <ul>이라는 태그를 감싸고, 그 안에 항목은
<li> 태그를 사용
<h2>카테고리</h2>
<ul>
<li>한국 영화</li>
<li>외국 영화</li>
<li>드라마</li>
<li>예능</li>
<li>영화</li>
<li>프로야구</li>
</ul>
리스트 스타일링
→ 순서 리스트에서는 type 속성으로 기호를 바꿀 수 있다.
<ol type="I">
<li>라라랜드</li>
<li>명량</li>
<li>극한직업</li>
<li>신과함께: 죄와 벌</li>
<li>국제시장</li>
<li>어벤져스: 엔드게임</li>
</ol>| type 값 | 실제 기호 |
|---|---|
| a | a, b, c, d, e, … |
| i | i, ii, iii, iv, v, … |
| I | I, II, III, IV, V, … |
| 1 | 1, 2, 3, 4, 5, … |
→ list-style이라는 CSS 속성으로도 바꿀 수 있다.
ul {
list-style: disc; /* 동그라미 */
}
→ 기호를 없애고 싶을 때는 none을 사용
ul {
list-style: none;
}
→ 리스트 항목을 한 줄로 쓰고 싶으면 display: inline-block을 활용
→ 내가 원하는 디자인으로 보여주면서도 HTML에서는 목록이라는 의미를 분명하게 나타낼 수 있다.
ul > li {
display: inline-block;
}
5. 테이블
- 테이블 태그
→ pre-formatted라는 뜻을 가진 <pre>태그는 미리 모양이 정해져 있다고 생각하고,
코드에 적힌 모양대로 보여주는 태그를 뜻한다.
→ 위와 같이 표를 만든다고 했을 때 매번 이렇게 스페이스로 줄을 맞추는 것도 어렵고,
내용이 깔끔해보이지도 않는다.
→ 표를 만들 때에는 <table></table>이라는 태그를 사용하는데 안에는 <tr><td><th>등의 태그로
감싼다.
→ <tr>태그는 table row의 약자로 표에서 가로에 해당하는 행을 나누는 태그이다.
→ 그리고 나서 세로에 해당하는 열을 나누어 주면 되는데 <tr>태그 안에서 <td>라는 태그를 사용한다.
→ <td>태그는 table data cell의 약자로 표에서 한 칸을 의미한다.
→ HTML에서 표를 나타낼 때에는 table이라는 태그를 쓰고 먼저 tr, table row로 각 행을 나눈 다음
각각의 항목들을 td, table data cell로 나누어준다.
- 머리글 바닥글
→ <thead>, table head라는 태그를 감싸주어 표현할 수 있다.
→ 표 안에서도 제목에 해당하는 셀들은 데이터가 아니라 제목이므로 <th>, table header라는 태그로
바꾸어준다.
→ 크롬 브라우저에서는 table header를 굵은 글씨로 보여준다.
보이는 모양은 CSS로 얼마든지 바꿀 수 있으므로 HTML 태그로 사용했을 때에는 이렇게 나오는구나
정도만 참고로 알아두자.
→ <tbody>, table body라는 태그로 감싸주어 본문의 내용을 표현할 수 있다.
→ <tfoot>, table foot이라는 태그도 있는데 이것은 바닥글에 사용하는 태그이다.
→ 각 줄에서도 table header로 해당되는 모바일+태블릿+PC, TV, 화질, 동시 시청, 다운로드 부분은
td 대신에 th, table header로 바꾸어준다.
→ 이렇게 작성하면 table row안에서도 어떤 것이 헤더인지 마크업만 보고 알 수 있다.
→ 크롬 브라우저에서 헤더는 굵은 글씨에 가운데 정렬을 하여 보여준다.
→ 이런 마크업을 사용하면 정보를 좀 더 명확하게 코드로 표현할 뿐만 아니라
스타일링 할 때에도 편리한 점이 많으므로 잘 알아두자.
- 테이블 스타일링
→ 테두리를 지정하는 방법은 table 태그와 th, td 이 태그들에 적용할 수 있다.
→ 다시 말해서 테이블 전체에 테두리를 정하거나 각 셀마다 테두리를 정할 수 있다.
→ 원하는 부분에 스타일링을 하고 싶다면, 선택자를 사용해서 CSS를 적용할 수 있다.
→ 테두리 사이의 간격은 기본적으로 표에 있는 여백이 표시되는데
border-collapse: collapse;라고 하면 이 공간이 사라진다.
→ 테두리들끼리 겹쳐서 어떤 테두리는 안 보이는데 테이블에 지정한 테두리는 안보이고,
table head 안에서 지정한 테두리는 다 보인다.
또, table data cell에 지정한 테두리가 보입니다.
→ 기본적으로 테두리 사이의 간격이 줄어들면 thead, tfoot에 있는 border가 우선적으로 보이고,
그 다음으로 th, td 그리고 table 순으로 보인다.
→ 테이블의 테두리를 굵게 지정하면 굵은 테두리를 우선적으로 보여준다.
→ 테이블 사이의 공간을 늘릴 때에는 border-spacing 이라는 속성을 사용해서 늘릴 수 있다.
- 테이블 정리
테이블
→ 정보를 표로 나타낼 때는 <table> 태그를 사용
→ 테이블의 행은 <tr> (Table Row)태그로 감싼다. 각 데이터들은 <td> Table Data 태그로 넣는다.
<table>
<tr>
<td></td>
<td>Premium</td>
<td>Standard</td>
<td>Basic</td>
</tr>
<tr>
<td></td>
<td>₩15,900</td>
<td>₩10,900</td>
<td>₩8,900</td>
</tr>
<tr>
<td>화질</td>
<td>최대</td>
<td>FHD</td>
<td>HD</td>
</tr>
<tr>
<td>다운로드</td>
<td>무제한</td>
<td>월 30회</td>
<td>불가</td>
</tr>
</table>
머리글
→ 표에서 머리글은 <thead> 태그로 감싸면 된다.
→ 행은 <tr> 태그로 감싸 주면 된다.
→ 각 행 안에 있는 것들은 제목이기 때문에 <td>가 아니라 <th>라는 태그를 넣는다.
→ 본문에 해당하는 행들은 <tbody>라는 태그로 감싼다.
<thead>
<tr>
<th></th>
<th>Premium</th>
<th>Standard</th>
<th>Basic</th>
</tr>
<tr>
<th></th>
<th>₩15,900</th>
<th>₩10,900</th>
<th>₩8,900</th>
</tr>
</thead>
<tbody>
<tr> ... </tr>
...
</tbody>
바닥글
→ 표에서 바닥글은 <tfoot> 태그로 감싸면 된다.
→ <thead>와 마찬가지로 행은 <tr>로 감싼다.
→ 제목으로 쓰는 칸은 <th> 태그를 넣는다.
<table>
<thead>
<tr>
<th></th>
<th>Premium</th>
<th>Standard</th>
<th>Basic</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<th></th>
<th>₩15,900</th>
<th>₩10,900</th>
<th>₩8,900</th>
</tr>
</tfoot>
</table>
테이블 스타일링
테두리 넣기
→ border 속성을 사용해서 테두리를 넣을 수 있다.
→ 표 전체에 테두리를 넣고 싶으면 <table> 태그에 적용하고, 각 셀에 적용하고 싶으면 <td> 태그에
적용
table {
border: 1px solid red;
/* 표 전체의 테두리를 빨간색으로 */
}
th {
border: 1px solid green;
/* 제목 셀의 테두리를 초록색으로 */
}
td {
border: 1px solid blue;
/* 각 셀의 테두리를 파란색으로 */
}
테두리 겹치기
→ 기본적으로 표의 테두리는 서로 간격이 있어서 표 전체, 각 셀마다 보인다.
→ 이 간격을 없애고 테두리끼리 겹치고 싶다면 border-collapse 속성을 활용
table {
border: 1px solid red;
border-collapse: collapse;
}
th {
border: 1px solid green;
}
td {
border: 1px solid blue;
}
테두리 간격
→ 테두리 사이의 간격을 직접 조절하고 싶다면 border-spacing이라는 속성을 사용
table {
border: 1px solid red;
border-spacing: 10px;
}
th {
border: 1px solid green;
}
td {
border: 1px solid blue;
}
