웹 언어 배우기/CSS 다한(dahan) 2019. 9. 29. 07:30
자바스크립트를 사용하지 않고 css를 이용해서 버튼에 갖다대면 서브 메뉴가 나오는 dropdown 메뉴를 만들어보겠습니다. dropdown 메뉴 만들기 See the Pen hover dropdown menu by Cho-YoungHo (@choyoungho-web) on CodePen. 버튼에 초록색 배경에 하얀색 글자를 적용했고 버튼 선을 없앴습니다. 또한 마우스를 버튼에 갖다대면 #3e8e41의 배경색이 적용됩니다. dropdown 클래스에 인라인 블록 요소를 줘서 버튼에 갖다대면 서브메뉴가 나오도록 했습니다. 만약 inline-block을 주지 않으면 button에 위치한 너비가 100%가 되어 버튼 바깥쪽에 갖다대도 서브메뉴가 나옵니다. 서브메뉴는 기본적으로 나오지 않게 하고 마우스가 버튼에 갖..
더 읽기
웹 언어 배우기/HTML 다한(dahan) 2019. 9. 23. 07:00
더미 텍스트와 이미지는 레이아웃 구성할 때 필요합니다. 어느 정도 내용이 있어야 구조가 잡히기 때문입니다. 모든 에디터에서 사용 가능하며 손쉽게 사용할 수 있습니다. 함께 알아보겠습니다. 더미 텍스트 자신이 사용하고 있는 에디터에 가서 lorem을 입력하고 Tab키를 눌러보면 더미 텍스트가 나옵니다. 또한, lorem숫자를 입력하면 그 숫자만큼의 단어가 나옵니다. 예를 들어 lorem100이라고 입력하면 100 단어의 더미 텍스트가 나옵니다. 더미 이미지 이미지를 생성해주는 placeholder 사이트에 들어가면 사용방법과 함께 에디터에 적용할 수 있습니다. See the Pen dummy text, image by Cho-YoungHo (@choyoungho-web) on CodePen. /350은 가..
웹 언어 배우기/JavaScript 다한(dahan) 2019. 9. 22. 07:00
fixed로 되어있는 고정 헤더를 특정 스크롤 위치에 도달하면 줄어드는 헤더를 만들고자 합니다. HTML, CSS, jquery를 이용해서 만들어보겠습니다. 고정 헤더 높이 설정 예제 $(function(){ var shrinkHeader = 300; $(window).scroll(function(){ var scroll = getCurrentScroll(); if(scroll >= shrinkHeader){ $('.header').addClass('shrink'); }else{ $('.header').removeClass('shrink'); } }); function getCurrentScroll(){ return window.pageYOffset || document.documentElement.sc..
웹 언어 배우기/CSS 다한(dahan) 2019. 9. 21. 07:00
CSS에서 selectbox는 네이티브로 꾸미기가 까다롭습니다. 네이티브 즉, 자체 지원으로 기본적으로 커스터마이징을 할 수 없도록 되어있습니다. 그래서 화살표를 직접 꾸미기것이 아닌 없애고 새로운 화살표를 만들어야 합니다. 이미지를 삽입해서 꾸며도 되지만 저는 화살표를 만들겠습니다. 오른쪽 화살표 꾸미는 방법 크롬으로 보면 화살표가 그나마 이쁘게 보이지만 IE로 보면 체크박스형태로 표현된것을 볼 수 있습니다. 크롬, IE 할거없이 화살표를 없애고 커스터마이징으로 직접 꾸미는 방법을 알려드리겠습니다. selectbox 화살표 꾸미기 예제 Example select: select { appearance : none ; -webkit-appearance : none ; } select::-ms-expand ..
웹 언어 배우기/CSS 다한(dahan) 2019. 9. 20. 07:00
이미지뿐만 아니라 모든 태그는 기본적으로 왼쪽 정렬이 되어있습니다. 가운데 정렬을 하기 위해서는 웹 표준인 text-align:center을 쓰는 것이 일반적이지만 상황에 따라 다르게 표현해야 할 때도 있습니다. 그 방법에 대해 알아보겠습니다. 이미지 가운데 정렬하는 방법 부모 요소가 있는 경우 Example text-align: div { display : block ; text-align : center ; } img { display : inline; } 직접 해보기 text-align은 left, center, right, justify 속성 값을 가지고 있습니다. block 요소 안에 inline 요소가 있어야 가운데 정렬을 할 수 있습니다. 즉, text 뿐만 아니라 이미지도 가능하다는 뜻입니..