html 파일, css 파일, js 파일 상호간의 연관관계를 이해하고 예제를 실행볼려고 합니다.
뒤의 두파일 css 파일은 웹화면의 비쥬얼을 담당하고 js 파일은 행동대원이 되겠네요.
웹화면의 한페이지를 장식할 내용을 정하고 나면 구조적인 문제가 대두 됩니다.
어떻게 배치를 할지에 대한 디자인을 그려 봐야 합니다.
디자인이 완성되면 각 위치에 해당하는 태그가 결정되어서 영역을 형성하게 될겁니다.
이때 이 태그에 대한 각각에 대한 스타일리스트를 붙이고 이 스타일리스트들을 묶어 놓은것인 css 파일입니다.
사용법도 경우에 따라서 다양하게 사용할수 있기 때문에 어렵게 느껴집니다.
id 를 지정할때는 #id { } 로 스타일 지정해 줍니다. 일반적으로 tag { } 로 지정합니다.
만들어 놓은 css 파일을 html 파일과 연계하는 작업이 있습니다.
Head 태그에 <link> 태그의 속성값으로 지정해야 합니다. <link href=" " rel="stylesheet">로 하면됩니다.
다른방식은 생각하지 않을려고 합니다.
js파일도 공통사항으로 적용되는 경우에는 Head태그에 <script src=" "></script>로 행동대원을 호출하면 됩니다.
화면의 특정한 위치에 해당하는 이벤트가 필요한 경우에는 따로 js 파일을 만들어서
그 태그 뒤나 앞에서 <script src=" "></script> 에 지정해 주면 됩니다.
태그의 속성값이나 상태를 눈으로 확인하기 위한 프레임워크를 만들어보고자 합니다.
화면에 원하는 정보가 보여지고 그 하단에 showArea 라는 id 로 표시공간을 형성하고자 합니다.
순서와 상관없는 리스트형태의 공간으로 <ul id=showArea></ul> 라고 지정합니다.
그리고 이 태그에 스타일을 지정해 줘야 겠지요
#showArea { list-stype: none; margin: 0; padding: 0; }
이렇게 하면 보여줄 공간과 어떻게 보여줘야 하는지를 정했습니다.
행동대원을 교육시켜야 하겠네요
함수를 지정합니다. var show = function(title, value) { }
우리가 약속한 공간에 들어갈 리스트를 작성합니다.
var node = document.createElement('li');
공간을 showArea 라는 id 로 찾아서 그곳에 들어갈 태그를 추가시켜줍니다.
document.getElementById('showArea').appendChild(node);
다음으로 들어갈 내용을 텍스트 노드를 만들어 줍니다.
var result = document.createTextNode(title + ' : ' + value);
마지막으로 태그노드에 텍스트 노드를 붙여주면 됩니다.
node.appendChild(result);
각 화면에서 위에서 만들어 놓은 show 라는 함수를 호출하면 화면에 보여집니다.
var element = document.getElementById('cssElement');
show('id',element.id);
희망잡이