반응형 CSS입문20 [ CSS 입문 ] cursor 속성 | 개요 cursor 속성을 이용하면 해당 태그 위에 마우스를 위치할 때 마우스 커서 모양을 마음대로 바꿀 수 있습니다. | 예제 Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help | 결과값 Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help 2018. 9. 19. [ CSS 입문 ] position 속성 | 개요 position 속성은 태그의 위치를 잡는 속성이며 5가지의 값을 갖습니다. CSS를 공부하면서 가장 어려웠던 부분이고 실무에 있어서도 많이 사용되는 속성으로 꼭 정확하게 공부할 필요가 있는 속성입니다. 기본적인 html로 레이아웃을 잡는다면 그 안에 요소들은 이전 margin, padding속성과 더불어 position속성으로 위치를 잡게 되는 경우가 많으며, 이 속성을 잘 이용하면 다양한 화면 구성을 할 수 있습니다. static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임으로 설정해 줄 수 없습니다. absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. relative : 원래 있던 위치를 기준으로 좌표르르 지정합니다. fixed : 스크롤과 상관없이.. 2018. 9. 18. [ CSS 입문 ] clear속성 | 개요 float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 중간에서 끊기(제거)위해 사용됩니다. 방향에 따라 3가지 속성으로 사용됩니다. left : 왼쪽 부유 제거 right : 오른쪽 부유 제거 both : 양쪽 모두 제거 | 예제 This is first line with floating image. This is second line with cleared property. | 결과값 This is first line with floating image. This is second line with cleared property. | 레이아웃에서의 clear float 속성이 레이아웃에서 많이 사용되고 있는데, clear속성도 float를 레이아웃에서 사용하며 발생되는 문제를 해결하기 위.. 2018. 9. 17. [ CSS 입문 ] float 속성 | 개요 float 라는 단어는 원래 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit : 부모 요소에서 상속 left : 왼쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear속성이 있으면 페이지 흐름이 달라짐. none이 아니라면 display속성은 무시. none : 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display속성은 무시 됩니다. (none 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니.. 2018. 9. 16. [ CSS 입문 ] display 속성 | 개요 display 속성은 요소를 어떻게 보여줄 것인가를 결정합니다. 주로 4가지의 속성값을 사용하고, 이외에도 다양한 속성값들이 존재하는데 실무에서도 객체들을 보여주는 방식에 따라 다양하고 많이 사용되는 속성 중 하나 입니다. 입문부분이기에 기본적인 속성값 4가지만 소개하겠습니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과 inline의 중간형태 | 사용법 none 태그가 보이지 않게 되고, visibility 속성중 hidden 으로 설정한 것과 달리 영역조차 사라지게 됩니다. block , 태그 등이 이에 해당됩니다. 가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈이 되어 보입니다. wid.. 2018. 9. 15. [ CSS 입문 ] visibility 속성 | 개요 visibility 속성은 태그의 가시성을 결정합니다. 다음 속성 4가지 값을 가지며, 기본 값으로는 inherit 입니다. visible : 보임 hidden : 숨김 (자신의 영역은 지속됨) collapse : 겹치도록 지정 (테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소에 지정하면 hidden으로 해석) inherit : 부모 요소의 값을 상속 | 예제 | 결과값 2018. 9. 14. [ CSS 입문 ] border 속성 | 개요 border 속성은 태그의 테두리를 설정하는 속성으로, background속성 과 비슷하게 세부적인 속성들을 한번에 사용할 수 있습니다. 예전부터 지금까지도 많이 사용되는 table태그에서의 border와 비슷한 세부 속성을 가지고 있으며 이제 테이블이 아닌 다른 객체에서도 border 속성을 이용하여 문서나 표를 작성 할 수 있습니다. 주로 " border: 선두께 선스타일 선색상; "의 순서로 작성되며 전체의 테두리가 아니라면 각 방향별로 따로 테두리를 줄 수 있습니다. border-width : 테두리 두께 border-style : 테두리 스타일 border-color : 테두리 색 border-radius : 모서리 각 border-top : 윗쪽 테두리 border-bottom : 아.. 2018. 9. 13. [ CSS 입문 ] background 속성 | 개요 background 속성은 태그의 배경을 지정하는 속성입니다. 한번에 여러가지 속성을 사용할 수 있습니다. background-color : 배경색 background-image : 배경 이미지 background-size : 배경 이미지 사이즈 background-repeat : 배경 이미지 반복 background-position : 배경 이미지 위치 | 사용법 background-color 배경색을 의미하며, 값은 color속성의 포맷을 사용합니다. 색상을 사용할때 그라디언트 속성을 이용할 수 도 있는데 이는 'background-image' 에서 넣을 수 있습니다. background-image 배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다. 이때엔 'backg.. 2018. 9. 12. [ CSS 입문 ] text-align 속성 | 개요 text-align 속성은 텍스트의 정렬을 의미합니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 중앙 정렬 justify : 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리) | 사용법 #box1 { text-align: right; } /*box1 아이디 선택자의 텍스트를 오른쪽 정렬로 하라*/ #box2 { text-align: left; } /*box2 아이디 선택자의 텍스트를 왼쪽 정렬로 하라*/ #box3 { text-align: center; } /*box3 아이디 선택자의 텍스트를 중앙 정렬로 하라*/ 우리가 편하게 사용하는 워드나 엑셀 같은 프로그램에 많이 사용했을 법한 텍스트 정렬은 많이들 알고 있는 기능일 것으로 생각됩니다. CSS에서는 위와 같이 .. 2018. 9. 11. 이전 1 2 3 다음 반응형
