이번 시간에는 HTML 기본 구조에 대해 살표보겠습니다. 

HTML은 html, head, body, meta 등 많은 태그들로 구성되어 있습니다. 이러한 태그들은 분류 방법에 따라 다음과 같이 분류 할 수 있습니다.


태그란?

 - HTML를 구성하기 위한 요소입니다.


분류 1 : 쌍태그 vs 단일 태그

분류 2 : block 태그 vs inline 태그 vs inline-block 태그


쌍태그 vs 단일 태그

쌍태그 : 괄호처럼 여는 부분과 닫는 부분이 필요한 태그

 - 태그 사이에 내용을 포함합니다.

 - 괄호의 순서가 꼬이면 계산이 안되는 것처럼, 태그의 열고 닫는 부분이 꼬이면 원하는 배치가 안 될 수있습니다.

 - 여는 태그 : <태그명>

 - 닫는 태그 : </태그명>

 - 종류 : head, body, title, p, div 등


단일 태그 : 닫는 태그가 필요없는 태그

 - 종류 : meta, input, img 등

 - <태그명> 또는 <태그명/>


block 태그 vs inline 태그 vs inline-block 태그

block 태그

 - 앞 태그의 종류와 상관없이 새 라인에서 시작하고, 다음 태그를 새 라인에서 시작하도록 하는 태그

 - css나 style 속성을 통하여 가로와 높이를 변경할 수 있는 태그

 - 종류 : div, h[1~6], p 태그 등


inline 태그 

 - 현재 위치에 이어서 작업을 하는 태그

 - 태그의 가로와 높이를 변경할 수 없는 태그

 - 종류 : span 태그 등


inline-block 태그

 - inline 태그와 block태그가 섞인 태그

 - 현재 위치에서 이어서 작업을 하며 태그의 가로와 높이를 변경할 수 있는 태그

 - 종류 : input 태그 등

이제 본격적으로 각 태그들의 대해 살표보도록 하겠습니다.


<!DOCTYPE>

 - 문서 타입을 정의하는 태그입니다.

 - 대소문자를 구별하지 않지만 일반적으로 DOCTYPE은 대문자로 사용합니다.

 - HTML5의 경우 문서 맨 위에 다음과 같이 입력하면 됩니다.

1
<!DOCTYPE html>
cs


<html>

 - HTML 문서 전체를 감싸는 태그

1
<html></html>
cs


<head>

 - HTML 문서의 속성을 지정하기 위한 태그

 - 현재 페이지에 대한 정보 및 필요한 파일을 연결하는 작업들을 합니다.

 - <head>태그 안에는 <title>, <meta>태그 등을 넣습니다.

1
<head></head>
cs


<body>

 - HTML 문서의 본문으로 화면에서 보이는 부분을 담당하는 태그로, 다른 태그들을 이용하여 화면을 구성합니다.

1
<body></body>
cs


HTML의 기본 구조 예시

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>안녕하세요.</p>
</body>
</html>

cs


저작자표시

이번 시간에는 HTML을 학습하기 전 개발 코드를 관리하는 방법에 대해 살표보겠습니다.

일반 파일의 경우는 이동저장장치(USB, 외장하드)나 클라우드(네이버 등)로 많이 사용하고 있습니다.

하지만 이러한 방법은 변경되기 전 파일을 복구하거나 변경된 파일이 이전을 기준으로 어떻게 변경되었는지 추적하기가 힘들고, 변경된 이력을 살피기 힘듭니다.

이러한 정보들은 개발에 있어서 중요하기 때문에 개발 코드들을 관리하기 위해서 다른 방법이 필요하고, 그 방법 중 하나인 git을 소개합니다.

git에 대한 내용은 아래 링크를 참고하시거나 검색하면 됩니다.

Git 기본 정리(정의, 용어)


코드를 관리하기 위해 다음의 절차를 진행해야합니다.

 1. GitHub 사이트에서 회원 가입

 2. GitKraken 다운로드 및 설치

 3. GitKraken과 github 계정 연동

 4. Repository(저장소)생성

 5. Repository Clone(저장소 복사) : 온라인 저장소에 있는 내용들을 내 PC로 복사

 6. Commit : 내 PC에서 수정된 내용에 대한 이력을 남김

 7. Push : 내 PC에서 수정된 이력을 온라인 저장소에 업데이트


과정 1,2는 진행하시면 되고 과정 3부터 따라 진행하면 됩니다.


3. GitKraken과 github 계정 연동

 - GitKraken 실행

 - 메뉴 File > Preferences... 클릭


 - Authentication 클릭 > GitHub.com 클릭 > Connect to GitHub 클릭


 - 브라우저(크롬 또는 익스플로러)가 열리면서 아래와 같은 창이 열리면 Continue Authorization 클릭


 - 가입한 GitHub 계정으로 로그인 하면 다음과 같은 화면이 뜹니다.


 - 다시 GitKraken으로 가서 Generate SSH Key and add to GitHub 클릭하면 연결이 완료됐습니다.


4. Repository(저장소)생성

 - 이번엔 저장소 생성을 위해 GitHub 홈페이지로 가 로그인을 한 후 Start a project를 클릭


 - 원하는 저장소 이름(영어로)을 설정 하고, 접근 권한(Public or Private)을 설정합니다. GitKraken 무료 버전에서는 Private이 지원이 안될 수도 있기 때문에 Public을 선택합니다.

 - 선택사항이긴 하지만 Initialize this repository with a README를 체크합니다.

 - Add.gitignore를 클릭하여 java를 선택


 - 저장소 생성 후 화면


