J.BF Story

보통 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%

다른 크기의 글자를 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에서 재사용성이 많은 속성 값을 사용자가 변수로 등록하여 사용할 수 있다. 전반적으로 사용되는 메인 색상, 레이아웃, 기본 글씨 크기 등에 활용하여 일괄적으로 값 변경에 용이하고 변수명을 통해 값의 의미를 쉽게 파악할 수 있다. 변수선언 --{variable-name}: {value}; 변수 이름 앞에 '--'을 붙여야함 원하는 css값 설정 :root { --main-purple-color0: #D784FF; --main-layout-width: 1920px; --main-font-regular: 300; } 변수사용 var(--variable-name[, default]); 'var()'함수에 변수명을 넣어 변수값 적용 [option] 두번째 인자에 기본값을 설정할 수 있음 (변수가 선언되지 않..

Flex를 요소를 배치할 시 일부 요소만 우측/좌측 정렬이 필요할 때가 있다. 이 경우 우측/좌측 정렬이 필요한 요소에 'margin-left:auto'/'margin-right:auto'을 사용하면 쉽게 정렬이 가능하다. 우측 정렬: 'margin-left: auto' 좌측 정렬: 'margin-right: auto' 예시는 다음과 같다. LOGO menu1 menu2 menu3 button1 button2

아이폰 모바일 웹에서 a 태그를 터치했을 시 회색의 하이라이트가 생간다. 하이라이트를 없애기 위해서는 다음과 같이 비표준 CSS 속성인 '-webkit-tap-highlight-color'을 투명으로 설정한다. a { -webkit-tap-highlight-color: transparent; }