본문 바로가기

나는 엔지니어

시각적으로 엘리먼트 묶기 ( fieldset / legend ) 엘리먼트들을 시각적으로 묶을때 와 CSS를 사용할 수도 있지만,XHTML 또한 공통의 엘리먼트들을 함께 묶는데 사용될 수 있는 이라는 엘리먼트를 제공한다.은 라 불리는 두 번째 엘리먼트를 사용한다. group name 더보기
CSS 리스트의 아이템 스타일 설정하기 CSS에서 리스트 아이템(li)의 타입을 설정하는 방법은 아래와 같다. 순서 정렬li{list-style-type:disc; 혹은 asc} 원 모양li{list-style-type:circle;} 사각 모양li{list-style-type:square;} 비표시li{list-style-type:none;} 사용자 이미지 설정li{list-style-type:url(file path);} 더보기
브라우져의 마진 (margin) 계산 브라우저가 두 개의 인라인 엘리먼트를 인접해 놓고 있을때각각 엘리먼트의 마진은 개별로 계산한다.즉,마진이 10인 인라인 엘리먼트를 가지고 있고 그 오른쪽에 있는 인라인 엘리먼트의 왼쪽 마진이 20이라면 , 그들 사이의 마진은 30이 된다. 브라우저가 두 개의 블록 엘리먼트를 위/아래로 놓을때.각각 엘리먼트의 마진은 합쳐지면 큰 값을 따른다.즉,마진이 10인 블록 엘리먼트를 가지고 있고 그 아래에 있는 블록 엘리먼트의 위쪽 마진이 20이라면, 그들 사이의 마진은 20이 된다. 더보기
a link : 방문 / 미방문별로 스타일 작성하기 방문하지 않은 상태일 때a:link{color:green;} 방문한 상태일 때a:visited{color:red;} 마우스를 링크에 올렸을 때a:hover{color:yellow;} 더보기
width 속성과 전체 너비에 대한 이해 더보기
DIV / SPAN : 페이지를 논리적인 구간으로 나누기 & float / 포지셔닝에 관해서 DIV의 영역은 한줄 전체인 반면에 SPAN의 영역은 태그안의 내용 만큼만이다 span은 특정한 단어들의 스타일을 변경할때 사용한다.하지만 단지 단어의 강조만을 나타낼 경우에는 em 혹은 strong 태그를 사용한다. float 컨텐츠 띄우기 ( 명시적으로 width 사이즈를 설정해야 한다.)float : left; 왼쪽으로 띄우기float : right; 오른쪽으로 띄우기 clear float 지우기 ( 상위에 float이 설정되어 있다면 자동으로 아래 모든 컨텐츠에도 반영된다. ) clear : left; 왼쪽으로 띄우기 중지clear : rgiht; 오른쪽으로 띄우기 중지 position 속성 static (default ) 다음칸(줄)에 순서대로 배치 absolute 문서의 기본flow를 벗어난다.. 더보기
CSS 에서 이미지 링크 하기 가령 CSS 속성중에 하나인 배경 이미지를 사용해서 배경 이미지에 사용할 파일을 로딩하려 할 경우 아래와같이 url()을 이용해 설정 하면 된다. background-image: url(images/background.gif); 더보기
엘리먼트들의 구조 1) 콘텐츠 영역이란?텍스트나 이미지와 같은 콘텐츠를 가지며, 그것을 포함할 정도로 충분한 크기의 박스 내부에 위치한다.콘텐츠 영역은 주위에 빈 공간을 가지고 있지 않다는 점을 주목한다.콘텐츠 영역을 선으로 그어 표시한다면 아래와 같은 이미지가 될 것이다. 2) 패딩이란 무엇인가? ( 내부 공간 )콘텐츠 영역은 주위에 패딩이라는 층을 가질 수 있다.패딩은 선택적인 것이므로, 꼭 필요한 것은 아니지만 콘텐츠와 박스 사이에 시각적인 여백을 주기 위해 사용할 수 있다. 패딩은 투명하며 자신만의 색을 가지지 않는다. 패딩은 위, 아래 , 왼쪽, 오른쪽 각각 제어가 가능하다. 3) 테두리 ( border ) 는 무엇인가? ( 내부 공간 외부 공간 구분선 )패딩 주위에는 선택 가능한 테두리(Border)를 가질 수.. 더보기
스타일시트 불러오기 link 키워드 1. 외부 스타일 시트 파일을 html 파일에 로드하기 위해서는 아래와 같은 link 태그를 이용한다. 2. 브라우져는 link를 이용해서 외부의 스타일 시트를 찾는데, 각각의 해석은 아래와 같다. 의 설명 -> text/css 형식의 stylesheet file을 찾아서 화면에 적용한다. 의 설명-> text/css 형식의 stylesheet file을 찾아서 프린트(인쇄)에 적용한다. - 추가 -screen : 컴퓨터 모니터print : 프린트 ( 인쇄 )handheld : 모바일 장치와 휴대전화 더보기
자바스크립트 부모창으로 이동 및 부모 아이템에 값 설정 부모 아이템 값 설정opener.document.frm.tagName.value = 값;opener.document.frm.tagName.value = 값; 자식 화면 닫기self.close(); 더보기