728x90

 

※ 시맨틱 태그 등장배경 ※

    웹페이지의 구조를 잡기위해 div태그가 많이 사용되는데 무수히 많은 div 태그가 사용되어 id로 식별해줘야한다.
    하지만 그것에도 한계가 있고.... 구분하기가 많이 힘들기 때문에 시맨틱태그라는 것을 써준다.
    시맨택태그 -> 똑같이 div역할을 하긴 하지만 영역의 의미가 부가된 태그

 

html5에 적용되었으며, 앞으로 점차 사용 점유율이 늘어날 것으로 보인다

 

시맨틱(Semantic) 태그란?

<div>태그의 용도를 그대로 가져오면서 상세 카테고리별로 컴퓨터가 인지할 수 있게 목적별로 나눠 준 태그

 

종류

<header>
 웹 문서에서 머리말 영역을 나타낼 때 사용
        (제목, 제목 설명 등을 나타내는 요소 포함)
        body 안에 여러번 사용 가능
 
 
<nav>
navigation, 탐색 링크 정의
웹 문서나 문서 내 다른 부분으로 이동하는 부분을 나타내고자 할 때 사용

 

<aside>
웹 문서의 광고 같이 부가적인 정보를 구분하기 위해 사용

 

<section>
비슷한 그룹이나 문서를 묶기 위해 사용
 
 
<article>
기사들, 블로그 게시물, 포럼 게시물들 등 각종 정보글들을 분류하는 태그
 
 
 
<footer>
문서나 section의 바닥글을 정의
웹 문서의 저자정보, 저작권 정보, 이용 조건 등을 나타내기 위해 사용

 

728x90
반응형
저작자표시

'웹 관련 > HTML & CSS' 카테고리의 다른 글

[CSS] placeholder 주의할 점(feat.placeholder가 안먹힐 때)  (0) 2022.06.22
[CSS] 부모 상속 무효화 :not() selector  (0) 2022.05.22
[CSS] padding,margin 속성값 & padding 적용 차이  (0) 2022.05.22
[HTML] <div>와 <span> (feat.block & inline element 구분)  (0) 2022.04.24
[HTML] 표(table) : <table> 태그와 구성요소들  (0) 2022.04.24
728x90

 

 
< 표 만들기 >
       
        목록 생성 태그 : ol, ul, li
            ol : ordered list
            ul : unordered list
            li : list
        표 생성 태그 : table
            table만 가지고 표가 생성되지는 않는다
            tr,td가 부수적으로 필요
           
        table : 표 생성 태그
            tr : 행 생성 태그
            td : 한 행에 셀 생성 태그
                   
           
 
             테이블의 구성 요소(태그)
        1. <table> : 테이블을 만드는 태그
        2. <th> : 테이블의 헤더 부분을 만드는 태그
        3. <tr> : 테이블의 행을 만드는 태그
        4. <td> : 테이블의 열을 만드는 태그
        5. <caption> : 테이블 이름 표시
        6. <thead> : 테이블의 헤더 영역 지정(컴퓨터한테 구조 알려줌)
        7. <hbody> : 테이블의 바디 영역 지정(컴퓨터한테 구조 알려줌)


           테이블 디자인 변경(속성)
        1. border : 테이블의 테두리
        2. bordercolor : 테이블의 테두리 색상
        3. width : 테이블 가로 크기
        4. height : 테이블 세로 크기
        5. align : 정렬
        6. bgcolor : 배경색
        7. colspan : 가로 병합(열 병합)
        8. rowspan : 세로 병합(행 병합)
 

       
        HTML5에서 <figure>태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는
        독립적인 콘텐츠를 정의할 때 사용
       
        <figure>요소의 콘텐츠는 문서의 내용과 연관성을 갖지만,
        해당 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이기 때문에 제거해도 문서의 흐름에 영향을 주면 안 됨.
728x90
반응형
저작자표시

'웹 관련 > HTML & CSS' 카테고리의 다른 글

