피터는 키도 작고 분노조절 장애에 학교에선 왕따, 가정에서는 알코올 중독자이면서 항상 피터에게 '이상한 놈'이라며 핀잔주는 아버지의 밑에서 자랐다. 피터는 자기 자신이 그 누구보다 불행한 사람이며 현실을 외면하고 도망다니는 삶을 살았다. 학창시절, 피터는 우연히 발견한 학교 도서관에서 만난 크리스틴 선생님과의 만남을 시작으로 피터의 삶은 점점 변화된다. 크리스틴 선생님은 피터의 어머니를 제외하면 피터에게 진심어린 관심을 가져준 유일한 사람이었다. 크리스틴 선생님을 시작으로 피터는 그의 제자 미쉘, 노숙을 하던 중 만난 알렉스 경, 택시운전 회사에서 만난 가브리엘, 택시 승객으로 만난 윌리엄 교수 등 다양한 사람과의 만남을 통해 삶을 이어나간다. 때론 방황하고 멀리 도망치려하지만, 피터의 마음 속에는 점점 피터를 위하는 사람들의 따뜻함이 전해서 봄이 오기 시작한다.

인생을 목표를 눈앞에 이익, 돈 보다 고차원적인, 그 너머에 있는 가치를 자신의 삶의 목적으로 깨닫고 타인에게 도움을 주기 위한 삶으로 그 목적은 180도 돌리게 된다.

 

인생의 목적을 분명히 하게 된 피터는 낮에는 택시기사 운전을 하며  드림카드를 통해 사람들에게 기쁨과 위로를 전하며 남는 시간에는 책을 읽고, 밤에는 야간 법률대학에 다니며 꿈과 능력을 키우기 시작한다. 현실을 받아들이면서 긍정적인 면을 보고 더 나은 운명을 개척하고자 노력했다. 책 후반부에는 윌리엄 교수의 도움으로 하버드 로스쿨에 진학하여 변호사가 되어 법률의 사각지대의 사람들을 돕고 자신의 어린시절 값없이 도움받았던 것 처럼 길거리에 노숙자들에게 꿈을 심어주는 the school of life design을 설립하는 등 타인,사회의 연대를 위한 삶을 살아가게 된다.

 

분명한 인생의 목적이, 그리고 자신의 일차원적인 목표가 아닌 '우리'를 위한 가치의 추구였다는 점에서 피터의 삶이 바뀔 수 있었다고 생각한다. 무엇보다 크리스틴 선생님의 끈질긴 치근덕거림으로 부터 시작된 독서가 그에게 기회와 성공을 가져다 주었다고 생각한다. 나만의 행복이 아닌 우리의 행복을 위한 인생의 목적과 열정이 우리를 더 행복하고 나은 삶으로 인도해줄 것이라 믿는다.

 

책을 읽으며 마치 한편의 영화를 보듯 몰입하여 완독을 했다. 처음 느껴보는 기분이었다. 소설이라 그런지 한번 깊이 몰입하니 피터의 입장에서 함께 그의 인생을 산것같은 느낌이 들었다. 피터의 주변사람들이 피터에게 진심어린 관심을 표하고 대화를 나눌 때면 그 따뜻함에 나에게도 전달되어 괜시리 마음이 뭉클해 지곤 했다. 그 따뜻한 온기가 내 마음을 메우는 듯했다. 돈이 아닌 그 넘어의 것, 사회와 우리, 너와 나를 향한 가치를 쫓는 삶은 나에게 많은 감명을 주었다. 누군가는, 그래도 현실적으로 돈이 우선 아니냐며 반문할 수 있을 지 모르겠다. 하지만 누군가에게 바라지않는 선행과 베품을 행해본 경험이 있다면 이 입장에 동의할 수 있을 거라고 생각한다. 나눌때의 그 참된 기쁨을 맛보지 않았다면 공감하지 못할 것이다. 부를 쫓는 것 만이 전부인것 같은 자본주의 사회에서 자신과 타인의 연대를 위한 진짜 삶을 살아가는 방법을 저자는 피터라는 인물을 통해 우리에게 알려주는 것 같다. 

 

