i'm working on it

사진, 캠핑을 좋아하는 휘현/휘흔 아빠의 Life 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.

工夫/HTML+CSS

※ 수시로 나타나는 이녀석때문에.. 은근히 스트레스다. 겪어본 사람은 다 안다.

2021. 5. 12.

工夫/HTML+CSS

html { /* Prevent font scaling in landscape */ -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/ -moz-text-size-adjust: none; /*Firefox*/ -ms-text-size-adjust: none; /*Ie*/ -o-text-size-adjust: none; /*old versions of Opera*/ } ※ 특히 이 증상은 아이폰에서 심하다.

2021. 5. 12.

工夫/HTML+CSS

모바일에서 표를 보여줄 때, 넓이를 더이상 줄일수 없는 경우가 있는데,(줄일수 없거나 보여줘야 하는) 이때는 보통 min-width:값 를 사용하게 되는데, 이는 넓이를 줄이더라도 값 까지만 줄이라는 뜻이다. 이렇게 되면 페이지 전체에 가로스크롤이 생기게 된다. 이 문제를 해결하기 위해 아래와 같은 방법을 사용한다. overflow-x: auto; 위 코드를 표를 감싸고 있는 width값이 별도로 지정되어 있지 않는 부모요소 값이 지정되어 있어도 표 부분만 가로스크롤이 생기게된다. ※ 블럭요소에서 width값이 별도로 지정되어 있지 않으면 기본값인 auto로 동작하기때문에 100%가 된다. ... ...

2021. 4. 29.

工夫/HTML+CSS

viewport 웹페이지가 보여지는 영역을 뜻하며, 당연히 기기별로 다름 width viewport의 가로사이즈, device-width는 보여지는 기기의 가로사이즈 initial-scale 웹페이지가 로딩될때 초기 확대 비율 추가속성 user-scalable 사용자의 축소/확대 허용 여부. 초기값은 yes며, no로 금지 가능 minimum-scale 뷰포트의 최소 배율값 (0~10) maximum-scale 뷰포트의 최대 배율값 (0~10)

2021. 4. 26.