목록(List) 스타일list-style-type 1. 비순차적 목록 타입 지정list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: none;마커 삭제 2. 순차적 목록 타입 지정css로는 ul, ol 관계없이 적용 가능하며, 로마숫자, 그리스, 알파벳, 넘버링 형태를 제공list-style-type: decimal; list-style-type: lower-roman; list-style-type: upper-roman; list-style-type: lower-greek; list-style-type: lower-alpha; list-style-type: upper-alpha; li.ha..
전체 글
display, visibility 속성display 속성1. 기본 속성HTML 요소를 block 혹은 inline 혹은 inline-block 으로 지정한다block inline inline-block전체 너비 차지기본 위아래 여백 있음콘텐츠 크기만큼만 공간 차지inline 처럼 같은 줄에 나란히 배치 가능게시판 하단의 페이징(1, 2, 3 ...) 부분을 꾸미는데 유용width, height Owidth, height Xwidth, height O text-align Otext-align X 인라인 요소가 포함된 블록 요소에는 text-align 속성을 적용 가능text-align O 이 텍스트는 정렬되지 않습니다.이 텍스트는 정렬되지 않습니다.">이 텍스트는 정렬되지 않습니다. 이 텍스트는 가..
Box Model1. 개념HTML 의 각 요소들은 모두 사각의 박스 형태를 가지는데, 이 박스를 표현하기 위해 지정하게 되는 여러 요소들HTML 의 몇몇 태그들은 배경색이 없고, 테두리가 없어서 박스처럼 보이지 않을 뿐이다content내용border테두리margin 테두리를 기준으로 바깥쪽 여백padding 테두리와 content 사이의 안쪽 여백 2. 속성width:, height:width:, height: 속성이 지정하는 크기 == content 의 크기border:테두리 표현박스의 기준이 되는 바깥 테두리 선width:(두께), style:(형태), color:(색상)를 적용 가능색상을 지정하지 않으면, 해당 요소의 글자색과 같은 색이 적용 margin: 테두리 바깥 여백 border 기준..
배경(background) 스타일1. 개념배경에 관련된 여러 가지 속성을 포함한다background 속성은 아래의 여러 속성 들을 지정할 수 있다한 요소에 여러 개의 배경 이미지를 적용할 수 있다.bg { width: 600px; height: 400px; border: 3px solid; background: url(img/bg_a.png) no-repeat 0 0, url(img/bg_b.png) no-repeat 100% 0, url(img/bg_c.png) no-repeat 0 100%, url(img/bg_d.png) no-repeat 100% 100%, url(img/bg_e.png) no-repeat 40px 40px;} 2. 속성background-color :색상red, rgba(..
CSS 셀렉터1. 개념CSS 에서 꾸밀 대상, 즉 속성을 줄 대상 2. 종류 **** : 전체 선택자tag : 태그 선택자.class : 클래스선택자#id : 아이디선택자선택자:가상상황 : 가상선택자 CSS 기본 셀렉터태그 이름으로 접근한다 h1 { ... } /* 태그의 속성을 지정한다 */ 예시 body CSS 자식 셀렉터 ( > )> : 자식 셀렉터, HTML 태그의 계층 구조를 표현한다 p > div > fieldset > #pwd {......}/* p태그 안의, div태그 안의, fieldset태그 안의, id가 pwd인 태그 */ CSS 후손[자손] 셀렉터 ( ) (공백)후손 셀렉터는 태그의 계층 관계를 나타낸다자식 셀렉터와 다르게, 명시과정에서 ..
Contents// DB\Oracle\VIEWVIEW // WEB\CSS\Shadow & CursorShadowCursor // WEB\CSS\Dynamic@keyframestransform, transition 속성transformtransition // WEB\JavaScript\Map지도카카오 API키 발급 및 적용 Homework