2020-09-16, HTML_CSS

음... 날짜가 뭔가 튄다구요?

맞습니다. 언제 HTML을 시작했는지 조차 모르겠습니다. 하하하하하.
일단, 14일엔 SQL을 했고. 15일에도 SQL을 했던 것 같아서.. 16일로 했습니다.
SQL에서.. DML이랑 DDL을 나눠서 포스팅했어야 했는데.... 아... 떨어뜨려서 하기 싫어서 그냥 붙여서 했더니 이런 결과가...
저번주 금요일부터 하기싫어병이 걸려서... 이렇게 됐습니다. 하하하.

HTML, CSS, JavaScript부터는.... 뭐가 없습니다.
그냥 코드를 쓰고 보고 했습니다.
고로. 그냥 갑니다.
쨋든. 이건 정리하는 쪽으로 가기로 했기때문에... 도움이 안 될 가능성이 큽니다. 하하.

HTML, 두둥!

HTML은 웹 페이지를 만들 때, 구조를 잡는 작업에 사용합니다. (제목, 단락, ....)

CSS는 그 구조에 스타일을 지정해주는데 사용합니다. (색상, 크기, 위치, ....)

JavaScript는 그 위에 동적으로 화면을 처리하고 기능을 추기하는데 사용합니다.

==> 이 3가지의 공통 특징은 1) 브라우저에서 실행된다는 것, 2) 실제 파일은 서버에 존재한다는 것. 입니다.

자바스크립트를 이용하여 웹 페이지에 경고창 띄우기

1) HTML 내부에서 JavaScript를 이용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	alert("hello")

</script>
</head>
<body>
</body>
</html>

2) HTML 외부에 .js파일을 만들어 이용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	alert("hello")

</script>
</head>
<body>
</body>
</html>

alert("안녕하세요")

CSS를 이용하여 HTML 스타일 지정

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 2. Internal style 한 html 안에서 재사용 가능   -->
<style type="text/css">
	h3{
	color:blue;
	}
	</style>
	
<!-- External style, 가독성이 좋지 않다. 많은 곳에서 재사용 가능  -->	
<link rel="stylesheet" type="text/css"	href="aaa.css">

</head>
<body>
	<!-- 1. Inline Style, 사용시마다 계속 값을 따로 줘야함  -->
	<p style="color:red">Hello</p>
	
	<!--  -->
	<h3>Hello</h3>	

	<h5>Hello</h5>
</body>
</html>

CSS

h5{
	color:green;
}

p{
	color:blue;	
}

H테그 (머릿글, 제목, header)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>header 실습</title>
</head>
<body>
<h1>header</h1>
<h2>header</h2>
<h3>header</h3>
<h4>header</h4>
<h5>header</h5>
<h6>header</h6>
</body>
</html>

P태그 (Paragraph, 문단)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p태그(단락)</title>
</head>
<body>
<p>첫번째 문단</p>
<p>두번째 문단</p>
</body>
</html>

br태그 (line Break, 줄바꿈)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>br 태그</title>
</head>
<body>
	첫번째 라인<br>
	두번째 라인<br>
	세번째 라인<br>
</body>
</html>

<b> - Bold text, 굵게, 진하게
<strong> - Important text, 문자 강조
<i> - Italic text, 이태릭체
<em> - Emphasized text 문자열 이태릭체
<del> - Deleted text, 문자에 줄 긋기
<ins> - Inserted text, 문자에 밑줄
<sub> - Subscript text, 아래첨자
<sup> - Superscript text, 윗첨자
<mark> - Marked text, 뒷 배경, 형광팬
<small> - Small text, 작은 텍스트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>format 태그 : 실제로는 css 적용함.</title>
</head>
<body>
<b>문자열 진하게</b><br>
<strong>문자열 강조</strong><br>
<em>문자열 이태릭체</em><br>
<i>문자열 이태릭체</i><br>
HTML5<sub>아래첨자</sub><br>
HTML5<sup>윗첨자</sup><br>
<del>2000원</del>1000원<br>
<i>문자열 이태릭체</i><br>
<ins>밑줄~~~~~</ins><br>
<mark>마크</mark><br>
<small>작은 텍스트</small><br>
</body>
</html>

a 태그 들어가기 전,
경로에 대해서

	*요청경로 (매우 중요)
	1) 상대 경로
		-기준   : 현재페이지
		-.   : 현재
		 ..  : 부모
		
		
	2) 절대 경로
		- 우리가 일반적으로 보는 /경로/
		     반드시 /슬래시부터 시작/

