J.BF Story

다음 코드와 같이 'static' 요소와 'absolute' 요소를 혼합해서 사용하는 경우에 'static' 요소가 'absolute' 요소보다 앞으로 와야하는 상황이 있었다. 그러나 'static'요소에 아무리 'z-index'를 두어도 앞으로 배치되지 않았다. static absolute 이 경우 position을 'static'에서 'relative'으로 변경해주면 된다. static absolute 요소가 쌓이는 순서가 어떻게 되는지 궁금하여 다음과 같이 코드를 만들어서 테스트를 해봤다. 1. fixed 2. sticky 3. relative 3-A. absolute in test-relative 4. absolute 5. static 'static' 요소는 가장 뒤에 위치한다. 'static'을..

가상요소 ::after, ::before에서 사용한 svg에 대하여 크기 조정이 되지 않아 사용했던 방법이 'background'를 활용하는 것이었다. (포스팅한 링크 참고) [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url) [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (background) 원인을 찾아보다가 svg 파일의 값에 width, height값이 고정적으로 설정되어 있는 것을 볼 수 있다. svg 파일 값은 'vs-code'로 svg파일을 열면 확인이 가능하다. 다음은 크기 조정이 가능했던 svg파일과 크기 조정이 불가능했던 svg파일 설정 차이이다. 고정 크기 값을 가지고 있는 svg를 'con..

저번에는 svg를 ::after, ::before의 'content'로 표현하여 요소를 꾸며주었다. [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url) [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url) 가상요소 ::after, ::before에 'content'에 svg 이미지를 로드하여 요소를 꾸며줄 수 있다. 이렇게 구성하면 svg를 나 를 통해 따로 나타낼 필요없이 class만으로 표현이 가능하기 떄문에 관리하기 편하고 jbf-story.tistory.com 하지만 고정 크기를 가진 svg을 사용하여 작업했을 시 다음과 같은 문제가 발생했다. width, height를 설정해도 svg..

전체 요소에 'font-family'를 통해 글꼴을 정해줄 때 처음에는 다음과 같이 요소를 통해 적용하였다. 그러나 , , 요소에는 글꼴이 적용되지 않은 것을 발견하였다. Hello world Hello world Hello world 따라서 다음과 같이 요소 뿐만 아니라, , , 에도 'font-family'를 적용시켜줘야한다. Hello world Hello world Hello world

상단에 고정 헤더를 가진 웹페이지에서#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 ..

가상요소 ::after, ::before에 'content'에 svg 이미지를 로드하여 요소를 꾸며줄 수 있다. 이렇게 구성하면 svg를 나 를 통해 따로 나타낼 필요없이 class만으로 표현이 가능하기 떄문에 관리하기 편하고 코드가 간결해져 가독성도 올라간다. 예시는 다음과 같다. more ** svg의 width를 꼭 설정해주어야한다. ** svg가 기본적으로 차지하는 빈 공간의 면적을 'line-height'을 통해 줄일 수 있다. (텍스트도 마찬가지)

보통 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' 값을 부모에게 상속받아서 그런 것이다) 부모 요소에 영향을 받을 수 있어 ..