디자인과 개발 그 사이

실무를 하면서도, 테스트에서도 아주 기본이고 단골 중에서도 단골인 float 해제하기. 몇가지 방법이 있지만 실무에서 가장 많이 사용하는 방법 기록 일단 float을 사용하면 아래와 같은 현상이 일어남 float을 이용하면 생기는 현상 확인 html float을 이용하면 생기는 현상 확인 css .float {float: left;} .box {border: solid 1px #000; width: 100px; height: 100px;} .nextContent {width: 300px; height: 200px; background-color: skyblue;} float을 지정한 영역은 떠있는 상태로 지정이 되서 높이 값이 인지를 못함. 그래서 다음에 오는 영역이 떠있는 부분을 대신 채움. 방법1: ..

웹 반응형 작업을 하면서 크롬 모바일 모드나 다른 디바이스에는 문제 없이 보이던 텍스트 들이 몇몇 아이폰 모바일 웹으로 화면을 볼때 어떤 들은 이상하게 크게 보이는 경우가 있다. IOS의 경우 뷰포트가 변경되면 자동으로 폰트 크기를 조절하기 때문이라고 한다. 텍스트 크기 조정을 위한 속성 text-size-adjust 표준이 아니므로 벤더를 넣어서 사용!! html, body{ -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ } auto ..

기본적으로 모바일 브라우저는 페이지의 상단 또는 하단에 도달하면 바운스효과(ios) 또는 페이지 새로고침을 제공합니다. (크롬, 사파리) 안드로이드 일경우 상단 스크롤 경계에 부딪히면 빛이 납니다.(글로우 효과) 스크롤 콘텐츠 페이지 위에 스크롤 콘텐츠가 있는 대화 상자가 있는 경우 대화 상자의 스크롤 경계에 도달하면 기본 페이지가 스크롤되기 시작합니다. 이를 scroll chaining 스크롤 체이닝 이라고 합니다. 이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. (스크롤 박스에만 적용되는 속성) overscroll-behavior: auto; 기본값, 요소에서 시작된 스크롤은 상위 요소로 전달 (상자의 스크롤 경계에 도달하면 기본 페이지가 스크롤되기 시..

가장 많이 사용 가는 코드 / 사용 예제 바로 가기 🚀 미디어 쿼리(Media Queries) 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 @media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {실행문} only 또는 not only : 다음에 오는 조건을 지원하는 브라우저에서만 미디어 쿼리를 적용, 생략시 기본값 not : 다음에 오는 조건을 제외한 모든 미디어 유형에만 적용 미디어 유형 미디어별로 적용할 CSS를 따로 작성하는 것, 생략시 all로 적용 기기명 설명 all 모든장치 print 인쇄 장치 screen 컴퓨터 화면 장치 또는 스마트 기기의 화면 tv 영상과 음성이 동시에 출력되는 장치 projection..

viewport 필요한 이유 모바일 브라우저(사파리, 크롬 등)는 기본 정책으로 Default 뷰포트 너비를 980px으로 책정하고 화면에 맞게 비율을 줄여서 보여준다. 이 때문에 PC 환경에서 제작된 웹사이트는 모바일 환경에서 확인했을 때는 내용이 작아져 버리는 상황이 생김 다시 말해 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것이다. 따라서 웹 사이트를 만들 때 뷰포트에 대한 설정을 해주어야 이러한 문제를 해결하고, 반응형 웹사이트를 제대로 동작시킬 수 있다! 가장 많이 사용하는 meta viewport 기본설정 👍 width=device-width : 콘텐츠를 표현할 넓이 ('디바이스 크기에 맞추겠다' 고 선언) intial-scale=1 : 초..

웹폰트 사용하기 @font-face : 사용자 컴퓨터에 폰트가 설치 되어있지 않아도 서버에서 내려받아서 사용할 수있는 방법 @font-face 설정하기 @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 900; src: local('Pretendard Black'), local('Pretendard-Black'), url(../fonts/Pretendard-Black.woff) format('woff'); } @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 800; src: local('Pretendard ExtraBold'), local('P..

meta CEO meta 태그는 페이지의 가장 처음에 수집되는 정보 기본 meta 페이지 제목 title : meta 태그는 아니지만 사이트 제목에 해당하는 태그 description : 해당 페이지의 설명글, 문장으로 표현 keywords : 페이지에 들어간 내용의 키워드들을 단어로 적용, 쉼표로 구분 ※ 참고 : 검색엔진은 keywords의 영향보다는 description에 더 많은 영향을 받음 sns meta / url 이미지 og : 페이스북에 정보를 제공 twitter : 트위터에 정보를 제공 ※ og, twitter 이 태그들은 페이스북과 트위터에만 영향을 주는 것이 아닌, 네이버나 카카오톡 등에서도 활용!!!! ※ 카카오톡에 url을 보냈을 때 나오는 이미지나 제목에도 적용!!! title ..

table를 그냥 만들면 칸마다 공간이 생긴다. 이를 없애기 위해 기본으로 넣어두는 값이 있다. 바로 아래 두가지 이다. border-spacing: 0; border-collapse: collapse; html 제목 제목 제목 가로 합친 제목 세로 합친 내용 내용 내용 가로 합친 내용 내용 내용 내용 내용 css .table { border-spacing: 0; border-collapse: collapse; } .th, .td { padding: 5px; border: solid 1px #000; text-align: center; font-weight: 400; } 결과 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 결정 border-s..