10/28 - HTML(2) : 개발 환경 ( filezilla, ApachTomcat, JDK ) 설치, html

250x250

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			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	31

Tags more

Archives

Today

Total

관리 메뉴

매일 조금씩

10/28 - HTML(2) : 개발 환경 ( filezilla, ApachTomcat, JDK ) 설치, html 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

10/28 - HTML(2) : 개발 환경 ( filezilla, ApachTomcat, JDK ) 설치, html

mezo 2020. 10. 28. 17:47

728x90

파일공유

filezilla - ftp

new site

호스트 : 211.151.185.221

로그온 유형 : 계정

사용자 : class4

비밀번호 : 123456

계정 : class4

누르면 연결 닫힘

HTML 이란?

html - hyper text markup language

=> website

네트워크 자료(html)를 공유하려는 목적
자료(html) - 논문

다빈치코드 작가의 천사와악마에 cern연구소(물리학)에서 자료를 공유하려고 만든게 html이다.

개발자 = web server를 통해서 html을 공개

web server를 외부의 사람들이 접근해서 볼수가 있음 browser를 통해서 봄 이걸 클라이언트라고 한다.

접근하려면 접근하려는 뭔가가 있어야하는데 그게 ip다. 컴퓨터의 도메인, 주소임.

디자인한 html을 공개하는 방법을 배운다.

웹 서버의 종류는 굉장히 많다.

JSP를 해석하는 언어 = Apache-Tomcat
JSP(Java Server Page) = Java를 기반으로하는 Server Side 스크립트언어로 JSP를 통해 정적인 HTML과 동적으로 생성된 contents(HTTP 요청 파라미터)를 혼합하여 사용할 수 있다. 즉, 사용자가 입력한 contetns에 맞게 동적인 웹 페이지를 생성한다.

JDK와 Apache-Tomcat을 깔아두면 외부에서 볼수가 있다.

(개발도구는 최신버전보다 안정된 버전을 쓰는 것이 좋다. 버그때문에 신뢰성이 없다.

버전이 낮아도 패치가 많이된 걸 쓴다. )

JDK 8 많이 씀

설치가 필요한 개발도구

WebServer <- WebClient(browser)

Apache-Tomcat (v9) - JSP를 해석하는 언어

tomcat.apache.org

자바개발도구(JDK) (v8)

www.oracle.com

환경설정 "시스템 환경변수 편집"에서 해야함

설치 후, 환경 설정

JDK 환경설정 방법

'시스템 환경변수 편집' 에서

'시스템변수(S)' 에서 '새로만들기' 클릭

jdk 설치된 곳 경로 주소 복사

시스템 변수 > Path클릭 > 편집

-> 새로만들기

복사한 주소 붙여넣고 끝에 \bin붙이기

cmd 껐다 켜야 환경변수를 읽는다

껐다 켜서 쳐보면

설치만 완료했을 땐 java -version 명령어로 버전확인만 가능했지만

환경변수 설정 후

javac -version 명령어로 환경 변수 설정이 된것을 확인 가능하다.

설치 후, 확인

Apache-Tomcat 잘 설치됐는지 확인하기

압축 html 파일안에 풀고나서 폴더안에

bin 경로 주소 복사

접속하면

catalina.bat run 후 http://127.0.0.1:8080/ 접속 화면

보이고

"ctrl+c" 눌러서 run 끊으면 http://127.0.0.1:8080/ 접속해도 이 사이트 안뜸

만약 접속했을 때, 저화면이 안뜨고 로그인 창이뜨는 경우

gimmesome.tistory.com/88?category=1159238

[Tomcat] 브라우저에서 로그인이 필요하다고 뜨는 오류

tomcat을 설치 후 cmd창에서 Catalina.bat run으로 실행시킨후 브라우저에서 127.0.0.1:8080을 열면 로그인을 하라는 창이 나온다. 그 이유는 8080포트를 오라클 것으로 인식?하기 때문이라고 한다. 해결하는

gimmesome.tistory.com

*** IP

테스트용 IP - 127.0.0.1
공개용 IP - ipconfig (자기ip 확인할수 있다.)

- 192.168.0.xxx

이거 말고 자기포트번호:8080

ex) 192.168.0.9:8080

으로 해도 같은 결과가 나온다.