[CSS] placeholder 주의할 점(feat.placeholder가 안먹힐 때)  (0) 2022.06.22
[CSS] 부모 상속 무효화 :not() selector  (0) 2022.05.22
[CSS] padding,margin 속성값 & padding 적용 차이  (0) 2022.05.22
[HTML] <div>와 <span> (feat.block & inline element 구분)  (0) 2022.04.24
[HTML] 시맨틱(Semantic) 태그  (0) 2022.04.24
728x90

 

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

<style>
	body{background-color:rgb(222,234,246);}
	form{background-color:rgb(237,237,237);}
	fieldset{border:none; padding:50px;}
	input{background-color:rgb(237,237,237); border:none; border-bottom-style:dashed; width:100px;}
	div{margin-top: 150px; margin-bottom: 150px; }	/*margin-top: 100px; margin-bottom: 100px;   */
	label{display:inline-block; width:150px; text-align:left;}
	span{display:block; padding-left:150px; font-size:15px;} /*블록안에 있으면서 블록 다 차지하게끔. 디브 움직이면 다 같이 움직이니 스팬으로 블록으로 지정해서 얼라인지정 할 수 있게해서 따로 움직일 수 있도록  */
	#button{background-color:rgb(197,224,181); border:none; width:450px; padding:20px; border-radius:10px;} /* border-radius 설정 */
</style>

</head>
<body>
 
	<form>
		<fieldset>
			<div> 
				<label>아이디 : </label><input type="text" id="userId" name="userId" onblur="requirement1()"> <!-- 위에 포커스 안맞춰지면 out시키겠다. 이벤트 발생안시키겠다 태그 위에 안맞춰지면 --> 
				<br><span id="checkId"></span>
			</div>
			<div>
				<label>패스워드 : </label><input type="password" id="userPwd" name="userPwd" onblur="requirement2()"> <!-- onfocus to onblur -->
				<br><span id="checkPwd"></span>
			</div>
			<div>
				<label>패스워드 확인 : </label><input type="password" id="userPwdConf" name="userPwd" onblur="requirement3()">
				<br><span id="checkPwdConf"></span>
			</div>
			<div>
				<label>이메일: </label>
				 <input type="text" class="userEmail" name="userEmail">
				@<input type="text" class="userEmail" name="userEmail">
				
			</div>
			<div>
				<label>주소 : </label><input type="text" id="userAddress">
			</div>
			<div>
			<button id="button" name="button">가입</button>
			</div>
		</fieldset>
	</form>
	<script>
	/* 영대소문자, 필수요구사항  */
		var userId = document.getElementById("userId");
		var checkId = document.getElementById("checkId");
		var userPwd = document.getElementById("userPwd");
		var checkPwd = document.getElementById("checkPwd");
		var userPwdConf = document.getElementById("userPwdConf");
		var checkPwdConf = document.getElementById("checkPwdConf");
		
		/* 영어 대/소문자 특수문자, 숫자 포함 8~32자*/
		document.getElementById("userPwd").addEventListener("click",capital);
		function capital(){
			checkPwd.innerText="영어 대/소문자 특수문자, 숫자 포함 8~32자";
		} 
		/* 필수요구사항 */
		function requirement1(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userId.value == "" || userId.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkId.innerText="필수 입력 항목입니다";		
				userId.focus(); /* 내장객체 포커스 */
				return false; /* 아디 안넣었을 때 다른거 못쓰게 막아주는 false 리턴 */
			}else{
				/* 유저가 아이디 넣을때 */				
				checkId.innerText="";
				return true; /* 아디를 넣었을 때  true해서 비번 계속 쓸 수 허용, 넘겨주는 것*/
			}
		}
		function requirement2(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userPwd.value == "" || userPwd.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkPwd.innerText="필수 입력 항목입니다";		
				userPwd.focus(); 
				return false; 
			}else{
				/* 유저가 아이디 넣을때 */				
				checkPwd.innerText="";
				return true; 
			}
		}
		function requirement3(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userPwdConf.value == "" || userPwdConf.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkPwdConf.innerText="필수 입력 항목입니다";		
				userPwdConf.focus(); 
				return false; 
			}else{
				/* 유저가 아이디 넣을때 */				
				checkPwdConf.innerText="";
				return true; 
			}
		}
		
		
	</script>

