2020.11.02 HTML 수업 노트

단편집

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

div {

column-count: 3;

}

</style>

</head>

<body>

<pre>

div{

column-count: 3;

}

</pre>

<div>

숙박시설 중 규모가 비교적 큰 곳. 소규모로 여관이 있다면 호텔은 대표적인 대규모 숙박시설이다.

호텔의 시설 수준에 따라서 하룻밤 묵는 비용도 다양한데, 고급스러운 곳은 하루 숙박요금이 몇 십만 원이고

보통 호텔의 경우는 몇 만 원에서 10만 원 정도이다.

국가원수나 재벌총수급들이 묵는 최고급 룸은 하루 숙박비가 수천만에 달하는 경우도 있다.

고급스러운 곳은 호텔에 필요한 필수 시설은 물론, 전망은 입이 딱 벌어질 정도로 좋고,

룸에 연회실까지 있는 등 거의 왕궁 수준인 곳도 있다.

어원은 여행자들을 위한 숙소라는 뜻의 hospitale에서 유래했으며

이는 나중에 병자를 치료하기 위한 장소로 변용되어 hospital → hostel → hotel로 변화하게 된다.

따라서 병원(hospital)과 어원이 같다.

영어가 아닌 프랑스어에서는 이 어원 때문에

'hôtel'은 숙박시설이란 뜻 외에도 '저택', '관저'라는 뜻이 있다.

그래서 hôtel de ville은 영어로 번역하면

'hotel of city'(도시의 호텔)이 아니라 'city hall(시청)'이 된다.

이 때문에 프랑스 여행 중 시청을 호텔로 오해하고 하룻밤을 지낸 영국 관광객이 뉴스에 나온 적이 있다.

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------------

박스모델

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

div{

border-radius : 30px 20px 50px;

padding : 40px;

border : 20px solid orange;

background-image : url(../images/cloud03.jpg);

}

#p1{

/* background-color : yellow; */

/* background-image : linear-gradient(blue, pink, green); */

/* background-image : linear-gradient(to right, white, pink, green); */

/* background-image : linear-gradient(to right, white 5%, pink 80%, green); */

/* background-image : linear-gradient(to top right , white, pink, green); */

background-image : repeating-linear-gradient(white, pink 10%, green 20%);

padding : 10px ;

}

#p2 {

padding : 10px;

/* background-image : radial-gradient( circle, white, pink, green); */

background-image : repeating-radial-gradient( gray, pink 20%, green 10%);

}

</style>

</head>

<body>

숙박시설 중 규모가 비교적 큰 곳. 소규모로 여관이 있다면 호텔은 대표적인 대규모 숙박시설이다.

호텔의 시설 수준에 따라서 하룻밤 묵는 비용도 다양한데, 고급스러운 곳은 하루 숙박요금이 몇 십만 원이고

보통 호텔의 경우는 몇 만 원에서 10만 원 정도이다.

국가원수나 재벌총수급들이 묵는 최고급 룸은 하루 숙박비가 수천만에 달하는 경우도 있다.

고급스러운 곳은 호텔에 필요한 필수 시설은 물론, 전망은 입이 딱 벌어질 정도로 좋고,

룸에 연회실까지 있는 등 거의 왕궁 수준인 곳도 있다.

어원은 여행자들을 위한 숙소라는 뜻의 hospitale에서 유래했으며

이는 나중에 병자를 치료하기 위한 장소로 변용되어 hospital → hostel → hotel로 변화하게 된다.

따라서 병원(hospital)과 어원이 같다.

영어가 아닌 프랑스어에서는 이 어원 때문에

'hôtel'은 숙박시설이란 뜻 외에도 '저택', '관저'라는 뜻이 있다.

그래서 hôtel de ville은 영어로 번역하면

'hotel of city'(도시의 호텔)이 아니라 'city hall(시청)'이 된다.

이 때문에 프랑스 여행 중 시청을 호텔로 오해하고 하룻밤을 지낸 영국 관광객이 뉴스에 나온 적이 있다.

숙박시설 중 규모가 비교적 큰 곳. 소규모로 여관이 있다면 호텔은 대표적인 대규모 숙박시설이다.

호텔의 시설 수준에 따라서 하룻밤 묵는 비용도 다양한데, 고급스러운 곳은 하루 숙박요금이 몇 십만 원이고

보통 호텔의 경우는 몇 만 원에서 10만 원 정도이다.

국가원수나 재벌총수급들이 묵는 최고급 룸은 하루 숙박비가 수천만에 달하는 경우도 있다.

