Study/Web (12) 썸네일형 리스트형 css 상속 상속 CSS 속성도 상속이 된다. 단! 되는 속성이 있고 안 되는 속성이 있다. box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않는다. 다른 속성 (ex. fontsize)등은 하위 모델로도 상속이 된다. cascading CSS에서는 같은 노드를 표현하는 방법이 여러개가 있다. 같은 노드를 가리키지만 적용하는 스타일은 다를 수 있다. 그럼 어떤 스타일로 적용하느냐? 이것을 결정하는것을 'cascading' 이라고 한다. 1. 선언방식 : inline > internal = external : inline으로 설정한 값이 우선이다 2. 시간 순서 : 동일하면 나중에 적용한것이 우선.. [Java] String, String buffer, String builder 💡 String과 String buffer는 무슨 차이가 있을까? String과 Stringbuffer의 차이점을 아나요? 라는 질문을 받았다. 면접때는 답하지 못했지만 지금 이렇게라도 정리해본다. String String Buffer String Builder Storage Area Constant String Pool Heap Heap Modifiable No (immutable) Yes (mutable) Yes (mutable) Thread Safe Yes Yes No Performance Fast Slow Fast String The String class represents character strings. All string literals in Java programs, such as "ab.. C++ 배열, vector, array JS 배열 정리 보호되어 있는 글입니다. [CSS] flex-box 안 items 크기가 안 변할때 개요 flex container안의 item들의 크기가 넘치면 가로 스크롤을 주고 싶었다. 그런데 width를 5000px로 주어도 flex container안 items은 넘치지 않았다. 문제 flex-items가 스스로 container크기에 맞게 줄어들었다. flex-shrink옵션 때문이다. 해결 flex-shrink 옵션과 flex-basis 옵션을 설정한다. flex-shrink flex item들이 컨테이너에 맞도록 줄어드는 비율을 설정한다. 기본값은 1이고, 양수로 설정할 수 있다. 0으로 설정하면 줄어들지 않고 원래의 너비를 유지한다. flex-basis flex item의 너비값을 px, %등의 단위로 지정한다. 기본값은 auto다. 결과 flex-container에 item들이 하나씩.. [JS] set에 배열를 넣으면 중복으로 넣어지는 문제 개요 set은 중복이 허용되지 않는다. 그런데 js set에 배열을 넣었더니 중복으로 들어가는 문제가 발생했다. 원인 크롬 디버그콘솔에 입력해보니 arr1과 arr2는 같지 않다고 나왔다. 그래서 내용물은 같지만 다른 오브젝트로 처리되서 set에 둘 다 들어간 것 같다. 해결 2020.05.21 기준 알아보는중 1. 내용물만 비교하는 방법을 알아보자 2. []과 오브젝트에 대해 알아보자 이번기회에 오브젝트에 대해 공부해야겠다. 어렵고도 어려운 js의 세계... 깊은복사 얕은복사도 알아봐야지 [js] 클래스 안 EvnetListener에서 클래스에 있는 메소드 이용하기 개요 html이 아래처럼 구성되어있다고 하자. TODO List TODO List라는 h1타이틀에 이벤트 리스너를 붙여보자. 클릭하면 알람이 나오도록. 보통 이벤트 리스너를 붙이는 방법은 세 가지다. 1. 익명함수 이용하기 $title = document.querySelector("#title"); this.$title.addEventListener("click", function(){ alert(this.innerText); //TODO List }); 2. 이벤트용 함수 이용하기 $title.addEventListener("click", alertValue); function alertValue(){ alert("title clicked"); } 3. 매개변수가 필요할땐 익명함수 안에 이벤트함수를 넣.. 5. 프론트엔드 개발환경의 이해: 웹팩 개발 서버 vue.js와 node.js를 공부하면서 다시 정리할 예정 7강 내용 정리 https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 웹팩 개발 서버 웹팩 개발 서버는 웹팩과 별개다. 따로 설치를 해야 한다. 매번 브라우저 새로 띄워서 새로고침할필요 없이, 그냥 저장만 누르면 알아서 브라우저를 갱신해준다!! 설치: $ npm i -D webpack-dev-se.. 4. 프론트엔드 개발환경의 이해: 린트, 프리티어 6강의 내용을 정리. 이번 포스팅은 요약을 많이 했다. 자세한 내용은 원본 블로그를 참조하자. https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 린트(Lint) 협업 코드의 규칙을 정하고싶다면? 린트를 사용한다. 코드의 보푸라기를 제거하는 역할. 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다. 코.. 이전 1 2 다음
