본문 바로가기

DEVELOP

 (150)
[onmouseenter, onmouseleave] html img에 활용하기 주의할 점은 img태그안의 마우스 이벤트를 입력한 것이기 때문에 이 이미지 태그 외의 다른 태그에 마우스 호버를 해도 변함이 없다. 즉 아래와 같이 아이콘과 텍스트가 함께 있는 블록의 마우스 이벤트를 넣고 싶다면 javascript나 jQuery로 작업을 추천한다.
[github] adding embedded git repository 가 뜨고 push 되지않을 경우 기존 내 개인 레파지토리에 추가할 폴더가 생겨서 회사 깃헙 계정이 아닌 개인 이메일과 이름으로 변경후 연결했었다. 폴더를 추가한 후에 push를 날리려니 아래와 같은 경고가 떴다. 원인은 추가할 폴더 안에 .git 설정의 user.name과 맞지않았기 때문... 추가하려는 폴더는 회사 깃헙 계정으로 작업해 둔 것이기 때문에 충돌이 일어난것 같았다. 따라서 간단히 추가할 폴더 안의 .git 파일을 없애고 다시 git add . 를 날리니 정상으로 스테이징 되었다.
[CSS] flex 자식 요소 분할 방법 display: flex; 스타일을 사용할 경우 해당 자식 요소들이 두개, 세개 네개 등등 ... 몇개로 분할하고, gap (자식요소 간 사이)를 어떻게 할 것이냐에 따라서 혼동이 오는 경우가 있다. 만약 gap을 32px와 24px로 하고, (gap: 32px 24px;는 row-gap:32px; column-gap:24px;의 줄임 표현입니다.) 자식 요소를 세개씩 나열 한다고 하면 자식요소에 flex를 다음과 같이 주면 된다. flex: 0 1 calc(100%/3 - 24px/3*2); width: 33.33%; 여기서 flex는 flex-grow와 flex-shrink, flex-basis의 줄임 표현으로, flex-grow를 0으로 한 이유는 만약 한줄에 세개 자식요소가 없고 하나 또는 두개가..
[Publishing] 반응형 배너 작업_v2 반응형 배너 작업을 할 때, 이미지를 감싸고있는 부모 요소의 padding-bottom이나 padding-top을 이용하여 비율을 맞췄었다. (이전 글 참고 : 이미지 비율 알아내는 사이트 링크도 여기에 있습니다.) https://jintrue.tistory.com/entry/Publishing-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B0%B0%EB%84%88-%EC%9E%91%EC%97%85 [Publishing] 반응형 배너 작업 사이트를 만들다 보면 banner list 이미지 사이즈 높이값을 지정하기가 애매하다. 높이값을 픽셀로 지정해버리면 해당 배너 등록 비율이 깨질수도 있기 때문이다. 따라서 등록한 배너 비율을 유지 jintrue.tistory.com 하지만 CSS3에는 ca..
[CSS] 선택자 옵션 자주 사용하는 클래스 명 선택자 옵션은 아래와 같다. 값이 특정하는 단어의 전체일 필요는 없다. 1. [class^="btn-"] class 명이 "btn-"으로 시작되는 모든 선택자들 2. [class*="test"] class 명 중에 "test"를 포함하는 모든 선택자들 3. [class$="--outline"] class 명 중에 "--outline"으로 끝나는 모든 선택자들 참고 사이트 : https://www.w3schools.com/css/css_attribute_selectors.asp CSS Attribute Selector W3Schools offers free online tutorials, references and exercises in all the major languages ..
[Sass] .scss로 svg 아이콘 색상 변경 svg 파일은 백터 형태로서 픽셀단위가 아니여서 깨지는 현상이 없는 파일이다. 따라서 작은 사이즈의 파일 형태라도 원하는 사이즈로 자유롭게 이용이 가능하며, 이를 데이터 형식으로 변환하여 사용할 경우 그리는 형식이라 사이즈 및 색상을 자유자제로 변경이 가능하다. 또한 svg 파일을 코드에 사용할 경우 ie에서 호환이 되지 않지만, Sass와 svg data 형태를 사용하게 되면 ie10 이상부터 호환이 가능하다. (ie10~) 그러기 위해선 Sass를 사용하는 방법을 소개하고자 한다. 기존에 svg를 data 형식으로 바꾸는 방법에 대해서 포스팅을 했었다. https://jintrue.tistory.com/entry/SVG-data-%ED%98%95%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EB..
[Publishing] 반응형 배너 작업 사이트를 만들다 보면 banner list 이미지 사이즈 높이값을 지정하기가 애매하다. 높이값을 픽셀로 지정해버리면 해당 배너 등록 비율이 깨질수도 있기 때문이다. 따라서 등록한 배너 비율을 유지하면서 반응형 작업을 해야하는데, image banner responsive style(CSS)는 다음과 같다. 우선 HTML 구조를 img 태그를 감싸는 부모와, img 태그로 코딩한다. 이미지 비율에 따라 부모 클래스 "img-area"의 padding-top이나 padding-bottom의 퍼센트 스타일을 주어야한다. padding-top을 줄것인가 bottom을 줄것인가는 개인 선택이다. 여기서는 padding-bottom으로 예를 들겠다. 여기서 알아두어야 할 것이 해당 이미지 비율인데 이미지 비율마다 ..
[Javascript] 특정 미디어에서만 함수 실행 보통 $(window).on("resize", function(){}); 과 if($(window).outerWidth() == "") {} 를 사용하여 특정 미디어의 조건을 사용하였었는데 이벤트나 함수를 실행할 경우 제대로 적용이 안되었었다. 따라서 자바스크립트만을 사용하여 아래와 같이 미디어 쿼리를 제어하여 함수 실행을 하였더니 안정적이게 작동이 되었다. $(function(){ function gnbMouseFunction(){ $(".gnb-list__title").on("mouseenter", function(){ $this = $(this); $(".gnb-list__title").removeClass("on"); $(".depth2-page-frame").each(function(i,v){ ..

티스토리툴바