[3] 태그 배워보기 - 다양한 태그의 활용

 

 

 

 

 

자~ 이전 포스팅에서 말씀드렸던 '한글 깨짐 현상 해결' 및

그 외 다른 태그들에 대해서도 하나씩 배워보겠습니다.

 

그 전에 꼭 알아두어야 할 중요한 개념이 있는데요.

바로, CSS 입니다.

 

CSS는 '캐스케이딩 스타일 시트(Cascading Style Sheets)' 의 약자로,

html 형식의 문서에 함께 사용되며, 디자인을 담당하고 있다고 생각하시면 됩니다.

 

기존 html 문서가 '정보를 전달하는 것이 주목적' 이라면

CSS의 목적은 '페이지를 찾아오는 사람들이 보기 좋도록 디자인 하는 것' 이라고 할 수 있어요.

추가적인 궁금증이 있으시다면, CSS와 관련된 보다 상세한 정보를 아래 링크에서 찾아보실 수 있습니다.

(CSS : http://ko.wikipedia.org/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8)

 

 

CSS는 HTML 문서와 함께 사용된다고 말씀드렸는데,

아래 예제를 통해 사용 방법을 살펴보도록 하겠습니다.

 

css1.html 이라는 파일을 생성 후

위 그림과 같이 코드를 작성해줍니다.

 

위 그림에서 파란색 테두리로 표시한

'style~ 부분'  이 디자인 관련 부분이 되겠습니다.

 

 

위 코드를 작성완료 했다면,

이전 포스팅에서 설명한 내용 중 'Web Browser 로 열기' 를 진행하여 작성된 코드를 열어봅니다.

 

 

위 그림과 같이 'Hello, World' 라는 txt 를 표시하는 부분이 html 이고,

CSS를 통해 출력하고자 하는 텍스트를 '디자인' 해서 보여줄 수 있다는 것을 알 수 있습니다.

 

추가로, 붉은색 테두리 부분인

'<meta charset="utf-8">' 이 부분이 바로 '한글 깨짐을 방지해주는 태그입니다.

 

 

 

이렇게 '한글로 직접 테스트' 를 해보면,

더 확실하게 알 수 있겠죠?

 

간단한 코드를 통해,

CSS에 대해 알아보았습니다.

 

다음부터는 조금 수준을 많이 높여,

'영문 교재' 를 통해 본격적으로 JavaScript를 공부해가며  포스팅 하도록 할께요~

 

화이팅!