끝으로, 피터가 고백하듯이, 난 자신의 마음의 크기와 능력을 기르기 위해 독서를 큰 무기라고 생각한다. 생각치 못한 것들을 생각하게 해주는 힘, 느끼지 못할 것들을 느끼는 방법, 마음의 크기를 넓혀주며 세상에 대한 통찰을 넓힐 수 있는 가장 좋은 방법은 단연 독서이다. 앞으로 더욱 꾸준한 독서의 축적을 통해 사회적 문제를 해결하며 우리의 연대를 실현하는 사람이 될 것이다.

 

Thanks you Piter!

 

 

Form element

<label> - 글자 그대로 라벨을 작성할때 쓰인다.

<input> - 다양한 type을 가지고 있으며 무언가를 입력할 수 칸을 생성한다.

<select> - list형식의 목록으로 하나를 선택할 수 있는 form을 생성한다.

<textarea> - 글을 입력할 수 있는 공간을 생성한다.

<button> - 버튼을 생성한다.

<fieldset> - form의 전체 또는 일부의 데이터의 공간을 나눈다.

<legend> - filedset의 제목(캡션)을 정의한다.

<datalist> - select와 유사하다. 더보기 화살표를 눌러야지만 값을 볼 수 있다.

 

 

Input element type

<input type="button"> - 버튼을 생성한다.

<input type="checkbox"> - 여러개의 항목을 중복하여 선택하는 목록을 생성하는 타입이다.

<input type="color"> - 색을 선택하는 칸이 생성된다.

<input type="date"> - 캘린더를 통해 날짜를 입력할 수있는 칸이 생성된다.

<input type="email"> - 이메일 형식의 입력칸이 생성된다.

<input type="file"> - 파일을 첨부할 수 있도록 한다.

<input type="number"> - 숫자형식의 입력칸이 생성된다.

<input type="password"> - 패스워드 형식(보이지않도록)으로 입력되는 칸이 생성된다.

<input type="radio"> - 여러개의 항목 중 한가지를 선택할 수 있는 목록이 생성된다.

<input type="reset"> - 타이핑되고 있는 모든 인풋값이 초기화 된다.

<input type="submit"> - 제출 버튼이 생성된다.

<input type="tel"> - 전화번호 형식을 입력하는 한줄의 칸이 생성된다.

<input type="text"> - 한줄 입력가능한 칸이 생성된다.

<input type="url"> - URL을 입력할 수 있는 한줄의 칸이 생성된다.

 

'개발 > Web' 카테고리의 다른 글

[web] css 중앙정렬 방법  (0) 2021.06.17
[web] css 기초정리  (0) 2021.06.17
[Web] html 기초정리2  (0) 2021.06.16
[Web] html 기초정리  (0) 2021.06.16
[Web] dothome hosting  (0) 2021.06.16

HTML id와 HTML class

id와 class는 스타일을 미리 정해두는 틀이라고 생각하면 편하다. 차이점은 id는 한개의 element에만 적용시킬 수 있지만 class는 여러개의 element에 동일한 class 적용이 가능하다는 점이다.

 

ID

id는 html파일내부의 <head>안의 <style>태그에 선언한다.

선언방법은 #IDNAME{ 내용 }으로 선언한다.

id를 적용할 element에서 속성값으로 Id="IDNAME"으로 하여 적용한다.

 

 

 

Class

ID와 거의 유사하게 정의되며 사용된다. 다만 선언시 classname앞에 .을 붙여서 선언한다는 점이 다르다.

 

 

Bookmarks

ID를 이용하여 북마크 기능을 구현할 수 있다.

 

<p><a href="#C4">Jump to Chapter 4</a></p>

 

<h2 id="C4">Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

이런식으로 <a>태그를 이용하여 href을 이동하고 싶은 element의 아이디로 설정하면 북마크 기능이 구현된다.

참고로 href의 값을 입력할때 #을 붙여서 표기한다.


 

Iframe

iframe은 웹페이지 내에 웹페이지를 나타낼때 사용된다.

src속성을 통해 웹페이지의 URL을 입력해주면 된다. 다른 element들과 마찬가지로 크기조정, 테두리 설정 등이 가능하다.

 

 


