본문 바로가기

프로그래밍 세상/자바스크립트 이야기

제 16장 CSS와 DHTML



제 15장 정리를 한지가 몇달이 지나서 제 16장을 정리하게 되었네요.

아직 실력이 미천하여, 설명보다는 정리 형식으로 진행할께요...ㅎㅎㅎ

 

▶ CSS 기본 예




Javascript
Visual Studio 2010 with MSDN

Google AdSense

 

 

▶ CSS 브라우저 실행시



위 예와 같이 CSS 는 Text, Button, Table 등 기본 적인 뻐대 및 내용만으로 구성되어진 HTML에 Style 이라는 생명을

불어넣어주는 마법과도 같은 것입니다.

style 은 보통 별도의 파일로 작성하거나 <head></head> 안에 CSS 를 작성하는 방법이 있구요.

위 예제는 단순 예제이므로 <head> 안에 CSS를 작성하는 방법으로 만들어 보았습니다.

간단하게 설명하자면,

div { color: red; } ☞ div 태그로 이루어진 모든 것의 글자 색상을 빨간색으로 표시하라는 뜻이죠.

div.p1 { font-size: 20px; } ☞ div 태그 중 class 속성이 p1 인 모든 것의 글자 크기를 20px 로 표시하라는 뜻이죠.

#p2 { color: blue; } ☞ id 속성이 p2 인것의 색상을 blue 로 표시하라는 뜻이죠.

정말 간단한 예제지만, CSS 가 어떤 역할을 하고 있다는 개념은 잡히시겠죠?!

이 예제에도 상속의 개념, Cascading(캐스캐이딩)에 의한 우선순위 법칙이 숨겨져 있는데요.

아직 저도 머리속으로는 이해를 하고 있지만, 이런 것에 대한 자세한 설명까지 하기엔

아직 개념을 설명하는 기술 및 포스팅 기술이 많이 부족해서 쉽지가 않네요...ㅎㅎㅎ

 

자바 스크립트 완벽 가이드 제 16장 CSS와 DHTML 은 간단한 CSS와 DHTML 에 대한 설명 및 예제로 구성되어 있습니다.

책의 예제 및 설명을 그대로 블러그에 포스팅하는 것은 저작권법에 위촉되는 행위라 그렇게 하지는 못하겠구요.

검색하다가 찾은 괜찮은 블러그 링크 시키는 형식으로 진행하겠습니다.

CSS 포지션 정리 ☞ http://blog.naver.com/baraem2005/20169490375

CSS 박스 모델 정리 ☞ http://blog.naver.com/baraem2005/20168945923

CSS로만 만드는 툴팁 ☞ http://blog.naver.com/baraem2005/20170514311

CSS레이아웃-플로트를 이용한 2단 레이아웃  ☞ http://blog.naver.com/baraem2005/20171058809

CSS 를 style 에서 정의하여 적용 할 수 있지만, Javascript 에서 CSS 의 style 에 접근해서 적용하는 방법도 있습니다.

 

 




Google AdSense

위 소스 처럼 Javascript 에서 div Element 정보를 얻어와서

.style 객체를 이용하여 각각 속성으로 값을 변경하면 CSS도 변경됩니다.

style 로 접근해서 값을 변경하는 것은 인라인 스타일로 추가하는 것이고,

스타일 시트에서 적용한 스타일보다 우선적으로 적용됩니다.

 

지금까지 살펴본 제 16장 내용이 많이 부실하네요.

너무 주저리 주저리 길어지면, 지루할 듯 해서 간단하게 마무리 하겠습니다.

 

CSS는 CSS3로 변화하면서, 화려한 기술과 능력이 생겼는데요.

HTML5CSS3를 이용하면, 예전에 포토샵으로만, 플래쉬로만 가능했던 것들이 조금씩 가능해지기 시작합니다.

지금도 표준으로 정해지지 않은 듯한데, 기술이 점점 발전하면서, Web 과 App 경계가 점차 허물어질 듯 하네요.

꼭 필요한 경우가 아니라면 Javascript로 CSS를 수정하는 것보단 CSS 에 작성하는 것이

개발 및 유지보수에 큰 도움을 줄것으로 생각됩니다.

 

이상, 행복을 노래하는 초매였습니다.