Learn & Record
HTML CSS Javascript (Table 테이블, 테이블 병합, 연습문제, position 속성, absolute, 폰트, 자바스크립트 ) 본문
HTML CSS Javascript (Table 테이블, 테이블 병합, 연습문제, position 속성, absolute, 폰트, 자바스크립트 )
Walker_ 2024. 3. 25. 17:531. Table 테이블
- 표는 웹 페이지에서 자료를 정리 때 자주 사용하는 요소, 실제는 게시판이나 회원 가입 페이지의 레이아웃 만들 때 사용
- 기본적으로 몇줄(=행), 몇칸(=열) 이라고 불리움 (행, 열) | 표를 이용한 형태를 만들 때 사용하는 태그
- table 구조
- table > tr > td
- 칸의 기본적인 성격 y축상의 middle
- table 관련 태그
- table : table 전체를 감싸는 태그
- tr("table row") : 테이블의 행을 의미하는 태그, 자손으로 th나 td가 반드시 있어야 한다
- td("table data") : 테이블의 일반 행(칸)을 의미하는 태그, 부모인 tr안에 있어야 한다
- base style : 왼쪽정렬 (text-align:left)
- th("table header") : 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다
- base style : 중앙정렬, 두껍게
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td, th {
width: 200px;
height: 100px;
border: 2px solid black;
}
</style>
</head>
<body>
<!-- 표의 시작 -->
<table>
<!-- 행의 시작 -->
<tr>
<!-- 열의 시작 -->
<th>1행 1열</th>
<td>1행 2열</td>
</tr>
<!-- 행의 시작 -->
<tr>
<!-- 열의 시작 -->
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html>
- th : 표 구성시 셀을 제목으로 구분 지어야 할 때 사용
- table의 head 구분을 지을 때 사용
- text-align:center / font-weight:bold가 기본 적용
- caption : 표에 제목을 붙일 때 사용
- 표에 제목을 붙일 때 <table> 태그 바로 다음에 <caption> ㅐㅌ그 사용
- 표의 위쪽 중앙에 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border: 2px solid deepskyblue;
}
td,th {
width: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<!-- 표의 시작 -->
<table>
<caption>표의 제목1</caption>
<!--행의 시작-->
<tr>
<!--열의 시작-->
<th>내용1</th>
<th>내용2</th>
</tr>
<tr>
<td>내용3</td>
<td>내용4</td>
</tr>
</table>
</body>
</html>
2. 테이블 병합
- 표를 만든 후 표의 행이나 열을 합치는 속성으로 셀을 만드는 <td><th> 태그에서 사용
- colspan = "합쳐지는 열의 개수" : 가로의 병합
- rowspan = "합쳐지는 행의 개수" : 세로의 병합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table merge</title>
</head>
<style>
th, td {
border: 2px solid black;
}
</style>
<body>
<!-- colspan -->
<table>
<caption>colspan</caption>
<tr>
<th colspan="2">코리아교육그룹</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td,th {
width: 200px;
border : 2px solid black;
}
tr:nth-child(3) td, tr:nth-child(3) th {
border-color: deepskyblue;
}
</style>
</head>
<body>
<table>
<tr>
<td>1행1열</td>
<td>1행2열</td>
<th>1행3열</th>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
<th>2행3열</th>
</tr>
<tr>
<td>3행1열</td>
<td>3행2열</td>
<th>3행3열</th>
</tr>
<tr>
<td>4행1열</td>
<td>4행2열</td>
<th>4행3열</th>
</tr>
</table>
</body>
</html>
- 표의 구조는 head, body, foot 으로 구분 가능
- thead : 표의 제목 부분
- tbody : 표의 본문 부분
- tfoot : 표의 요약 부분
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td, th {
border : 2px solid black;
}
</style>
</head>
<body>
<table>
<caption>공지사항</caption>
<!-- 표의 제목 부분 -->
<thead>
<tr>
<th>번호</th>
<th>제목1</th>
<th>날짜</th>
</tr>
</thead>
<!-- 표의 본문 부분 -->
<tbody>
<tr>
<td>001</td>
<td>코리아교육그룹 2020 대한민국 교육브랜드 대상</td>
<td>2020-07-01</td>
</tr>
<tr>
<td>002</td>
<td>청년학당 WE-GO</td>
<td>2020-06-29</td>
</tr>
</tbody>
<!-- 표의 요약 부분 -->
<tfoot>
<tr>
<td>250</td>
<td>10개의 게시물</td>
<td>2020-07</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
table {
border: 2px solid black;
}
td {
padding: 15px;
border: 1px dotted black;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>표 스타일</caption>
<tr>
<td>시네마천국</td>
<td>벤허</td>
</tr>
<td>11:00-14:30</td>
<td>16:00-19:00</td>
</tr>
</table>
</body>
</html>
- border-collapse
- 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 합칠 것인지 그대로 들 것인지 조정 가능
- table과 td 사이의 선값의 결함 유무를 결정하는 속성
- separate : 기본값 - 틈이 생긴 상태
- collapse : 선사이의 틈을 병합
table {
border: 2px solid black;
border-collapse: collapse; /* 테두리 통합 */
}
- border-spacing
- table 태그와 border 속성을 사용했을 때 테두리와 셀들의 간격을 지정
- 테두리와 셀들의 간격을 지정하는 값
- border-spacing : 20px 40px;
- 2자리 입력 - 수평 수직
<style>
table {
border: 2px solid black;
border-spacing: 20px 40px;
}
- empty-cells
- table 태그에서 내용이 없는 빈 셀들의 표시 여부를 지정
- show : 빈 셀의 주위에 테두리를 표시하여 빈 셀을 나타냄. 기본값.
- hide : 빈 셀에 테두리를 그리지 않고 비워야 함
<style>
table {
border: 2px solid black;
empty-cells: hide;
}
- width, height
- 표의 넓이의 높이를 지정. 셀, 전체 표의 넓이에 스타일 지정 가능
- 높이와 넓이를 지정하지 않으면 셀의 내용만큼 차지
<style>
table {
border: 2px solid black;
empty-cells: hide;
width: 400px;
}
td {
height: 40px; /* 셀의 높이 */
padding: 15px;
border: 1px dotted black;
text-align: center;
}
</style>
- table-layout
- 콘텐츠에 맞게 셀 넓이를 지정
- 셀의 width 값을 지정하면 해당 크기에 맞게 화면에 맞춰 표시
- 하지만 영문을 띄어쓰기 없이 길게 입력을 하면 셀의 width값은 무시되고, 내용이 한줄로 표시
- fixed : 셀 넓이를 고정하여 셀이 내용을 따라 셀의 넓이가 달라지지 않음
- auto : 기본 값. 셀의 내용에 따라 넓이가 달라짐
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
table {
border: 2px solid black;
empty-cells: hide;
width: 400px;
table-layout: fixed;
}
td {
width: 200px;
height: 40px; /* 셀의 높이 */
padding: 15px;
border: 1px dotted black;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>표 스타일</caption>
<tr>
<td>engigengfenfeifneifnifneefneifenfeifneifneifneif</td>
<td>벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허</td>
</tr>
<td>11:00-14:30</td>
<td>16:00-19:00</td>
</tr>
</table>
</body>
</html>
- table-layout: fixed; 일 때
- 영문 글자가 셀 밖으로 표기될 때 word-break: break-all; 사용
<style>
table {
border: 2px solid black;
empty-cells: hide;
width: 400px;
table-layout: fixed;
word-break: break-all;
}
3. 연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
td,th {
width: 100px;
height: 50px;
text-align: center;
border: #bdbbbb 1px solid;
}
th {
background: #eaeaea;
}
tr td:nth-child(3),tr th:nth-child(3) {
border-right: none;
}
tr td:nth-child(1),tr th:nth-child(1) {
border-left: none;
}
table {
width: 300px;
border-collapse: collapse;
border-top: 2px solid pink;
margin : 40px auto;
}
</style>
</head>
<body>
<table>
<tr>
<th>tit1</th>
<th>tit2</th>
<th>tit3</th>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
</table>
</body>
</html>
4. position 속성
- 위치속성 : 어디에 어떻게 위치시킬지 지정하는 속성
- 각 요소의 위치를 정하는 방법
- 상대 위치 좌표 : 태그 요소 입력한 순서를 통해 상대적으로 위치를 지정
- 절대 위치 좌표 : 태그 요소로 만들어진 X좌표와 Y좌표를 설정해 절대 위치를 지정
- static : 태그가 위에서 아래로 순서대로 배치되며 position 속성을 지정하지 않으면 기본 값으로 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div>static-1</div>
<div>static-2</div>
<div>static-3</div>
</body>
</html>
- relative : 초기 위치 상태에서 상하좌우로 위치를 이동
- position 속성
- 함께 적용가능한 속성
- top : y축 상단기준
- bottom : y축 하단기준
- left : x축 좌단기준
- right : x축 우측기준
- z-index : z축 위치 상 우선 순위 변경(z-index : 숫자가 클수록 상위 순서에 배치 1-9999까지 존재)
- static : 부여하지 않아도 적용되는 기본값 (정적위치 지정방식)
- 다른 박스에 영향을 주며 작성한 순서대로 나열 (위치지정불가)
- top, left, right, bottom의 영향을 받지 않음
- relative : 상대 좌표와 함께 위치를 지정 (상대위치 지정방식)
- 태그가 만들어진 순서대로 나열
- 다른 박스에 영향을 주며 작성한 순서대로 나열 (위치지정가능)
- 부모박스의 역할로 주로 사용
- top, left의 영향을 받음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
position: relative; /* 상대 좌표 */
left : 100px; /* 좌표 인식 가능 */
top : 100px; /* 좌표 인식 가능 */
}
</style>
</head>
<body>
<div>relative-1</div>
<div>relative-2</div>
<div>relative-3</div>
</body>
</html>
5. absolute 앱솔루트
- 절대 위치 좌표를 설정. 부모 박스 기준으로 좌표를 설정
- 단 부모 요소가 static일 경우 부모 요소로 인식하지 않음
- 절대 좌표와 함께 위치를 지정 (절대위치 지정방식)
- html 화면 기준(x, y)을 기준으로 위치가 지정
- 만들어진 순서대로 위쪽에 배치 (위치지정가능)
- top, left, right, bottom의 영향을 받음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px; /* 스크롤 바를 나타내기 위해 문서의 높이를 임의의 크기로 지정 */
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
position: absolute; /* 절대 좌표 */
}
div:nth-of-type(1) { /* div 박스 중에서 첫번째 박스 */
background-color: red;
left : 100px; /* 왼쪽 좌표 */
top : 100px; /* 상단 좌표 */
}
div:nth-of-type(2) { /* div 박스 중에서 두번째 박스 */
background-color: orange;
right: 100px; /* 오른쪽 좌표 */
bottom: 100px; /* 하단 좌표 */
}
</style>
</head>
<body>
<div>absolute-1</div>
<div>absolute-2</div>
</body>
</html>
- 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중
- position 속성이 relative인 요소
- absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고
- position 속성을 relative로 지정해 놓고 사용해야 함
- fixed : 절대 좌표와 함께 위치를 지정 (고정위치 지정방식)
- 고정된 상태로 위치가 지정
- 스크롤과 상관없이 html 화면 기준 좌측상단을 기준으로 좌표고정
- top, left, right, bottom의 영향을 기준
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 4px solid black;
margin-left: 30px;
font-size: 30px;
line-height: 300px;
text-align: center;
position: absolute; /* 절대 좌표 */
}
div:nth-of-type(1) { /* div 박스 중에서 첫번째 박스 */
background-color: red;
left : 100px; /* 왼쪽 좌표 */
top : 100px; /* 상단 좌표 */
}
div:nth-of-type(2) { /* div 박스 중에서 두번째 박스 */
background-color: orange; /* 배경 색상 */
right: 250px; /* 오른쪽 좌표 */
bottom: 250px; /* 하단 좌표 */
}
div:nth-of-type(3) { /* div 박스 중에서 세 번째 박스 */
background-color: green;
left: 400px;
top: 400px;
}
</style>
<body>
<div>box-1</div>
<div>box-2</div>
<div>box-3</div>
</body>
</html>
div:nth-of-type(2) { /* div 박스 중에서 두번째 박스 */
background-color: orange; /* 배경 색상 */
right: 250px; /* 오른쪽 좌표 */
bottom: 250px; /* 하단 좌표 */
z-index: 3; /* 우선순위 변경 */
}
- absolute 일반적인 사용 방법
- 부모 요소를 relative로 지정한다
- 부모 요소의 높이를 지정해서 자식 요소를 감싸주게 한다
6. 폰트
- 일반적인 폰트 사용법
- 일반적으로 스타일을 이용해서 연결하는 방법 : 내 컴퓨터 내에 설치된 폰트가 존재할 경우에만 구현이 됨
- 사용자의 컴퓨터에 해당 폰트가 없으면 대체 폰트가 적용 됨
- 웹폰트
- 링크를 이용해서 서버상의 폰트를 가져와서 웹페이지에 전달하는 방법
- 느려지거나, 폰트가 나타나지않는 경우가 생길 수 있음
- link : style 태그나 css밖에서 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 웹폰트 첫번째 줄 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Orbit&display=swap" rel="stylesheet"> <style>
.test2 {
font-family: "Orbit", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body>
<p class="test2">
안녕하세요
</p>
</body>
</html>
- 웹폰트
- 링크를 이용해서 서버상의 폰트를 가져와서 웹페이지에 전달하는 방법
- 느려지거나, 폰트가 나타나지않는 경우가 생길 수 있음
- import : style 태그나 css에서 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@100..900&family=Orbit&display=swap')
</style>
<style>
* {
padding: 0;
margin: 0;
font-family: "Noto Sans KR", sans-serif;
font-size: 26px;
}
p {
width: 400px;
margin: 0 auto;
font-weight: 700;
}
div {
font-size: 15px;
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<p>
안녕하세요
</p>
<div>
좋은 하루 입니다.
</div>
</body>
</html>
7. 자바스크립트 javascript
- 자바스크립트 : 주로 웹 브라우저에서 사용하는 프로그래밍 언어(였었음)
- 웹 브라우저인 넷스케이프에 사용하기 위해 개발
- 1995년 5월 넷스케이프의 브랜던 아이크에 의해 모카 Mocha라는 이름으로 만들어짐
- 9월 넷스케이프 내비게이터 2.0에 라이브 스크립트 Live Script 라는 이름으로 처음 탑재
- 최종적으로 12월에 자바 스크립트로 명명
- 썬 마이크로시스템즈에서 개발한 프로그래밍 언어인 자바 Java와 비슷한 이름을 사용하는 마케팅 조약을 체결
- 자바와 자바스크립트는 완전 다른 언어
- 마이크로 소프트에서 웹 브라우저 익스플로러를 개발하면서 자바스크립트와 호환이 되는 제이스크립트JScript 개발
- 후에 자바스크립트와 제이스크립트가 따로 발전을 하면서 호환성 문제가 생기게 됨
- 2006년, 크로스 브라우징을 해결하기 위해 JQuery가 등장
- JQuery는 당시 가지고 있던 크로스 브라우징 이유와 더불어 자바 스크립트보다 배우기 쉽고 직관적인 API를
- 제공함으로써 선풍적인 인기를 끌게 됨
- 2010년대 중반이 되면서, ECMAScript6이 나오면서 더욱 강한 프로그래밍 언어가 됨
- 백에드 Node.JS, 앱개발 React Native 등 자바스크립트 사용분야가 많아짐
----------------------------------
자바 스크립트 특징
- 1) 인터프리터 언어
- 인터프리터 언어 : 프로그램을 한 줄마다 기계어로 번역해서 실행
- 컴파일 언어 : 소스 코드를 실행하기 앞서 기계어로 번역하는 컴파일 과정을 거친 후 실행
- 2) 동적 프로토타입 기반 객체 언어
- 클래스기반 객체 언어 : C++와 JAVA 처럼 클래스를 이용하여 객체를 생성
- 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어
- 그래서 객체 생성 후에도 프로퍼티와 메서드를 동적으로 추가하거나 삭제가 가능
- 이것이 JAVA 같은 클래스 기반 객체 지향 언어와 다른 점
- 3) 동적 타입 언어
- 정적 타입 언어 : C++와 JAVA처럼 실행 되기 전에 변수 타입이 결정
- 자바 스크립트는 프로그램을 실행하는 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀌는 동적 타입 언어
- 하지만 초기화한 데이터 타입을 유지하고 자동 형변환은 피하는 것이 좋음
- 4) 함수가 일급 객체다
- 함수가 객체이며 함수에 함수를 인수를 넘길 수 있음
- 함수가 일급 객체 First class object이고,
- 이 특성을 활용하면 고차함수를 구현할 수 있어서 함수형 프로그래밍이 가능해짐
- 5) 함수가 클로저를 정의한다
- 자바스크립트 함수는 클로저 closure를 정의할 수 있음
- 클로저로 변수를 은닉하거나 영속성을 보장하는 등 다양한 기능을 구현할 수 있음
- java의 내부 클래스에서 지역내부 클래스의 지역변수 사용과 비슷
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1. 한줄 주석
/*
2. 여러줄 주석
*/
/*
자바 스크립트 실행 결과 보기
1) alert 함수 이용. 모달 창으로 결과 보기
*/
alert('안녕하세요');
alert(10 * 30);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
자바 스크립트 실행 결과 보기
2) 콘솔 로그 메소드 이용
크롬의 개발자 도구 -> console 에서 결과 확인
*/
console.log('안녕하세요');
console.log(10 * 30);
/*
주의점 : 자바 스크립트가 각각의 문장을 구별하는 방법은
1) 문장의 끝에 ;(세미 클론)
2) 줄 바꿈 둘 중 하나
다른 언어로의 확장(파이썬, 코틀린을 제외한 대부분의 언어가 세미 클론 사용, 즉 1번 사용) 및
명료성을 위해 세미 클론을 붙이는 것이 좋음
(해당 라인을 작업중인지 완료 했는지 구분)
*/
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
에러 확인하기
개발자 도구에서 확인 - 빨간색 메세지로 나옴
ReferenceError : 단어 오탈자
SyntaxError : 기호에서 오탈자
*/
aler('안녕하세요');// 에러
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 경고창에 출력 : 확인을 눌러야 이후의 코드가 실행이 됨. '확인'을 눌러야 alert()함수가 종료됨
alert('alert() 함수의 출력');
alert('alert() 함수의 출력');
console.log('console.log() 메서드의 출력');
console.log('console.log() 메서드의 출력');
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
간단한 입출력
let : 변수 선언 시 사용하는 키워드
* 변수 : 어떠한 값을 저장하는 곳
* prompt() : 사용자에게 입력 받기
*/
let name = prompt('이름을 입력하세요');
// document.write() : 웹 브라우저 화면에 출력
document.write('<b>' + name + '</b>님, 환영합니다.')
</script>
</head>
<body>
<h3>어서오세요</h3>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 글자색 바꾸기 -->
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<!-- css 처럼 외부 파일로 만들어서 실행 가능. -->
<script src="./js/change-result.js"></script>
</body>
</html>let heading = document.querySelector('#heading');
heading.onclick = function() {
heading.style.color = 'red';
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
자료 data : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것
자료형 data type : 자료 형태에 따라 나눠 놓은 것
* 기본 자료형 : 문자열 string, 숫자 number, 불 boolean
1. 기본 자료형 : 문자열 string
문자와 문자열을 구분하는 언어도 있으나 자바 스크립트는 문자열로 통일
문자열 자료형을 만드는 방법 : 작은 따옴표나 큰 따옴표로 감쌈
*/
console.log("안녕하세요"); // 안녕하세요
console.log('안녕하세요');
// console.log("안녕하세요"); // 시작과 끝이 같아야 함
// 혼용하는 것도 가능
console.log('this is "string"'); // this is "string"
console.log("this is 'string'"); // this is 'string'
// 이스케이프 문자 사용 : 따옴표를 문자 그대로 사용하고 싶을 때
console.log('this is \'string\'') // this is 'string'
console.log("this is \"string\"") // this is "string"
/* 이스케이프 문자 사용 예
\n : 줄바꿈
\t : 탭문자
\\ : 역슬래시(\) 자체
*/
console.log("this is 'string' \n this is 'string' ") // 줄 바꿈
console.log("this is 'string' \t this is 'string' ") // 탭 문자
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
문자열 연산
문자열에 적용할 수 있는 ㅓ리
1. 문자열 연결 연산 : 문자열 + 문자열
2. 문자 선택 연산 : 문자열[인덱스] -> 문자 하나
3. 문자열의 길이 : 문자열.length -> 문자 갯수
*/
console.log('안녕하세요' + '자바 스크립트 입니다.');
let greet = '안녕하세요.'
console.log(greet + '자바 스크립트 입니다.')
// 문자 선택 연산. 인덱스는 0부터 시작하는 정수로 이루어짐
console.log('안녕하세요.'[0])// 안
console.log('안녕하세요.'[1]) // 녕
console.log(greet[0])
console.log(greet[1])
// 문자열의 길이
console.log('안녕하세요.'.length) // 6
console.log(greet.length)
let name = prompt('이름을 입력')
alert("이름은 "+name.length+"자 입니다.")
let name2 = prompt('한글로 이름을 입력')
alert('당신의 성은 '+name2[0]+"입니다.")
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
템플릿 문자열
문자열 결합 연산자를 사용하지 않고, 문자열안에 바로 표현식을 사용할 수 있음
쌍따옴표나 홀따옴표 대신 백틱(`)을 사용
*/
// 일반적인 방법 : 문자열 결합 연산자 사용
console.log('표현식은 273 + 52의 값은 ' + (273 + 52)+ '입니다.')
// 템플릿 문자열 사용
console.log(`표현식은 273 + 52의 값은 ${273+52}입니다.`) // 백틱(`)을 사용
// 잘못된 방식
console.log('표현식은 273 + 52의 값은 ${273+52}입니다.')
let name = prompt('한글로 이름을 입력');
alert(`당신의 성은 ${name[0]}입니다.`)
</script>
</head>
<body>
</body>
</html>