<!-- 
인라인으로 넣으면 할당된 공간에서만 움직일 수 있어서 정렬 같은게 안먹힘. 인라인은 text-align이 안됨
	- span,
블록요소는 한줄 전체라 공간 제약이 없어서 width height를 다룰 수 있음 

위치선정을 할려면 인라인이 요소라서 정렬할려면 id로 

블록이면 줄바꿈도 적용
 -->
 

</body>
</html>

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][JS] 배열(Array) & 배열의 메소드  (0) 2022.04.23
[1일1코딩][bootstrap] 시범사용 & 연결  (0) 2022.04.22
[1일1코딩][Servlet] 서버 연결 - java class, html  (0) 2022.04.20
[1일1코딩][Servlet] 서버 연결 - web.xml, index.html 세팅  (0) 2022.04.19
[1일1코딩][jQuery] mouseenter & mouserout + attr  (0) 2022.04.19
728x90

 

Servlet이란?

웹 서비스를 위한 자바 클래스

javax.servlet.http.HttpServlet클래스를 extends를 통해 인터페이스 상속 받아 사용

 

web.xml : 설정, 매핑,연결

index.html : 화면단

java class : extends HttpServlet 기능단

체크박스, 텍스트박스 등 사용자 데이터 받는 html 페이지

 

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>0_Practice_Servlet</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- 위의 welcom-file태그는 시작 시 실행시키는 파일들을 명명하는 곳임 -->
  
 
 <servlet>
 	<servlet-name>pracServlet1_get</servlet-name>
 	<servlet-class>tryto.pracServlet1_get</servlet-class>
 </servlet>
 <servlet-mapping>
 	<servlet-name>pracServlet1_get</servlet-name>
 	<url-pattern>/pracServlet1_get.do</url-pattern>
 </servlet-mapping>
  
  
  
</web-app>

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jumbotron Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>

<body>
	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
		<a class="navbar-brand" href="#">Navbar</a>

		<div class="collapse navbar-collapse" id="navbarsExampleDefault">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">Disabled</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		            <div class="dropdown-menu" aria-labelledby="dropdown01">
		            	<a class="dropdown-item" href="#">Action</a>
		            	<a class="dropdown-item" href="#">Another action</a>
		            	<a class="dropdown-item" href="#">Something else here</a>
		            </div>
				</li>
			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="text" placeholder="Search"
					aria-label="Search">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
			</form>
		</div>
	</nav>
	
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">Hello, Servlet world!</h1>
			<p>
				서블릿이란, 웹 서비스를 위한 자바 클래스를 말하며 자바를 사용해 웹을 만들기 위해 필요한 기술로
				javax.servlet.http.HttpServle클래스를 상속받는다.<br>
				다시 말해 기존의 java파일에 웹 페이지 구현을 위한 html이 들어간 구조라고 볼 수 있다.<br>
				클라이언트의 요청을 처리하고 그 결과를 HTML을 사용하여 요청에 대한 응답을 다시 클라이언트에 전송하는 구현 규칙이 있다.<br>
				단, HTML변경 시 servlet을 재컴파일 해야한다는 단점이 있다.
				
			</p>
			<p>
				<a class="btn btn-primary btn-lg" href="#" role="button">Learn
					more &raquo;</a>
			</p>
		</div>
	</div>

	<div class="container">
		<!-- Example row of columns -->
		<div class="row">
			<div class="col-md-4">
				<h2>Servlet-1</h2>
				<p>
					<!-- get방식 헤더에 첨부되어 전송됨 -->
					GET방식은 URL에 변수(데이터)를 포함시켜 요청하는 것으로 보안 유지가 불가능하다.
					따라서 로그인 같은 경우 get방식은 부적합하다. GET방식에서 데이터를 header에 포함하여 전송하는데
					Body는 보통 빈 상태로 전송되며 header내용 중 body의 데이터를 설명하는 content-type헤더필드도 듣어가지 않는다.
					header에 데이터가 들어가기 때문에 전송하는 길이에 제한이 있으며 초과 데이터는 절단된다. 캐싱이 가능하다.
										
				</p>
				<p>
					<a class="btn btn-secondary" href="servlet/pracServlet1_get.html" role="button">View
						details &raquo;</a>
				</p>
			</div>
			<div class="col-md-4">
				<h2>Servlet-2</h2>
				<p>
					<!-- post방식 바디에 첨부되어 전송됨 -->
					POST방식은 URL에 변수(데이터)를 노출하지 않고 요청하는 것으로 보안 유지가 가능하다.
					데이터를 Body에 포함하여 전송하므로 Body의 데이터를 설명하는 content-type헤더 필드가 들어가고 어떤 타입인지 명시해줘야 한다.
					body에 데이터가 들어가 전송 길이는 제한이 없지만 최대 요청 받는 시간이 존재해 페이지 요청, 기다리는 시간이 있다.
					URL에 데이터가 노출되지 않아 즐겨찾기나 캐싱이 불가능하다.
										
					
				</p>
				<p>
				    <a class="btn btn-secondary" href="#.html" role="button">View
						details &raquo;</a>
				</p>
			</div>
			<div class="col-md-4">
				<h2>Servlet-3</h2>
				<p>
					서블릿은 화면에 표현될 html코드를 프로그램적으로 작성한다.
					이것으로 생기는 단점은 비즈니스 로직과 화면 구현 디자인이 같이 있어 가독성이 떨어지고 개발이 어렵다.
					이러한 구조는 협업을 중요시 하는 개발자들의 입장에서는 좋지 않은 코드로 비즈니스 로직과 디자인은 분리되는 것이 좋다.
					또한 html파일 수정 시 서버를 재시동해야하고 htm1에는 서버에서 얻어온 정보를 동적으로 반영하기 힘들다.
					
				
				</p>
				<p>
					<a class="btn btn-secondary" href="#" role="button">View
						details &raquo;</a>
				</p>
			</div>
		</div>

		<hr>

	</div>

	<footer class="container">
		<p>&copy; Company 2017-2018</p>
	</footer>