HTML head

<head>는 메타데이터 즉 데이터에 대한 데이터를 포함하는 컨테이너이다.

헤드에 포함되는 element는 <title>, <style>, <meta>, <link>, <script>, <base>이다.

 

<title>

타이틀은 브라우저 툴바에서 제목과 즐겨 찾기에 추가 될 때 페이지 제목, 그리고 검색 엔진 결과에 페이지 제목을 표시하기 때문에 신중하게 정해야 한다.

 

<style>

사진과 같이 페이지에 대한 스타일을 설정할때 사용된다.

 

<meta>

일반적으로 문자 세트, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용된다.

 

<link>

링크는 현재 문서와 외부 리소스 간의 관계를 정의한다. 보통 외부 스타일 시트에 연결하는 데 사용된다.

<link rel="stylesheet" href="mystyle.css">

 

<script>

자바스크립트를 정의할때 사용된다.

자바스크립트의 함수 등이 여기에서 정의된다.

 

<base>

페이지의 적용되는 기본 URL을 정의할때 사용된다.

 

'개발 > Web' 카테고리의 다른 글

[web] css 중앙정렬 방법  (0) 2021.06.17
[web] css 기초정리  (0) 2021.06.17
[Web] html form  (0) 2021.06.16
[Web] html 기초정리  (0) 2021.06.16
[Web] dothome hosting  (0) 2021.06.16

 

HTML은 Hyper Text Markup Language의 약자이자 the standard markup language로서 웹페이지를 제작하기 위해 사용되는 언어이다. 웹의 전체적인 구조를 구현하는데 사용된다.

하나의 HTML은 아래와 같이 태그들의 조합으로 이루어진다.

HTML파일내용(왼쪽)과 적용된 모습(오른쪽)

 

HTML에 대해 공부하기 위해 사용되는 태그의 종류와 각 태그의 역할에 대해서 알아보자.

 

HTML 문서의 구조

1. HTML문서는 <!DOCTYPE html>로 시작한다.

2. 문서 내용 자체는 <html> </html>태그 사이에 해당되어야 한다.

3. 작성한 문서가 '보이는'부분은 <body></body>태그 안에 들어간다.

 

 

대부분의 태그는 <h1>안녕하세요</h1>과 같이 시작태그, 끝태그의 조합으로서 사용된다.(즉 일부태그는 단독으로 사용이 가능하다)

간단한 태그들

<!DOCTYPE>은 문서의 유형을 나타낸다.

<!DOCTYPE htm> - 해당문서가 HTML5를 정의한다는 것을 명시한다.

<html> - HTML 페이지의 root element이다.

<head> - HTML page의 meta information을 포함하는 태그이다.

<title> - HTML page의 제목을 설정하는 태그이다.

<body> - 문서의 본문을 정의한다. 제목, 단락, 이미지, 하이퍼 링크, 표, 목록 등의 내용을 body태그에서 담당한다.

<h1> - large heading(큰 제목)을 정의한다.

제목의 정의는 <h1>~<h6>까지로, 제목의 크기에 따라 달라진다.

<p> - paragrahp(문단, 단락)을 정의한다.

<br> - 엔터를 친 효과를 낸다. 아래 빈 한줄 생성. 끝 태크없이 단독으로 사용가능하다.

<a> - html의 링크를 정의한다. href속성에 링크가될 대상을 지정해준다. ex) <a href = "https://~~~">This is a link</a>

<img> - html의 이미지를 정의한다. 소스 파일 - src, 대체 텍스트 - alt, width  height 속성을 지정하여 이미지를 생성한다.

 

 

HTML의 대표적인 attributes(속성)

html의 모든 요소들은 attributes(속성)값을 가질 수 있으며, 속성을 통해 추가적인 정보를 명시할 수 있다.

href - <a>태그에서, link가 연결되는 페이지의 URL

<a>태그의 속성 예시

 

src - <img>태그에서, 삽입할 이미지의 경로

width, height - <img>태그에서, 이미지의 가로 및 세로 길이

alt - <img>태그에서, 이미지가 정상적으로 로드되지 않을 경우 대체될 택스트를 설정하는 속성이다.

<img>태그의 속성 예시

 

