Front (44) 썸네일형 리스트형 front 개발하면서 가장 많이 하는 노가다를 정리해보자 1. 컨텐츠 1) 내부 컨텐츠 정렬 - 컨텐츠 중앙정렬하기 - 컨텐츠 양끝으로 정렬하기 - 컨텐츠 별 너비 1/n씩 가져가기 - 컨텐츠 행 또는 열로 배치하기 ※ flex display가 제일 편하다. · 빈 레이아웃으로 맞추는 것 비추 2) 컨텐츠 크기 및 간격 조정 - margin 넣기 - padding, border가 크기에 영향주는 것 고려 - 크기 너비 적용하기 3) 컨텐츠 내용이 넘어가는 것에 대한 예외처리 - 'text'인 경우 ellipsis - '카드'인 경우 overflow hidden 처리 - 스크롤바 처리 · 스크롤바는 너비를 차지하므로 overlay처리 혹은 숨기기 · 스크롤바에 따라서 다음내용 가져오는 서비스 호출해서 append하기 - 펼쳐보기, 접기 - flex:1, frex.. min.css / min.js 등 min이란 무엇인가 템플릿을 다운받아보면 min파일을 자주 보게된다. min파일은 minify 축소하다 의 줄임으로 공백과 줄바꿈을제거하여 용량을 줄인 파일이다. 덕분에 전송량을 줄일 수 있다. css파일은 가독성을 위해 개발할 때 사용하고 이를 압축하여 min.css파일을 만들어 실제 서비스에 사용한다. 따라서 min.css파일을 수정해야 웹에는 적용이 된다 min.css로 변환해주는 API : https://cssminifier.com/ min.js로 변환해주는 사이트 : http://javascriptcompressor.com/ min 파일( javascript, css, html, json )을 읽기 쉽게 변환해 주는 사이트 : http://jsbeautifier.org/ CSS파일이 바로 적용이 안되면 캐시삭제를 .. CSS 속성 선택자 [att] 값에 관계 없이 해당 속성(att)을 가진 요소 [att=val] 속성(att)이 val인 요소. 이런 형태는 많이 봐서 쉽게 이해가 될 것입니다. 예) span[class="example"] ==> class가 정확하게 example인 span [att~=val] 속성(att)의 값(val)이 공백으로 분리된 단어인 요소. 예) a[rel~="copyright"] { ... } - rel에 copyright 단어가 포함된 "a" 요소 [att|=val] 속성(att)의 값이 정확히 "val"이거나 "val"로 시작하고 곧바로 "-"(U+002D)이 붙는 경우. 다음 예를 살펴보면 쉽게 이해가 되실 것입니다. 예) a[hreflang|="en"] - hreflang 속성이 "en"으로 시작하는.. 로컬 스토리지, 세션 스토리지 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 대해 알아보자. 로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이고 간단한 키와 값을 저장할 수 있다. 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장하면 된다. 하지만 비밀번호같은 중요한 정보는 절대 저장하면 안된다! 클라이언트에 저장하는 것이기 때문에 언제든지 털릴 수 있다. 로컬 스토리지랑 .. html, css 특이사항 정리 1. 블록-인라인 - 인라인은 블록을 포함할 수 없다. - p 는 블록이지만 인라인만 포함가능 2.박스 모델 (margin 과 padding) 특이사항 - margin이 겹칠경우 더 큰 것에 적용된다. - widht와 height는 padding과 border를 제외한 길이이다. 3. 부모 요소의 상속을 받는 스타일은 초기화 항목에 넣지 마라 - ex) font-size : 12px 4. IE 크로스 브라우징 - 주석 - IE핵 ex) div{ *color : blue} 5. 선택자 - 기본 선택자(관계) - 가상 클래스 선택자(상태) · 가상 선택자 선언 순서 :link -> :visited -> :hover -> :active - 선택자 우선순위 · !important -> em style -> #(.. 요소 가운데 정렬 HTML에서 div 안에 div를 수직으로 가운데 정렬하는 방법에 대해서 알아볼까 해요. 수직 정렬은 까다로워서 거의 억지로 하는 것 같아요. 아래 html 태그는 실험 대상이에요. 이해를 돕기 위해 기본적으로 정렬과 상관없는 CSS는 태그에 박아버렸어요. 위의 html 태그를 브라우저에서 열면 이렇게 그려져요. 파란색 div를 수직으로 정렬해볼게요. html은 건드리지 않을거에요. 1. 테이블 parent div 태그를 테이블처럼 만들어서 vertical-align 속성을 사용할 수 있게 하는 방법이에요. .parent { display: table-cell; vertical-align: middle; } 2. 포지션 직접 조정 child div 태그의 위치를 직접 가운데로 조정하는 방법이에요. ( p.. 크롬 개발자도구에서 HTML 작업하기 https://miaow-miaow.tistory.com/89 이벤트 종류 https://developer.mozilla.org/en-US/docs/Web/Events 이전 1 2 3 4 5 6 다음