</body>
</html>
728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][HTML,CSS,JS] 로그인 만들어보기1  (0) 2022.04.21
[1일1코딩][Servlet] 서버 연결 - java class, html  (0) 2022.04.20
[1일1코딩][jQuery] mouseenter & mouserout + attr  (0) 2022.04.19
[1일1코딩][SQL][Oracle] 계정 등록 및 권한 부여  (0) 2022.04.18
[1일1코딩][JS] 선언적 함수, 익명함수, 함수 전달인자와 매개변수 여러 방법  (0) 2022.04.17
728x90

 

아래의 화면 구현해보기

 

 

CSS

@charset "UTF-8";


.char2_1{ display: inline-block; width: 50px; height: 25px; line-height: default; text-align: center; 
          font-size: 12px; font-weight: bold;}

.char2_2{ display: inline-block; width:50px; height: 100px; line-height: 5; text-align: center; vertical-align: text-bottom; resize:none;
         font-size: 12px; font-weight: bold;}

.char4{ display: inline-block; padding: 0px; width: 50px; font-size: 12px; font-weight: bold;}

.submitBtn{padding-left: 80px}


#t1_top{background-color: #FFA07A; color: #fff;
        font-size: 11px;}

      
.contents{background-color: lightyellow;
          font-size: 10px; font-weight: 500;}
#t1_mid{width: 300px;}
            
.t1_btn_shortcut{width: 75px;}

#t1_bottom{background-color: #FFA07A; color: #fff;  text-align: center; 
           font-size: 11px; font-weight: bold;}

 

 

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UI디자인 포트폴리오</title>

<link href="css/portfolio.css" rel="stylesheet">