고급스러운 곳은 호텔에 필요한 필수 시설은 물론, 전망은 입이 딱 벌어질 정도로 좋고,

룸에 연회실까지 있는 등 거의 왕궁 수준인 곳도 있다.

어원은 여행자들을 위한 숙소라는 뜻의 hospitale에서 유래했으며

이는 나중에 병자를 치료하기 위한 장소로 변용되어 hospital → hostel → hotel로 변화하게 된다.

따라서 병원(hospital)과 어원이 같다.

영어가 아닌 프랑스어에서는 이 어원 때문에

'hôtel'은 숙박시설이란 뜻 외에도 '저택', '관저'라는 뜻이 있다.

그래서 hôtel de ville은 영어로 번역하면

'hotel of city'(도시의 호텔)이 아니라 'city hall(시청)'이 된다.

이 때문에 프랑스 여행 중 시청을 호텔로 오해하고 하룻밤을 지낸 영국 관광객이 뉴스에 나온 적이 있다.

</p>

</div>

숙박시설 중 규모가 비교적 큰 곳. 소규모로 여관이 있다면 호텔은 대표적인 대규모 숙박시설이다.

호텔의 시설 수준에 따라서 하룻밤 묵는 비용도 다양한데, 고급스러운 곳은 하루 숙박요금이 몇 십만 원이고

보통 호텔의 경우는 몇 만 원에서 10만 원 정도이다.

국가원수나 재벌총수급들이 묵는 최고급 룸은 하루 숙박비가 수천만에 달하는 경우도 있다.

고급스러운 곳은 호텔에 필요한 필수 시설은 물론, 전망은 입이 딱 벌어질 정도로 좋고,

룸에 연회실까지 있는 등 거의 왕궁 수준인 곳도 있다.

어원은 여행자들을 위한 숙소라는 뜻의 hospitale에서 유래했으며

이는 나중에 병자를 치료하기 위한 장소로 변용되어 hospital → hostel → hotel로 변화하게 된다.

따라서 병원(hospital)과 어원이 같다.

영어가 아닌 프랑스어에서는 이 어원 때문에

'hôtel'은 숙박시설이란 뜻 외에도 '저택', '관저'라는 뜻이 있다.

그래서 hôtel de ville은 영어로 번역하면

'hotel of city'(도시의 호텔)이 아니라 'city hall(시청)'이 된다.

이 때문에 프랑스 여행 중 시청을 호텔로 오해하고 하룻밤을 지낸 영국 관광객이 뉴스에 나온 적이 있다.

</p>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------------

백그라운드 이미지

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

margin-left : 10% ;

}

body{

/* background-image : url(../images/진달래.jpg);

background-repeat : repeat-x; /* no-repeat; /*repeat-y; no-repeat;

background-position : center center;

background-size : 100px 100px;

background-attachment : fixed ;

background-color : yellow; */

/* background: yellow; */

/* background : bg-color bg-image pisition /bg-size bg-repeat bg-origi */

background : lightblue url(../images/여행.jpg) repeat-x fixed center;

}

</style>

</head>

<body>

<pre>

background-image : url(../images/진달래.jpg);

background-repeat : repeat-x; /* no-repeat; /*repeat-y; no-repeat;

background-position : center center;

background-size : 100px 100px;

background-attachment : fixed ;

background-color : yellow;

background : lightblue url(../images/여행.jpg) repeat-x fixed center;

</pre>

<p>

나보기가 역겨워<br>

가실ᄯᅢ에는<br>

말업시 고히 보내드리우리다<br>

</p>

<p>

寧邊에藥山<br>

진달내ᄭᅩᆺ<br>

아름ᄯᅡ다 가실길에 ᄲᅮ리우리다<br>

</p>

<p>

가시는거름거름<br>

노힌그ᄭᅩᆺ츨<br>

삽분히즈려밟고 가시옵소서<br>

</p>

<p>

나보기가 역겨워<br>

가실ᄯᅢ에는<br>

죽어도아니 눈물흘니우리다<br>

나 보기가 역겨워<br>

가실 때에는<br>

말없이 고이 보내 드리우리다<br>

</p>

<p>

영변에 약산<br>

진달래꽃<br>

아름 따다 가실 길에 뿌리우리다<br>

</p>

<p>

가시는 걸음 걸음<br>

놓인 그 꽃을<br>

사뿐히 즈려밟고 가시옵소서<br>

</p>

<p>

나 보기가 역겨워<br>

가실 때에는<br>

죽어도 아니 눈물 흘리우리다<br>

</p>

</body>

</html>

-----------------------------------------------------------------------------------------------------

속성선택자

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

color : red;

}

p[title="무궁화 꽃"]{

font-size : 1.5em;

}

/* #p1{} */

