서스포PAR_개발블로그

💖 CSS 미디어 쿼리(Media Query) 미디어 쿼리는 단말기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 사이트의 스타일(CSS)을 적용할 수 있습니다. 해상도 320px 이상 또는 768px 미만 -> 스마트폰 해상도 768px 이상 또는 1024px 미만 -> 태블릿 해상도 1024px 초과 -> PC 1. , , , 기타 다른 HTML 요소에 media 특성을 사용해 특정 매체만 사용하도록 할 때 사용합니다. 2. CSS @media, @import @규칙을 사용해 특정 조건에 따라 스타일을 적용할 때 사용합니다. 3. 모든 최신 브라우저에서 미디어 쿼리가 동작하지만, 만약 IE 8이하에서 동작해야하는 경우라면 polyfill 라이브러리를 사용합니다. @media only | not 미디어..

구글 API를 진행하면서 텍스트 줄 바꿈과 텍스트 (...) 자르기를 진행해 보았다. 내가 알던 CSS3지식을 더해 줄 수 있는 정리를 진행하고자 글을 작성하기로 하였다. 🎁 CSS3를 이용한 텍스트 처리에 대해 알아보도록하자! 🎁 ⭐ white-space p {white-space: nowrap;} white-space 속성은 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정합니다. 이 속성은 상속됩니다. 🪄 white-space 속성값 📌 normal : 기본값으로 글자 줄이 자동으로 바뀝니다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀝니다. 📌 nowrap : 줄 바꿈이 실행되지 않습니다. 즉, 콘텐츠가 다음 줄로 바뀌지 않습니다. 📌 pre : 줄 바꿈과 기타 공백이 유지됩니다. 이 가..

내가 만들 사이트의 썸네일과 제목을 설정하는 것을 인강에서 배웠다. 하지만 정확한 이론을 알지 못하고 따라한 것이기에 이번 기회에 더 깊게 배울 수 있도록 공부하기로 하였다. 🎁 하나하나 천천히 뜯어보고 알아보자! 🎁 💖 OG (Open Graph) 란? 해당 콘텐츠의 요약 내용이 "SNS에 게시되는데 최적화된 데이터"를 가지고 갈 수 있도록 설정하는 것 미리보기가 가능한 정보를 노출해준다 = 미리보기 화면 생성 오픈그래프 (OG, 오픈 그래프 프로토콜) 는 어떤 HTML문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜 🔊 (오픈 그래프) 프로토콜 프로토콜(Protocol)은 ..

회사 업무를 진행하다 디자인된 화면과 어울리지 않는 스크롤바를 커스텀을 하였다. 차후 이 지식이 나에게 도움이 될 것 같아 글을 작성하였다 🎁 스크롤 바 커스텀을 진행하여 나만의 홈페이지를 완성시키자! 🎁 💖 스크롤바 스타일 커스텀(Scrollbar Style Custom) 스크롤바 스타일에 대한 웹표준은 존재하지 않습니다. webkit 브라우저(크롬, 오페라, 사파리)에 한해서 가상요소를 사용하여 커스텀을 해줍니다. 스크롤바와 관련된 가상요소는 여러가지가 있지만 주로 사용하는 아래 3가지가 있습니다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤..

💖 기본 태그 웹 문서의 유형을 html로 지정문서를 html로 시작, 언어를 한국어로 지정   💖 문서 구조 태그 헤더 영역메인 영역콘텐츠 영역사이드 바 영역푸터 영역    내비게이션 영역,문서 내 다른 위치, 다른 문서로 연결할 때 사용독립적인 콘텐츠를 사용할 때콘텐츠 영역여러 소스 묶기    💖 텍스트 입력 , , , , , 제목단락줄 바꿈, 닫기태그 없음인용문, 들여쓰기 적용됨텍스트 굵게, 주로 중요한 내용일 때텍스트 굵게, 단순히 굵게 표시할 때텍스트 기울임, emphasis의 준말, 강조할 때텍스트 기울임, italic의 준말, 단순히 기울여 표시할 때텍스트 밑줄텍스트 취소선 줄임말참고 내용소스 코드작은 텍스트아래 첨자위 첨자공동작업문서에 새로운 내용 삽입공동작업문서에 기존 내용 삭..

float, position 말고 더 나은 그리드 레이아웃을 만들 수 있는 방법이 존재하지 않을까? 반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법을 알아보자! 💖 Flexbox [ Flexible Box module ] 1.Flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 2. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에서 효율적으로 요소를 배치, 정렬, 분산 할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다. 복잡한 계산없이 요소의 크기와 순서를 유연하게 배치할 수 있는 방식으로 Flexbox는 복수의 자식요소인 Flex ite..

프론트엔드 개발자가 아닌 마크업을 위주로 하는 웹퍼블리셔들은 대부분 일반 html5, css3을 작업하게 됩니다. 하지만 웹문서를 제작하는데 기본적인 프로그래밍 언어로 기본적인 이론을 알고지나가는것이 좋겠죠? 💖 HTML5[ HyperText Markup Language 5 ] 1. 웹 표준 기관인 월드와이드웹 컨소시엄(W3C)이 만들고 있는 차세대 웹 언어 규격이며 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, 웹페이지를 구성하는 데 있어 지배적인 역할을 하는 마크업 언어(markup language)이다. 2. HTML5는 문서 작성 중심으로 구성된 기존 표준에 그림, 동영상, 음악 등을 실행하는 기능까지 포함시켜 별도 설..