</head>
<body>
	


	<form action='insert.no' method='post'>
	<fieldset style="width: 570px; height: 255px;">
		<legend>공지사항 작성하기</legend>
		
		<label>
			<span class="char2_1">제목</span>
			<input name="title" type="text" placeholder="제목을 입력하시오." required><br>
				    
		</label>

		<label>
			<span class="char2_2">내용</span>
			<textarea name="content" rows="8" cols="23" placeholder="내용을 입력하시오." required
				  ></textarea><br>
		</label>
		
		<label>
			<span class="char4">첨부파일</span>
		
		<input type="file" name="uploadFile" multiple accept=".png, .jpg, .jpeg, .mp3, .mp4, .avi" style="font-size: 12px;">
		<!-- type="file파일 자체가 선택된 파일 없음 글씨까지 보여줌" -->
		</label>
		<br><br>
		

		<div class="submitBtn">
				<input type="button" value="작성하기">
		</div>
	</fieldset>
	</form>



	<br>
	<hr style="display: inline-block; text-align: left; width: 600px;"  >
	<br>
	

	<table border="1" width="600px" height="200px">
		<thead id="t1_top">
			<th width="25px">번호</th>
			<th width="410px" colspan="2" >제목</th>
			<th width="65px">작성자</th>
			<th width="65px">작성일</th>
			<th width="35px">조회수</th>
		</thead>
		<tbody class="contents">
			<tr>
				<td>9</td>
				<td id="t1_mid">공지사항 제목 9</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>user01</td>
				<td>2021-03-29</td>
				<td>34</td>
			</tr>
			<tr>
				<td>6</td>
				<td>공지사항 제목 6</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>answ445</td>
				<td>2021-03-12</td>
				<td>67</td>
			</tr>
			<tr>
				<td>3</td>
				<td>공지사항 제목 3</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>testg12</td>
				<td>2021-03-01</td>
				<td>98</td>
			</tr>
			<tr>
				<td>2</td>
				<td>공지사항 제목 2</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>palwe3</td>
				<td>2021-01-02</td>
				<td>85</td>
			</tr>
			<tr>
				<td>1</td>
				<td>공지사항 제목 1</td>
				<td><button class="t1_btn_shortcut">바로가기</button></td>
				<td>xm123</td>
				<td>2020-12-24</td>
				<td>124</td>
			</tr>
		</tbody>
		<tfoot id="t1_bottom">
			<tr>
				<td colspan="4" width="500px">전체공지사항 갯수</td>
				<td colspan="2" width="100px">5개</td>
			</tr>
		</tfoot>
		
	
	
	</table>
	

</body>
</html>

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][JS] 선언적 함수, 익명함수, 함수 전달인자와 매개변수 여러 방법  (0) 2022.04.17
[1일1코딩][jQuery] 연결 방식4가지, 선택자 6가지  (0) 2022.04.16
[1일1코딩][JS] for in문  (0) 2022.04.14
[1일1코딩][JS] 데이터입출력, HTML태그에 접근하기  (0) 2022.04.13
[1일1코딩][JS] 전역변수&지역변수, 데이터타입,형변환,for in문  (0) 2022.04.12
728x90

 

이미지 클릭하면 다른 이미지 뜨기

이미지 클릭하면 특정 싸이트 뜨기

이미지나 글씨 클릭하면 이미지나 싸이트, 영상 뜨기(iframe)

 

오디오,비디오 파일

시간,진행도 보여주는 컨트롤바, 반복재생, 자동재생

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0_practice</title>


</head>
<body>

    
    <img src="sample/image/wangja01.PNG" usemap="#imageMap">
    <map name="imageMap">
        <area shape="circle" coords="0, 0, 200, 400" href="https://www.naver.com" target="_blank">
        <area shape="circle" coords="200,0,400,400" href="https://www.google.com" target="_blank">
    </map>

    <hr>
    <audio src="sample/audio/song.mp3" controls> song </audio>
    <audio src="sample/audio/major.mp3"controls autoplay loop> major </audio>

    <video src="sample/video/bear.mp4" controls> 곰1</video>
    <video src="sample/video/bear.mp4" controls loop autoplay preload="metadata"> 곰1 - preload</video>
    <video src="sample/video/bear.mp4" preload="auto" controls> 곰3</video>



    <ul>
        <li><a href="../index_HTML.html"></a>글씨 내용 넣는 곳</li>
    </ul>

    <a href="https://www.w3schools.com" target="_blank">
        <img src="sample/image/wangja02.PNG" width="20%" height="20%">
    </a>

    <a href="sample/image/wangja02.PNG" target="wang">글씨클릭하면 이미지나옴 : iframe 사용</a>
    <iframe width="20%" height="15%" name="wang"></iframe>
    
    <a href="sample/image/city1.png" target="imgout">
        <img src="sample/image/wangja01.PNG" width="30%" height="25%"><br>
    </a>
    <a href="https://www.w3schools.com" target="w3s"> w3<br>
        <img src="sample/image/wangja03.PNG" width="200px" height="175px">
    </a>    


