프로그래밍/HTML

2주차 수업(1) - Html, Css

잠이안와 2022. 9. 14. 22:42
  • 서버기반 언어기초 - 플랫봄 개발 언어에 대한 이해
: 컴퓨터는 서비스를 받는 클라이언트와 서비스를 주는 서버로 나뉜다. 웹프로그래밍은 데이터를 입력받고 고객을 접하는 프론트앤드와, 데이터를 처리하고 저장하며 기능을 처리하는 백앤드로 구분된다.
:웹개발에서 언어는 프론트앤드, 백앤드 언어로 나뉜다. 가끔 풀스택이라고 하는 것도 들어봤을텐데 풀스택은 프론트 + 백앤드 모두 가능한 것을 의미한다.
 
  • 프론트앤드 개발언어
: 웹플랫폼의 골격을 만들어주는 HTML, 색상과 시각적인 효과를 설정해주는 CSS (스타일시트), 플랫폼화면의 기능을 구현하는 Javascript(자바스크립트)가 대표적인 프론트앤드 개발언어이다.
:크롬, 익스프로러엣지, 파이어폭스, 오페라 등에서 위의 3개 언어를 지원한다.
(교수님께서 우리 수업에서는 HTML, CSS에서 필요한 부분까지만 배울 예정이라고 하셨다.)

 

  • 백앤드 개발언어

: 백앤드 개발언어는 프론트앤드와 달리 변화가 심하지 않은 편이었다. 과거에는 PHP, JSP, ASP로 대표되는 3강 구도였지만, 지금은 파이썬, 자바스크립트와 같은 언어들이 백앤드 개발언어로 등장하면서 선택폭이 넓어졌다. 파이썬은 플랫폼 개발과 활용파트에서 주로 사용된다. (이번 학기에서는 PHP를 백앤드 개발언어로 배울 것이다.)

 
  • Html이란
: hyper text markup language의 약자로, 웹 페이지 표시를 위해 개발된 마크업 언어이다.
 

 

 

 

이 정도가 본격적인 수업을 시작하기 전에 들었던 개요 설명이었다.
수업에서 다뤄본 코드 종류는 크게 Web, table, img, form, textarea, tag-selector 총 다섯가지이다.

 

 

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 네 가지가 나온다