style - 태그의 스타일을 지정할 수 있다. color, font, size등의 다양한 속성을 설정할 수 있다.

스타일 속성은 css의 속성이다.대표적인 style 속성은 다음과 같다.

background-color - 배경 색상

color - 텍스트 색상

font-family - 텍스트 글꼴

font-size - 텍스트 크기

text-align - 텍스트 정렬

 

lang - 웹 페이지의 언어를 선언하기 위한 속성이다. lang는 <html>태그 안의 속성값으로 지정된다. lang는 검색 엔진 및 브라우저를 지원하기위해 사용된다.

title - 태그에 대한 추가 정보를 정의할 수 있다. 웹페이지에서 해당 내용에 마우스를 올리면 title 속성의 값이 툴팁으로 표시된다.

 

 

HTML 단락에 관한 태그

<p> - 일반적인 단락을 생성한다. <p>태그는 공백이나 줄바꿈을 모두 생략하여 표시된다.

<pre> - <p>태그와 달리 html파일 상에서 적용한 띄어쓰기나 줄바꿈 등의 형식이 웹 페이지상에 적용된다.

 

 

<hr> - 수평선을 통해 내용를 나눌 수 있음.

 

 

HTML 서식 요소

html의 서식 요소들은 다음과 같다.

<b> - 굵은 텍스트

<strong> -중요한 텍스트

<i> -이탤릭체

<em> -강조된 텍스트

<mark> -표시된 텍스트

<small> -더 작은 텍스트

<del> -삭제 된 텍스트

<ins> -삽입 된 텍스트

<sub> -첨자 텍스트

<sup> -위첨자 텍스트

 

다음과 같이 태그 안에서 활용될 수 있다.

서식 요소인 <b>태그를 적용한 모습

인용문과 관련된 태그

<blockquote> - 인용문(인용문 단락이 들여쓰기 된다)

<q> - 짧은 인용문(보통 ""를 통해 나타난다)

<address> - 태그는 문서 또는 기사 작성자 / 소유자의 연락처 정보를 정의한다. 해당 텍스트는 일반적으로 이탤릭체로 렌더링되며, <address>요소 앞뒤에 줄 바꿈이 추가된다.

 

주석

다음과 같이 주석을 사용할 수 있다.

<!-- 해당내용입니다 -->

 

HTML color

html에서 색상은 RGB, HEX, HSL, RGBA, or HSLA 등 여러 형태로 나타낼 수 있다.

 

standard color name

또한 html은 140여개의 standard color name을 제공하여 color name만으로 색상을 삽입할 수 있다.

대표이미지 삭제

배경색 지정

baakground-color:colorname을 통해 배경색을 지정할 수 있다.

 

 

 

테두리 지정

border:2px solid 색상명 을 통해 테루리를 지정할 수 있다. 2px에서 숫자 조정을 통해 테두리 너비를 조정할 수 있다.

 


HTML CSS

CSS는 Cascading Style Sheet의 약자이며, 여러 웹 페이지의 레이아웃(색상, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소 배치 및 배치 방법 등)을 한 번에 제어 할 수 있기에 편리하다.

 

css의 사용방법은 크게 3가지로 나뉜다.

1. Inline -HTML 요소 내부의 style속성을 통한 사용

 

2. Internal - head에서 <style> element를 통한 사용

 

3. External - <link> element를 사용하여 외부 CSS 파일에 연결하는 방식

 

가장 일반적인 방법은 링크를 통해 외부 CSS 파일에 스타일을 가져오는 방식이다.

 

대표적인 CSS의 property(속성)

color - 사용할 텍스트 색상을 정의한다.

font-family - 사용할 글꼴을 정의한다.

font-size - 사용할 텍스트 크기를 정의한다.

border - HTML 요소 주위의 테두리를 정의한다.

 

margin - 테두리 외부의 여백 (공백)을 정의합니다.

padding - 텍스트와 테두리 사이의 패딩 (공백)을 정의한다.

margin은 테두리 외부의 여백, padding은 텍스트와 테두리 사이의 내부여백을 결정한다.

스타일 예시

 

padding이 적용된 경우

 

 

 