</body>
</html>

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][SQL][ORACLE] 권한삭제, 계정삭제  (0) 2022.04.10
[1일1코딩][SQL][ORACLE] 계정 생성 및 권한부여  (0) 2022.04.05
[1일1코딩][HTML] <table> 관련 : border,caption,figure // 보더 지정 & 미지정 차이  (0) 2022.04.03
[1일1코딩][HTML] 속성 type=" "  (0) 2022.04.02
[1일1코딩][SQL][Oracle] SELECT, FUCTION, GROUP BY, HAVING, JOIN 100제 문제 풀이  (0) 2022.04.01
728x90

영어 소문자 : type="a"

영어 대문자 : type="A"

로마 소문자 : type="i"

로마 대문자 : type="I"

시작값 바꾸기 : type="a" start="2"

번호 역순 : reversed type="A"

 

<h4>타입 바꾸기 : type</h4>
	<!-- 순서화 하는 기호를 바꾸는거라 그런지 <ul>은 검은 불릿기호만 나옴 -->
	<h5>영문 소문자</h5>
	<ol type="a">	
		<!-- 영문소문자 쓰고 싶으면 소문자 'a'를 삽입 ex) type="a" -->
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>
	
	
	<h5>영문 대문자</h5>		
	<ol type="A">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>		
			
	<h5>로마 소문자</h5>		
	<ol type="i">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>			


	<h5>로마 대문자</h5>		
	<ol type="I">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>					
					
	<h4>시작 값 바꾸기 : start="5"</h4>
	<ol start="5">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>				
					
					
					
	<h4>타입 및 시작 값 변경 :  : type="i" start="3" </h4> <!--  iii, iV,V,Vi -->
	<ol type="i" start="3"> <!-- start는 정수만 가능 -->
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>				
	<!-- 속성과 속성은 띄어쓰기 구분됨  -->				
					
	
	<h4>역순으로 항목 번호 표시</h4> <!--  iii, iV,V,Vi -->
	<ol reversed type="A" start="2">
		<li>HTML5</li>
		<li>css3</li>
		<li>js</li>
		<li>jquery</li>
	</ol>

 

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일1코딩][HTML] <img> <map> <area> <audio> <video> <a href=>  (0) 2022.04.04
[1일1코딩][HTML] <table> 관련 : border,caption,figure // 보더 지정 & 미지정 차이  (0) 2022.04.03
[1일1코딩][SQL][Oracle] SELECT, FUCTION, GROUP BY, HAVING, JOIN 100제 문제 풀이  (0) 2022.04.01
[1일1코딩][Java-SQL][JDBC] Statement & prepareStatement 차이  (0) 2022.03.31
[1일1코딩][Java-SQL][JDBC] JDBC 연결  (0) 2022.03.30
728x90

 

web1-19.웹서버 운영하기

하나의 문제해결을 위해 몇일이 걸릴 수 있지만 이를 통해 수많은 지식과 경험을 쌓을 수 있음

 

웹브라우저는 제품명이 아니라 제품군

웹서버도 동일

 

웹서버 프로그램 : Apach, IIS, Nginx

Apach 무료, 점유율1등

 

 

 

 

web1-19.1. 웹서버 설치(windows)

(추천검색어 : how to install apache http server os)

 

bitnami wamp : 통합설치 프로그램

 

WAMP

W : Windows

A : Apach

M: MySQL (데이타베이스 프로그램)

P : php (middleware 미들웨어)

 

 

 

web1-19.2. 웹서버 http

 

Internet Protocol Address (IP address)

127.0.0.1/index.html

 

127.0.0.1  : 웹브라이저가 설치되어 있는 컴퓨터를 가리키는 약속되어있는 특수한 주소

 - 주소를 치는 것은 웹브라우저가 설치 되어있는 각자의 컴퓨터의 웹서버를 가리키는 것

 

127.0.0.1 이 주소에 /index.html이라는 경로를 입력하면,

