내직업은 IT종사자 (44) 썸네일형 리스트형 [css] display: flex 완벽 정리, flex container속성, flex item속성 2편 목차 flex-basis flex-shrink flex-grow flex align-self order Flex item에 적용되는 속성들 1. flex-basis (기본값 auto) flex-basis: auto (default) flex-basis: 0 / 50% / 300px/ 10rem / content 등이 올 수 있습니다. flex-basis는 아이템의 기본 크기를 설정하는 것입니다. width와 heightd값과 별반 차이가 없어보이지만 flex-direction(flex container에 적용하는 속성) 값에 따라 축이 바뀝니다. flex-direction:row로 설정하면 flex-basis는 가로 값이 되고 flex-direction:column으로 설정하면 flex-basis는 .. [css] display: flex 완벽 정리, flex container속성, flex item속성 1편 목차 display: flex의 브라우저별 지원현황 display: flex의 html 코드구조 flex의 container(껍데기)에 적용하는 속성들 IE에서 호환안되요... 등 여러 이유로 쓰기를 망설여왔던 display: flex, float과 inline-block을 대신해서 사용하곤 했었습니다. 근데 float은 clear: left,right,both로 해제를 해줘야 다음 요소에 영향이 안가구, inline-block으로 요소를 나열하면 의도하지 않은 여백이 생겨서 부모 요소에 다른처리를 해줘야하는 불편한점이 있엇습니다. 이제는 display: flex와 grid를 적절하게 사용하는 것이 여러모로 장점이 많더라구요 알고보면 스타일 적용하는것도 더 간편합니다! 1. display: flex 브라.. 로드밸런싱(Load Balancing)이란? L4 vs L7의 차이점, 로드밸런싱 알고리즘 목차 로드밸런싱이 필요한이유 로드밸런서란? 로드밸린싱의 종류 l4,l7의 차이점 1. 로드밸런싱이 필요한 이유 "헐 서버 다운됬다.." 서버가 하나일 때 트래픽이 적으면 서버는 문제없이 응답을 해줄 수 있으나, 트래픽이 서버 한개로 감당할 수 없는 양이 되는 순간 서버는 다운될 것이고, 서비스 또한 작동을 멈출 것입니다. 그러면 상장기업이면 주가에 영향을 미치고 개미님들의 눈가가 촉촉해질 수 있습니다. 1.1 서버로 과도하게 몰려 작동을 멈추지 않게 해결하는 방법은? 스케일 업: 서버의 인스턴스 성능을 올리는 방식 즉, 서버의 하드웨어 성능을 업그레이드 하는 방식입니다.(수직적 확장), CPU의 코어 수를 증가시키거나, RAM을 추가하는 방법 등으로 서버의 성능을 업그레이드 해줍니다. 장점 하나의 서버.. URL 의 오타인줄만 알았던 URI , URL과 URI의 차이점 URL , URI 글자가 비슷해보여서 처음에는 오탈자인가부다 라고 생각했었습니다. 하지만 공부하다보니 I이 i의 대문자인걸 알았습니다! 가끔 회원가입하다가 보안문자 입력하면 자꾸 틀렸다고 하는데 i의 대문자인데 L의 소문자 ( I , l ) 로 써서 그런경우 있잖아요..? 공부의 필요성을 다시금 느끼며 ^^ 1. URL과 URI의 차이점 RESTFul API 관련 문서나 기타 외 개발 관련 문서들을 읽을 때 종종 URI라는 표현을 볼 수 있습니다. 언뜻보면 URL과 별다른 차이점이 없어보입니다. (URI는 URL의 의미를 포함합니다.) 즉, URI가 더 포괄적인 개념이며 URL은 이 안에 포함됩니다. 1.1 URL은? url은 Uniform Resource Locator 의 약자로 자원이 실제로 존재하.. [네트워크] 웹 캐시(Web Cache)란 무엇인가?? 목차 캐시(cache)가 없을때 캐시(cache) 사용 (유효시간 내) 캐시(cache) 사용 (유효시간 초과) 캐시(cache) 사용 (유효시간 초과) 시 데이터가 같다면? 웹 캐시란 무엇인가?(Web Cache) 사용자(client)가 웹사이트( server)에 접속할때 정적컨텐츠(이미지, js, css등) 특정 위치(client, network 등)에 저장하여, 웹사이트 서버에 해당 컨텐츠를 매번 요청하여 받는것이 아니라, 특정 위치에서 블러옴으로써 사이트 응답시간을 줄이고 서버트래픽 감소 효과를 볼 수 있는 것을 말합니다. 1. cache가 없을 때 동작 캐시가 없을때 브라우저에서 서버로 'star.jpg'라는 이미지를 가져와달라고 요청했다고 가정해볼게요 초기에 서버에 star.jpg를 달라고 .. [css] css selector(선택자) 종류, css 성능에 미치는 영향 목차 selector(선택자)종류 selector가 css 성능에 미치는 영향 CSS selector(선택자)의 종류 , css 성능에 미치는 영향 1. selector(선택자) 종류 일단, Steve Souder 의 Even Faster Websites에서 인용하는 css선택자 순위는 아래와 같습니다. id - 공통으로 사용불가 한페이지당 1개가 존재해야 합니다. 사용 예: #selector class - 공통으로 사용 가능하며 스타일이 같은경우 같은 클래스로 한번에 스타일링 할 수 있습니다. 사용 예: .selector tag 태그선택자 - 등등 태그 이름을 선택자로 쓸 수 있습니다. 사용 예: p {...} strong {...} sibling 인접선택자 - 특정 태그의 [바로 다음] 형제 요소를 .. [css] css 방법론(oocss, bem, smacss) 목차 방법론 1. OOCSS 방법론 2. BEM 방법론 3. SMACSS CSS 방법론 1. OOCSS (Object Oriented CSS) OOCSS(Object Oriented CSS)는 CSS를 모듈(module)방식으로 작성하여 중복을 줄이는 방식의 방법론 입니다. OOCSS는 가장 많이 사용되는 방법론으로 구조와 스타일을 분리하여 작성합니다. 중복되는 디자인 요소를 따로 빼내어 작성하기 때문에 반복적으로 사용가능합니다. 또한 코드의 재사용성이 높아져 적은 코드량으로 최적의 성능을 보입니다. 장점: 공통된 부분을 찾아 어디서나 재활용 할 수 있다는 점 단점: 다중 클래스 사용으로 인해 코드의 가독성이 떨어질 수 있습니다. Instagram Facebook Instagram Facebook .bt.. [html] <head>태그 <script> async, defer 차이점, 어떻게 사용해야 할까요? normal, async, defer의 차이점 목차 브라우저는 HTML을 읽다가 #1과 같이 태그를 만나면 스크립트를 먼저 실행하고 DOM 생성을 멈춥니다. 또 #2와 같은 경우도 외부 스크립트를 다운받고 실행한 후에야 DOM생성을 하기 시작합니다. 이런 브라우저 동작방식은 스크립트에서 스크립트 아래에 있는 DOM요소에 접근을 할 수 없습니다. 페이지 위쪽에 용량이 큰 스크립트가 있는경우 스크립트 다운 및 실행할때까지 아래쪽 페이지를 볼 수 없습니다. 스크립트 앞 콘텐츠 스크립트 뒤 콘텐츠 위의 문제를 해결하기 위해서 를 화면 요소() 안의 맨 아래에 위치 시켜놓는 방법도 있습니다. ...화면 요소들 이러한 방법은 간단하고 가벼운 페이지들은 문제가 되진 않지만 HTML문서 자체가 아주 큰 경우, 브라우저.. 이전 1 2 3 4 5 6 다음
