[HTML] 웹(프론트엔드) 개발의 기초_01

2022. 5. 27. 09:04ㆍProgramming의 세계/HTML

 

<<용어정리>>

- 現 Frontend 삼대장 : Angular, React, Vue.js 

    사용자 도구에 따라 유연한 방식으로 컨텐르를 보여줄 수 있게 하는 SW.

 

HTML : hyper text markup language, 개발언어로 html한다고 하면 삐-삐- 안된다.

CSS: Cascading Style Sheet, 좀더 디자인에 최적화된 웹페이지 마크업 언어.

마크업 언어는 데이터 혹은 구조를 가질 수만 있기 때문에, html, CSS는 마크업 language이지 개발언어라고 하기엔 무리가 있다.

 

자바스크립트와 자바의 관계는?

아무것도 없다. 인도랑 인도네시아 같은 관계.

자바스크립트는 웹페이지를 동적으로 만들기 위한 혹은 대화형태로 만들기 위한 개발언어다.

 

자바스크립트와 프레임워크는?

프레임은 약간 생태계 느낌이다.

라이브러리는 신발/롤러스케이트/스노우보드 같은 느낌이라면 프레임워크는 택시/열차/비행기같은 느낌이다.

예를 들자면, 
자바를 가지고 안드로이드를 만든다? 그럼 안드로이드 프레임워크를 갖다 쓰면 된다.
안드로이드용 차트를 쓴다? 그럼 차트 라이브러리를 쓰면된다.

<<앞으로 실습에 사용할 도구>>

-웹브라우저 : 크롬 혹은 사파리, 엣지

-개발툴 : VS code

-형상관리 : 깃허브

-히스토리 기록 : 코딩기스칸 

 

<<깃허브 연결하기>>

1.  git init :  처음에 로컬 레포지토리 생성(처음 프로젝트 만들때마다만 실행함)

2.  Git add  : 스테이징(버전 관리할 파일 지정)

처음 git init을 한 후에&nbsp; 다시 입력하였던 터라 다음의 문구가 나옴

3. git commit -m "메세지" : commit 하기

4. git status : 레포지토리 상태보기

5. Git log : 커밋 이력 보기

6. git push 

7. git branch -M main(선택사항) : 마스터를 메인으로 바꾸기 

시도만 해보고 다시 main-> master로 바꿈

8.  github에서 new reprository 생성한 뒤 상단의 URL을 복사한다.

9.  git remote add origin '깃허브주소'(최초에 한번 실행.)

10. Git remote –v : 현상황에서는 fetch와 push가 같이 연결되어 있는 것을 확인

11. git push -u origin master(6번 실행했다면 main) : 리모트 origin에 나의 로컬의 마스터를 연결

앞으로 1~5번만 사용. 나머지는 초기 설치 및 설정을 위한 과정

<<VS code 알아보기>>

1. Extensions -> One dark Pro, Live Server, Mysql(Jun Han, Weij Chen 2개 다), Git Histody 다운로드 후 시작.

2. html:5 +엔터 : 기본구조 세팅

3. 수정 확인방법 : 다음과 같이 표시 확인이 가능하고 리버트 기능도 가능

코드를 삭제하면 왼쪽 측면에 빨간색 표시가 뜨고 수정하면 파란색 표시가 뜸
이를 클릭하면 다음과 같이 수정 이전 내용을 확인할 수 있다. 상단 왼쪽에서 2번째 꺽인 화살표를 누르면 리버트.

 

4. Live Server 확인 방법

1. VS code 프로그램의 오른쪽 상단 화살표버튼을 누른다.
2. 화면에서 오른쪽커서를 누르고 Open with Live Server를 누른다.

 

 

<<실습하기>>

1. 이미지 첨부하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1><strong>이름 : 팬더킹</strong></h1>
    <hr>
    <h3>생년월일 : <b>2022년 5월 26일</b></h3>
    <h3>사는 곳: <b>분당</b></h3>
    <h3>혁액형 : <b>배고파형</b></h3>
<img src="http://file3.instiz.net/data/file3/2018/04/07/a/c/9/ac9564c5f40002ee187aabd27143ee49.gif" alt="냠냠팬더">
<!-- image를 올려본다. -->
</body>
</html>

 

 

 

2. 링크 연결하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    나만의 바로가기<br><br>
    <a href="https://www.naver.com">네이버</a><br>
    <a href="https://www.daum.net">다음</a><br>
    <a href="https://www.google.com">구글</a><br>
    <a href="https://github.com/doongdoongpanda/">깃허브</a><br>
</body>
</html>

 

 

 

3. 테이블 만들기

