익숙한 크롬 브라우저에선 글꼴 적용이 잘 되는데...항상 사파리 브라우저가 문제 ㅜㅜ 크로스 브라우징 생활화해야하는데 아직 쉽지 않다.. 그러므로 사파리 브라우저에서 글꼴 적용하는 방법을 기록해보려한다. 보통은 html, body {font-family: "Pretendard";} 이런식으로 많이 적용하는데,사파리 브라우저의 경우 적용이 안될 수도 있다. 그래서 항상 지정 폰트 뒤에 sans-serif를 붙여줘야한다. html, body {font-family: "Pretendard", sans-serif;} 또한 웹폰트 방식 중 @import 방식을 사용한다면 import링크를 css파일 최상단에 적어야한다.

반응형 작업할 때 분기점이 항상 헷갈려서 기록하려한다. 반응형 (미디어쿼리) 분기점 뷰포트 설정 뷰포트(viewport)는 웹 페이지를 표시하는 브라우저의 영역을 말합니다. 모바일 기기에서 웹 페이지를 렌더링할 때, 뷰포트는 디바이스의 화면 크기에 맞게 조정되어야 합니다. 이것을 구현하기 위해 뷰포트 메타 태그를 사용합니다. HTML 문서의 태그 안에 태그를 추가하여 뷰포트를 설정할 수 있습니다. 대부분의 모바일 브라우저는 이 설정을 읽고 웹 페이지를 올바르게 렌더링합니다. 이거 head 안에 추가해야 작동함 ,, ㅇㅇ 분기점 /* pc, 태블릿 가로 (해상도 768px ~ 1023px) */ @media all and (min-width: 768px) and (max-width: 1023px) { } ..

안녕하세요~! 오늘 블로그는 수업시간에 배우면서 부족하다고 느꼈던 레이아웃 중에서도 미디어 쿼리! 반응형 웹에 대해 알아보려고 합니다~~ 레이아웃 짜는 것까진 어느 정도 이해했는데.. 반응형 웹에서 또 막히더라고요.. 그러니 열심히 공부해야겠어요!! 미디어 쿼리 (media query) 다양한 디바이스들이 웹브라우징을 지원하면서 뷰포트(viewport) 너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 1. 기본적인 사용방법 @media (조건문) { 실행코드 } 를 사용하는 방법은 권장하지 않습니다. (브라우저는 모든 css를 내려받기 때문에 사이즈가 커짐) 2. 모바일/데스크톱..

안녕하세용@_@ 오늘은 CSS 문자 관련 스타일에 대해 알아보겠습니다! 여러분들은 사이트에서 중요한게 뭐라고 생각하시나요? 전 내용도 당연히 중요하지만 개인적으로 폰트나 자간 행간등을 중요하게 본답니다!! 보기 좋은 떡이 먹기도 좋다는 말이 있잖아요~~? 그래서 이번엔 그와 관련된 스타일을 정리해볼게요! 책을 참고해보니 총 13가지가 있네요~ ✨font-family 폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. 표현방법 font-family: 사용자지정 폰트; ✨font-size, 단위의 고찰 폰트의 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우..

안녕하세요~!! 오늘은 레이아웃 구성 유형의 마지막, grid 유형을 공부해볼게요~! grid 유형을 사실상 많이 쓴다고 합니다. ㅎㅎ 그러니까 잘 알아둬야 하겠죵~~? grid css grid는 기존의 display:flex를 대체할 수 있는 새로운 display property라고 생각하시면 됩니다. flex와 grid의 가장 큰 차이점은 flex는 1차원 레이아웃인 반면, grid는 2차원 레이아웃이라는 점입니다. 2차원 레이아웃을 지원하기 때문에 행과 열 모두에서 요소를 정렬하고 이동하는 데 사용할 수 있는 많은 도구를 제공합니다. grid는 flex에 비해 더 다양하고 고차원적인 레이아웃이 가능해진다는 장점이 있습니다. display: grid; #️⃣grid 속성 속성 속성 설명 grid gr..

안녕하세요 ~~ 오늘도 어김없이 돌아온 코딩 공부 시간 ㅎㅎ 오늘은 레이아웃을 짤 때 중요한 flex 유형을 공부해볼겁니다. 저번엔 float유형을 살펴봤는데 flex유형도 중요하니 차근차근 알아봅시당. flex flex는 css에 display 속성 중 하나로써 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. 박스 레이아웃을 작성할 때 사용되는 아주 유용한 방법입니다. flex를 쓸 때에는 필수 지정 요소들이 있는데, 어떤 건지 살펴볼게요! display: flex; 속성 구분 flexbox는 부모요소인 flex container와 자식 요소인 flex item에 정의하는 속성이 다릅니다. 전체적인 정렬에 관련된 속성..

안녕하세요~ 오늘도 어김없이 돌아왔습니다 ㅎㅎ 저번엔 CSS 선택자중 id선택자와 class선택자에 대해 알아보았는데요, 오늘은 선택자 14가지를 간략하게 예제를 통해 알아볼겁니다! 자 그럼 얼른 알아보러 가볼까요~~? 일단 선택자의 개념은 저번에도 알아보았지만! 까먹었을 수도 있으니... 한 번 더 짚고 넘어가겠습니다. ✅선택자 선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 그럼 선택자의 종류 14가지, 간단하게 살펴볼게요~!! 1️⃣type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 예제1) 다음 예제에서는 p 태그 안의 글자를 갈색으로 표시하도록 속성을 부여하고 있습니다. See the Pen type 선택자 by YeoDaSeul..

안녕하세요~ 오늘은 레이아웃에서 중요하게 다뤄지는 float에 대해 살펴볼거에요! 레이아웃은 기본중에 기본이니 float에 대해 잘 알아보고, 익혀두는게 좋겠죠? 우리 레이아웃을 구성하다보면 구성한 요소들이 세로로 나열될 때가 있죠? 원래 block요소라서 세로로 나열이 되지만 float을 이용하면 가로로 배치 하지만 float을 지정하면 float을 해제하는 방법도 알아야한다는 사실! float에 대해 간단하게 설명하고 예제와 같이 살펴볼게요~ 👌float float 요소는 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float한 박스에 가로 사이즈를 지정해 주어야 크로스브라우징이 됩니다. 그러나..