- 서버기반 언어기초 - 플랫봄 개발 언어에 대한 이해
- 프론트앤드 개발언어
- 백앤드 개발언어
: 백앤드 개발언어는 프론트앤드와 달리 변화가 심하지 않은 편이었다. 과거에는 PHP, JSP, ASP로 대표되는 3강 구도였지만, 지금은 파이썬, 자바스크립트와 같은 언어들이 백앤드 개발언어로 등장하면서 선택폭이 넓어졌다. 파이썬은 플랫폼 개발과 활용파트에서 주로 사용된다. (이번 학기에서는 PHP를 백앤드 개발언어로 배울 것이다.)
- Html이란
1. Web html
<!doctype html>
<html lang="ko">
<head>
<meta charset ="utf-8">
<title> 기본 HTML 문서 </title>
</head>
<body>
<h1>자기소개</h1>
<p>안녕하세요</p>
</body>
<html>첫 번째 줄 : <!doctype html>은 html5 문서의 시작을 알리는 것이다.
html 태그는 html 문서의 시작을 의미한다.
html 태그 안에 들어있는 lang="ko"는 주로 사용하는 언어는 한국어임을 표시한 것이다.
head 태그는 html 문서의 머리 부분이고 주로 설정들이 들어간다.
body 태그는 html 문서의 몸통 부분이고 주로 화면에 보여지는 표현 부분들이 표기가 된다.
head 태그 아래에 <meta charset = "utf-8">이라는 태그가 보이는데 이건 대부분의 나라로 언어로 바꿔줄 수 있는 태그라고 들었다. 이 전에는 다음으로 이메일을 보내기만 해도 깨지는 경우가 발생해서 한메일을 많이 쓰곤 했다고 .. 여담을 들었다.
h1 태그는 헤딩 태그라고 부르고 문장의 제목을 의미한다. 따라서 웹으로 구현 됐을 때 조금 굵고 큰 글씨로 나타난다.
p 태그는 문단태그이다. 여러 개의 문장이나 긴 문장들을 한 문단으로 작성하게 된다.
이걸로 간단하게 건우를 위한 웹페이지를 만들어줬다 ㅋㅋㅋㅋ
2. table html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "utf-8">
<title>표만들기</title>
<style>
table, th,td {border:1px solid #ccc;}
td {padding:5px;/*셀 테두리와 내용 사이의 간격(패딩)*/}
</style>
</head>
<body>
<table><tr>
<th>제목 셀</th> <td>1행2열</td> <td>1행 3열</td> </tr>마찬가지로 html5 문서의 시작을 알리는 <!DOCTYPE html>로 시작한다. (html은 띄어쓰기나 들여쓰기, 대소문자에 크게 예민하지 않은 것 같다.. ) <html lang = "ko"> 로 html 문서의 시작을 알려주고, <head> 태그로 문서의 머리 부분을 채워볼 것이다.
시작은 <meta charset = "utf-8">로 채우고 <title> 표 만들기 </title> : 여기에서 타이틀 태그 사이에 쓴 글자는 웹 페이지의 이름이 된다. 건우한테 웹 링크를 카톡으로 보냈더니 카톡 메세지에 대문작만하게 여기 써둔 제목이 전송되더라 .. ^^
그 다음 !! 드디어 새로운 게 나왔다. <style> 태그는 태그 영향 하에서 스타일시트를 쓸 수 있게 된다. 이제 스타일시트(CSS)를 표현할 수 있다. style 태그 하에 쓰는 문법이 헷갈리면 css 문법으로 검색하면 된다.
<style> 태그를 부르고 나서 그 안에 table, th, td 는 태그를 부른 것이다.
table : 표를 만드는 태그
th : 표의 셀들 중에서 열 이름에 해당하고 그 외에는 td로 통일된다.
tr : 표에서 하나의 행을 생성해주는 태그이다. 표는 행을 중심으로 만들어주기에 표를 만들 때 tr 태그부터 선언된다.
{ border :1px solid #ccc;} 는 테두리를 설정해주는 부가적인 요소들
다음 줄에 있는 td{ } 는 td설정에 추가적으로 스타일 설정을 하고 싶어서 붙인거다.
td {padding:5px;}:셀 테두리와 내용 사이의 간격을 5픽셀로 설정한다는 뜻
이제 body 태그로 넘어가보자.
<table> 태그를 소환해서 표를 만들고,
<tr>을 열어둬서 하나의 행을 만든다. (tr태그 먼저 무조건 !!!!!)
<th>는 표의 열 이름을 붙여주는 것이다. 그 다음에 부르는 태그는 td로 부른다.
지금 코드를 보면 tr 하나 열고, 그 안에 th, td,td 이렇게 불렀으니까 총 3개의 칸이 만들어졌을 것이다.
다음 줄을 만들고 싶으면 지금 행을 만든 tr을 닫고 </tr> -> 새로 <tr> 태그를 열어주면 된다!!!
마무리 지을 땐 항상 열어둔 코드를 잘 닫으면 된다.
</table></body></html> 요렇게 마무리 !
위의 코드를 시행하면 다음과 같은 표가 나온다.
| 제목 | 1행 2열 | 1행 3열 |
| 제목 | 2행 2열 | 2행 3열 |
+ CSS style sheet 사용법
1. head 태그 안에서 style 태그를 만들어서 그 안에 css 문법을 기재함.
2. css는 설정된 문법이 적용될 태그나 목표지점을 기재하고 중괄호 안에 스타일시트 설정내용을 작성한다.
-> 아까 예시에서 style 태그 적고나서 그 옆에 냅다 table, th,td 적었던거 그거임 (셀렉터라고 부름)
3. 아래의 코드를 보면 table, th, td라고 쓰여져있는데 이것은 해당 태그에 border 설정을 적용하겠다는 뜻임. 타겟을 잡은 것.
스타일에는 태그, 클래스(도트로 표기함), 아이디(샵으로 표기함)를 통해서 스타일을 적용한다. 이들을 스타일에 대한 셀렉터라고 부른다.
글이 좀 길어져서 뒷 편에 이어서 다루겠슴 ^__^
다음 글에서는 img, form, textarea, tag-selector 네 가지가 나온다
'프로그래밍 > HTML' 카테고리의 다른 글
| 10주차 공통모듈개발 (0) | 2022.11.09 |
|---|---|
| 2주차 수업(2) - Html, Css (0) | 2022.09.14 |
