i'm working on it

사진, 캠핑을 좋아하는 휘현/휘흔 아빠의 log입니다

工夫/HTML+CSS

일단 중요한것 1. 줄바꿈할 텍스트가 들어 있는 요소(block, inline-block) 에 width 값이 명시되어 있어야 한다. 2. word-wrap 은 영어만 적용된다. 영어 + 아시아권(CJK) 언어에 모두 적용하려면 word-break 를 사용한다. word-wrap (영어만) normal : 기본값, 영역을 넘쳐서 이어진다. break-word : 영역에 맞추어 줄바꿈 된다. word-break (영어+CJK) normal : 기본값, 길어져도 그대로 이어져 표시된다. break-all : 요소의 크기에 맞춰 줄바꿈 (영어적용, CJK에 적용안됨) keep-all : 요소의 크기에 맞춰 줄바굼 (영어적용안됨, CJK 적용됨) 닥치고 줄바꾸려면 word-break:keep-all break-..

2022. 2. 9.

工夫/HTML+CSS

※ 테스트 할때 주의할점은 계속 바로바로 갱신이 되지 않는다. 그냥 두면 경험상 2-3시간정도 후에 적용이된다. ※ 이경우는 다음의 주소에서 삭제요청한다. https://developers.kakao.com/tool/clear/og

2022. 2. 6.

工夫/HTML+CSS

/* 3, 6, 9, 12 번째(3의배수) 배경변경 */ li:nth-child(3n){ background: red; } /* 10번째 부터 이후 모든 리스트 컬러변경 */ li:nth-child(n+10) { color: blue; } /* 1번째 부터 5번째 까지 배경변경 */ li:nth-child(-n+5) { background: green; } /* 15번째 부터 20번째 까지 배경변경 */ li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } /* 끝에서 부터 3번째 */ li:nth-last-child(3) { background: gold; } /* 홀수 */ li:nth-child(odd) { color: red; } /* 짝수 ..

2021. 5. 19.

工夫/HTML+CSS

기본구조 flex는 container 와 item 의 두가지 요소로 구성된다. ... ... ... 기본사용 display:flex; ※ display:inline-flex; 는 인라인레밸의 컨테이너가 생성됨, 이렇게 적용하면 컨테이너의 정렬이 가로로 정렬된다. ※ display:flex; 자식요소들이 flex item의 성격을 갖게 된다. flex container 주요속성 justify-content flex-start //기본값입니다. 좌측정렬 flex-end //우측정렬 center //가운데정렬 space-between //아이템과 아이템사이의 일정한 간격 space-around //아이템의 앞뒤로 일정한 간격을 space-evenly //아이템 외의 남는공간을 아이템 사이에 일정하게 배분 ju..

2021. 5. 19.