css7 [css] div정렬 및 겹치기 position:absolute ,position:relative position의 속성으로 absolute와 relative가 있다. 이들은 주로 div로 프레임을 짤때 배치를 선택하는데 사용된다. absolute는 절대 위치를 표현하므로 브라우저의 좌측 상단을 기준으로 개체가 놓이게 한다. relative는 상대 위치를 표현하므로 특정 개체를 기준으로 위치가 잡힌다. 예제로 비교해 보면 쉽다. absolute소스확인 1 2 3 4 5 6 7 8 9 10 11 12 13 14 relative 소스확인 1 2 3 4 5 6 7 8 9 10 11 12 13 14 정리해보면 absolute는 특정 개체와 관계없이 겹쳐서라도 배치가 되는 수준이며 relative는 각 개체를 기준으로 상대적 위치에 배치되므로 겹치지 않는다. 2018. 10. 30. [css] 선택자(Selector) CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문이다. 특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못한다. 선택자(Selector)의 종류 선택자(Selector)는 아래와 같이 4개로 구분된다. 공통 선택자(Universal Selector) 타입 선택자(Type Selector) ID 선택자(ID Selector) Class 선택자(Class Selector) - 공통 선택자(Universal Selector) 공통 선택자(Universal Selector)는 *로 표현되는 선택자이다. * { color: gray; .. 2018. 10. 30. [CSS] 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. 1 .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면.. 2018. 10. 28. [css] html 모서리 둥글게 하기 / div 모서리 둥글게 하기 / border-radius Cascading Style Sheets 통칭 css에서 div로 이루어진 사각형 또는 이미지의 모서리를 둥글게 하고 싶은 경우가 있다. 그럴땐 어떻게 하느냐?? 생각보다 어렵지 않다. 사각형을 가지고 직접 예를 들어보자. 아래의 사각형은 div로 이루어진 것이다. width:300px; height:120px; border:2px solid #000000;" 여기서 border의 radius 속성을 이용하면 사각형의 모서리가 둥글게 된다. 얼마나 둥글게 되냐면 아래의 그림과 같다. border-radius:20px; 일 경우 반지름이 20px인 만큼 테두리가 둥글게 되는 것이다. border-radius 를 적용하면 아래처럼 된다. width:300px; height:120px; border:2px s.. 2018. 10. 28. [css] CSS를 이용한 마우스 커서 모양 지정 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아래 예제에서 글자위에 마우스를 올리면 모양이 변합니다. AutoCrosshairDefaultPointerMovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp 2018. 10. 28. [css] radio, checkbox 이미지 바꾸기 2 폼입력 컨트롤중 하나인 라디오버튼(radio)과 체크박스(checkbox)를 CSS의 선택자와 백그라운드 속성을 이용하여 디자인을 입히는 방법을 찾아 변경하는 방법을 정리해본다. HTML에서 다음과 같이 label을 이용하면 된다. ㄹㄹㄹㄹ 1 2 3 4 남자 CSS의 경우 HTML과 달리 기존과 달리 추가해주어야 하는 곳이 많다. IE에서는 적용되지 않게 하기위한 :not 선택자, 라디오버튼(radio)과 체크박스(checkbox) 비활성화와 체크여부를 알기위한 :disabled, :checked 선택자등 CSS3에서 추가된 가상선택자등이 사용되었다. 1 p>input[type="checkbox"], p>input[type="radio"] { position:relative; top:-1px; vert.. 2018. 10. 7. [css] radio, checkbox css 바꾸기 원하는 radio, checkbox 를 구현하는 방법은 두가지가 있다. 1. 이미지를 넣어서 라디오 버튼과 체크 박스에 내가 원하는 이미지를 넣는 방법. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 /*css*/ input[type="radio"], input[type="checkbox"] { display:inline-block; width:20px; height:20px; vertical-align:middle; background:url(radio_n.png) no-repeat 0 0; appearance: none; -moz-appearance: none; /* Firefox */ .. 2018. 10. 7. 이전 1 다음
