WEB 공부를 시작하면서, HTML과 CSS는 기본 중에 기본 모르면 안되는 언어로 이렇게 정리하게 되었습니다. 인터넷을 사용하는 사람이라면 누구나, 필수적으로 접하는 언어 지금 시작합니다.
HTML
HTML(HyperText Markup Language)의 줄임말입니다. 우선 마크업 언어가 무엇인지부터 알아보면 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어입니다. 여기서, 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 맡게 되었습니다.
하이퍼 텍스트는 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 말합니다. 이 둘을 합쳐 팀 버너스 리가 HTML 언어를 창시했습니다. HTML + (하이퍼텍스트 마크업 포맷) 형태로 포맷을 표시하며, 현재는 HTML5까지 발표되어 사용 중입니다.
서두에 필수적으로 접하는 언어라고 했는데, 그럼 우리는 어디서 이 언어를 보고 있는 걸까요?
그렇다면 지금 웹 브라우저를 열고 F12를 눌러보세요. 아래와 같이 처음 보는 창이 나올텐데, 이걸 개발자 도구창이라고 합니다. 보시면 수많은 알파벳이 적혀있을텐데 이게 바로 HTML 언어입니다. 사실 우리가 보고 있던 창의 실체가 아래와 같다는 것이죠.
- 줄 바꾸기 <br>
- 단락 바꾸기(한줄 떨어짐) <p>
- 가로줄 <hr>
- 가운데 정렬 <center>...</center>
- 폰트 변경 <font>...</font>
- 순서 없는 목록 <ul><li>...</li>...</ul>
- 순서 있는 목록 <ol><li>...</li>...</ol>
- 표 만들기 <table>...</table>
- 행 추가 <tr>...<tr>
- 열 추가 <td>...<td>
- 행 병합 <td rowspan=숫자>...</td>
- 열 병합 <td colspan=숫자>...</td>
- 입력 받기 <input>...</input>
- 이미지 삽입 <img>
- 링크 <a>
CSS
CSS(Cascading Style Sheets)는 딱딱하기만 한 HTML 언어를 꾸며주는 언어라고 생각하시면 됩니다. 검정색과 일관된 크기로만 작성된 문서에 CSS를 입히면서 비로소 가독성 높은 문서로 탄생하는 것이죠. Cascading은 폭포 같은/계속 되는/연속적인 뜻을 가지고 있어 계단식으로 연결되는 스타일이라는 의미도 있습니다. (모든 스타일이 연속적으로 적용되는 것은 아닙니다. padding과 같이 지정한 자신에게만 적용되는 예외의 경우도 있습니다.)
CSS 적용 방법
1. Inline style
- 원하는 태그에 style 속성을 추가
<p style="font-size: 12px; color: blue;">인라인 스타일</p>2. Internal sheet(Embeded)
- <head>에서 <style> 태그 사이에 작성
<head>
<style>
p{
font-size: 12px;
color: blue;
}
</style>
</head>3. External sheet(Linked)
- 확장자를 .css로 갖는 파일을 따로 만들어서 <head>에서 <link> 태그를 이용하여 삽입
<head>
<link herf="./sample.css" rel="stylesheet">
</head>- sample.css 파일에는 아래와 같이 작성합니다.
p{
font-size: 12px;
color: blue;
}
적용 우선 순위
Default > External > Internal > Inline
- *: 모든 태그
- 태그명: 해당 태그
- .클래스명: 해당 클래스
- .#ID명: 해당 ID
- 태그명.클래스명: 해당 태그의 해당 클래스
- 태그명, 태그명...: 여러 태그
- 태그명1 태그명2: 태그명1 내부의 태그명2
참고 문헌
- 위키백과, 마크업 언어
- 위키백과, 하이퍼 텍스트
- 위키백과, HTML
- 위키백과, CSS
- 위키백과, W3C CSS Seletor Reference
'코딩 | 개념 정리 > WEB' 카테고리의 다른 글
| 크롬 개발자 도구(Development tool) (2) | 2022.05.01 |
|---|---|
| WEB 경로 표기법은? (0) | 2022.04.27 |
| Javascript란 무엇인가? (0) | 2022.04.10 |
| 프론트엔드(FrontEnd)와 백엔드(BackEnd)란 무엇인가? (0) | 2022.03.27 |
WEB 공부를 시작하면서, HTML과 CSS는 기본 중에 기본 모르면 안되는 언어로 이렇게 정리하게 되었습니다. 인터넷을 사용하는 사람이라면 누구나, 필수적으로 접하는 언어 지금 시작합니다.
HTML
HTML(HyperText Markup Language)의 줄임말입니다. 우선 마크업 언어가 무엇인지부터 알아보면 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어입니다. 여기서, 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 맡게 되었습니다.
하이퍼 텍스트는 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 말합니다. 이 둘을 합쳐 팀 버너스 리가 HTML 언어를 창시했습니다. HTML + (하이퍼텍스트 마크업 포맷) 형태로 포맷을 표시하며, 현재는 HTML5까지 발표되어 사용 중입니다.
서두에 필수적으로 접하는 언어라고 했는데, 그럼 우리는 어디서 이 언어를 보고 있는 걸까요?
그렇다면 지금 웹 브라우저를 열고 F12를 눌러보세요. 아래와 같이 처음 보는 창이 나올텐데, 이걸 개발자 도구창이라고 합니다. 보시면 수많은 알파벳이 적혀있을텐데 이게 바로 HTML 언어입니다. 사실 우리가 보고 있던 창의 실체가 아래와 같다는 것이죠.
- 줄 바꾸기 <br>
- 단락 바꾸기(한줄 떨어짐) <p>
- 가로줄 <hr>
- 가운데 정렬 <center>...</center>
- 폰트 변경 <font>...</font>
- 순서 없는 목록 <ul><li>...</li>...</ul>
- 순서 있는 목록 <ol><li>...</li>...</ol>
- 표 만들기 <table>...</table>
- 행 추가 <tr>...<tr>
- 열 추가 <td>...<td>
- 행 병합 <td rowspan=숫자>...</td>
- 열 병합 <td colspan=숫자>...</td>
- 입력 받기 <input>...</input>
- 이미지 삽입 <img>
- 링크 <a>
CSS
CSS(Cascading Style Sheets)는 딱딱하기만 한 HTML 언어를 꾸며주는 언어라고 생각하시면 됩니다. 검정색과 일관된 크기로만 작성된 문서에 CSS를 입히면서 비로소 가독성 높은 문서로 탄생하는 것이죠. Cascading은 폭포 같은/계속 되는/연속적인 뜻을 가지고 있어 계단식으로 연결되는 스타일이라는 의미도 있습니다. (모든 스타일이 연속적으로 적용되는 것은 아닙니다. padding과 같이 지정한 자신에게만 적용되는 예외의 경우도 있습니다.)
CSS 적용 방법
1. Inline style
- 원하는 태그에 style 속성을 추가
<p style="font-size: 12px; color: blue;">인라인 스타일</p>2. Internal sheet(Embeded)
- <head>에서 <style> 태그 사이에 작성
<head>
<style>
p{
font-size: 12px;
color: blue;
}
</style>
</head>3. External sheet(Linked)
- 확장자를 .css로 갖는 파일을 따로 만들어서 <head>에서 <link> 태그를 이용하여 삽입
<head>
<link herf="./sample.css" rel="stylesheet">
</head>- sample.css 파일에는 아래와 같이 작성합니다.
p{
font-size: 12px;
color: blue;
}
적용 우선 순위
Default > External > Internal > Inline
- *: 모든 태그
- 태그명: 해당 태그
- .클래스명: 해당 클래스
- .#ID명: 해당 ID
- 태그명.클래스명: 해당 태그의 해당 클래스
- 태그명, 태그명...: 여러 태그
- 태그명1 태그명2: 태그명1 내부의 태그명2
참고 문헌
- 위키백과, 마크업 언어
- 위키백과, 하이퍼 텍스트
- 위키백과, HTML
- 위키백과, CSS
- 위키백과, W3C CSS Seletor Reference
'코딩 | 개념 정리 > WEB' 카테고리의 다른 글
| 크롬 개발자 도구(Development tool) (2) | 2022.05.01 |
|---|---|
| WEB 경로 표기법은? (0) | 2022.04.27 |
| Javascript란 무엇인가? (0) | 2022.04.10 |
| 프론트엔드(FrontEnd)와 백엔드(BackEnd)란 무엇인가? (0) | 2022.03.27 |
