목록DEV (78)
J.BF Story
PHP 내장 함수인 array_filter을 통해 조건에 부합하는 배열 요소만 필터링할 수 있다. 공식 문서 PHP: array_filter - Manual Depending on the intended meanings of your "empty" array values, e.g., null and empty string, vs. an integer 0 or a boolean false, be mindful of the result of different filters. null, 'nullstring' => '', 'intzero' => 0, 'stringzero' => '0', 'false' => www.php.net 다음과 같은 방법으로 콜백함수와 모드를 통해 필터링할 수 있다. 명명 필터 함수 사..
[CSS] 전체 요소에 font-family 적용하기
전체 요소에 'font-family'를 통해 글꼴을 정해줄 때 처음에는 다음과 같이 요소를 통해 적용하였다. 그러나 , , 요소에는 글꼴이 적용되지 않은 것을 발견하였다. Hello world Hello world Hello world 따라서 다음과 같이 요소 뿐만 아니라, , , 에도 'font-family'를 적용시켜줘야한다. Hello world Hello world Hello world
[CSS] 고정 헤더에서 anchor 기능 사용 시 오프셋 설정
상단에 고정 헤더를 가진 웹페이지에서 #anchor 를 통해 해당 anchor로 스크롤 할 시 고정 헤더에 의해 가려져 안보이는 현상이 일어났다. 테스트 코드는 다음과 같다. header welcome to anchor test test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This ..
[CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url)
가상요소 ::after, ::before에 'content'에 svg 이미지를 로드하여 요소를 꾸며줄 수 있다. 이렇게 구성하면 svg를 나 를 통해 따로 나타낼 필요없이 class만으로 표현이 가능하기 떄문에 관리하기 편하고 코드가 간결해져 가독성도 올라간다. 예시는 다음과 같다. more ** svg의 width를 꼭 설정해주어야한다. ** svg가 기본적으로 차지하는 빈 공간의 면적을 'line-height'을 통해 줄일 수 있다. (텍스트도 마찬가지)
[CSS] absolute 요소 컨테이너 외부에 배치하기
보통 absolute를 사용하여 다음과 같이 설정하여 컨테이너 내부에 요소를 배치하였다. left 0 top 0 right 0 top 0 left 0 bottom 0 right 0 bottom 0 absolute 요소를 컨테이너 외부에 배치하고 싶다면 다음과 같이 '100%' 값을 이용하여 요소를 컨테이너 끝으로 배치하면 된다. right 100% left 100% top 100% bottom 100% right 100% top 100% left 100% top 100% right 100% bottom 100% left 100% bottom 100%
[CSS] Flex에서 글자 라인 맞추기
다른 크기의 글자를 flex의 'align-items:flex-end'를 통하여 나열하면 다음 예시와 같이 요소들이 flex 컨테이너의 아래 배치되지만 글자 라인은 맞지 않는다. Hello World 안녕 세상아 이 경우 'align-items: baseline'을 이용하면 글자 라인에 맞출 수 있다. Hello World 안녕 세상아
** viewport: 사용자에게 보여지는 영역 % 기준: 부모 요소 윈도우 크롬에서 보여지는 스크롤바 제외 vw Viewport Width 기준: viewport 윈도우의 크롬에서 보여지는 스크롤바 포함 vh Viewport Height 기준: viewport 윈도우의 크롬에서 보여지는 스크롤바 포함 vmin Viewport Minimum 기준: viewport의 width와 height 중 크기가 작은 것 vmax Viewport Maximum 기준: viewport의 width와 height 중 크기가 큰 것
em, rem는 CSS의 상대 길이를 지정하는 단위로, 반응형 웹사이트를 만들 때 사용된다. 공통점 em, rem 모두 배수로 값을 지정하며, 폰트 크기(font-size)를 기반으로 계산된다. em, rem은 font-size, padding, margin 등에 사용한다. 크기 계산 예시 폰트크기가 16px 일 경우, 2rem = (16*2)px = 32px 2em = (16*2)px = 32px 차이점 둘의 큰 차이점은 어떤 'font-size'를 기준으로 하는가이다. em 'font-size' 기준: 지정된 요소 (** 주의: 간혹 부모 요소에 의해 영향을 받는 것처럼 보일 수 있는데, 이는 자식 요소가 'font-size' 값을 부모에게 상속받아서 그런 것이다) 부모 요소에 영향을 받을 수 있어 ..
[CSS] 사용자 지정 속성(변수) 사용
CSS에서 재사용성이 많은 속성 값을 사용자가 변수로 등록하여 사용할 수 있다. 전반적으로 사용되는 메인 색상, 레이아웃, 기본 글씨 크기 등에 활용하여 일괄적으로 값 변경에 용이하고 변수명을 통해 값의 의미를 쉽게 파악할 수 있다. 변수선언 --{variable-name}: {value}; 변수 이름 앞에 '--'을 붙여야함 원하는 css값 설정 :root { --main-purple-color0: #D784FF; --main-layout-width: 1920px; --main-font-regular: 300; } 변수사용 var(--variable-name[, default]); 'var()'함수에 변수명을 넣어 변수값 적용 [option] 두번째 인자에 기본값을 설정할 수 있음 (변수가 선언되지 않..