웹브라우저가 자신이 설치되어잇는 웹서버에 접속해서 index.html 파일을 원해라고 얘기하는 것이며, 웹서버는 htdocs라는 디렉토리에서 파일을 찾도록 설정이 기본적으로 되어있는 상태임(변경가능).

그럼 웹서버는 그 설정대로 htdocs디렉토리에서 index.html파일을 읽어와서 이 파일을 웹브라우저로 보내주고 웹브라이저는 이 파일을 읽고 해석해서 화면으로 출력해주는 것

 

이 htdocs에 html파일을 넣으면 그 파일이 내 웹페이지가 되는 것

 

127.0.0.1과 file:///c:/Bitnami/wampstack-7.1.10-1/apache2/htdocs/1.html 차이

 

file은 html파일에 있는걸 직접 오픈하는 것이고

http는 웹브라이저와 웹서버가 서로 통신할 때 사용하는 통신규약(http : Hyper Text Transfer Protocol)을 이용해서 데이터를 가져옴.

한대의 컴퓨터에 웹브라우져와 웹서버가 같이 설치 되어있어 결과로 출력된 웹페이지만 보면 차이가 없지만,

 서로 다른 컴퓨터에 있는 웹브라우저와 웹서버가 통신하기 위해서는 반드시 http를 사용해야함

 

 *http란?

웹페이지를 웹브라우저와 웹서버가 서로 주고 받기 위한 약속

 

 

 

 

web1-19.3. 웹서버와 웹브라우저의 통신

두대의 컴퓨터에서 서로 웹페이지를 주고 받는 방식을 알아보자        

한대의 컴에는 웹서버가 설치되어 있고 이 컴 하드디스크에 index.html 파일이 있는 상황

우리는 웹브라우저를 통해서 저 웹서버에 접속하해서 index.html파일을 전송 받아서 화면에 띄우고 싶은 상태

친구한테 전화해서 뭘 좀 받을려면 그 친구 전화번호를 알아야하는 것처럼 인터넷에서는 이 전화번호가 IP address임

 

컴이 두대 있어야 하는데 스마트폰으로 메인컴 웹서버에 접속가능

파일이 있는 웹서버의 IP 확인방법

 - 제어판-네트워크 공유센터-인터넷상태-자세히-IPv4 address 확인

 

접속할 웹서버 IP address를 입력하면 접속가능하게 됨

127.0.0.1을 입력한다면…?

(전세계적으로 자기자신의 주소를 127.0.0.1로 하기로 약속됨)

 

 

주소창에 127.0.0.1을 입력한다면 자기 자신을 의미하는 것

 

 

두대의 컴퓨터(or스마트폰1대와 메인컴)가

같은 무선인터넷이나 공유기에 접속해 있어야 연결가능(같은 네트워크 안에 있어야함)

 

728x90
반응형
저작자표시

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 부록.동영상 삽입  (0) 2021.12.17
생활코딩 WEB1 : 20  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
728x90

 

web1-17.인터넷을 여는 열쇠 : 서버와 클라이언트

인터넷이 동작하기 위해서는 최소 2대가 필요

최초 웹사이트를 개발한 팀 버너스리는 웹브라우저와 웹서버를 개발함

이 두대는 인터넷에 연결되어있음.

 

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch에 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

Web Server : 인터넷연결상태 하드디스크에 index.html파일 저장된상태

 

<절차 설명>

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch에 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

그럼 웹서버는 하드디스크에서 index.html파일을 찾아서 웹브라우저가 설치된 컴퓨터에 전기적 신호로 바꿔서 정보를 쏴준다. 이 신호 안에는 index.html파일에 있는 코드가 담겨있음.

웹브라우저에는 웹서버에서 보낸 index.html의 정보(코드)가 도착하고 이 코드를 웹브라우저가 읽어서 해석한 다음 화면에 표시해줌. 이 일련의 과정이 우리가 아는 웹사이트가 동작하게 되는 과정

 

*웹브라우저와 웹서버가 서로 정보를 주고 받음

웹브라우저의 역할 : 정보 요청(request) // 웹 클라이언트라고 부를 수도 있음

