Notepad++를 이용한 html강의(2)

저번시간에 간단하게 html을 배워보았다.

이번시간에는 CSS도 간단하게 익혀볼 것이다.

CSS의 경우 좀 복잡하니 잘 따라와야한다.

저번시간에는 그냥 html이 이런느낌이다 알려주기 위해 자세한 내용은 생략했지만 이번엔 좀 자세히 설명하겠다.

​

html은 위 사진과 같은 트리구조로 구성이 된다.

그렇다면 여기서

문제1. html과 자식관계인 태그는 무엇인가? 답은 head태그와 body태그이다.

문제2. 그러면 html과 손자손녀관계인 태그는 무엇인가? 답은 title태그, 앵커 태그, h1태그이다.

문제3. 그렇다면 body의 부모인 태그는 무엇인가? 답은 html태그이다.

문제4. 그렇다면 my link는 앵커태그의 자식인가? 아니다. 자식관계 같은 느낌이긴 하지만

자식이라고 칭하지는 않고 그냥 앵커태그의 text라고 지칭한다.

이 개념을 상기시키도록 하고 이제 본격적으로 CSS 설명을 하겠다.

​

html을 구조라고 한다면 CSS는 표현이다.

자 이제 글자에 색을 입혀보자.

​

우리는 Hello라는 이 단어에 색을 입힐것이다.

Hello를 파란색으로 바꿔보도록하자.

​

다음과 같이 코딩을 하도록 하자.

style 태그는 CSS 사용에 있어서 가장 필수적인 태그이니 기억하자.

style 오프닝태그와 style 클로징태그 사이에 코딩하면된다.

하나하나 코딩을 해석해주도록 하겠다.

먼저 <h1 class='blue'> Hello </h1> 은

h1이라는 헤드에 정의했던 컬러 (파란색)를 Hello라는 단어에 입힌다는 의미이다.

여기서 어? h1 태그 아닌가요 할수 있다.

h1{color:blue;}에서 h1이 헤드이다. <h1>이면 이때 h1태그 라고 말할 수 있다. 차이점 명심하자.

이때 h1{color:blue;}에서 blue라는 색깔 뒤에는 항상 세미콜론을 붙여주자.

​

 

실행결과는 다음과 같다.

저기서 blue에 해당하는 부분에 green, red, orange, yellow 등등 색깔을 뜻하는 영어를 쓰면 그 색깔이 나온다.

​

다음은 class와 id를 설명하겠다.

class는 우리 학교 다닐때 반을 class라고 하지 않는가? 이렇게 그룹에 전체 적용 가능한 것이 class이며

class를 적용시키기 위해서는 헤더앞에 .을 붙인다.

즉 다시말하면 .Good{color:blue;} 이거처럼 Good이라는 헤더앞에 .을 붙이는 것이 class이다.

​

id는 개개인을 의미하며, 한 개에만 적용 가능한 것이 id이다.

id를 적용시키기 위해서는 헤더앞에 #을 붙인다.

즉 다시말하면 #Good{color:blue;} 이거처럼 Good이라는 헤더앞에 #을 붙이는 것이 id이다.

​

이걸 테스트해보기 위해 글자를 출력하는 용도로 쓰이는 태그인 P태그를 사용할 것이다.

지금 필자가 태그를 전체적으로 다 알려주지 않고 있는데 이것만 배워서 그런 것도 있지만

애초에 우리가 html에 있는 모든 태그들을 알면 당연히 좋겠지만 다 안다고 해서 그걸 다 활용할 수 있는가?

원래 프로그램 툴은 완벽하게 익히는 것이 아니라 자주 쓰이는 것만 공부하고

필요할 때 필요한 태그만 찾아서 자기껄로 만드는 것이다.

​

다음과 같이 써보도록 하자.

Hello는 하늘색, 안녕하세요는 주황색, data1은 초록색으로 출력될 것이다.

​

정답이다.

​

그러면 이번엔 하이퍼링크를 바꿔보도록하자.

무슨말이고 하니 우리가 한번도 들어가보지 않은 사이트의 경우 파란색으로 뜨고

이미 들어가봤던 사이트의 경우 보라색으로 뜨는 현상을 알고있는가?

이게 왜그러냐면 default 값이 파란색과 보라색이라서 그렇다.

이걸 우리가 바꿔줄 수도 있는 것이다.

어떻게? 바로 보여주겠다.

​

 

다음과 같이 작성한다.

a:link{color:orange;} : a(앵커) 태그의 링크는 주황색으로 출력

a:visit{color:green;} : a(앵커) 태그의 이미 방문했던 링크는 초록색으로 출력

a:hover{color:red;} : a(앵커) 태그의 링크에 마우스를 가져다 대면 빨간색으로 출력

근데 저 링크는 필자가 한 번 방문했던 기록이 있어 주황색으로 뜨는 것을 확인할 수 없어

좀 이따 다시 같이확인해보자.

​

 

일단 필자가 방문했던 링크이기에 초록색으로 뜬다.

그렇다면 저 링크에 마우스를 가져다대면?

​

짜잔 이렇게 빨간색으로 표시되는 것을 확인할 수 있다.

그렇다면 생전 처음 보는 링크는 어떨까?

예를들어 www.gilhyunhandsome.co.kr이라는 듣도보도못한 링크를 적어보자.

​

과연 결과는?

​

한 번도 들어간적 없는 링크이므로 주황색으로 뜬 것을 볼 수 있다.

​

다음으로 우리가 무엇인가 입력할 수 있는 공간을 만들어보자.

​

<input type=text>라는 태그를 써줄 것이다.

​

이렇게 코드를 작성해준다.

​

그러면 이렇게 뜰텐데

​

이런 식으로 글자를 적을 수 있다.

​

다음은 글자를 입력하지도 않았는데 '길현짱짱맨'이 나오도록 해보자.

​

이렇게 코딩해준다.

그럼 결과는?

​

F5를 누르기가 무섭게 길현짱짱맨이라는 글씨가 보인다.

드래그는 되지만 절대 지워지지 않는다.

(해보면 알거임)

​

그러면 저 지워지지 않는 글자의 색도 바꿔보자.

초록색으로 바꿔보자

​

다음과 같이 코딩을 해준다.

​

input[readonly]{color:green}라는 의미는 <input readonly>라고 적혀있는 곳의 글자를 초록색으로 바꾼다는 의미이다.

과연 결과는?

​

초록색으로 바뀐 것을 확인할 수 있다.