• 

  [웹폰트 사용방법] 웹에 최적화된포맷 - woff2 웹사이트 성능을 최적화하는 방법: 가벼운 웹폰트 포맷 선택하기! 웹폰트 종류가 여러개 인데, 무엇을 선택 해야 할지 확실히 잘 모르는 경우가 있어요.  폰트 선택은 웹사이트 로딩 속도와 사용자 경험에 직접적인 영향을 미치기에 중요합니다!    예를들어 저는 pretendard 서체를 사용하려고 하는데, 홈페이지에서 제공하는 폰트의 포맷 종류가 아래와 같이 여러개 입니다.  출처 : https://cactus.tistory.com/306?category=1007051   폰트 포맷 종류.otf, .ttf: 고품질이지만 무겁고, 웹에서는 비효율적..woff, .woff2: 웹에 최적화된 경량 포맷. 특히 .woff2는 파일 크기가 작아 로딩 속도가 빠름..woff2 포맷의 이점파일 크기 작고, 압축률 높아 .. 댓글 0 2024.08.29

• 

  [css]Flex아이템 li 요소 4개씩 한 줄에 배치하기 웹 개발 시 리스트(ul, li) 요소를 사용해 메뉴나 갤러리 등을 구성할 때,Flexbox를 이용하면 손쉽게 원하는 레이아웃을 만들 수 있습니다.이번 글에서는 ul 안의 li 요소를 4개씩 한 줄에 배치하는 방법을 알아보겠습니다. 1. 기본 Flexbox 설정ul.news { display: flex; padding: 0; margin: 0; list-style: none;}이렇게 하면 li 요소들이 가로로 일렬로 배치됩니다. 2. li 요소 4개씩 한 줄에 배치하기(모바일에서는 2개씩 배치) li 요소를 4개씩 한 줄에 배치하려면, 각 li 요소의 너비를 25%로 설정합니다.이는 한 줄을 네 등분해서 li 요소들이 균등하게 배치되도록 하기 위함입니다.ul.news li { .. 댓글 0 2024.08.26

• 

  [CSS] 변수를 음수로 변환하는 방법 CSS 변수를 사용하면 여러 스타일 속성 값을 쉽게 재사용할 수 있어유지보수가 편리하고 코드의 가독성도 향상됩니다. 종종 CSS 변수 값을 음수로 변환해야 할 때가 있습니다. 예를 들어 아래 처럼 마진 값을 주었을 때,  위 아래 마진이 40px이 되어 버리죠.리액트나 next js 처럼 모듈이나 컴포넌트를 활용하는 경우, 마진 병합이 일어나지 않게 되어 해결 방법으로 같은 변수를음수로 적용하기로 했습니다. 1. CSS 변수 정의CSS 변수를 정의합니다. 공통 마진 20px 변수로 지정합니다.  :root { --margin_20: 20px;}  2. calc() 함수를 사용하여 변수 값을 음수로 변환하기CSS에서 음수 값을 적용하려면 calc() 함수를 사용해야 합니다.calc() 함수는 CSS 변수.. 댓글 0 2024.08.02

• 

  [웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) 웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다. 가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외) 디자인 작업할때 자주 쓰는 해상도와 높이값 1. 1920 x 1080일명 FHD(Full High Definition)라고 불리는 해상도24인치 데스크탑, 보편적인 모니터 크기의 해상도XD 나 figma 에서 작업시 뷰포트는 1053px💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정 2. 1536 x 864FHD 노트북의 해상도1920 x 1080에 125% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 댓글 0 2023.07.06

• 

  일러스트 활용 - 사진 이미지를 벡터(일러스트로) 바꾸기 + 색상 보정 사진 일러로 바꾸기 사진 이미지(jpb, png)등을 벡터(ai)로 바꿔야 하는 때가 종종 있다. 출력을 해야 하거나, 고해상도의 이미지를 원할때가 있기 때문에. 이미지 확대시 벡터 확대시 벡터 색상 보정 ** 일러에서도, 디테일하게 색상 편집과 보정이 가능하므로, 포토샵까지 가서 작업할 필요가 없다! 이미지 벡터로 변경 하기 1. 이미지 불러오기 2. 이미지 포함 시키기 * 포함을 눌러주면 X 자 모양이 사라짐 ( 이걸 안누르면 나중에 이미지가 안불러와 짐- 현재는 경로만 갖고온 상태 ) 3. 이미지 추적 - 충실도가 높은 사진 이미지 벡터화 진행 중 **색이 많은 이미지나, 배경이미지 같은 것으로 하면 너무 느려 지므로, 컴퓨터가 계산하는데 너무 오래 걸리므로 가급적 작은 이미지등에만 사용 하는게 좋.. 댓글 0 2022.03.20

• 

  [일러스트, 포토샵]일러스트 왜곡, 둘러싸기 형태 아웃라인 따기 일러스트- 폰트 아치형 만들기 폰트를 쓴 뒤에 둘러싸기 효과를 주면 폰트를 아치형으로 바꿀 수 있다. 부채꼴 스타일로 주면 아치형의 글자가 완성! 텍스트에 따라 모양이 다소 부자연 스럽게 나오는 경우가 있다. 자간 간격을 주어도 해결이 안될 경우, 폰트 아웃라인을 따 줘야 한다. 오브젝트 - 둘러싸기왜곡 - 확장 메뉴 보통은 Ctrl+o 를 눌러 주면 텍스트의 아웃라인이 만들어 지지만, 둘러싸기 왜곡을 적용한 경우엔 위 메뉴로 들어가서 확장을 해줘야 한다! 계속 Ctrl+o 눌러 주다가.. 안대서 찾아봄... 후 .. 댓글 0 2022.03.25