블로그

일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 알아보기 좋게 배경색과 border를 좀 추가해서 준비했다 코드로 보면 아래와 같다 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 슬라이드 무한 슬라이드 body * { height: 50px; } .slide_box{ width: 200px; position: rela..

inline은 CSS를 공부하는 초기부터 block과의 비교대상으로서 익숙히 들어온 코드입니다. 그리고 inline-block은 아마도 코드를 짜는 과정에서 체득하게 되는 코드입니다. { display: inline; } 대표적으로 이라는 태그의 성질로 content/text 크기만큼만 점유하고 동일 라인에 붙는 성질입니다. '이 글씨는 두꺼운 효과를 주었다.'와 같이 text 내에 특정 부분에만 스타일을 간단히 줄때 많이 사용되죠. - width/height 적용 불가 - margin/padding-top/bottom 적용 불가 - line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등) { display: block; } 반면 block은 무조건 ..

요소별 수직, 수평 정렬 방법, 수평 수직 정렬 2017.07.24 in CSS 수직정렬 block 자체 수평정렬 inline 수평정렬 정중앙 정렬(flex) 수직정렬 바깥 요소(outer)로 감싼다. height를 설정한다. 바깥요소에 vertical-align:middle; display:table-cell; 셋팅 1 2 3 vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit; https://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=25px 또는 flex를 활용 요소에 display:fle..

https://www.w3schools.com/css/css_float.asp

https://flatuicolors.com

By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute! https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

inline 또는 inline-block의 여백display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.)123456789101112131415161718192021 Lorem Ipsum Dolor 박스 오른쪽에 여백이 있는데, li 요소에1margin-right: 0px;를 추가해도 사라지지 않습니다. 이 여백을 없애는 방법 두 가지를 소개합니다.margin 이용하기첫번째 방법은 margin 값을 음수로 하는 것입니다. -4px 정도면 여백이 사라집니다.123456li { display: inline; ..