본문 바로가기
반응형

개인공부

 (206)
css 이미지 비율로 유지하기 원본유지 이미지 CSS 작업을 하다보면 원본의 이미지 비율을 그대로해서 높이와 넓이를 설정해야할 때가 있습니다. 그럴때 를 사용하게 된다면 어려움이 발생합니다. % 나 vw속성을 이용해서 설정합니다. 이때 height대신 padding을 사용하여 높이를 설정할 수 있습니다. 단위 % padding-top = n % 비율 a:b 유지 => (b/a)*100 % ex ) 16:9 비율 적용 => (9/16) * 100 =56.25% .child { background: url('http://url) no-repeat top center; background-size: cover; padding-top: 56.25%; // 16:9 비율 => (9/16)*100=56.25 } 원본유지 .image { min-..
GULP SASS 연동 실습 TaskRunner 여러 기반의 TaskRunner들이 있으나 가벼움과 환경구축의 편리함으로 node.js 기반의 TaskRunner들이 많다. Robo (PHP) Rake (ruby) Blade (lua) Grunt (Node.js) Wiht is Node.js? 서버사이드에서 동작이 가능한 Javascript 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼 Multi Thread가 아닌 이벤트 기반 비동기 방식(non-blocking IO) NPM Node Packaged Modules node.js 에서 사용되는 모듈을 패키지로 모아놓고 이를 관리해주는 툴 package.json에 의존 모듈로 관리합니다. Gulp streaming bulid systems v..
SASS 사용법 및 기초 SSAS SSAS는 CSS PREPROCESSOR의 하나의 종류입니다.(전처리기) 브라우저에서 바로 읽을 수 있습니다. 문법오류나 오탈자가 있는 경우 알려줍니다. 반복적인 기능을 자동화 하는데 도움을 줍니다. SSAS : Syntactivally Awesome Sylesheets 장점 CSS COMPATIBLE INDUSTRY APPROVED FEATURE RICH LARGE COMMUNITY MATURE 개발된지 12년 되었습니다. FRAMEWORKS // scss, Sassy CSS ul { li { display: block; } } // sass ul li display: block // Compiled CSS ul li { display: block; } 설치하기 NODEJS/NPM 이용 nod..
렌더링의 변화과정 렌더링변화과정 렌더링은 인터넷이 만들어지는 시대에서부터 지금까지 여러 변화를 거치면서 지금의 웹 사이트 형태가 만들어졌습니다. 오늘은 웹 생태계가 어떠한 변화 과정을 바뀌어왔는지 알아보겠습니다. Static Sites 가장 기본적인 사이트 정적 사이트입니다. 정적 사이트란 어미 그대로 URI 요청시 HTML 문서자체를 브라우저에 주는 페이지입니다. 모든 페이지 메뉴들을 HTML하나로 만들어야하는 단점도 존재하지만 HTML,CSS,JavaScript, 이미지 등의 정적 파일만 CDN 등을 통해서 배포하면 별도의 서버를 운영할 필요도 없고 서버에 과부하도 동적페이지에 비해서 적습니다. 페이지내에서 다른 링크를 클릭하면 서버내에서 다른 Document 파일(html)을 가져와야합니다. Iframe 이러한 정적..
웹 렌더링 성능관련 키워드 PAIL Performance Model(사용자 중심 성능 모델) 즉각적 반응 애니메이션/스크롤 시 10ms 이내 Main thread의 유효 시간을 극대화 콘텐츠는 2s 이내 로딩, 사용자 입력 처리 가능 시점은 ~5s 이내 로딩과정 주소입력 리퀘스트 요청 데이터 처리 리스폰 받음 HTML을 브라우적 ㅏ처리 수많은 자원들을 크롬 개발자의 Network 탭에서 확인할 수 있습니다. 요소의 로딩 과정(Request - > Connect -> Response) Stalled : Request를 보내기전에 대기하는 시간 DNS Lookup : 도메인 명에 다른 주소를 조회하는 시간 Initial Connection : 서버와 브라우저간의 연결 설정 시간 Time to First Byte : 서버가 해당 요소의..
반복되는 컴파일 빌드 배포 - CICD란? 서론 면접을 가다보면은 객체지향, 함수형프로그래밍 ,SOLID, 클린코드 같은 프로그래밍 방법론적 질문들 뿐만아니라 DevOps에 일종인 도커, 쿠버네티스에 관해서도 많이 물어본다.. 아마 AWS를 이용해 백엔드개발자들이 MSA시스템을 구축으로 실시간으로 대용량 트래픽을 컨트롤하는것이 많기 때문에?? (추측일뿐.. 백수라) 이러한 질문들이 많은것 같습니다. 그 중에서도 얼마전에 CICD에 대한 질문을 받았는데 그냥 젠키스처럼 빌드 후 자동으로 배포하는 개념정도로만 대답했엇는데 한번 자세히 알아보려고합니다. CI/CD까지 갈려면 뭔가 스토리가 필요합니다. 먼저 애플리케이션을 구동할 프로그래밍을 위해서 소스 코드를 개발자가 작성합니다. 작성했으면 이제 프로그래밍 돌아가는게 아닙니다. 각각 언어별로 맞는 컴파..
HTML , CSS 깔끔하게 작업하기(Tip) UI/UX 작업을 하다보면 혼자하면 상관없지만 다른 사람과 공동으로 작업할 경우..시멘틱한 태그를 사용하지 못하고 깔끔한 코드를 만들 수가 없습니다. 내가 자주 실수하고 대충 했던 작업들에 대해서 피드백을 만들려고 합니다.아래 내용은 주관적인 저의 Tip입니다 (멘토 분들에게 피드백 받은 내용을 토대로 구성하였습니다.) 1. 태그 선택자는 위험하다.다음과 처럼 태그 선택자를 사용해서 속성을 주는것은 매우 위험한 일입니다. class 선택자를 이용해서 작업을 해주세요p , h1, mark{ color : red; } 2. body안에 바로 h1태그를 사용해서 작업을 해도 좋지만 태그를 이용해서 한번 감싸주면 스타일을 적용할 때 좋습니다. 3. 작업을 하다보면 태그안에 태그를 사용하는데 꼭 이 태그를 사용하..
시멘틱 마크업 간단한 정리 예제 콘텐츠 모델 HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다. 요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다. 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다. Content Models 의 7분류 Metadata Content (style, title, script) Flow Content (a, address, sub, table) Sectioning Content (article, aside, nav, section) Heading Content (h1, h2 ,h3 ...) Pharsing Content (텍스트 또는 문단 내부 레벨로 ..
반응형

티스토리툴바