[css] a 태그(Tag) 속성 (link, visited, active, hover) 사용하는 방법 이전에 a 태그(Tag) 속성에 대해서 배웠는데, 보통 문서를 링크 시키기 위해 a 태그(Tag) 를 많이 사용 한다. [html] a 태그(tag) 속성 (href, target, title) 사용하는 방법 이번에는 a 태그(Tag) 의 다양한 스타일 속성에 대해서 알아 보자. 태그(Tag) 의 속성 사용법 a:link : 방문 전 링크 상태이다. a:visited : 방문 후 링크 상태이다. a:hover : 마우스 오버 했을 때 링크 상태이다. a:active : 클릭 했을 때 링크 상태이다. 순서가 바뀌면 스타일이 제대로 적용되지 않기 때문에 스타일 적용 순서는 위 순서대로 해야 한다. 기본 h..
[css] overflow-x 와 overflow-y 의 속성 이전에 overflow 속성에 대해서 배웠는데, overflow 속성은 요소의 박스에 내용이 더 길때, 어떻게 보일지 선택하는 속성이다. overflow (visible, hidden, scroll, auto) 속성 보기 그렇다면 overflow 속성을 이용해서 가로 또는 세로 축만 스크롤바를 생성 시킬려면 어떻게 해야 할까? 바로 overflow-x 와 overflow-y 속성을 사용 하면 된다. overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 더 길 때(가로), overflow-y 속성은 y축, 즉 위와 아래의 내용이 더 길때 (세로) 어떻게 보일지 선택하는 속성 이다. overflow-x 속성 사용법 visible (기본값)..
[css] overflow (visible, hidden, scroll, auto) 속성 css 에서 overflow 속성은 요소의 박스에 내용이 더 길 때, 어떻게 보일지 선택하는 속성이다. overflow 속성은 상속되지 않는다. overflow 속성 사용법 visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다. hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다. scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시 한다. (스크롤바 항상 표시) auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 ..
[css] 여백 (margin, padding) 속성 css 에서 margin 과 padding 속성은 border 를 기준으로 각각 바깥쪽 여백, 안쪽 여백을 의미한다. margin과 padding 은 값을 1~4 개 까지 지정할 수 있다. div { margin: 5px 10px 15px 20px; } /* top-5px, right-10px, bottom-15px, left-20px */ div { margin: 5px 10px 15px; } /* top-5px, right&left-10px, bottom-15px */ div { margin: 5px 10px; } /* top&bottom-5px, right&left-10px */ div { margin: 5px; } /* all-5px */ ma..
[css] position (static, relative, absolute, fixed) 의 속성 position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다. position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다. position 속성 사용법 static (기본값) :위치를 지정하지 않을 때 사용한다. relative : 위치를 계산할때 static의 원래 위치부터 계산한다. absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향..
[css] clear(none, both, left, right) 의 속성 이전에 float 속성에 대해서 배웠는데, float 은 왼쪽, 오른쪽으로 해당 객체를 위치 시켜서 정렬하는 속석이었다. float(none, left, right) 의 속성 보기 그렇다면 float 속성을 적용한 해당 객체의 다음에 오는 객체가 붙지 않게 하려면 어떻게 해야 할까? 바로 clear 속성을 사용 하면 된다. clear 속성 사용법 none (기본값) : clear 속성을 설정하지 않은 것과 같다. left : 왼쪽으로 붙는 float 정렬을 취소 한다. right: 오른쪽으로 붙는 float 정렬을 취소 한다. both : 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다. 기본 html 소스a 영역a 영역이 있..
[css] float(left, right, none) 의 속성 float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다. float 속성은 묶음 태그(block element) 만 적용할 수 있다. 묶음 태그 : 등 float 의 속성 사용법 none (기본값) : 정렬하지 않는다. left : 왼쪽으로 정렬한다. right: 오른쪽으로 정렬한다. 기본 html 소스a 영역a 영역이 있습니다. 실행 결과는 다음과 같다. 이제부터 위의 html 문서에서 float 속성을 적용해 보자. 1. float: none div {width: 100px;height: 100px;float: none;} float: none 속성은 기본값으로 block element 기본 속성을 그대로 유지한다. 2. ..
[css] display (none, inline, inline-block, block) 와 visibility (visible, hidden, collapse) 의 차이 display 는 해당 요소를 어떻게 표시할지를 정의하고, visibility 는 요소를 보일지 말지를 정의하는 css 속성이다. display 의 속성 사용법 none : 해당 영역을 생성하지 않는다. 공간을 차지하지도 않는다. inline (기본값) : 앞뒤로 줄바꿈 되지 않는다. inline-block : inline 인데 block 처럼 표시한다. block 요소가 줄바꿈 되지 않고 옆으로 나열된다. block : 앞뒤로 줄바꿈 된다. 기본 width 가 100% 를 차지하게 된다. 기본 html 소스a 영역b 영역c 영역a, ..