디자인과 개발 그 사이

1.정중앙으로 배치 html LOGIN css * {margin: 0; padding: 0; box-sizing: border-box;} h2 {text-align: center; padding-bottom: 10px;} li {list-style: none; padding: 5px 0;} input {width: 100%; padding: 5px;} .wrap { width: 100%; background-color: cadetblue; /* 높이 값이 있어야 가운데 위치 가능 */ height: 100vh; /* flex 가운데 중앙으로 배치 */ display: flex; justify-content: center; align-items: center; } .loginBox {width: 300px..

실무를 하면서도, 테스트에서도 아주 기본이고 단골 중에서도 단골인 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..

웹폰트 사용하기 @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..

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..

가장 많이 사용 가는 코드 / 사용 예제 바로 가기 🚀 white-space 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정 normal : 글자 줄이 자동으로 바뀜, 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀜 (기본 값) nowrap : 줄 바꿈이 실행되지 않음 즉, 콘텐츠가 다음 줄로 바뀌지 않고 한줄로 표현 pre : HTML원본 텍스트 그대로 표시, !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원 pre-wrap : HTML원본 텍스트 그대로 표시하지만, 영역내 줄 바꿈을 인식 pre-line : 문자를 기준으로 줄을 나눔 css .box {width: 200px; padding: 10px; border: solid 1px #000;} .normal {white-spac..