5. Repository Clone(저장소 복사) : 온라인 저장소에 있는 내용들을 내 PC로 복사

 - GitKraken을 실행합니다.

 - 메뉴 File > Clone Repo 클릭


 - GitHub.com 클릭 > 원하는 저장소(project) 클릭 > Browse 클릭


 - 복사할 내 PC 위치 선정(예시에는 바탕화면) 훟 폴더 선택


 - Clone the repo! 클릭 > Open Now를 클릭


 - 클론 완료 후 화면

 

 - 클론 완료 후 저장한 폴더에 복사한 내용들이 생겼을 것입니다.


6. Commit : 내 PC에서 수정된 내용에 대한 이력을 남김

 - 내 PC에 복사된 폴더로 가서 test.txt라는 빈 파일을 생성합니다.

 - .git 폴더는 기본 숨김설정으로 되어 있기 때문에 안보인다면 폴더 설정에서 숨김 보임을 하시면 보입니다.

 - 파일 추가 후 GitKraken 화면


 - 변경된 내용 선택 > 변경 이력을 남길 파일에 마우스를 댄 후 Stage File 클릭 


 - Summary에 남길 내용을 입력 > Comit changes to 1 files 클릭


7. Push : 내 PC에서 수정된 이력을 온라인 저장소에 업데이트

 - Push 하기 전 GitKraken을 보면 master가 2개 보입니다. 위에 있는 master는 내 PC버전이고 아래 있는 master는 온라인 저장소 버전입니다.

 - Push는 온라인 저장소버전을 내 PC 버전으로 맞춰주는 역할을 합니다.

 - Push 버튼 클릭 후 GitKraken 화면


- Push 후 온라인 저장소 화면 


이상으로 코드 관리하는 법을 살펴봤습니다.

과제 : 이 과정을 따라서 한 후 수정된 온라인 저장소 주소를 보내주세요.

예시 : https://github.com/st8324/proejct







저작자표시

Visual Studio Code(현재 1.34.0버전, 이후 VS Code로 표기)에서 라이브 서버를 설정하는 방법에 대해 살펴보자.

라이브 서버를 이용하면 파일 수정 후 저장하면 수정된 내용이 바로 저장된다.


1. 라이브 서버 설치하기

2. 라이브서버 테스트하기


1. 라이브 서버 설치하기

  • VS Code 실행 후 파일 > 기본설정 > 확장 메뉴를 클릭한다.
  • 또는 단축키로 Ctrl + Shift + X를 같이 누른다.


  • 검색창에서 live server를 검색 후 설치버튼을 클릭한다.


2. 라이브 서버 테스트하기

  • 왼쪽 상단에 탐색기 아이콘 클릭하여 확장 메뉴 제거한다.


  • 탐색기에서 폴더 열기를 클릭하여 열 폴더를 지정한다.


  • 새파일 아이콘을 클릭 후 파일명에 test.html을 입력하여 html 파일을 생성한다.


  • 좌측 코드 탭에서 html:5를 입력하면 자동완성이 되는데 엔터를 쳐서 기본 코드를 생성한다.


  • 좌측 코드 탭을 우클릭한 후 Open with Live Server 메뉴를 클릭한다.
  • 또는 단축키로 Alt + L 입력 후 Alt + O를 누른다.


  • 실행결과

도움이 되셨다면 광고 클릭!

저작자표시

ajax의 기본 속성 값

async(Asynchronous) 

  • 비동기를 설정하는 속성으로 true면 비동기, false면 동기 방식으로 동작
  • 비동기방식으로 동작을 시키면 ajax가 처리되는 것과 별개로 ajax 이후 코드들이 실행
  • 동기 방식으로 동작을 시키면 ajax 처리가 다 끝나고 ajax 이후 코드들이 실행

type

  • 요청하는 방식을 설정하는 속성으로 post와 get 방식이 있음
  • get 
    • get 방식은 데이터를 URI(Uniform Resource Identifier)에 실어 보내는 방식으로 데이터가 적거나 보안이 필요하지 않은 경우
    • 화면을 보여주기 위해서는 get방식이 필수
    • 대표적으로 게시글을 보여줄때 사용
  • post
    • post 방식은 데이터를 BODY에 포함하여 전달하는 방식
    • 디비에 정보를 처리하기 위한 방식으로 사용
    • 대표적으로 회원가입, 로그인, 게시판 등록 등이 있음


url

  • 업무를 요청하기 위한 URL(Uniform Resource Locator)를 설정


dataType

  • 서버에서 보내줄 데이터 타입을 설정


contentType

  • 서버로 보낼 데이터 타입을 설정
  • 서버로 Object로 데이터를 보내기위해서는 contentType 생략


예시

  • jsp에서 ajax를 이용하여 넘겨준 데이터를 컨트롤러에서 객체로 받는 예제
  • 컨트롤러
1
2
3
4
5
6
7
@RequestMapping(value ="/checkemail",method = RequestMethod.POST)
public Map<Object, Object> emailcheck(User user){
    Map<Object, Object> map = new HashMap<Object, Object>();
    map.put("id",user.getId());
    map.put("email", user.getEmail());
    return map;
}

cs
  • User 클래스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class User{
    String id;
    String email;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
}

cs
  • jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#ajaxTest').click(function(){
                var m = {'id':'test123', 'email': 'test@gmail.com'}
                $.ajax({
                async:true,
                type:'POST',
                data:m,
                url:"<%=request.getContextPath()%>/checkemail",
                dataType:"json",
                success : function(data){
                    console.log(data.id,' : ' , data.email);
                }
            });
            });
        })
        
    </script>
</head>
<body>
    <button type="button" id="ajaxTest">ajax 테스트</button>
</body>
</html>
cs



저작자표시

+ Recent posts

티스토리툴바