table>tr*5>td*2 입력 후 엔터 -> 테이블 자동생성.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table>tr*5>td*2(emmet) -->
    <table border ="1" width ="200" cellpadding="5">
        <tr>
            <td rowspan="4">1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>

        </tr>
        <tr>
            <td colspan="2">6</td>
        </tr>
    </table>

</body>
</html>

 

4. 테이블(rowspan,colspan)연습

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <!-- table>tr*5>td*3(emmet) -->
<table border ="1" width ="200" cellpadding="5">
    <tr>
        <td colspan="2">2</td>
        <td rowspan="5">7</td>
    </tr>
    <tr>
        <td rowspan="3">1</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2">6</td>
    </tr>
</table>

</body>
</html>

 

 

 

 

5. 테이블에 색상 삽입

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table border ="1" width ="200" cellpadding="40">
    <tr>
        <td rowspan="2" bgcolor=red>4</td>
        <td colspan ="2" bgcolor=yellow>1</td>
    </tr>
    <tr>
        
        <td>
            <img src="http://file3.instiz.net/data/file3/2018/04/07/a/c/9/ac9564c5f40002ee187aabd27143ee49.gif" alt="냠냠팬더" width =200></td>
            <td rowspan="2" bgcolor=green>2</td>
    </tr>
    <tr>

        <td colspan="2" bgcolor="blue">3</td>
    </tr>
</table>
</body>
</html>

 

 

 

 

6. form (input/select)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            input:focus::placeholder {
      color: transparent;
    }
    </style>
</head>
<body>
    <form action="test.html">
    <table width="265">
        <tr colspan=2>
            <td><input type="text" placeholder="이름"></td>
        </tr>
            <td><input type="text" placeholder="비밀번호"></td>
            <td width= 400 style="text-decoration:underline"> <font size="1">비밀번호 도움말</font></td>
        </tr >

            <td ><input type ="text" placeholder="비밀번호 재입력"></td>
            <td></td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
               <select name="전화번호">
                    <option placeholder="02">02</option>
                    <option placeholder="031">031</option>
                    <option placeholder="032">032</option>
                    <option placeholder="033">033</option>
               </select> 
            </td>
            <td ><input type ="number" min="0" max="9"></td>
            <td ><input type ="number" min="0" max="9"></td>
        </tr>
        <tr>
            <td><select name="휴대폰 번호">
                <option placeholder="010">010</option>
                <option placeholder="011">011</option>
                <option placeholder="019">019</option>
                <option placeholder="017">017</option>
                </select>
            </td>
            <td>
                <input type ="number" min="0" max="9">
            </td>
            <td>
                <input type ="number" min="0" max="9">
            </td>
            <td>
                <input type="submit" value="휴대폰인증"></button>
            </td>
        </tr> 
    </table>
    
    <table>
        <tr>
            <td>
        <input type="text" placeholder="이메일" style="width:50px">
            </td>
            <td>@</td>
            <td><select name="이메일">
                <option placeholder="naver">naver.com</option>
                <option placeholder="google">google.com</option>
                <option placeholder="daum">daum.net</option>
                </select></td>
            </tr>
    </table>
    </form>
<table>
    <tr>
    <td width="128"></td>
    <td >
    <form action="test2.html">
        <input type="submit" placeholder="제출"></button>
    </form>
    </td>
    </tr>
<script>
    var number = 0;
    console.log(number);
</script>
</body>
</html>

test.html/ test2.html도 생성하여 간단하게 문구 작성함.

 

 

 

 

7. input type =button/submit

ul>li*5 로 자동 생성

ol>li*5 로 자동 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<!-- form action='#' 현재페이지-->
<form action="#">
<table>
    <tr>
        <th>ID</th>
        <td><input type="text"></td>
    </tr>
    <tr>
        <th>Password</th>
        <td><input type="password"></td>
    </tr>
</table>
<input type="button" value="회원가입">
<input type="button" value="초기화">
<input type="submit" value="로그인">
<!-- 특정 페이지 이동 -->
</form>

    <!-- ul>li*5 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <!-- ol>li*5 -->
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</body>
</html>

 

 

 

 

'Programming의 세계 > HTML' 카테고리의 다른 글

[JSP] JSP 짧고 굵게 배워보기(환경 구축 및 구동 확인)  (0) 2022.06.08
[CSS] 초간단 프론트엔드 화면 구성  (0) 2022.05.30
[CSS] div 정렬 vs table 정렬  (0) 2022.05.30
[CSS] display, border의 이해와 속성, 예시  (0) 2022.05.30
[HTML] 웹(프론트엔드) 개발의 기초_02  (0) 2022.05.28

관련글

티스토리툴바