p[id=p1]{

background : yellow;

}

p[id=f1]{

font-family : serif;

}

p[id=f2]{

font-family : sans-serif;

}

#f3{

font-family : monospace;

}

.p2{}

p[class="p2"]{

letter-spacing : 20px;

}

p[name=happy]{

font-size : 2.0em; /*배수 body 에 있는 em은 강조*/

font-weight : bold;

font-style : italic ;

text-shadow : 20px 10px 40px blue; /*20px부분과 10px부분은 그림자위치가 움직이는 x축 y축 40px 있는곳은

그림자가 흐려지는것 blue 는 그림자의 색상 */

}

</style>

</head>

<body>

<p id="f1" title="무궁화 꽃1"> 무궁화 꽃이 피었습니다. </p>

<p id="f2" title="무궁화 꽃2"> 무궁화 꽃이 피었습니다. </p>

<p id="f3" title="무궁화 꽃3"> 무궁화 꽃이 피었습니다. </p>

<p id="p1"> 노랑 빨강 나뭇잎이 물들었습니다. </p>

<p class="p2"> 11월이 본격적으로 시작되는 첫번째 월요일 입니다 </p>

<p name="happy"> 행복하세요 </p>

</body>

</html>

-----------------------------------------------------------------------------------------------------

수평리스트

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

a {

letter-spacing : 12px;

}

a:link{

color : green;

text-decoration : none;

}

a:visited{

color : red ;

}

a:hover{

color : blue ;

font-size : 1.2em;

text-decoration : underline;

}

a:active{

background : yellow ;

}

ul {

list-style-type : none;

border : 3px solid red ;

padding : 5px;

height : 70 px;

padding-left : 20%;

border-left : none;

border-right : none;

}

ul li {

float : left ;

/* border : 1px solid gray ; */

margin : 20px ;

padding : 10px;

}

</style>

</head>

<body>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</body>

</html>

-----------------------------------------------------------------------------------------------------

border_test

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

div {

width : 200px;

height : 200px;

border : 1px solid blue;

margin : 10px;

}

#d2 {

border-radius : 80%;

box-shadow : 30px 20px 20px red;

}

#d3 {

border-radius : 10px 50px;

}

#d4 {

border-radius : 0px 50% 50% 50% ;

}

</style>

</head>

<body>

기본

border-radius : 80%; <br>

box-shadow : 30px 20px 20px red;

border-radius : 10px 50px;

border-radius : 0px 50% 50% 50% ;

</body>

</html>

-----------------------------------------------------------------------------------------------------

list-style

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

div{

width : 150px;

height : 300px; /* auto */

border : 1px dotted pink;

margin : 5px ;

padding : 10px;

float : left;

}

/* ul[id-list1] {} */

ul#list2{

list-style-type: circle;

list-style-position : outside; /*inside;*/

}

#list3{

list-style-type : square;

}

#list4{

list-style-image: url(../images/check.png);

}

ul, li{

border : 1px solid orange;

}

hr{

clear : both;

}

#list6 {

list-style-type : lower-alpha; /* lower-alpha;*/

}

#list7 {

list-style-type : lower-roman; /* lower-alpha;*/

}

#list8 {

list-style-type : hangul; /* lower-alpha;*/

}

#list9 {

list-style-type : korean-hangul-formal; /* lower-alpha;*/

}

#list10 {

list-style-type : hangul-consonant; /* lower-alpha;*/

}

</style>

</head>

<body>

<div>

<h4>list-style-type: disk;

</h4>

</ul>

</div>

<div>

<h4>list-style-type : circle; <br>

list-style-position : inside; <br>

</h4>

</ul>

</div>

<div>

<h4> list-style-type

square;

</h4>

</ul>

</div>

<div>

<h4>list-style-image: url(../images/check.png); </h4>

</ul>

</div>

<hr>

<div>

<h4>

list-style-type : decimal;

</h4>

</ol>

</div>

<div>

<h4>

list-style-type : lower-alpha;

</h4>

</ol>

</div>

<div>

<h4>list-style-type : lower-alpha;

</h4>

</ol>

</div>

<div>

<h4>list-style-type : hangul; /* lower-alpha;*/

</h4>

