본문 바로가기

👩🏻‍💻STUDY

(78)

[jQuery] e.target / e.currentTarget / $(this) parent child 차이를 보기 위해 먼저 .parent 클릭! // jQuery $('.parent').on('click', function(e) { console.log('e.target', e.target); console.log('e.currentTarget', e.currentTarget); console.log('$(this)', $(this)); console.log('this', this); }); .child 클릭! // jQuery $('.parent').on('click', function(e) { console.log('e.target', e.target); console.log('e.currentTarget', e.currentTarget); console.log('$(this..

[CSS] flex 속성 (flex-basis, flex-grow, flex-shrink) 1. flex-basis : 아이템의 기본크기 기본값 auto #container { display: flex; max-width: 800px; margin: auto; border: 3px solid #000; background-color: #fff; } .item { font-size: 40px; flex-basis: auto; } #container { /* 위와 동일 */ } .item { font-size: 40px; flex-basis: 120px; } 2. flex-grow : 아이템의 너비 비율 기본값 0 flex-grow 값이 1이면 1:1 비율로 맞춰지는게 아니라 여백을 기준으로 비율이 맞춰지는 것이다. .item { flex-grow: 1; } 너비를 똑같이 나타내고 싶을 때는, ...

[CSS] flex-basis vs width 차이점 flex-basis가 항상 width에 적용되는 것은 아니다. flex-direction: row인 경우, flex-basis 는 너비를 제어한다. 그러나 flex-direction: column인 경우, flex-basis는 높이를 제어한다. 주요차이점 flex-basis는 flex item만 적용된다. flex container 는 flex-basis 를 무시하지만 width나 height는 사용할 수 있다. flex-basis는 주축에서 작동한다. 예를 들어 flex-direction: column은 플렉스 항목의 크기를 가로로 조정하려면 width 속성이 필요하다. 절대위치에 있는 flex 항목에는 영향을 주지 않는다. #container { display: flex; flex-direction:..

[HTML] strong / b / em strong 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용. 브라우저는 일반적으로 요소의 콘텐츠를 굵은 텍스트로 표현. b HTML5에서 제목(heading)은 부터 태그로, 강조된 텍스트는 태그로, 중요한 의미를 가지는 텍스트는 태그 사용. 하이라이트된 텍스트는 태그로 표현. 따라서 위의 태그들에서 적절한 태그를 찾을 수 없을 때만 마지막 선택지로 태그 사용. em 강조된 텍스트를 표현. HTML5에서도 여전히 지원, 대신 CSS를 사용하면 더욱 다양한 효과를 줄 수 있다. strong vs b 요소는 텍스트 자체의 주의를 끌기 위해 사용, 은 요소의 콘텐츠 자체의 중요성 강조할 때 사용. strong vs em 요소는 구어체 강조와 같이 문장의 의미를 변경하는데 사용("I love c..

[HTML] abbr acronym abbr abbr 단어의 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의할 때 사용. 브라우저나 번역 시스템, 검색 엔진에 유용한 정보를 제공. 요소 위에 마우스를 올려놓으면 title 속성으로 명시한 단어의 원형이 나타난다. IOC (국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다. acronym acronym 머리글자로만 된 단어(acronym)를 정의. 더 이상 지원하지 않으며 대신 요소를 사용한다. 요소 위에 마우스를 올려놓으면 title 속성으로 명시한 단어의 원형이 나타난다. AJAX 는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다.

[JavaScript] return이 하는 일 값을 반환하는데 사용. 지역변수의 값을 아는데 사용. 현재 진행중인 함수를 중지(escape). 1. 값을 반환하는데 사용 + 2. 지역변수의 값을 아는데 사용. [예제1] var test = function() { var x = 1; } test(); console.log(test()); // undefined 위의 함수는 실행되지 않는다. 내부 구문들을 실행(test())하였으나 반환할 값이 선언되지 않았다. x를 얻기 위해선 return을 사용하여 값을 반환해야 한다. var test = function() { var x = 1; return x; } var test2 = test(); console.log(test2); test() 함수를 실행할 경우 해당함수는 1을 반환한다. 반환값을 사용하기 ..

[CSS] 웹폰트 참고 https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0 웹폰트 최적화 하기 웹폰트란? 폰트 web safe font - 일반적으로 시스템에 설치된 폰트. 다운로드 없이 사용자에게 의도대로 표현이 할 수 있음. (Arial, Helvetica 등) web font - 설치되어 있지 않아서 브라우저에서 다운로드 velog.io https://d2.naver.com/helloworld/4969726

[JS] script async/defer *parsing :: https://solog4something.tistory.com/13 (+)21.10.26 추가 파싱은 해당 언어의 문법검사기라고 할 수 있다. 네트워크로 받은 HTML과 CSS 파일을 토큰화 시키고 Parse Tree를 생성한다. 이 Parse Tree를 DOM 트리로 만들어 렌더하게 된다. 하지만 HTML을 화면에 보이기 위해 파싱하는 도중에 파싱을 멈추는 경우가 발생한다. 아래 스크립트를 보자. script 자바스크립트는 *parser blocking resource(파서 차단 리소스)이다. 기본 모드로 브라우저는 문서를 파싱해 읽다가 자바스크립트를 만나면 진행하고 있었던 파싱을 멈추고, 스크립트를 다운 > 파싱 > 실행 한 후 다시 HTML 문서를 파싱하게 된다. 스크립트는 ..

이전 1 2 3 4 5 6 ··· 10 다음

티스토리툴바