margin이 적용된 경우

 

 


HTML LINK

다음과 같이 <a>태그를 통해 하이터링크를 생성할 수 있다.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

 

target속성 :

_self- 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 연다.

_blank -새 창 또는 탭에서 문서를 연다

_parent -parent 프레임에서 문서를 연다

_top -창 전체에서 문서를 연다

 

또한 이런식으로 <a>태그 안에 <img>태그를 넣게 되면 해당이미지에 링크가 걸리게 된다.

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

 

또한 link를 통해 스타일을 지정할 수 있다.

 

 

HTML배경이미지

background-Image: url ('URL'); 를 통해 html문서전체, 해당 paragraph 등의 배경이미지 설정이 가능하다.

 

 

만약 background로 설정한 이미지의 크기가 설정하고자 하는 영역보다 작으면 이미지가 반복되어 입혀지게 된다.

배경 이미지가 자체가 반복되지 않도록하려면 background-repeat속성을 no-repeat으로 설정한다.

 

HTML Tables

 

 

 

<tr>, <th> <table> 태그를 통해 기본적인 table구조를 잡게 된다.

id를 통해 하나의 table을 자신이 고유하게 스타일 지정하여 적용할 수 있다.

 

border: 1px solid black;로 일반적인 테두리 설정을 할 경우

 

테두리를 하나의 테두리로 축소하려면 border-collapse: collapse;로 설정해주면 된다.

 

 

<table> - 테이블 정의

<tr> - 테이블 행 정의

<th> - 테이블 제목을 정의(보통 맨 윗줄을 의미한다.)

<td> - 테이블 데이터 정의(나머지 각각의 셀)

<caption> - 테이블 캡션 정의

border - 테두리 정의

border-collapse - 셀 테두리 축소

padding - 셀에 패딩 추가

text-align - 셀 텍스트 정렬

border-spacing - 셀 사이의 간격을 설정

colspan - 셀을 여러 열로 확장

rowspan - 셀을 여러 행으로 확장

id - 하나의 테이블을 고유하게 정의

 

 

HTML list

다음과 같은 형식(순서가 없는?)의 list는 <ul> - list정의, <li> - 목록내용 정의 를 통해 나타낸다.

 

 

 

다음과 같은이 순서가 있는 list는 <ol> - list정의, <li> - 목록내용 정의 를 통해 나타낸다.

 

 

 

다음과 같은 형식(순서가 없는?)의 list는 <dl> - list정의, <dt> - 목록내용 정의 <dd> - 설명하는 부분?을 통해 나타낸다.

 

 

 

HTML div

div는 말그래도 웹문서 전체중에 일부분의 영역을 나누는 것이다. <div></div>를 통해 한 영역을 설정할 수 있다.

 

 

 

'개발 > Web' 카테고리의 다른 글

[web] css 중앙정렬 방법  (0) 2021.06.17
[web] css 기초정리  (0) 2021.06.17
[Web] html form  (0) 2021.06.16
[Web] html 기초정리2  (0) 2021.06.16
[Web] dothome hosting  (0) 2021.06.16

 

닷홈을 이용한 개인 웹서버 호스팅

대표사진 삭제

사진 설명을 입력하세요.

1. 닷홈 로그인 후 호스팅을 받는다.

 

2. filezilla를 설치한다

대표사진 삭제

사진 설명을 입력하세요.

 

3. 설치 후 호스팅 받은 서버와 연결한다.

호스트 이름, 사용이명, 비밀번호 21번 포트를 이용.

 

대표사진 삭제

사진 설명을 입력하세요.

 

 

4. 오른쪽 아래에 리모트 사이트 /html파일 안에 index.html을 드레그하여 넣어준다.

5. 호스트받은 사이트로 이동하면 드레그로 넣어준 html파일이 적용된것을 확인 할 수 있다.

 

'개발 > Web' 카테고리의 다른 글

[web] css 중앙정렬 방법  (0) 2021.06.17
[web] css 기초정리  (0) 2021.06.17
[Web] html form  (0) 2021.06.16
[Web] html 기초정리2  (0) 2021.06.16
[Web] html 기초정리  (0) 2021.06.16

+ Recent posts