본문 바로가기

개발일지/Front

01. html, css의 기본구성 & table태그

오늘은 일단 프로그램을 사용하지 않고 메모장으로 타이핑해서 완성하는 방법들을 배웠다. 직접 타이핑을 하며 기본적인 공식을 배우는 게 중요하다고 한다. 홈페이지를 구성하는 기본 태그 명령들을 배웠다. 다행히 오늘까지는 어려운 게 없었고 눈에 보이는 작업들이라서 재밌었다. 

 

 

홈페이지의 기본 구성

<!DOCTYPE html>
<html>
<head>
  	<meta charset="UTF-8">
  	<title> 타이틀이름 </title>
  	<style></style>
</head>

<body>

</body>
</html>

 

<!DOCTYPE html> 이 페이지는 html입니다 라는 뜻. 삽입 유무에 따른 변화는 크게 없지만 넣는 게 좋다. 

 

<head> 페이지 상단을 의미함

<meta charset="UTF-8"> 인코딩하는 명령어. 글자는 알파벳 1byte, 한글 2byte, 한자 3byte 크기로 이루어져 있고, UTF-8로 바꾸면 모두 3byte가 된다. 

<title> 인터넷 탭에 들어가는 이름

<style> CSS 부분 head 태그 안에 넣어주면 된다. 주로 꾸며주는 부분을 일컫는다.

<body> 화면에 나타나는 부분



<텍스트 및 이미지 불러오기>

<!DOCTYPE html>
<html>

<head>
<title>강아지 그림</title>
	<meta charset="UTF-8">
<style>
	body{
		background-color: yellow;
		}
</style>
</head>

<body>
  최땡땡<br>
 <a href="http://www.incheon.go.kr">인천시청</a><br>
	<img src="./img/강아지.jpg" width="400" height="400"><br>
	<a href="https://www.seoul.go.kr">서울시청</a><br><br>
	<a href="http://www.incheon.go.kr">
	  <img src="./img/강아지.jpg" width="200" height="200">
	</a><br>
	<a href="http://www.daum.net">다음</a>
</body>

</html>

<예제1> 페이지. 너무 귀여운 강아지 사진

 

 

<style> body{ background-color: yellow; } body의 배경색 노랑색으로 주었다. -color를 빼고 background:yellow도 가능하다. css는 {} 중괄호 안에 넣어주고 세미콜론(;)으로 끝이라고 컴퓨터에게 말해주어야 한다.

 

<br> 줄바꿈 태그

 

<a> 텍스트를 넣는 태그 </a> 꼭 이렇게 닫아주어야한다. </>로 닫아주기 전 가운데 입력한 글씨가 화면에 뜬다. href="" 안에는 글씨를 눌렀을 때 뜨는 페이지를 설정한다. 원하는 도메인(인터넷넷 주소 ex.http://www.도메인.com)을 입력하면 된다. 이렇게 글씨를 누르면 페이지로 이동하는 것을 '하이퍼링크 텍스트' 라고 한다. 

 

첫번째 강아지 그림은 그저 사진일 뿐이다. 하지만 두 번째 사진의 코드를 잘 보면 '하이퍼링크 이미지'이다. 그말인즉슨 누르면 다른 사이트로 이동을 한다. 인천시청 도메인을 넣어놨다. 하이퍼링크 이미지도 텍스트와 마찬가지로 <a> 태그를 이용한다. 그리고 안에 <img src=""> 태그로 이미지를 넣어준다. <a href=""><img src=""></img></a> 이런식이다.

 

**트리구조**
./ 현재폴더
../ 상위폴더 


ex) ./img/A.jpg
../img/A.jpg

<img src="./img/강아지.jpg" width="200" hieght="200" >

같은 폴더안에 있는 img 폴더에 들어가 강아지 이미지를 띄운다. 가로 세로 크기는 200이다. 라고 말하고 있는 코드다. 여기서 가로는 width, 세로는 height

 


 

<테이블 기본 속성>