</ol>

</div>

<div>

<h4>list-style-type : korean-hangul-formal; /* lower-alpha;*/

</h4>

</ol>

</div>

<div>

<h4>list-style-type : hangul-consonant; /* lower-alpha;*/

</h4>

</ol>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------------

text-style

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

div{

padding : 10px;

margin : 5px;

border : 1px solid green ;

}

textarea {

direction : rtl; /* ltr; */

}

textarea {

direction : rtl ;

}

#d1 {

text-indent : 50px; /*들여쓰기*/

line-height : 30px; /*줄 사이 간격*/

letter-spacing : 5px; /*글자 사이 간격 */

}

#d2 {

text-align : right; /*오른쪽 정렬*/

text-decoration : underline; /*밑에 줄이 간다. */

}

#p1 {

text-transform : Lowercase ;

}

#p2 {

text-transform : uppercase ;

}

#p3 {

text-transform : capitalize ;

}

</style>

</head>

<body>

<pre>

#d1 {

text-indent : 50px; /*들여쓰기*/

line-height : 30px; /*줄 사이 간격*/

letter-spacing : 5px; /*글자 사이 간격 */

}

</pre>

드립 커피(Drip Coffee)란 볶아서 갈은 커피 콩을 거름 장치에 담고,

그 위에 물을 부어 만드는 커피로 보통 원두커피로 불린다.

드립 브류(Drip brew)라 함은 이와 같이 커피를 만드는 방법을 일컫는다.

거름 장치를 필터라고도 하기 때문에 드립 커피를 영어로 filtered coffee라고도 한다.[20]

</div>

<pre>

#d2 {

text-align : right; /*오른쪽 정렬*/

text-decoration : underline; /*밑에 줄이 간다. */

}

</pre>

커피콩은 주로 적도지방 라틴 아메리카, 동남아시아,

남 아시아 그리고 아프리카의 70여개국에서 재배되는 커피나무에서 얻을 수 있다.

녹색 커피콩(로스팅 전의 콩, 생두)은 세계에서 가장 많이 교역되는 농산물 중의 하나이다.

[2] 커피는 그 카페인 성분으로 인해 사람을 각성시키는 효과를 가지고 있다. 커피는 세계에서 가장 많이 소비되는 음료 중의 하나이다.

[3] 1년에 세계적으로 약 6천억 잔이 소비된다.

커피는 많은 사회에서 중요한 역할을 해 왔다.

커피의 기운을 북돋우는 효과는 에티오피아 동북부 지방에서 발견된 것으로 생각되며,

커피의 재배는 아랍으로 처음 전파되었다.[4]

커피의 음용에 대한 최초의 믿을 수 있는 증거는 15세기 중반, 남부 아라비아의 예멘의 수피즘 사원에서 발견되었다.

[4] 커피는 무슬림 세계로부터 인도, 이탈리아, 그리고 나머지 유럽으로, 인도네시아, 미주 대륙으로 전파되었다.

[5][6] 남 아프리카와 예멘에서, 커피는 종교의식에 사용되었고, 그 결과, 에티오피아 정교회에서는 세속적인 소비를 금지하였고, 금지령은 에티오피아 메네릭 2세 때까지 유지되었다.

[7] 커피는 오토만 제국 터키에서 17세기에 정치적인 이유로 금지되었고,[8] 유럽에서는 반체제적 정지 활동과 연관되어 있었다.

</div>

<strong>text-transform : Lowercase ; </strong>

<p id="p1">Happy New Year~~ Merry Christmas..</p>

<strong>ext-transform : uppercase ; </strong>

<p id="p2">Happy New Year~~ Merry Christmas..</p>

<strong>text-transform : capitalize ; </strong>

<p id="p3">Happy New Year~~ Merry Christmas..</p>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------------

word_wrap

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

p.test1 {

width: 11em;

border: 1px solid #000000;

word-wrap: break-word;

}

.test2{

width : 11em;

border : 1px solid #000000;

/* word-wrap : break-word; */

}

</style>

</head>

<body>

<pre>

공백 없이 계속 이어지는 단어를 줄바꿈 처리를 한다.

word-wrap : break-word;

</pre>

매우 긴 단어가 있는 경우에 자동으로 잘라준다.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</p>

매우 긴 단어가 있는 경우에 자동으로 잘라준다.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</p>

</body>

</html>

데이터 좋아하는 개발자의 블로그

이 블로그 검색

2020.11.02 HTML 수업 노트

댓글

댓글 쓰기