전체 글57 '액체로 된 황금' 마누카꿀의 효능과 복용법 설탕 대신 천연 감미료 역할을 하는 꿀은 좋은 효능이 많아 전 세계적으로 많은 사랑받는 식재료입니다. 꿀은 유채꿀, 밤꿀, 아카시아꿀 등 종류도 다양하며 맛과 향도 달라 각 꿀마다 다른 매력을 가지고 있습니다. 이번 글에서는 다양한 꿀들 중에서 마누카꿀에 대해서 알아보겠습니다. 마누카꿀 이란? 마누카꿀은 뉴질랜드 자생관목인 마누카 나무의 꽃에서 채밀한 꿀로 1년에 약 12일 동안만 채밀 할 수 있는 매우 희소성이 있는 꿀입니다. 마누카꿀은 희소성 뿐만 아니라 다양한 효능이 많아 '액체로 된 황금'이라고 불리며 전 세계적으로 많은 관심을 받고 있습니다. 지금부터 마누카꿀의 효능과 부작용, 복용방법에 대해서 알아보겠습니다. 마누카꿀 효능 1. 입 속 건강 개선 뉴질랜드의 한 대학의 연구결과에 의하면 마누카 .. 2022. 12. 23. select태그랑 input태그가 사이에 공간없이 붙는 이유 input 태그, select 태그를 사용하면 나란히 옆으로 정렬되면서 저절로 4px정도 공간이 생기는데 이상하게도 input 태그와 select 태그 사이의 공간이 사라지고 붙어버렸다. 무슨 이유인지 엄청 고민했는데 그 이유는 아주 간단했다. 1. 문제 화면 input 태그와 select 태그 사이의 4px 정도의 공간이 사라지고 붙어있는 것을 확인 할 수 있다. 2. 문제 이유 [HTML] 1 2 3 4 5 내가 select 태그 옆에 붙여서 input태그를 작성했기 때문이었는데 input태그를 selcet 밑으로 내리니 바로 4px의 사이 간격이 생겨 났다. 3. 해결 화면 [HTML] 1 2 3 4 5 [결과화면] 2022. 12. 14. table-layout:fixed 테이블 셀 너비 변경하는 방법 테이블이 틀어진 경우 table-layout : fixed를 사용하여 테이블 너비를 고정해 틀어진 테이블을 바로 잡는다. 하지만 table-layout : fixed를 사용하면 셀 너비가 모두 동일하게 맞춰져 임의로 너비 조절이 안 되는 경우가 있는데 이때는 colgroup을 사용하여 셀 너비를 변경할 수 있다. table-layout : fixed에 대한 추가 설명을 아래 참조하면 된다. table-layout:fixed으로 테이블 너비 고정하기 1. table-layout 셀 안의 내용에 따라 셀 너비를 고정할지, 변하게 할지 정하는 속성이다. 2. table-layout 속성 [table-layout : auto] 셀 안의 내용에 따라 셀 너비가 변동된다.(기본값) [table-layout : fi.. 2022. 11. 25. table-layout:fixed으로 테이블 너비 고정하기 1. table-layout 셀 안의 내용에 따라 셀 너비를 고정할지, 변하게 할지 정하는 속성이다. 2. table-layout 속성 [table-layout : auto] 셀 안의 내용에 따라 셀 너비가 변동된다.(기본값) [table-layout : fixed] 셀 안의 내용에 따라 너비가 변하지 않고 고정되어 내용이 밖으로 나오게 된다. 3. 적용 예시 [HTML] table-layout : auto(기본값) Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Cell01 Cell02 Cell03 Cell04 Cell05 Cell06 Cell07 Cell08Cell08Cell08Cell08Cell08 Cell01 Cell.. 2022. 11. 24. 한 페이지에 여러개 모달 팝업창 띄우기 1. 소스 [HTML] 팝업 버튼창 버튼1 버튼2 버튼3 버튼4 모달01 모달02 모달03 모달04 [CSS] [JS] 2. 결과 화면 See the Pen Untitled by H__jung (@honghongbyul) on CodePen. 2022. 10. 27. input radio 버튼 클릭하면 하단 내용 보이기 / 숨기기 input radio 버튼이 두 개 있을 경우 radio 버튼 하나를 클릭하면 해당 radio 버튼 내용이 display:block 되고 다른 radio 버튼 내용은 display:none 되는 방법을 연습해 보았다. 1. 소스 [HTML] 아이디 검색 방법 선택하기! 휴대폰으로 아이디 수신 휴대폰 이메일로 아이디 수신 이메일 [CSS] [JS] 2. 결과 화면 See the Pen Untitled by H__jung (@honghongbyul) on CodePen. 3. 제이쿼리 문법 정리 .val() : input, select 등의 form의 value값을 가져온다. 2022. 9. 21. text-align으로 문단 정렬하기 1. text-align? text-align은 문단을 정렬하는 속성이다. text-align 사용 시 주의할 점은 block요소에서만 적용할 수 있다는 점이며 block요소 안에 정렬되는 것은 inline요소인 텍스트뿐만 아니라 이미지도 정렬된다. 2. text-align 속성 text-align: left 왼쪽 정렬 text-align: right 오른쪽 정렬 text-align: center 중앙 정렬 text-align: justify 양쪽 정렬로 왼쪽과 오른쪽의 가장자리 끝에 맞춰 정렬되는 것이다. 3. 적용 예시 block요소인 div에 text-align을 적용했을 때 텍스트가 잘 정렬된다. block요소인 div에 text-align: center을 적용했을 때 inline요소인 span과.. 2022. 9. 16. 테이블 헤더와 1열 고정된 스크롤 테이블 만들기 (position: sticky) CSS의 position: sticky를 사용해 테이블 헤더와 첫 번째 열이 고정되어 있는 가로, 세로 스크롤 테이블을 만들어 보았다. position: sticky 사용 시 '주의할 점' 첫 번째는 부모 요소 안에서 위치 값을 고정시켜 준다는 점이다. 두 번째는 top, bottom, left, right 중에 하나는 필수적으로 꼭 넣어야 position: sticky가 작동한다는 점이다. 마지막으로 IE11 이하 버전은 지원하지 않는다는 점을 주의해야 한다. position: sticky의 브라우저별 대응 여부는 아래 링크 글을 통해 더 자세히 확인해 볼 수 있다. HTML, CSS 크로스브라우징 확인하는 사이트 * 사이트명을 클릭하면 해당 페이지로 이동합니다. Can I use 사이트 브라우저마다 .. 2022. 9. 15. 이전 1 2 3 4 5 6 ··· 8 다음