<!DOCTYPE html>
<html>
<head>
	<title>연습</title>
  <meta charset="UTF-8">
  <style>
	body{ background-color : pink; }
	caption{ font-size : 20px; color: #003399; }
	#t1{ background-color : #FAED7D; }
	#t2{ background-color : #6799FF; }
	#t3{ background-color : #F15F5F; }
	#t4{ background-color : #D4F4FA; }
  </style>
</head>

<body>
	<table border="2" width="200" height="200" >
	<caption><h2>성 적 표</h2></caption>
	  <tr align="center">
		<td id="t1">국어</td> <td id="t2">영어</td> 
	  </tr>
	  <tr align="center">
		<td id="t3">95</td> <td id="t4">97</td>
	  </tr>
	  <tr>
		<td colspan="2" align="center">평균</td>
	  </tr>
	</table>

</body>

</html>

<table border="2" width="200" height="200"> 테이블 태그 외곽선 두께가 2, 가로 세로 크기 200

 

caption 캡션 : 테이블제목 (h2 : 글씨 크기) <h1>과 같은 태그명령은 크기가 1~6까지 있음 

 

tr 테이블에서 행

td 테이블에서 열

<tr align="center"> 여기서 align은 정렬옵션에 해당. 가운데(center) 정렬을 해주는 옵션

 

head의 style 태그를 보면 나오는 #t1 #t2 #t3는 각 td의 id에 해당한다. id=""로 설정을 하고 css에서는 '#'을 붙여주면 됨. class의 경우엔 .t1 .t2 .t3 이런식으로 '.'를 붙여주면 된다. id는 한 번만 부여를 할 수 있지만 class는 여러번 같은 모양이나 같은 동작에서 사용가능하다. 어떤 걸 선택할지는 회사마다 법칙이 다르지만 JavaScript를 사용할 땐 id(#)를 사용하고 css를 사용할 때는 class(.)를 사용하는 곳들도 있다고 한다. 아예 구분을 짓지 않는 곳도 있다고 함. 우선순위는 id(#) >class(.)

 


 

 

<테이블 하이퍼링크>

<!DOCTYPE html>
<html>
<head>
	<title>표 하이퍼링크</title>
	<meta charset="UTF-8">
	<style>
	body{
	      background-color: #6799FF;
	       }
	table{
	      width: 200px; height: 50px;
	      border: 2px solid green;
	      background-color: #fff;
	      
	       }

	</style>
</head>

<body>
	<table>
	<tr>
	  <td align="center"><a href="http://www.incheon.go.kr" target="_blank">인천시청</a></td>
	  <td align="center"><a href="http://www.seoul.go.kr" target="_blank">서울시청</a></td>
	</tr>
	</table>
</body>
</html>

테이블(표) 태그를 이용해서 메뉴를 만든 예제이다.  table - tr - td 태그 안에 하이퍼링크 넣는 공식을 사용한다. <a href="주소" target="blank">들어갈 이름</a>... td에 들어가는 align="center"는 가운데 정렬이다. css에 들어가는 border는 초록색 테두리의 굵기를 말한다. 하이퍼링크에 들어가는 밑줄을 지우고 글자 색상을 바꾸고 싶다면 css에서 변경을 하면 된다. text-color:black;(검은색) text-decoration:none;(꾸미지 않기)


 

<테이블 합치기>

<!DOCTYPE html>
<html>
<head>
	<title>시간표</title>
	<meta charset="UTF-8">
	<style>
	   table{
		width: 80%; height: 200px;
		background : skyblue;
		border-top: 5px solid blue;
		border-bottom: 5px solid blue;
	         }
	   th{
		border-bottom: 3px solid blue;
	      }
	   td{
		border: 1px dotted red;
		text-align: center;
	      }
	</style>
</head>

<body>
	<table>
	  <tr>
	      <th>시간/요일</th> <th>월</th> <th>화</th> <th>수</th> <th>목</th>
 	  </tr>
	  <tr>
	      <td>1</td> <td></td> <td></td> <td></td> <td rowspan="3">css</td>
	  </tr>
	  <tr>
	      <td>2</td> <td rowspan="2">HTML</td> <td></td> <td></td> 
	  </tr>
	  <tr>
	      <td>3</td> <td></td> <td></td>
	  </tr>
	  <tr>
	      <td>4</td> <td></td> <td colspan="2">Java</td> <td></td>
	  </tr>
	  <tr>
	      <td>5</td> <td></td> <td></td> <td></td> <td></td>
	  </tr>
	</table>
</body>
</html>

시간표를 만든 예제가 있다. 중간에 보면 HTML, Java, css의 표는 가로나 세로가 병합되어 있는 걸 볼 수 있다. 가로는 rowspan="2", 세로는 colspan="3" 이런 공식으로 이용하면 끝! 너무 간단하다. 글씨의 가운데 정렬은 text-align:center;

 

border-(top, bottom, left, right) 위아래 왼쪽 오른쪽 따로 포인트를 넣을 수 있다. border: 20px 30px; 두 개의 선언을 하면 상하는 20px, 좌우는 30px이라는 뜻이고 border: 10px 20px 30px 40px; 이렇게 네 개가 있을 때는 상하좌우 처럼 보이겠지만 해외에서는 상 우 하 좌 라는 뜻으로 많이 사용한다고 하니 참고 하시길!