[기초] CSS를 HTML5에 적용할 때 발생하는 오류의 원인은? 주석은 용도에 맞게 !

[기초] CSS를 HTML5에 적용할 때 발생하는 오류의 원인은? 주석은 용도에 맞게 !

HTML5를 공부하는 입문자로서

각종 도서 및 인터넷에는 관련 정보가 많은게 사실입니다.

참으로 좋은 세상입니다.

그런데 외부 정보만으로는 해결할 수 없는 부분이 있으니

바로 예상치 못한 문제들입니다.

오류(Error)라고 하기까지는 좀 그렇지만...

오늘 별 것 아닌 것으로 40분 정도를 소비한 바...

억울해서라도 '오류'라 칭하겠습니다 ^^;;

HTML5와 CSS 걸음마를 시작한 요즘...

무작정 따라하기 식으로 학습을 하고 있는데...

HTML 안에서 <style>태그를 사용하여 CSS를 적용하는 부분이었습니다.

다음과 같이 작성을 하였습니다.

그리고 크롬에서 실행해 본 결과...

다음과 같이 실행되는 것입니다.

'왜 빨간색 글씨가 안나오지...?'

오타가 있나도 확인해보고

태그가 잘못 작성되었나도 확인해 보았는데...

문제는 해결되지 않았습니다...

그래서...

이번에는 크롬이 아닌 익스플로러에서 실행해보니...

이럴수가...

익스플로러에서는 또 되는 것입니다...

'그럼 크롬을 안쓰면 되는 것 아닌가...'

이렇게 생각할 수도 있었으나...

해결하고 싶은 오기가 발동해서

하나 하나 변수를 두어가며

요리보고 조리보아가며...ㅠㅠ

위의 별표 표시 한 부분이 보이시나요?

바로 Space bar 키를 먹은게 아닌 Tab키를 먹은게 원인이 아닐까 생각했습니다.

HTML 작성시 CSS 문법 p는 전 문단에 어떤 키를 먹느냐에 따라

작동 될 수도 있고 안 될 수도 있다는 아주 무식한(?) 생각을 한 것입니다.

그러나 결과는 같았습니다...

그리고...1시간이 넘는 삽질의 고민끝에...ㅠㅠ

알게되었습니다.

저 위에 표시한 부분...

주석을...바보같이 사용한 것입니다.

<!-- ~~~~ --> 주석은 HTML 안에서 사용하는게 맞기는 하지만...

저기 위에 보면...이미 <style> 태그를 선언한 상태였기 때문에...

아래와 같이 /* ~~ */ 주석을 사용해야만 했던 것입니다..

그리고 다시 크롬을 실행해 보니...

짜잔~~!

그리고 파이어 폭스에서도...

짜잔~~! ㅎㅎㅎ

아...ㅠㅠ

정말 정말 별것 아닌 문제지만...

이걸 1시간 이상 시간 보내며 해결한 것이...

스스로 뿌듯했습니다..ㅎㅎ

정말 별 거 아닌건데...

모르면 갑갑한게 현실인 것을 잘 깨달았습니다...

이제 시작인데...

이런 기초적인 문제에서 허우적 거린 것에 기죽을 수도 있지만...

저는 오히려 가장 기본적인 것을

정말 확실하게 배웠다는 것에 더 기쁨을 느끼고 있습니다 ^^

아무튼...

늦은 나이에 재도전하는 프로그래밍...

천천히라도 꾸준히 해나갈 것입니다 ㅎㅎ

[기초] CSS를 HTML에 적용할 때 발생하는 오류의 원인은? 주석은 용도에 맞게 !