어쩌다가 여기까지 흘러들어왔는지는 모르겠지만...
여튼 html과 css 모르면 나중에 유지보수할때 골치아프다는 현실적인 이야기와...
프로젝트 진행하면서 점점 이해도가 빠른 곡선을 그리며 떨어지니 너무 답답해졌다.
하여 유튜브를 찾아봤더니 역시 컴덕들의 컨텐츠는 나를 실망시키지 않는다. 훗.
지금 수준에는 html + css 4시간 정도 강의만 보고 따라해도 괜찮지 않을까(섣부르게) 판단하고 일단 Bro Code라는 유튜버의 HTML & CSS Full Course for free 라는 강의를 열었다.
1. 일단 Visual Studio Code를 설치한다.
2. 바로 Live Server Preview 설치하여 내가 작성하는 html을 실시간으로 적용시켜보자
3. 자 이제 무지성으로 따라쓰기 ㄱ
<!DOCTYPE html>
<html>
<head>
<title> My first website </title>
</head>
<body>
<h1> This is an h1 heading</h1>
<h2> This is an h2 heading </h2>
<h3> this is an h3 heading</h3>
<h4> this is an h4 heading</h4>
<h5> this is an h5 heading</h5>
<br>
<br>
<br>
<br>
<hr> wow
<hr>
<pre>
Some text such as... Lorem ipsum dolor
sit amet consectetur adipisicing
elit. Ipsam in inventore soluta
saepe odio sed optio ea accusamus?
Molestiae placeat illo commodi recusandae
sunt, facilis sed corporis magni qui accusamus.
</pre>
<p>
Some text such as... Lorem ipsum dolor
sit amet consectetur adipisicing
elit. Ipsam in inventore soluta
saepe odio sed optio ea accusamus?
Molestiae placeat illo commodi recusandae
sunt, facilis sed corporis magni qui accusamus.
</p>
<!-- 이게 모양... ㅎ 얘네 커서랑 인터페이스가 비슷한데 뭔가-->
<p>
Some text such as... Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam in inventore soluta saepe odio sed optio ea accusamus? Molestiae placeat illo commodi recusandae sunt, facilis sed corporis magni qui accusamus.
</p>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<title> My Second Website </title>
</head>
<body>
<a href="https://www.google.com/" target="
_blank" title="Goes to google">
Click Me!
</a>
<br>
<a href="lyrics.html" target = "_blank" title ="see the lyrics">
song lyrics
</a>
<br>
<a href= "mailto:test@fake.com"> email me, please </a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> My Song Lyrics</title>
</head>
<body>
<h1> I’ll Make a Man Out of You
</h1>
<h4> Song from Mulan</h4>
<a href="https://www.youtube.com/watch?v=vGfJeW_CcFY" target="_blank" title="see the video" >
original video
</a>
<hr>
<pre>
Let's get down to business, to defeat the Huns
Did they send me daughters, when I asked for sons?
You're the saddest bunch I ever met
But you can bet before we're through
Mister, I'll make a man out of you
Tranquil as a forest but on fire within
Once you find your center, you are sure to win
You're a spineless, pale, pathetic lot
And you haven't got a clue
Somehow I'll make a man out of you
I'm never gonna catch my breath
Say goodbye to those who knew me
Boy, was I a fool in school for cutting gym
This guy's got 'em scared to death
Hope he doesn't see right through me
Now I really wish that I knew how to swim
Be a man
We must be swift as the coursing river
Be a man
With all the force of a great typhoon
Be a man
With all the strength of a raging fire
Mysterious as the dark side of the moon
Time is racing toward us 'til the Huns arrive
Heed my every order and you might survive
You're unsuited for the rage of war
So pack up, go home, you're through
How could I make a man out of you?
Be a man
We must be swift as the coursing river
Be a man
With all the force of a great typhoon
Be a man
With all the strength of a raging fire
Mysterious as the dark side of the moon
Be a man
We must be swift as the coursing river
Be a man
With all the force of a great typhoon
Be a man
With all the strength of a raging fire
Mysterious as the dark side of the moon
</pre>
</body>
</html>
<!DOCTYPE html> 시작
<br> 브레이크
<hr> 라인
<p> </p> paragraph
<pre> </pre> 줄바꿈 등, 쓰는대로 반영
<!-- --> 노트달기. (Eclipse의 //과 동일)
lorem + tab버튼 트래시 텍스트 생성
<a> </a> anchor, 하이퍼링크 태그
href="" 속성, 링그 연결 지정
target="_blnak" 새창에서 열기
title="" 커서 가져다대면 해당 링크 설명
이정도 해보고, 유튜브 잠깐 돌려봤는데, html 찾아봤다고 또 알고리즘이 이상한거 찾아왔다.
냅다 html을 와다다다 작성하고서는 신기한 이미지 만들어내는거였는데...
따라쟁이인 내가 또 가만히 있을수 없지. 나도 냅다 와다다다 써봤는데 글쎄
<!DOCTYPE html>
<html>
<head>
<style>
body{
background: black;
display: grid;
place-items: center;
height : 95vh;
}
.container {
width: 60px;
height: 60px;
transform-origin: center bottm;
animation: flicker 3ms 200ms
ease-in infinite alternate;
}
.flame {
bottom: 0;
position: absolute;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
border-top-left-radius: 50%;
transform: rotate(-45deg) scale(1.5, 1.5);
}
.yellow{
left: 15px;
width: 30px;
height:30px;
background: gold;
box-shadow:0px 0px 9px 4px
gold;
}
.orange {
left: 10px;
width:40px;
height:40px;
background: orange;
box-shadow: 0px 0px 9px 4px
orange;
}
.red{
left: 5px;
width: 50px;
height: 50px;
background: OrangeRed;
box-shadow: 0px 0px 5px 4px
Orangered;
}
.white {
left: 15px;
bottom: -4px;
width:30px;
height:30px;
background: white;
box-shadow: 0px 0px 9px 4px
white;
}
.circle{
border-radius: 50%
position: absolute;
}
.blue {
width: 10px;
height:10px;
left:25px;
bottom: -25px;
background: SlateBlue;
box-shadow: 0px 0px 15px 10px
SlateBlue;
}
.black{
width: 40px;
height: 40px;
left: 10px;
bottom: -60px;
background: black;
box-shadow: 0px 0px 15px 10px
black;
}
@keyframe flicker{
0% {transform: rotate (-1deg); }
20% {transform: rotate(1deg);}
40% {transform: rotate(-1deg);}
60% {transform: rotate(1deg)scaleY(1.04);}
80% {transform: rotate(-2deg)scaleY(0.92);}
100% {transform: rotate(1deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="red flame"> </div>
<div class="orange flame"></div>
<div class = "yellow flame"> </div>
<div class = "white flame"> </div>
<div class = "blue circle"> </div>
<div class = "black circle"> </div>
</div>
</body>
</html>
역시 자바를 쓰나 HTML을 쓰다 어디나 오타는 존재한다.
얘 오타까지 잡아달라고 지피티에가 차마 못물어보겠음... ㅋㅋㅋㅋㅋㅋㅋㅋ
그래도 새로운거 배우면 새 툴도 다뤄봐서 좋다.
예전엔 툴 바보였는데
이젠 툴천재로 거듭날 듯 낄낄낄