1. 이클립스 GitHub 사용하기(처음 GitHub 사용할 때 반드시 설정)
1) 이클립스에 Git 관점 추가하기
: Window > PersPective > Open Perspective > Other ... 클릭
> Open Perspective 창 뜸 > Git 선택 후 Open 클릭하면 Git 관점 사용 가능
2) 로컬 저장소 생성하기
: 추가하고자 하는 패키지 선택 후 우클릭 > Team > Share Project ... 클릭
> Ues or Create repository in parent folder of Projcet 체크 후 Create Repository 클릭
> Finish 버튼 활성화 > Finish 버튼 클릭
[추가] 설정한 경로에 local repository(로컬 리파지터리) 생성
경로 설정 후 Create Repository 클릭할 때 생성됨
** 파일 탐색기에서 확인하기
** 이클립스에서 Git 관점에서 확인하기
3) https://www.gitignore.io 를 이용, GitHub에 공유하지 않아도 되는 내용 리스트를 뽑을 수 있음
: Java, Eclipse 로 생성 버튼 클릭 > GitHub에 공유할 필요가 없는 리스트들 확인할 수 있음 > 해당 자료 모두 복사
4) 홈페이지를 통해 얻은 공유하지 않아도 되는 리스트와
추가적으로 공유가 필요없는 자료들 .gitignore 파일에 기입 후 저장함
(GitHub 이용하면서 공유가 필요없는 리스트는 계속 추가해도 됨..!!)
5) 첫 번째 Commit 하기
: 프로젝트 선택 후 우클릭 > Add to Index 클릭
> Unstaged Changes 에서 Staged Changes 로 리스트가 옮겨 갔는지 확인
(Staged Changes에 있는 리스트들이 GitHub에 올라갈 리스트임)
> Commit Message에 원하는 문구 기입 후 Commit 클릭
> 정상적으로 Commit이 되면 History에 Commit했던 정보들이 확인됨
6) GitHub에 원격 저장소 생성하기
: GitHub 로그인 후 Repositories 클릭 > New 클릭
> Repository name과 Description 설정 후 Create repository 클릭
> 생성된 repository의 URL 복사
7) Push Branch master 등록하기
: Git Repository 선택 후 우클릭 > Push Branch 'master' ... 클릭 > 따로 설정 손대지 말고 Preview 클릭
> 설정 그대로 두고 Push 클릭 > GitHub 로그인 > Close 클릭하면 GitHub에 Push 완료...!!
2. 인코딩(Encoding) UTF-8로 설정하기(HTML, CSS, JavaScript, JSON)
: Window > Preferences 클릭
1) HTML Files
: Web > HTML Files 클릭 > Encoding UTF-8로 설정
2) CSS Files
: Web > CSS Files 클릭 > Encoding UTF-8로 설정
3) JavaScript Source Files
: General > Content Types 클릭 > JavaScript Source File 선택 Default Encoding을 UTF-8로 설정
4) JSON Files
: JSON > JSON File 선택 Encoding을 UTF-8로 설정
3. 템플릿(template, 이클립스에서 웹 관련 문서 생성시 기본적으로 문서에 작성되는 내용 정의)
: Web > HTML Files > Editor > Templates 클릭
> New HTML File(5) 선택 후 Edit ... 클릭 > html 태그에 lang="ko" 추가 후 OK 클릭
> Preview를 통해 잘 적용됬는지 확인 후 Apply and Close 클릭
4. Commit and Push 하기(1번의 반드시 해야하는 GitHub 작업한 후 진행 가능)
: 아래의 사진처럼 Unstaged Changes 에 파일이 있으면 원격 저장소와 내용이 다르다는 뜻,
최신 정보로 commit 및 push해줘야 함..!! > 플러스 두 개 그려져 있는 거 클릭
> 플러스 두개 그려져 있는 아이콘 클릭하면 Staged Changes로 파일이 옮겨짐
> Commit 및 push 할 준비가 된 것임 > Commit Message 작성 후 Commit and Push ... 클릭
> Log in 후 Close 클릭
> History를 통해 정상적으로 push된 것을 확인할 수 있음
5. 오늘 배운 inline 속성 3개 : span, a, img
6. 프로젝트 만들기
: 빈 곳에 우클릭 > New > Other ... 클릭
> Static Web Project 선택 Next > Project name 설정 후 Finish 클릭 > 프로젝트 생성 완...!!
7. HTML File 만들기
: 만들고자 하는 폴더 선택 후 우클릭 > New > HTML File 클릭 > File name 설정 후 Finish 클릭
8. 브라우저 실행창 띄우기
: 빈 곳 우클릭 > Open With > Web Browser 클릭
> 아래의 사진처럼 띄어 놓기(html 파일 작업 후 저장하고 브라우저 새로고침하면 바로 반영됨)
9. CSS File 만들기
: 만들고자 하는 폴더 선택 후 우클릭 > New > Other ... 클릭
> CSS File 클릭 Next 클릭 > File name 설정 후 Finish 클릭
10. Git Staging 추가하기
: Window > Show View > Other ... 클릭 > Git Staging 선택 후 Open 클릭
> 아래의 그림과 같이 Git Staging이 추가되었음
11. 파일 개별적으로 encoding 설정 변경하기
: 원하는 파일 선택 후 우클릭 > Properties 클릭 > Text file encoding에서 설정
12. 한글 글자 깨질때 확인해야할 3가지
1) 문서 저장 인코딩
2) meta charset 설정 인코딩
3) 브라우저 인코딩
13. 네크워크 (Network)
: 컴퓨터와 컴퓨터가 연결되어 컴퓨터의 자원을 공유하며 작업할 수 있는 기술 및 연결 형태
14. 인터넷 (Inter-networking)
: 네트워크간 통신 기술 및 연결
15. 웹(World Wide Web)
: 팀 버너스리(Tim Berners-Lee) 개발.
인터넷 기술을 사용해서, 세계 대학, 연구소끼리 연구 교환 목적으로 문서, 소리, 동영상을 주고 받을 수 있는
전자 문서 소프트웨어.
16. 요청(request)
: 서버에 자원을 요청하는 것(요청하는 컴퓨터를 클라이언트라고 함)
17. 응답(response)
: 서버가 받은 요청에 따라 해당 자원을 전송해주는 것(웹서버의 경우 HTML 웹문서가 응답의 결과)
18. URL (Uniform Resource Locator)
: 인터넷 상의 모든 컴퓨터 자원이 URL로 표현된다.
19. 웹개발 관련 직종
1) 웹 프로그래머 : 주로 백엔드 쪽 프로그래밍을 전담하고, 프론트 엔드의 ‘구조’ 까지 개발
2) 웹 퍼블리셔 : 프론트 엔드의 레이아웃 / UI / UX / 스타일 개발
3) 웹 디자이너 : 프론트 엔드의 이미지 및 디자인 개발
[실습코드]
1. Html01_Hello.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
안녕하세요
<h1>자바 프레임워크</h1>
</body>
</html>
2. Html02_Paragraph.html
<!DOCTYPE html>
<html lang="ko">
<!-- HTML 의 주석 (comment) -->
<!--
중첩된(nested) 주석 불가.
한 줄 주석 없음.
-->
<!-- <head> :
브라우저에 직접적으로 보여지진 않지만
'웹문서'에 대한 부가적인 정보나 설정값.
'브라우저에'서 다루어야 할 내용 포함.-->
<head>
<meta charset="UTF-8"> <!-- 이 HTML 문서의 인코딩 -->
<!-- 한글 글자 깨질때 확인하기..!!
1. 문서 저장 인코딩은?
2. meta charset 설정 인코딩은?
3. 브라우저 인코딩은?
-->
<title>Paragraph 문단</title>
</head>
<!-- 브라우저 화면에 보여지는 내용 -->
<body>
안녕하세요
<p>P태그는 문단(paragraph) 를 나타내는 태그</p>
<p>문단과 문단 사이는 줄바꿈 (기본)</p>
<!-- Lorem Ipsum 로렘 입숨
출판등에서 디자인이나 레이아웃을 보기위한 샘플용 텍스트. 특별한 의미는 없으나,
어느정도 분량의 텍스트로 글을 생성해주기 위해 필요.
https://www.lipsum.com/
-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nunc est. Etiam in pretium lorem. Sed malesuada ligula quis purus tempus viverra. Maecenas est sem, imperdiet ac accumsan ut, tristique id magna. Nullam eu cursus quam, a bibendum mi. Mauris nec tellus sodales, scelerisque tortor sit amet, molestie purus. Curabitur vitae consectetur dui, ac facilisis purus. Nunc ut ultricies sapien. Quisque id consectetur mauris, eget imperdiet dui. Phasellus pellentesque ipsum quis sollicitudin condimentum. Morbi nec dolor in sem ultricies porta ac et tellus. Phasellus mi dolor, porttitor eget odio eu, elementum iaculis diam. Morbi ut iaculis mi. Ut imperdiet semper libero, ac rhoncus quam cursus mollis. Curabitur vel iaculis ante, at dictum dui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nunc est. Etiam in pretium lorem. Sed malesuada ligula quis purus tempus viverra. Maecenas est sem, imperdiet ac accumsan ut, tristique id magna. Nullam eu cursus quam, a bibendum mi. Mauris nec tellus sodales, scelerisque tortor sit amet, molestie purus. Curabitur vitae consectetur dui, ac facilisis purus. Nunc ut ultricies sapien. Quisque id consectetur mauris, eget imperdiet dui. Phasellus pellentesque ipsum quis sollicitudin condimentum. Morbi nec dolor in sem ultricies porta ac et tellus. Phasellus mi dolor, porttitor eget odio eu, elementum iaculis diam. Morbi ut iaculis mi. Ut imperdiet semper libero, ac rhoncus quam cursus mollis. Curabitur vel iaculis ante, at dictum dui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nunc est. Etiam in pretium lorem. Sed malesuada ligula quis purus tempus viverra. Maecenas est sem, imperdiet ac accumsan ut, tristique id magna. Nullam eu cursus quam, a bibendum mi. Mauris nec tellus sodales, scelerisque tortor sit amet, molestie purus. Curabitur vitae consectetur dui, ac facilisis purus. Nunc ut ultricies sapien. Quisque id consectetur mauris, eget imperdiet dui. Phasellus pellentesque ipsum quis sollicitudin condimentum. Morbi nec dolor in sem ultricies porta ac et tellus. Phasellus mi dolor, porttitor eget odio eu, elementum iaculis diam. Morbi ut iaculis mi. Ut imperdiet semper libero, ac rhoncus quam cursus mollis. Curabitur vel iaculis ante, at dictum dui.</p>
<p>html 안에서 아무리 Enter 를 쳐도...
Space(공백) 을 아무리 눌러도...!!
'1개 한 칸 띄기'로 밖에 반영 안됨</p>
<!-- <br> 태그 (break) 를 사용하면 브라우저에서 강제 줄바꿈 됨
<br> 은 단독으로 사용되는 태그
칸 띄우기를 여러칸 하려면 라는 입력합니다 (non-break space)
-->
<p>html 안에서 아무리 Enter 를 쳐도...<br>
Space(공백) 을 아무리 눌러도...!!
<br>
<br>
<br>
'1개 한 칸 띄기'로 밖에 반영 안됨</p>
<!-- Entity(엔티티):
HTML 코드는 < ~~ > 형식의 태그들로 구성되어 있다 보니
< 와 > 등을 나타낼때는 특수한 방법을 사용해야 한다.
바로 & 로 시작 하는 엔티티(Entity) 라 불리우는 것들입니다
HTML 에는 수~많은 엔티티가 존재하지만. 다음6개는 일단 필수적으로 암기합시다
non-breaking space
< less than <
> greater than >
& ampersand &
" double quotation mark "
' single quotation mark (apostrophe) '
-->
<br>
<p>Entity(엔티티)</p>
<p>
< > & " '
</p>
</body>
</html>
3. Html03_Heading.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Heading</title>
</head>
<body>
<p>h 태그를 heading 혹은 headline 이라 불리기도 합니다</p>
<p>웹문서의 제목을 나타냅니다</p>
<p>h1 ~ h6 총 6가지 h태그가 있습니다</p>
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>웹 문서 검색시 SEO 와도 중요한 관련이 있는 태그</p>
<!-- SEO (Search Engine Optimization)
검색엔진 최적화 : 웹 문서가 검색엔진에 의해 더 잘 검색되고, 핵심 키워드에서 더 좋은 노출도를 갖기 위해
이를 고려하여 웹 문서 작성하는 것.
요즘 SEO 는 단순이 어휘의 반복 사용으로 인한 것은 인공지능으로 걸러냄.
Semantic tag 등을 잘 사용해야 함 -->
</body>
</html>
4. Html04_Attribute.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
</head>
<body>
<h1>Attribute</h1>
<p>start tag 안에는 그 element 의 부가적인 속성(attribute) 를 지정해 줄 수 있다</p>
<p>기본구문 attribute name(속성이름) = "attribute value(속성값)" 이며</p>
<p>여러개의 속성을 지정해줄수 있다. 띄어쓰기로 구분</p>
<p>속성값은 반드시 따옴표 (쌍타옴표 혹은 홀따옴표) 쌍으로 감싸주자</p>
<p style="color:red">style 속성에 color:red 라는 속성 값을 주면 빨간 글자가 된다.</p>
<p title='이것은 툴팁입니다' style='background-color:cyan'>title 속성</p>
</body>
</html>
5. Html05_Style.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Style</title>
</head>
<body>
<!--
HTML에서 style 속성의 속성값 에는
CSS (Cascading Style Sheet) 스타일 구문이 들어갑니다.
구문:
<tagname style="property:value;">
대표적인 스타일 property 는
background-color 배경색
color 글자색
text-align 좌우정렬 (left, center, right)
font-size 글자크기 %, px 사용 가능
font-family 글꼴
한글 글꼴은 그 수가 많지 않아서 선택의 폭이 좁습니다.
가변폭 글꼴과 고정폭 글꼴이 있는데 고정폭은 글자사이 간격을 조절할 수 없으므로
가변폭 글꼴을 사용하는 것이 좋습니다.
가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)
고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe)
-->
<!-- property:value는 여러 쌍이 올 수 있음..!! -->
<h1 style="color:blue; font-family:Gulimche">굴림체</h1>
<h1 style='background-color:cyan; font-family:Gungsuh; text-align:right'>궁서체</h1>
<h1 style="background-color:yellow; font-family:Batang; text-align:center">바탕체</h1>
<br>
<p style='font-size:200%'>200% p 태그</p>
<p style='font-size:300%'>300% p 태그</p>
<p style='font-size:200px'>200px p 태그</p>
</body>
</html>
6. Html06_Div_Span.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div, span 컨테이너</title>
</head>
<!--
다른 요소들을 담는 용도(컨테이너)로 주로 사용되는 태그 div, span
화면 레이아웃 상의 구역별로 나누는 용도로 많이 사용
** 단연코 가장 많이 사용되는 태그들
-->
<body>
<h2>컨테이너 태그 : div, span</h2>
<div>div</div>
<div>div</div>
<div>div</div>
<hr>
<div style='border:1px solid black'>
hello hello<br>
안녕 안녕<br>
<p>div 안의 p</p>
</div>
<hr>
<div style='background-color: yellow; padding: 5px'>
div2
<div style='background-color: green; padding: 5px'>
div2-1
</div>
div2
<div style='background: cyan; padding: 5px'>
div2-2
<div style='background: violet; padding: 5px'>
div2-2-1
</div>
<div style='background: lightgrey; padding: 5px'>
div2-2-2
</div>
</div>
</div>
<hr>
<!-- span 컨테이너
div 와는 달리 inline 속성(줄바꿈 안함, width, height 는 필요한 만큼 차지)
-->
<span>span</span>
<span>span</span>
<span>span</span>
<hr>
<span style='background-color: yellow; padding: 5px'>
span2
<span style='background-color: green; padding: 5px'>
span2-1
</span>
span2
<span style='background: cyan; padding: 5px'>
span2-2
<span style='background: violet; padding: 5px'>
span2-2-1
</span>
<span style='background: lightgrey; padding: 5px'>
span2-2-2
</span>
</span>
</span>
</body>
</html>
7. Html07_Color.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Color</title>
</head>
<body>
<!--
HTML 에서 색상값 지정하는 방법
1. 이름으로 지정: 많이쓰는 색상에 대해 140종의 이름이 정의되어 있슴
https://www.w3schools.com/colors/colors_names.asp
-->
<h1>140종의 색상 이름</h1>
<h1 style='background-color:Tomato'>Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
<hr>
<!--
2. rgb() 사용 : rgb(255, 99, 71) ← Red, Green, Blue 값, 각각 0 ~ 255
https://www.w3schools.com/html/html_colors.asp
-->
<h1>rgb() 를 사용한 색상 표현</h1>
<h1 style='background-color:rgb(255, 0, 0)'>rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
<hr>
<h1>rgb값을 동일하게 주면, 회색색조의 색상 표현 가능</h1>
<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>
<hr>
<!--
3. 16진수 사용: #rrggbb 혹은 #rgb
-->
<h1>16진수 값(HEX)으로 색상 표현 가능 #rrggbb 형식</h1>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
<hr>
<h1>16진수 값(HEX)으로 색상 표현 가능 #rgb 형식</h1>
<h1 style='background-color: #f00'>#f00</h1>
<h1 style="background-color:#00f;">#00f</h1>
<h1 style="background-color:#ab1;">#ab1</h1>
<h1 style="background-color:#0f2;">#0f2</h1>
<hr>
<!--
4. hsl 사용 :
ex) hsl(147, 50%, 47%)
hsl(hue, saturation, lightness)
hue 0 ~ 360 (색상/색조: 0 빨강 ~ 240 블루 ~ 360 그린)
saturation 0% ~ 100% (채도: 0 흑백 ~ 100 풀칼라)
lightness 0% ~ 100% (휘도/밝기: 0 블랙 ~ 100 화이트), 명도
-->
<h1>hsl() 으로 색상 표현</h1>
<h1 style="background-color: hsl(0, 100%, 50%)">shl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
<hr>
<!--
5. rgba color
rgba() alpha 0.0 (투명) ~ 1.0 (불투명)
ex) rgba(255, 99, 71, 0.6)
#rrggbbaa 혹은 #rgba
-->
<h1>rgba() 로 alpha 표현</h1>
<div style="background-image: url(https://www.w3schools.com/html/img_bg_transparent.gif)">
<h1 style="background-color: rgba(255, 99, 71, 0)">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</div>
<hr>
<!--
6. hsla color
-->
<h1>hsla() 로 alpha 표현</h1>
<div style="background-image:url(https://www.w3schools.com/html/img_bg_transparent.gif)">
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
</div>
</body>
</html>
8. Html08_CSS.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="CSS/styles.css">
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
<style>
p {
border : 1px solid tomato;
/* 안쪽 여백 : padding, border ~ content 간격 */
padding: 30px; /* CSS 주석 */
/* 외부 여백 : margin, border ~ 외부 element 간격 */
margin: 50px;
}
#p01 { /* id가 p01인 element */
color: magenta;
}
.error { /* class 에 error 를 갖고 있는 element */
color: DarkOrange;
}
</style>
</head>
<!--
CSS : Cascading Style Sheets.
HTML elements 들이 화면상에 어떻게 표시될지 기술함.
적용방식 3가지
1. Inline : 시작태그에 style 속성과 함께 기술
2. Internal : <head> 안에 <style> 태그로 기술
3. External : 외부 파일 (*.css) 로 만들고 연결
-->
<body>
<h1>This is a heading1</h1>
<p>This is a paragraph1</p>
<h1>This is a heading2</h1>
<p style='color: green'>This is a paragraph2</p>
<hr>
<!-- id : 유니크한...!! -->
<h1>This is a heading3</h1>
<p>This is a paragraph3</p>
<p id='p01'>I am different1</p>
<hr>
<!-- class : 여러 개의 동일한 클래스 지정 가능, 그룹핑..!! -->
<p>This is a paragraph4</p>
<p>This is a paragraph5</p>
<p class='error'>I am different2.</p>
<p>This is a paragraph6</p>
<p class='error'>I am different too3.</p>
</body>
</html>
[추가] styles.css
@charset "UTF-8";
/* property:value 쌍은 세미콜론으로 마무리 지어야 한다..!! */
body {
background-color: ghostwhite;
}
h1 {
color: dodgerblue;
}
p {
color: deeppink;
}
9. Html09_Links.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HyperLinks</title>
<style>
a {
text-decoration: none;
}
a:link { /* 기본 상태 스타일 */
color: green;
}
a:visited { /* 방문한 상태 스타일 */
color: pink;
}
a:hover { /* 마우스가 올라간 상태 */
color: red;
}
a:active { /* 클릭한 상태, 클릭한 상태에 순식간에 나타나는..!! */
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<!--
기본 구문 : <a href="url">link text</a>
target attribute
_blank - 새 윈도우나 탭에.
_self - 현재 브라우저창에 (디폴트)
_parent - 상위 frame 에
_top - 최 상위 윈도우에
-->
<a href="https://www.naver.com">네이버</a>
<br>
<a href="https://www.daum.net" target="_blank">다음</a>
<br>
<!-- 이미지 링크 만들기 -->
<a href="https://w3schools.com">
<!-- 이미지가 없을때, alt 이미지 대신할 텍스트 -->
<img src="https://www.w3schools.com/html/smiley.gif"
alt="HTML tutorial"/>
</a>
</body>
</html>
10. Html10_Image.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Image</title>
</head>
<!--
<img> 이미지 태그
src : 이미지 경로 지정
웹에서 가용한 이미지 포맷 3가지
*.jpg : 압축률 높음(손실압축), 큰 이미지에 사용
*.gif : 256색, 투명지원, 아이콘등 작은 이미지에 적합
*.png : 알파(투명도)지원, 픽셀당 4byte. ARGB
alt : 이미지가 없는 경우 보여지는 글자, 웹접근성 에서 시각장애인을 위한 용도
width, height : 브라우저에서 표현하는 이미지 크기
경로지정 시 참조
. : 현재 디렉토리
.. : 부모 디렉토리
image 의 width 와 height 는 항상 지정하자. 지정안하면, 이미지 로딩시 화면 깜빡임 증상 발생
-->
<body>
<img src="../img/pulpitrock.jpg" alt="Mountain View" width="500" height="500"/>
<img src="../img/pulpitrock.jpg" alt="Mountain View" width="500" height="377"><br>
<img src="../img/img_chania.jpg" alt="Flowers in Chania" width="460" height="345"><br>
<img src="../img/img_girl.jpg" alt="Girl in a jacket" width="500" height="600"><br>
<!-- 위의 코드처럼 width, height 지정하면 옛날방식, 요즘 방식은 아래의 코드처럼 style로 width, height 지정함 -->
<img src="../img/img_girl.jpg" alt="Girl in a jacket" style="width: 500px; height: 600px"><br>
</body>
</html>
11. Html11_Table1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table1</title>
<style>
table, th, td {
border: 1px solid black; /* 두께, 선 종류, 선 색상 */
border-collapse: collapse; /* border 간격 붙이기 */
}
</style>
</head>
<!--
HTML 문서에 '표' 를 나타내기 위한 태그로 <table> 제공
다음 태그들과 같이 사용된다.
<tr> : table row
<td> : table data
<th> : table header
실제 내용을 담는 태그는 td, th 다.
정렬관련 (td, th 에 적용)
좌우 정렬: text-align
세로 정렬: vertical-align
-->
<body>
<table style="width: 100%">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<!-- 좌우 정렬(text-align) : left center right -->
<tr>
<td style="text-align: center;">4</td>
<td style="background-color: yellow">5</td>
<td>6</td>
</tr>
<!-- 세로 정렬(vertical-align) : top middle bottom -->
<tr style="height: 150px">
<td style="vertical-align: bottom;">7</td>
<td style="text-align: right;">8</td>
<td style="vertical-align: top">9</td>
</tr>
</tbody>
</table>
</body>
</html>
12. Html11_Table2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table2</title>
<style>
table, th, td {
border: 1px solid black; /* 두께, 선종류, 선색상 */
border-collapse: collapse; /* border 붙이기 */
}
th, td {
padding: 15px; /* 셀 안쪽의 컨텐트와 border 사이 여백 */
}
th {
text-align: left;
}
</style>
</head>
<!--
colspan : 열 병합
rowspan : 행 병합
-->
<body>
<table style="width: 100%">
<tr>
<th>1</th>
<th colspan="2">2</th>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
<hr>
<table style="width: 100%">
<tr>
<th colspan="2" rowspan="2">1</th>
<th>3</th>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<th>7</th>
<td>8</td>
<td>9</td>
</tr>
</table>
<hr>
<table style="width: 100%">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="3">4</td>
</tr>
<tr>
<th>7</th>
<td>8</td>
<td>9</td>
</tr>
</table>
<hr>
<table style="width: 100%">
<tr>
<th>1</th>
<th rowspan="2">2</th>
<th>3</th>
</tr>
<tr>
<td rowspan="2">4</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글
| 2020.04.29 (0) | 2020.04.29 |
|---|---|
| 2020.04.28 (0) | 2020.04.28 |
| 2020.04.24 (0) | 2020.04.24 |
| 2020.04.23 (0) | 2020.04.23 |
| 2020.04.22 (0) | 2020.04.22 |