a 태그 : 링크를 이용해서 다른 페이지로 이동

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a 태그</title>
</head>
<body>
	<a href="sample01_header.html">로컬페이지 이동 (내부html, sample01)</a><br>
	<a href="http://www.google.com">로컬페이지 이동 (외부, 구글)</a>
</body>
</html>

a 태그, target = "_blank" : 새로운 탭을 생성해서 url 이동

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a 태그</title>
</head>
<body>
	<a href="sample01_header.html" target ="_blank">로컬페이지 이동(새로운창_blank)</a><br>
	<a href="http://www.google.com">로컬페이지 이동</a>
</body>
</html>

a 태그 : h1태그에 id를 부여해서 a태그에 매핑, a태그를 누르면 해당 위치로 이동

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a 태그</title>
</head>
<body>
<a href="#python">python</a><br>	<!-- # => ID속성, class속성 => .  -->
<a href="#sql">sql</a><br>
<a href="#html">html</a><br>

	<h1><a id ="python">python</a></h1>       
	<p>lggklggklggkoaoiskdfksdjoaoilggkoaoisk	
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	lggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdj</p>
	
	<h1><a id ="sql">sql</a></h1>
	<p>lggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdj
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	lggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdj</p>
	
	<h1><a id ="html">html</a></h1>
	<p>	lggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdj
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~생략~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	lggkoaoiskdfksdjlggkoaoiskdfksdjlggkoaoiskdfksdj</p>
	
</body>
</html>

<Table> 태그 : 테이블 생성
<tr>태그 : 테이블 내 Record(row) 생성 / <th>, <td> 태그 : 테이블 내 column 생성 (<th>:table_header, <td>:table_data)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table 태그 실습</title>

</head>
<body>
<h2> table 실습 </h2>
	<table border = "1">
			<tr>	<!-- Record, Row 설정  -->
				<th>상품</th>		<!-- column 설정  -->
				<th>가격</th>
			</tr>		

			<tr>
				<td>사과</td>
				<td>1000</td>
			</tr>

			<tr>
				<td>배</td>
				<td>2500</td>
			</tr>
			
			<tr>
				<td>총합</td>
				<td>3500</td>
			</tr>
	</table>
</body>
</html>

테이블 그루핑 (논리적 집합)

<thead> : table_head <tfoot> : table_foot <tbody> : table_body
테이블 바디에는 새로운 record가 추가될 가능성이 높기때문에 table head와 foot 이후에 작성하는것이 일반적

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table 그루핑 실습</title>

</head>
<body>
<h2> table2 그루핑 실습 </h2>
	<table border = "1">
		<thead>	<!-- 테이블의 헤드  -->
			<tr>
				<th>상품</th>
				<th>가격</th>
			</tr>
		</thead>
		
		<tfoot> <!-- 테이블의 끝단  -->
			<tr>
				<td>총합</td>
				<td>3500</td>
			</tr>
		</tfoot>		

		<tbody>	<!-- 테이블의 몸통  -->
			<tr>
				<td>사과</td>
				<td>1000</td>
			</tr>
			<tr>
				<td>배</td>
				<td>2500</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

논리적으로 묶어주기 위한 문법이기 때문에 기존의 일반 테이블과는 달라 보이는 것이 없다.

테이블 병합
가로 (record/row) 병합 : <th / td rowspan = "병합할 row 수치">
세로 (column) 병합 : <th / td colspan = "병합할 column 수치">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table3 병합 실습</title>

</head>
<body>
<h2> table3 열 병합 실습 </h2>
	<table border = "1">	
		<tr>
			<th>이름</th>
			<th colspan="2">전화번호</th>
		</tr>
		<tr>
			<td>홍길동</td>
			<td>01023456789</td>
			<td>01098745612</td>
		</tr>	
	</table>
	
<h2> table3 행 병합 실습 </h2>	
	<table border = "1">	
		<tr>
			<th>이름</th>
			<th>홍길동</th>
		</tr>
		<tr>
			<td rowspan="2">전화번호</td>
			<td>01023456789</td>
		</tr>			
		<tr>
			<td>01098745612</td>		
		</tr>
	</table>
</body>
</html>

리스트
<ul> : Unordered list, 순서 없는 리스트
<ol> : Ordered list, 순서 있는 리스트

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트 태그 실습</title>
</head>
<body>

	<h1>순서 없는 리스트 unordered list</h1>
	<ul>
		<li>홍길동</li>		
		<li>이순신</li>		
		<li>유관순</li>		
		<li>세종</li>		
	</ul>

	<h1>순서 있는 리스트 ordered list</h1>
	<ol>
		<li>홍길동</li>			
		<li>이순신</li>		
		<li>유관순</li>		
		<li>세종</li>		
	</ol>
	
</body>
</html>

