본문 바로가기

분류 전체보기

 (244)
[css] unordered list ul 태그 li에 dot 붙이기 여태 디자인 시안이 넘어왔을 때 목록에 '.'이 붙어있으면 background-image 처리로 dot를 붙였었다. li::before 스타일을 사용하여 dot을 표현할 수 있지만, 리스트 텍스트가 길어서 두줄로 구현 될경우 dot이 다음과 같은 현상이 생겼기 때문이다. 그치만 li::before 스타일에 position: absolute;를 추가하여 스타일링 하면 굳이 포토샵이나 이미지 점을 사용하여 dot을 구현하지 않아도 된다. ul.dots-list li { position: relative; margin-top: 5px; padding-left: 12px; font-size: 18px; font-weight: 300; line-height: 27px; } ul.dots-list li::befor..
[github] git add . 취소하기 Unstage 된 작업물을 Staging 하여 커밋할 준비를 하는데 이 때 깃허브 명령어는 다음과 같다. git add . 하지만 명령어를 입력한 순간 추가하거나 수정해야할 경우가 생긴다. 이때 git add .를 취소해야 하는데 다음과 같은 명령어를 입력하여 Staging된 작업물을 Unstaged 하자. git reset HEAD 그후 git status 로 해당 레파지토리 상태를 보면 Unstaged 된것을 볼수있다.
[github] 커밋 취소하기 열심히 작업한 작업물을 커밋후 푸시하려는 순간 다른 부분도 수정을해서 다시 커밋해야 하는 경우가 생긴다. 그럴땐 push를 아직 하지 않았다면 레파지토리 커밋 히스토리에 올라가지 않게 하는 명령어는 다음과 같다. git reset --hard HEAD^ git reset HEAD 뒤에 아무 것도 넣지 않으면 전체 Unstaged. 따라서 커밋한 것은 취소되고 해당 작업물들은 Unstage 된다.
[css] flex 세로 정렬 크로스 브라우징 보통 display: flex;를 가로 정렬을 위해서 사용한다. 또한 flex-direction 스타일의 default도 row;이다. 하지만 세로 정렬을 하되 전체 정중앙 정렬을 해야할 경우가 있다. 이럴땐 display: flex; 후에 flex-direction: column;를 추가해주면 되는데 문제는 크로스 브라우징이다. 사용자가 어떠한 브라우저를 사용할지는 모르는 일이라 모든 브라우저 상황을 고려해야한다. flex 세로 정렬 크로스 브라우징 스타일은 다음과 같다. .style { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
[plugin] 반응형 slick 설정시 ".slick-list" padding 없애기 데스크탑에서는 세개씩 보여주고 centerMode: true; 설정을 해둔 슬라이드를, 모바일에서는 하나씩 보여주려한다. 하지만 모바일 환경에서는 이전, 다음 슬라이드가 여전히 보인다...! 소스를 보면 클래스 slick-list에 스크립트 스타일로 패딩이 좌우 잡히기 때문에 보이는 것이다. 아무리 css로 slick-list width 값을 100%로 해주어도 보일것이다. 왜일까 계속 디버깅한 결과, 처음 디폴트 데스크탑 옵션에서 centerMode: true;로 설정을 해주었기 때문에 모바일 환경에서는 slidesToShow를 1로 해주고, centerMode: false;로 설정해주어야 다음과 같이 깔끔하게 보인다. 핵심은 slick.js의 옵션인 centerMode에 있었다.
[github] 최초 로컬 연결시 기존 작업물이 있을 때 말 그대로 로컬에 작업해놓은 특정 폴더를 깃허브 레파지토리와 연결이 되어있지 않을 때 푸시가 거절될 수도 있다...! 오늘은 그 해결법을 알아볼 것이다. 우선, 어떤 상황이였냐면 1. 로컬에 특정 폴더를 만들고 작업물을 저장해 두었다. 2. 로컬에 만든 폴더명과 동일한 빈 레파지토리를 깃허브에서 만들었다. 3. 1번과 2번을 동기화 하고 싶다. 연결 방법은 다음과 같다. - 해당 로컬 폴더 안의 경로의 터미널 실행 - git add . (일단 빈 깃허브 레파지토리에 해당 로컬 작업물을 업로드 할것이니까!) - git commit -m "로컬 연동" - git branch -M main (기존 master 브랜치를 main이란 브랜치로 변경. 몇년 전부터 깃허브가 디폴트 브랜치를 master가 아닌 mai..
[css] 드래그 방지 스타일 체크박스나 라디오박스의 레이블 텍스트가 드래그 가능한 채로 사용자에게 노출이 된다면, 이런 상황에 맞딱드린다. 이를 방지하는 스타일은 아래와 같다. -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;
[css] 정중앙 정렬2 과거에 element 정중앙 정렬에 대해서 포스팅을 한적이 있다. jintrue.tistory.com/entry/css%EB%A1%9C%EB%A7%8C-%EC%A0%95%EC%A4%91%EC%95%99%EC%A0%95%EB%A0%AC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [CSS] 중앙정렬 html 이벤트 종료 css .end-box { display: flex; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); align-items: center; } .end-box p { color: #fff; font-.. jintrue.tistory.com 이 포스..

티스토리툴바