끄적이는 공간

전체 글 90

[CSS] position으로 가운데 정렬하기

웹을 만드는 작업중 css처리를 하면서 위와 같은 요소가 있다고 가정을 해보겠다. 우린 저 요소 안에있는 분홍색 사각형이 초록색 사각형의 한가운데 오게끔 css position속성을 이용해 만들고자 한다. 우선 마크업 방식은 아래와 같다. big이란 클래스명을 가진 요소가 분홍색 사각형의 기준점이 되어줘야 하고 small은 big의 기준점에서 한가운데로 자유롭게 이동해야하기때문에 아래와 같이 적용해준다. big 이란 요소에는 position: relative; small 이란 요소에는 position: absolute; .big { width: 300px; height: 300px; background: green; position: relative; } .small { width: 50px; heigh..

WAMP 작업 환경 기본 루트(Root) 변경하기

로컬에서 php 개발을 할때 작업 디렉토리를 기본으로 해둬야 할 때가 있다. WAMP 환경이라면 해당부분을 쉽고 간단하게 변경 할 수 있다. 1. 아래의 경로(WAMP를 설치한 경로/apache/conf/bitnami)로 들어가 bitnami.conf 파일을 메모장으로 오픈 2.bitnami.conf파일이 열린 메모장에서 ctrl + f 키를 눌러 '찾기'창을 DocumentRoot를 기입 3.'찾기'창에서 입력하여 찾은 DocumentRoot와 두 곳 모두 원하는 작업 폴더 경로로 설정 후 ctrl+s로 저장 4. 아래 아이콘을 클릭하여 WAMP Stack 를 실행 후 Apache Web Server를 Restart를 해줌.

Php/개발환경 2022.03.23

[php] 라라벨(laravel) 개발 환경 셋팅(WAMP)

*해당 포스트는 Bitnami를 통해 PHP를 설치 한 후 laravel환경을 세팅한 내용입니다. PHP를 이미 설치하셨다면 laravel만 추가설치하면 됩니다. Bitnami를 통한 WAMP설치 방법은 아래를 참고해주세요. [Php] WAMP 개발 환경 구축. AMP - Apache, MySQL, PHP를 함께 설치하며 이것을 AMP라고 부른다. WAMP - AMP를 Windows(윈도우) 환경에서 설치하면 WAMP라고 부른다. AMP를 각각 다운받기에는 난이도가 높음으로 Bitnami를 통해 설치 하겠음... joroki.tistory.com 라라벨(laravel)은 php의 프레임워크의 하나로 MVC, 모델(Model)-뷰(View)-컨트롤러(Controller) 패턴을 따라 웹 애플리케이션을 개발..

Php/laravel 2022.03.22

[php] WAMP 개발 환경 구축.

AMP - Apache, MySQL, PHP를 함께 설치하며 이것을 AMP라고 부른다. WAMP - AMP를 Windows(윈도우) 환경에서 설치하면 WAMP라고 부른다. AMP를 각각 다운받기에는 난이도가 높음으로 Bitnami를 통해 설치 하겠음. 1.Bitnami 다운로드 홈페이지로 이동(아래링크) Install WAMP, Download WAMP show MD5 5134151f4637e9346892049d4605b225 SHA1 19acaee811e919df91c877c7157eaae00a12b4ae SHA256 94d64019da05a24f8311341eabd7ecc1650f99cd7fc248c99aadf67c7e12770a bitnami.com 2. 홈페이지 하단에서 원하는 버전으로 다운로드 ..

Php/개발환경 2022.03.21

[javascript] 탭 버튼에 클릭시 해당 컨텐츠 노출하기

탭버튼 클릭시 해당 컨텐츠 노출하는 방식은 흔하게 웹사이트에서 쓰는 동적인 움직임이다. Jquery로 처리하면 간단하긴 하지만 순수 JS로 처리해도 어렵지 않음으로 속도가 빠른 JS로 처리하는것을 추천한다. HTML 마크업 구조 - current 란 클래스를 가진 button에는 스타일이 적용되며 다른 버튼은 스타일이 사라짐. - current 란 클래스를 가진 content는 노출되며 다른 컨텐츠는 숨김 TAB 1 TAB 2 TAB 3

[HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress'

'' 태그는 작업의 진행률 표시줄을 제공해주는 태그다. 태그,태그,가상요소, css의 포지셔닝등 복잡한 구조를 쓰지 않고 '' 태그 한줄이면 ui/ux적으로도 꽤나 훌륭한 표시줄을 만들어준다. 는 작업의 진행률를 나타낼때 사용하는 동적 데이터이며 현재 점수나 범위를 나타내는 정적 데이터 일때는 사용하기 적합하지가 않다. (이와같은 경우는 '' 태그 사용) [사용 속성] 속성명 설명 max 총 작업률을 기재 하는 속성 (숫자) value 현재까지의 잡업률을 기재하는 속성(숫자) [추가내용] 다운로드 중.. 진행률 : 25%​ 아래와 같은 방식으로 css 커스터 마이징도 가능하다. /* progress bar 총진행률(뒷면) 커스터마이징 */ progress[value]::-webkit-progress-ba..

[HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details'

'' 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용하며 별도의 스크립트 작업없이도 사용자로 하여금 동적인 동작을 할 수있게끔 해주는 유용한 태그이다. 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며, 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있다. 이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않는다.. 태그의 자식으로서 반드시 같이 사용해되어야 하는 '' 태그는 요소에서 화면에 보일 제목을 명시 할 때 사용한다. 이 제목을 마우스로 클릭함으로써 요소를 보이도록 할 수도 있고 숨길 수도 있습니다. 예제) 오늘의 환율 달러($) : 1..

[Jquery]한 페이지에 같은 동작하는 Swiper가 여러개일때 처리

한 페이지에 같은 동작하는 여러개의 스와이퍼(swiper) 슬라이더를 넣어야할때 새로운 new Swiper 변수명을 선언해도 동작은 하지만 같은동작을 반복하고 버튼마저 같은 방식이라면 무식한 방법이 되어버린다. Swiper 갯수가 100개가 된다고하면 100개의 new Swiper 변수명을 선언해야 하고 그 이후에도 추가된다면 200개,300개의 변수명을 선언해야하기때문이다. 그래서 아래와 같이 처리할 수 있다. 위와 같은 동작을 하는 스와이퍼 요소가 100개 있고 앞으로도 유지보수 과정에서 늘어 날 수 있단 것을 가정해보면 아래와 같이 스크립트 처리를 해주면 된다. 위의 100개 swiper가 있다면 index값에 맞춰 동적으로 id를 생성해준다. 100개의 swiper에는 각각 'mySwiper-0~..

[JAVASCRIPT] Swiper 사용법 - 웹 슬라이드 구현

1. Swiper 설치 Swiper 설치법은 여러가지가 존재합니다. -CDN을 기입하는 방식 -swiper.css,swiper.js 를 다운받아 직접 삽입하는 방식 -npm으로 설치하는 방식 프로젝트 상황에 맞게 위의 방법에 따라 사용하시면 됩니다. 2. Swiper 마크업 구조 및 스크립트 특별한 커스터마이징을 하지 않는다면 Swiper의 구조는 매우 간단하게 이루어져있습니다. 기본적으로 swiper-container > swiper-wrapper > swiper-slide 구조로 이루어져있으며, 해당 클래스명으로 지정해주면 swiper.css에 저장되어있는 방식에 따라 슬라이드에 알맞는 레이아웃으로 자동 적용됩니다. //Swiper 마크업 구조 슬라이드 컨텐츠1 슬라이드 컨텐츠2 슬라이드 컨텐츠3 슬..

[IT]유용한 웹,앱 아이콘 라이브러리

웹 프로젝트를 들어가게되면 아이콘은 어떤방식으로든 사용하게되는 컨텐츠입니다. 다만 현 시점에서 이 아이콘을 전부 이미지화 하여 사용하는 웹사이트는 '매우 좋지 않은' 웹사이트로 볼 수 있습니다. 모든 아이콘을 이미지화 할 경우 문제점은 다음과 같습니다. - 유지보수 및 수정하게 될 때 파일관리가 쉽지 않으며 사용하지 않는 불필요한 이미지가 서버에 쌓인다. - 혹여 제때제때 삭제하여 서버에 불필요한 이미지가 쌓이지않더라도 사용하지 않는 아이콘의 경로로 일일이 폴더를 찾아 해당 아이콘을 삭제하는 작업을 하여 불필요한 시간을 소모한다. - 아이콘의 사이즈 조절에 있어서 이미지파일은 자유롭지가 못하여 사이즈별로 제각각 이미지화 해야해서 불편하다. - 같은 아이콘에 컬러를 변경하는등의 hover효과를 사용하게 되..

Tip/TipContent 2022.02.07