그루핑
<div>, <span>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹핑 용도 실습</title>
<style type="text/css">
	span{
		color:red;
		font-size:20px;
		/* display : block; span에 블럭스타일을 줌*/
	}
</style>

</head>
<body>
	<h2>태그 그룹핑:div는 대표적인 블럭스타일</h2>
	<div id = "first" class="xxx">
		<h3>사랑과 평화</h3>
		<div id = "second">
			<h3>1권</h3>
			<div id = "third" class = "xxx">
				<h4>1장</h4>
				<p>안녕하세요. 사랑과 평화입니다. 뚜시뚜시</p>				
			</div>
		</div>
	</div>	
	<br>
	<h2>문자열 그룹핑 : span은 대표적인 인라인 스타일</h2>
	<h4>1장</h4>
	<p>뚜시뚜시 파티파티 <span>독신남</span> 파티</p>		
</body>
</html>

사용자 입력 받기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 입력 태그 : 폼태그(form) 실습</title>

</head>
<body>
	<h2>text-Get</h2>
	<form action ="sample01_header.html" method = "get"> <!-- method default == get  -->
		아이디:<input type : "text" name ="userid" value="abcde"><br>
		비밀번호:<input type="password" name = "userpw"><br>
		<input type="submit" value ="로그인">
	</form>
	<br>
	<pre>
	Get방식 특징
	1.모든 요청의 기본방식(default)
	2.사용자 입력한 파라미터값이 브라우저 url에 보여진다. (보안 취약)
		타켓파일?태그 name값 =입력값 &태그 name값=입력값 (querystring)
	3.새로고침	=> 진짜 서버에 재요청
			=> 여러번 데이터가 전송된다. (새로고침 -> 데이터 재전송)
		==> Get method -> select할 때, 변경사항 없을 때 사용
	4. url에 보여지는 url에 길이제한이 있다.	
	5. 파라미터(querystring)는 문자열만 가능
	</pre>	
	<br>	
	<h2>text-Post</h2>
	<form action ="sample01_header.html" method = "post"> <!-- method default == get  -->
		아이디:<input type : "text" name ="userid" ><br>
		비밀번호:<input type="password" name = "userpw" disabled ="disabled"><br>
		<input type="submit" value ="로그인">
	</form>
	<br>
	<pre>
	Post방식 특징
	1.사용자 입력 파라미터값이 브라우저 url에 보이지 않고 숨겨져서 넘어간다.
		타켓파일?태그 name값 =입력값 &태그 name값=입력값 (querystring)
	2.새로고침	=> 확인작업 추가
			=> Post method -> insert할 때
	3. url에 보여지는 url에 길이제한이 없다.
	4. 파라미터(querystring)는 문자열 및 이미지, 사운드 등 바이너리로 가능	
	</pre>	
	<br>	
	<!-- url에 ?userid=안녕아이디&userpw=password 이렇게 실어서 action 페이지에 submit됨 -->
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 입력 태그 : 폼태그(form) 실습</title>

</head>
<body>

	<h2>text-Get</h2>
	<form action ="sample01_header.html" method = "get">
		남:<input type="radio" name="gender" value="male" checked ="checked"><br>
		여:<input type="radio" name="gender" value ="female"><br>
		-취미-<br>
		게임:<input type="checkbox" name ="hobby"	value="game" checked ="checked"><br>
		야구:<input type="checkbox" name ="hobby" value="baseball"><br>
		-주소-<br>
		<select name = "address">
			<option value="서울">서울</option>
			<option value="경기">경기</option>		
			<option value="대전" selected="selected">대전</option>		
			<option value="대구">대구</option>		
			<option value="부산">부산</option>							
		</select><br><br>
		자기소개<br>
		<textarea rows="10" cols="30" name="info">value값</textarea><br>
		입사일<br>
		<input type="date" name="hiredate"><br>
		<input type="color" name="color"><br>
		<input type="email" name="email"><br>
		<input type="number" nqme ="quantity"><br>	
		<input type="file" name="file"><br>		
		<input type="search" name="search"><br>
		hidden:<input type="hidden" name="hidden_date"><br>			
		<input type="submit" value ="로그인">
		<input type="reset" value="취소">
	</form>

</body>
</html>

저작자표시 비영리 변경금지

'SK 행복성장캠퍼스 > HTML + CSS' 카테고리의 다른 글

2020-09-17, HTML_CSS_2일차 (0)	2020.09.24

Diversity

2020-09-16, HTML_CSS_1일차

'SK 행복성장캠퍼스 > HTML + CSS' 카테고리의 다른 글

댓글

티스토리툴바

2020-09-16, HTML_CSS_1일차

'SK 행복성장캠퍼스 > HTML + CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바