포트번호 8080은 웹페이지를 만들때 사용자들이 많이 사용하는 포트번호이다.

*** Apache-Tomcat

시작

c:\html\apache-tomcat-9.0.39\bin>catalina.bat run

c:\html\apache-tomcat-9.0.39\bin>startup.bat

종료

c:\html\apache-tomcat-9.0.39\bin>shutdown.bat

확인

http://127.0.0.1(아이피):8080(포트)/

http://192.168.0.xxx(내아이피):8080(포트)/

*** cmd (명령 프롬프트) 명령어

dir - 현재디렉토리 목록
dir 디렉토리명 - "디렉토리명"의 목록을 보여줌/..
cd - 경로를 바꾸어줌 탭으로 약자동완성됨(change directory)
cls - 화면을 지운다 (clear screen)
catalina.bat run - 실행 명령어 ( http://192.168.0.15:8080 에서 확인 가능 )
startup.bat 도 가능 (다른 cmd창이 하나더뜨고 거기서 실행됨) -> shutdown.bat로 종료

cmd로 실행시키는 내 파일

cmd로 실행시켜서 브라우저로 ROOT폴더안의 html보기

bin 안에 실행파일있다.

webapps 안에 ROOT 안에 파일을 넣어야 볼수 있다.

딴데서 볼수 있으면 그건 해킹이다.

ROOT 폴더안에 그림파일이 여러개 있다.

'http://192.168.0.15:8080/그림파일명.확장자' 를 주소창에 치면

그림이 보인다.

다른사람의 root 파일 내의 사진도 이렇게 볼수 있다.

ROOT폴더 안에 html 파일을 만들면 다른사람의 html도 다른사람 IP 주소만 알면 볼 수 있다.

내꺼

옆자리 언니꺼

*** html 어제 배운거 정리

<!doctype html> - html 버전

<html>

<body>

제목 : <h1> ~ <h6>

2. 문단 : <p> ~ <span>

3. 인용 : <pre>, <blockquote>

4. 형식화 : <b> ~ <sup>

5. list : <ul> ~ <dl>

6. table : <table><tr><td>

7. etc : <br/><hr/> 

</body>

</html>

HTML 태그 학습

오늘 배울 html 태그

<th> - 테이블의 머릿글

align - center, left, right 정렬
valign - top, middle, bottom 정렬

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <table border="1" width = "400" height="200">
            <tr>
                <td align="center">1 열</td>
                <td align="left">2 열</td>
                <td align="right">3 열</td>
            </tr>
            <tr>
                <td valign="top">1 열</td>
                <td valign="middle">2 열</td>
                <td valign="bottom">3 열</td>
            </tr>
        
        </table>
    </body>
</html>

<header>에 문서전체 지정 해줌

    <head> <!-- 문서 전체 지정-->
        <title>난 제목</title> <!--브라우저의 탭에 제목 나옴 -->
        <meta charset="utf-8" /> <!--다국어처리(한국어 설정). 없으면 한글 깨짐  -->
        <!--
        <style>css</style>
        <script>javascript</script>
        -->
    </head>

Image

이미지는 경로랑 같이 생각해줘야함

ㅇ 절대경로 (절대적인 위치)

드라이브 (웹에서 잘안쓴다)

드라이브명

C:\html\apache-tomcat-9.0.39\webapps\ROOT\tomcat-power.gif

url (특별한 경우에 쓴다)

도메인

http://127.0.0.1:8080/tomcat-power.gif

ㅇ 상대경로 (지금보고 있는 파일부터) - *많이 쓴다.

현재 디렉토리 : .
상위 디렉토리 : ..

<!-- 절대경로 -->
        <img src="http://127.0.0.1:8080/tomcat-power.gif" />
        <img src="https://www.w3schools.com/w3css_templates.jpg"/>
        
        <br/><br/>
        <!-- 상대경로 -->
        <img src = "../tomcat-power.gif"/> <br/>
        <img src = "./tomcat.gif"/> <br/> <!-- 같은 디렉토리 -->
        <img src = "./images/tomcat.gif"/> <!-- 같은 디렉토리 내의 디렉토리-->

        <br/><br/><br/><br/>

        <!--
            html
                image01.html
            images
                image01
                    tomcat.gif
        -->
        <img src="http://127.0.0.1:8080/images/image1/tomcat.gif" /><br/>
        <img src = "../images/image1/tomcat.gif" /><br/>

이미지 크기 설정에 따라 이미지 다르게 보인다.

alt = 이미지 설명

favicon

link로 favicon 설정도 가능하다.

단, favicon 이미지 파일은 최상위 폴더인 ROOT폴더 안에 있어야한다.

src가 아닌 href를 사용해야한다.

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
        <!-- favicon 
        파비콘 이미지 파일은 최상위폴더 안에 있어야함(ROOT폴더)
        src가 아닌 href를 써야함
        -->
        <link rel="short icon" type="image/x-icon" href="./naver.ico" />
    </head>
    <body>
       <img src="./tomcat.gif" /><br/>
       <img src="./tomcat.gif" width="142" height="92" /> <br/>
       <img src="./tomcat.gif" width="142" /> <br/>
       <img src="./tomcat.gif" width="71"/> <br/>
       <img src="./tomcat.gif" width="71" height="92" /> <br/>
       <img src="./tomcat.gif" alt="이미지 설명" /> <br/>
    </body>

</html>

*** href / src / url 의 차이는 무엇일까?

href / src / url 모두 가장많이 사용되는 케이스 1가지씩 보면..

href : a태그에 홈페이지 등의 주소를 입힐때 사용됩니다.

src : img태그에 파일 디렉토리 경로에있는 어떠한 이미지를 지성하여 웹 페이지에 결과물을 출력할때 사용됩니다.

url : CSS / html의 style 에서 img태그와 같이 어떠한 파일을 불러올때 사용됩니다.

CSS에서: 항상 "url"
HTML에서
1. link인 경우: "href"
2. link가 아닌 경우(이미지, 비디오 등등): "src"

링크

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- a : 링크 태그 -> href 씀 -->
        <a href="./image01.html">바로가기</a>
        <a href="./image02.html">바로가기</a>
        <hr />
        <a href="../ex01.html">바로가기</a>
        <hr />
        <a href="../tomcat.gif">바로가기</a>
        <hr />
        <a href="https://www.daum.net">다음 바로가기</a>
        <a href="https://www.google.com">구글 바로가기</a>
        <a href="https://gimmesome.tistory.com/">김미썸 블로그 바로가기</a>
        <hr />
        <!-- 브라우저가 해석 할수 없는 zip파일 -->
        <a href="./html.7z">바로가기</a>
        <hr />
        <!-- target : 새 탭(_blank)에 보여줘 -->
        <a href="./image01.html" target="_blank">바로가기</a>
    
    </body>
</html>

브라우저가 해석할 수 있는 파일은 링크타고 가서 열리고

해석 할 수 없는 파일은 다운로드가 된다. (홈페이지의 다운로드들이 전부 이런식)

'매크로'의 기본원리가 이 링크다. 다 클릭해서 넘어가는 걸 한번에 넘어가는 걸로 ..

이런 링크로 즐겨찾기 기능을 제공한다.

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <body>
    <a href="https://search.naver.com/search.naver?sm=top_sug.pre&fbm=1&acr=1&acq=covid&qdt=0&ie=utf8&query=covid-19">covid-19</a>
    
    <br/>
    
    <!-- html 즐겨찾기 -->
    <a href="https://www.w3.org">w3c</a><br/>
    <a href="https://www.w3schools.com/html">w3school html</a> <br/>

</body>
</html>

iframe

창 안에 창이 생김

<iframe src="https://m.daum.net" width="600" height="800"></iframe>

창안에 창인게 테투리에서 좀 티가 난다.

fameborder="0" 삽입 하면

<iframe name="child" src="https://m.daum.net" width="600" height="800" frameborder="0"></iframe>

테두리가 사라져서 창인 티가 안나게 된다.

scrolling="no" 삽입하면

<iframe name="child" src="https://m.daum.net" width="600" height="800" frameborder="0" scrolling=
        "no"></iframe>

스크롤이 사라진다.

target

target = "이름" 으로 설정하면 name="이름"인 것을 찾아가서 그곳에 링크가 열리게 한다.

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <body>

        <ul>
            <!--
                이 링크를 child에 넣어줘
                링크를 클릭했을 때 아래의 child창에 띄움
            -->
            <li><a href="https://www.etnews.com" target="child">etnews</a></li>
            <li><a href="https://www.zdnet.co.kr" target="child">zdnet</a></li>
            <li><a href="https://m.daum.net" target="child">daum</a></li>
            
        </ul>
        <hr/>
        <!--frameborder : 사이트 들어온것처럼 사용가능 -->
        <!--scrollint : 스크롤여부 설정 -->
        <iframe name="child" src="https://m.daum.net" width="600" height="800" frameborder="0" scrolling=
        "no"></iframe>
    </body>
</html>

Forms

(입력 양식-회원가입, 로그인 등)

size : 입력칸 길이 설정 (디자인적 길이)

maxlength : 입력제한 (프로그램 길이)

value : 초깃값

placeholder : 입력하면 사라지는 값

readonly : 입력 막기 (read only)

입력 받기

한 줄 입력 (보여지게)

<!-- 한줄 입력 내용 (보여지게) -->
            <input type="text" /><br/>
            <input type="text" size="50"/><br/> <!--입력칸 길이가 늘어남 - 디자인적 길이-->
            <input type="text" size="50" maxlength="20"/><br/> <!--입력제한 - 프로그램적 길이-->
            <input type="text" size="50" maxlength="20" value="초기값"/><br/> <!--입력칸에 써두기 가능(지우기 가능)-->
            <input type="text" size="50" maxlength="20" placeholder="입력해주세요"/><br/> <!--입력하면 사라지는 글자-->
            <input type="text" size="50" maxlength="20" value="초기값" readonly/><br/> <!-- 입력 막기(read only)-->

한줄 입력 (안보여지게)

<!-- 한줄 입력 내용 (안보여지게)-->
            <input type="password"><br/><br/> <!--입력하는 글자가 안보임-->

여러줄 입력

<!--여러줄 입력-->
            <textarea></textarea><br/><br/>
            <textarea rows="5" cols="50"></textarea><br/><br/><!--입력 제한-->
            <textarea rows="5" cols="50">초기값</textarea><br/><br/><!--초기값-->

다중 선택 (checkbox)

 <!--다중 선택-->
            <input type="checkbox" /> 사과<br/>
            <input type="checkbox" checked/> 수박<br/> <!--디폴트로 선택되어있게(클릭해서 취소가능)-->
            <input type="checkbox" /> 딸기<br/>

단일 선택 (radio)

name을 꼭 써줘야한다.

<!--단일 선택-->
            <!--radio를 쓰는데 name을 안쓰면 다중선택에 선택취소안됨
            name을 꼭 써줘야 단일 선택이 됨-->
            <input type="radio" name="r"/> 사과<br/>
            <input type="radio" name="r" checked/> 수박<br/>  <!-- 기본선택 -->
            <input type="radio" name="r"/> 딸기<br/>

단일, 다중 선택

<select> <!--단일 -->
    <option>사과</option>
    <option selected>수박</option> <!--기본 선택-->
    <option>딸기</option>
</select>

<hr/>

<select multiple> <!--ctrl이나 shift키를 누른 상태로 클릭하면 다중선택 가능-->
    <option>사과</option>
    <option selected>수박</option> <!--기본 선택-->
    <option>딸기</option>
</select>

파일 선택

 <!-- 파일 입력 -->
 <input type="file" /><br/><br/> <!--파일을 찾는거 까지만-->

숨김 데이터 (아무것도 안나타남)

<!-- 숨김 데이터 -->
<input type="hidden" value="초기값"/> <br/><br/>

색상 입력

<!-- RGB(Red(0~255), Green(0~255), Blue(0~255)) -->
<input type="color" value="#0000ff" /> <!-- 색상 선택 가능. value로 초깃값 설정 (html5에서 새로나옴)-->
<input type="date" value="2020-05-05"/> <br/><br/> <!-- 날짜 선택, value로 초깃값 설정 가능-->

최대, 최솟값 구하기

<!--최대, 최소값을 구할수 있음-->
<input type="number"/> <br/><br/>
<input type="number" min="5" max="10" step="2" value="5"/><br/><br/> <!--제한 값, 증가치, 초깃값을 줄수 있음-->
<input type="range" min="5" max="10"/><br/><br/>

< 전체 코드 >

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <form>
            <!-- 한줄 입력 내용 (보여지게) -->
            <input type="text" /><br/>
            <input type="text" size="50"/><br/> <!--입력칸 길이가 늘어남 - 디자인적 길이-->
            <input type="text" size="50" maxlength="20"/><br/> <!--입력제한 - 프로그램적 길이-->
            <input type="text" size="50" maxlength="20" value="초기값"/><br/> <!--입력칸에 써두기 가능(지우기 가능)-->
            <input type="text" size="50" maxlength="20" placeholder="입력해주세요"/><br/> <!--입력하면 사라지는 글자-->
            <input type="text" size="50" maxlength="20" value="초기값" readonly/><br/> <!-- 입력 막기(read only)-->
            
            <hr/>
            <!-- 한줄 입력 내용 (안보여지게)-->
            <input type="password"><br/><br/> <!--입력하는 글자가 안보임-->

            <hr/>    

            <!--여러줄 입력-->
            <textarea></textarea><br/><br/>
            <textarea rows="5" cols="50"></textarea><br/><br/><!--입력 제한-->
            <textarea rows="5" cols="50">초기값</textarea><br/><br/><!--초기값-->

            <hr/>

            <!--다중 선택-->
            <input type="checkbox" /> 사과<br/>
            <input type="checkbox" checked/> 수박<br/> <!--디폴트로 선택되어있게(클릭해서 취소가능)-->
            <input type="checkbox" /> 딸기<br/>

            <hr/>

            <!--단일 선택-->
            <!--radio를 쓰는데 name을 안쓰면 다중선택에 선택취소안됨
            name을 꼭 써줘야 단일 선택이 됨-->
            <input type="radio" name="r"/> 사과<br/>
            <input type="radio" name="r" checked/> 수박<br/>  <!-- 기본선택 -->
            <input type="radio" name="r"/> 딸기<br/>

            <hr/>

            <!-- 단일, 다중 선택-->
            <select> <!--단일 -->
                <option>사과</option>
                <option selected>수박</option> <!--기본 선택-->
                <option>딸기</option>
            </select>

            <hr/>

            <select multiple> <!--ctrl이나 shift키를 누른 상태로 클릭하면 다중선택 가능-->
                <option>사과</option>
                <option selected>수박</option> <!--기본 선택-->
                <option>딸기</option>
            </select>

            <hr/>
            
            <!-- 파일 입력 -->
            <input type="file" /><br/><br/> <!--파일을 찾는거 까지만-->

            <hr/>

            <!-- 숨김 데이터 -->
            <input type="hidden" value="초기값"/> <br/><br/>
            
            <hr/>

            <!-- RGB(Red(0~255), Green(0~255), Blue(0~255)) -->
            <input type="color" value="#0000ff" /> <!-- 색상 선택 가능. value로 초깃값 설정 (html5에서 새로나옴)-->
            <input type="date" value="2020-05-05"/> <br/><br/> <!-- 날짜 선택, value로 초깃값 설정 가능-->
            

        </form>
    </body>
</html>

< 전체 결과 >

Form을 활용해서 input을 받고 그걸 전송하기 (검색창의 기본)

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <!--
            http://192.168.0.15:8080/html/test.html?data1=123&data2=456&data3=789

            처리할 페이지명:
            http://192.168.0.15:8080/html/test.html
            ?

            데이터: (key=값)
            data1=123
            &
            data1=456
            &
            data3=789

        -->
        <form action="test.html" method="get">
            <input type="text" name="data1" />
            <input type="text" name="data2" />
            <input type="text" name="data3" />
            <!--제출 버튼을 클릭하면 입력 내용을 가지고 test.html로 이동-->
            <input type="submit" value="전송하기" /> <!--value : 버튼글자-->
        </form>
    </body>
</html>

값을 입력하면

test.html이 없기 때문에 찾을 수 없음이 나온다.

여기서,

http://192.168.0.15:8080/html/test.html?data1=123&data2=456&data3=789 에서

처리할 페이지명:

http://192.168.0.15:8080/html/test.html

데이터: (key=값)

data1=123

data1=456

data3=789

http://192.168.0.15:8080/html/test.html?data1=123&data2=456&data3=789

-> data1,data2, data3를 가지고 test.html로 갈래!

네이버, 다음 검색으로 활용해보기

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <!--
            https://search.naver.com/search.naver?sm=top_sly.hst&fbm=1&ie=utf8&query=covid-19
        -->
        <form action="https://search.naver.com/search.naver" method="get">
            <input type="text" name="query" /> <!--query값을 입력받는다.-->

            <!--원래 정의되어있는 값. 입력받는 값 아님-->
            <input type="hidden" name="sm" value="top_sly.hst" />
            <input type="hidden" name="fbm" value="1" />
            <input type="hidden" name="ie" value="utf8" />
            <input type="submit" value="네이버 검색" />
        </form>
        
        <hr/>


        <!--
            https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&sq=&o=&q=%EC%95%88%EB%85%95
        -->
        <form action="https://search.daum.net/search" method="get">

            <input type="text" name="q" /> <!--query값을 입력받는다.-->

            <!--원래 정의되어있는 값. 입력받는 값 아님-->
            <input type="hidden" name="w" value="tot" />
            <input type="hidden" name="DA" value="YZR" />
            <input type="hidden" name="t__nil_searchbox" value="btn" />
            <input type="hidden" name="sug" value="" />
            <input type="hidden" name="sugo" value="" />
            <input type="hidden" name="sq" value="" />
            <input type="hidden" name="o" value="" />
            <input type="submit" value="다음 검색" />

        </form>
    </body>
</html>

video

autoplay : 자동 플레이
controls : 재생 제어

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- 크롬에선 autoplay 안될 수도 있음 -->
        <video width="300" height="240" autoplay>
            <source src="./movie.mp4" type="video/mp4" />
            <source src="./movie.ogg" type="video/ogg" />
            Your browser does not support the video tag.
        </video>

        <hr />

        <video width="300" height="240" controls>
            <source src="./movie.mp4" type="video/mp4"/>
            <source src="./movie.ogg" type="video/ogg" />
            Your browser does not support the video tag.
        </video>

    </body>
</html>

svg

그림 그리는 것

fill : 도형 채우기 색
strock : 테두리 색
strock : 테두리 폭
cx, cy, r : 원 그릴때 크기 설정 값 (circle)
width, height : 네모 그릴때 크기 설정 값 (rect)

<!DOCTYPE html>
<html>
    <head>
        <title>난 제목</title>
        <meta charset="utf-8" />
    </head>
    <h2>SVG Example</h2>
    <!--
        https://www.w3schools.com/graphics/svg_reference.asp
        https://www.highcharts.com/    -> svg만 깊게 연구해서 만들어 파는 곳
    -->
    <body>
        <!--그림 그리기-->
        <svg width="100" height="100">
            <!-- stroke: 테투리 -->
            <circle cx = "50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4"/>
        </svg>

        <svg width="400" height="100"> <!-- 그림보다 크거나 같아야 그림이 안짤림 -->
            <!-- stroke: 테투리 -->
            <rect width = "400" height="100" fill="orange" stroke="green" stroke-width="4"/>
        </svg>

    </body>
</html>

728x90

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

11/03 - Javascript (3) : 변수/ 함수/ 배열 (0)	2020.11.03
11/02 - Javascript(2) : 제어문 / 라이브러리 (0)	2020.11.02
10/30 - CSS 마무리, Javascript (1) : 자료형 / 연산자 / 조건문 (0)	2020.10.30
10/29 - CSS (0)	2020.10.29
10/27 - HTML(1) (0)	2020.10.28

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles

매일 조금씩

10/28 - HTML(2) : 개발 환경 ( filezilla, ApachTomcat, JDK ) 설치, html 본문

10/28 - HTML(2) : 개발 환경 ( filezilla, ApachTomcat, JDK ) 설치, html

파일공유

filezilla - ftp

HTML 이란?

html - hyper text markup language

설치가 필요한 개발도구

WebServer <- WebClient(browser)

설치 후, 환경 설정

JDK 환경설정 방법

설치 후, 확인

Apache-Tomcat 잘 설치됐는지 확인하기

cmd로 실행시키는 내 파일

cmd로 실행시켜서 브라우저로 ROOT폴더안의 html보기

HTML 태그 학습

오늘 배울 html 태그

Image

favicon

링크

iframe

target

Forms

Form을 활용해서 input을 받고 그걸 전송하기 (검색창의 기본)

네이버, 다음 검색으로 활용해보기

video

svg

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

티스토리툴바