1. <html>~</html>기능 중 동영상 삽입을 해보겠습니다.
삽입하고 싶은 동영상 페이지로 갑니다. 저는 유튜버 생활코딩님의 동영상을 선택했습니다.
"공유"버튼을 클릭합니다.
"퍼가기"를 클릭합니다.
동영상 퍼가기의 속성값을 복사합니다.
<P>~</p> 사이에 동영상 속성값을 붙여넣고 reload를 합니다.
동영상이 삽입이 되었습니다.
2. 이제부터 CSS를 시작합니다. (당연히 HTML을 끝낸 건 아닙니다. 전반적으로 HTML, CSS, 자바스크립트가 뭔지 훑어보고 틀을 잡은 다음 코딩을 자세히 공부하려고 합니다.)
HTML만 하면 우리가 만들고자 하는 웹페이지의 디자인이 마음에 안 드는 경우가 많게 됩니다. 글자색을 입히든지, 글자크기를 조절한다든지 우리가 원하는 대로 디자인을 꾸미기 위해 고안된 것이 CSS라고 합니다.
2-1. WEB
1. HTML
2. CSS
3. JavaScript
부분에
<style>~</style>이라는 태그를 달아 글자에 색을 입혀보겠습니다.
<style>
a{
color:balck;
}
</style>
를 <head>~</head> 태그 사이에 입력합니다.
제가 저기를 이미 클릭해버려서 보라색으로 나왔지만 분명 검은색으로 바뀌었습니다.
2-2. 이번에는 제가 공부하는 부분인 CSS부분만 빨간색으로 나타내보겠습니다.
본문 <body> 부분으로 가서 CSS줄에 갑니다.
style="color:red"라는 "속성"을 입력합니다.
그러면 위에 처럼 CSS만 빨간색으로 바뀝니다.
2-3. 이제는 저 목차부분에 밑줄 부분을 없애보겠습니다.
<style>
a{
color:black; text-decoration:none;
}
</style>
a selector 안에 text-decoration:none;을 입력합니다.
( 한 속성값이 끝나면 ; 을 넣어 구분해야합니다.
2-4. 이번에는 CSS부분만 밑줄이 있도록 해보겠습니다.
본문의 CSS부분으로 가서
style="color:red;text-decoration:underline"
이라고 속성을 추가합니다.
그러면 위에서 볼 수 있듯이 CSS부분에만 밑줄이 그어집니다.
* style="" 은 속성을 뜻합니다.
이 값을 사용해서 반드시 CSS의 효과가 들어옵니다.
* 목차부분에 사용한 것은 style태그이고
본문부분에 사용한 것은 style속성입니다.
*효과를 지정한 다음에는 반드시 ; 세미콜론을 꼭 붙여야 합니다. 그러면 효과들끼리 한 줄에 있어도 작동을 합니다.
*Selector - a {
Declaration - color (Property 속성) : red (Value 속성값);}
=> 이 부분을 잘 느껴야지 앞으로 CSS를 잘 이해하는 데 도움이 될 것입니다.
'To go to 뉴질랜드 > 간식 - IT(코딩)' 카테고리의 다른 글
| CSS박스모델(border,padding,margin,width) (0) | 2021.02.11 |
|---|---|
| TEXT SIZE(크기), ALIGN(정렬) 및 CLASS, ID 속성 위계관계 (0) | 2021.01.30 |
| 웹호스팅을 해보려고 하다.(모르겠다ㅠㅠ) (0) | 2021.01.23 |
| 처음으로 "웹사이트"를 만들다. (0) | 2021.01.13 |
| html 전체구조 파악하고 "하이퍼링크"까지 해봄. (0) | 2021.01.10 |