웹서버의 역할 : 정보 응답(response)

 

게임으로 치면 게임 클라이언트와 게임서버

 

 

 

 

웹서버 두가지방법

자신의 컴퓨터에 웹서버를 직접 깔아서 사용

이런 일을 대행해주는 업체에 맡기는 것

 

생활코딩 추천 배움방법

웹호스팅으로 가볍고 쉽게 시작해서 해보고, 웹서버를 통해서 원리를 파악하는 방향을 추천

좀 어렵게 느껴지거나 시간이 없다면 웹호스팅만 보고갈 것

 

 

 

web1-18.웹호스팅 : github page

 

host : 인터넷이 연결되어 있는 컴퓨터 한대 한대를 호스트라 부름.

 - 웹서버를 운영하기 위한 컴퓨터

 - 웹을 목표로 host를 빌려주는 사업을 한다면 웹호스팅 업체(대표적 회사 : github)

 - 대부분 전문적인 웹호스팅 업체에 맡김

 

 

웹호스팅 종류

static web hosting : 일정사용량이 넘으면 유료전환 되는 서비스

free static web hosting : 무료

추천 웹호스팅 업체

 - bitballoon.com

 - neocities.org

 - amazon s3

 - google cloud strage

 - azure blob

(시간이 지남에 따라 성장&도태되는 업체가 생기니 검색으로 알아볼 것)

 

깃에 업로드한 파일들을 계속 재업하면서 버전관리를 할 수 있음☆

 

깃허브를 통해 싸이트 오픈. 만약 안될경우 주소 뒤에 파일명 붙여볼 것(ex : index.html)

(아무리 많은 사람들이 들어와서 무료)

 

 

728x90
반응형
저작자표시

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 20  (0) 2021.12.17
생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 08-10  (0) 2021.11.08
728x90

 

 

web1-14. HTML 태그의 제왕

<a></a> : anchor의 약자

  • 정보의 바다에 정박한다는 의미
  • HTML(Hyper Text Markup Language)에서 Hyper Text가 가리는 것
  • 링크를 의미함

 

 

 

web1-15.웹사이트의 완성

연관된 웹페이지들을 연결하는 실,본드 같은 역할을 하는 웹사이트

 

수업목표 : Web html css js를 각각 다른 html 링크걸기

<a></a>링크걸기

1.html     2.htm    3.html

 

 

 

 

web1-16.원시웹(최초 웹사이트)

웹이 처음 시작한 부분을 알아보자

웹이 어떻게 등장하게 되었는지 이유를 알아볼 것

 

internet 과 web의 차이?

 - internet : 도로 // 운영체제

 - web : 도로 위 자동차 // 운영체제에 있는 파일

인터넷 안에 여러 동급 서비스들이 있음(FTP, web, email)

1960년 : 인터넷 등장

1990년 : 웹 등장

 

 

※웹의 역사※

1960,

당시 핵공격 공포심각. 핵공격 당하면 중앙집권적 통신시설 때문에 통신이 마비되는 심각한 상황. 이 때문에 중앙이 없는 인터넷이 탄생하게됨.

 

각각의 통신장치들이 분산되서 전화국과 같은 역할을 해서 큰점들이 사라져도 각각의 역할을 할 수 있는 것

연구소,대학,군대,기업과 같은 곳에만 인터넷이 사용되어었고, 일반인들은 이때 인터넷 존재를 몰랐음

 

인터넷의 발생지는 스위스

스위스에는 CERN(유럽입자물리연구소)이라는 물리학연구소에서 LHC(반입자가속기)라는 기계가 있음

 

1980

팀 버너스리 enquire라는 프로그램을 발명. 이 프로그램이 웹의 전신

10년 동안 계발시킴

 

1990

연구소에 인터넷이 들어옴.

1990.10

웹페이지 편집기 개발

1990.11

world wide web 개발

1990.12

web server 개발 // 주소 info.cern.ch 최초 웹사이트

 

 

 

 

 

 

 

728x90
반응형
저작자표시

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 17-18  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 08-10  (0) 2021.11.08
생활코딩 WEB1 : 01-07  (0) 2021.11.06

+ Recent posts

티스토리툴바