Semantic web 의도나 목적을 담고있는 의미론적인 웹 의도나 목적이 기계가 해석할 수 있는 체계안에서 담기므로, 기계가 사람의 개입없이도 정보를 해석하고 처리할 수 있음 무절제하게 폭발적으로 쌓이는 정보들이 체계속에서 분류되고 정보들간의 관련성이 도출될 수 있도록 함 Semantic Tag 의미론적인 웹의 관점을 고수하는 의미론적인 html Tag 무분별한 태그의 사용 >> 정보를 찾기 위해서는 사람의 노력이 반드시 필요 이러한 사람의 노력과 수고를 최소화하고자 의미있는 태그, 즉 semantic tag가 개발되었다. 때때로 동일한 기능을 충분히 수행할 수 있을 것 같음에도 구별되는 몇몇 tag들이 있다 ,,... 사실은 이들 모두 와 동일한 기능을 수행한다. 이러한 tag들은 기능보다는 의미에 ..
Css : Postion html element의 위치를 조정할 때 사용하는 css property absolute,relative,fixed,static이 있으며, static은 별로 안씀 Position : relative position:relative는 혼자서는 아무런 기능을 수행하지 못하며, 위치를 이동시켜주는 right,bottom,left,top property가 존재해야만 기능을 수행할 수 있음 참고)right,bottom,left,top 역시도 position property가 존재해야만 동작을 수행할 수 있음! position:relative를 적용하면, 원래 있어야 할 위치에서 property방향의 반대로 이동함 #1 div div #2 div top-20left+30box #css ..
list table input / textarea 1. List List에 변화를 줄만한 속성들 ul 혹은 ol(부모) list-style border(border-left를 주로 많이 쓸듯) padding/margin li(자식) padding : list간 간격을 위해 padding-bottom을 많이 사용할 듯 함 #1 ul{ } #2 ul { list-style: none; border-left: 3px solid black; padding: 0 0 0 15px; } li { padding-bottom: 10px; } List의 자식인자 선택 #리스트의 자식요소들 중 첫번쨰 선택 list:firstchild{ } #리스트의 자식요소들 중 마지막 선택 list:lastchild{ } #리스트의 자식..
CSS : display 속성 모든 html 태그는 반드시 display속성을 가진다! 그리고 그 display속성은 엄청나게 많으나(https://developer.mozilla.org/en-US/docs/Web/CSS/display), 여기서는 block / inline/inline-block / none만 정리함 block / inline / inline-block / none block(div,p,li,tabel...) 일반적인 default 속성이라고 생각하면 편함 부모태그의 최대넓이를 가짐. 즉, width:100%가 설정되어 있는 것임 width:100%는 부모태그를 기준으로 100%라는 뜻 width100%즉, 공간이 다찼으므로 다음 element를 배치하면 줄바꿈이 발생함 width/he..
Margin , Padding, border의 관계 Margin과 padding, border은 다함께 Html element의 width나 height를 구성한다 위의 그림에서 , width(383) = 박스넓이(273) + padding(50*2) + border(5*2)+margin(50*2) = 483 height(300) = 박스높이(90)+padding(50*2) + border(5*2)+margin(50*2) = 300 element(의 width나 height) > padding > border > margin 순서 box-sizing : border-box margin,padding,border가 다함께 element의 width와 height을 구성한다는 특성으로 인해, 동일한 widt..
