TIL (15) 썸네일형 리스트형 벤더 프리픽스(Vendor Prefix) , 딱 정리하자 벤더 프리픽스..? 처음 들어보는데 뭐지? 일단 TCP스쿨에 써있는 개념을 잠깐 살펴보자 ! 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다 응..응.... 웹..브라우저가 .. 또 문제라는거지? 그런거지? 뭐라는거야..? 💢 그래서 벤더 프리픽스가 뭔데? 웹 관련 .. 브라우저별 스타일 잠깐 멈촤! RESET CSS / Normalize 오늘의 주제 : RESET CSS 🌏 세상에 존재하는 수 많은 브라우저들 세상엔 참 많은 브라우저가 있다... 다양성이라는건 장점이라고 생각한다. 각기 다른 스타일에 사용자들은 선택해서 사용할 수 있으니깐. 하지만 FE개발자라면 조금... 슬플지도? 우리에겐 크로스 브라우징 이슈가 있으니깐. 울지말고 얘기해보자. 크로스 브라우징. 브라우저별로 다르게 구현되는 기술을 고려해 여러 환경에서도 이상없이 작동되도록 웹페이지를 제작하는 방법론. 우리가 짠 코드가 브라우저 별 기본 스타일로 다르게 표현되는걸 막기 위해 Reset css가 존재한다. 말 그대로 , 존재하는 css를 리셋 시킨다는 의미. 🌗 RESET CSS VS CSS Normalize 브라우저별 스타일을 초기화 시키는데에는 많은 방법이 있지만 대표.. 서로가 믿을 수 있게! TCP 3 way handshake 인터넷에서 컴퓨터가 통신하는 방법? 컴퓨터끼리 통신은 요청과 응답으로 이뤄진다. 옆에 있는 컴퓨터라면 그렇겠지.. 그런데 이게 인터넷을 통한다면 어떻게 될까? 클라이언트는 서버에 요청을 보내지만 바로 가지 못한다. 인터넷에 있는 수많은 노드들을 거쳐서 갈 수 있는데 그래서 최소한의 규칙이 필요해진다. 내가 친구한테 택배를 보내는데 출발지와 도착지를 모른다면 택배가 올바르게 도착할 수 없듯이, 인터넷에서 통신하는 컴퓨터에서도 주소가 필요하다. 이때 IP가 등장한다. IP 인터넷 프로토콜 역할 - 지정한 IP 주소 ( IP Address)에 데이터 전달 - 패킷(Packet)이라는 통신 단위로 데이터 전달 등의 특징을 가진다. IP패킷의 특징은 출발지IP와 목적지IP를 담고 있다는 것이다. 하지만 IP프로토.. [css] width 속성의 초기값은 auto, 그 의미는? - initial value: 프로퍼티에 딸린 초깃값 - user agent stylesheet: 브라우저가 제공하는 기본 스타일 (예시)body 요소에 적용되어있는 margin 8px 1. width 속성의 값들이 갖는 의미 가장 중요한건 부모가 기준이라는 것이다. width의 초기값인 auto나 100% 둘 다 부모가 제공하는 컨텐츠만큼 가득차게 된다. 1) width : 100%의 경우 부모 요소가 제공하는 만큼 컨텐츠가 가득 차지만 밑에 스크롤이 생기고 잘리게 된다. 2) width : auto 의 경우 이 경우 스크롤도 생기지 않고 잘리지 않는다. 브라우저가 자동으로 계산해서 마진을 제외한 부분이 가득차게된다. 이렇게 initial(초기값)으로 쓰기도 한다. 이게 더 명시적인 방법임. 해당 개념.. React '첫인상'과 JSX / state / Props 오늘 드디어 리액트를 맛봤다. 나는 자바스크립트 언어만 다룰 수 있으면 될 줄 알았는데.. 몇 가지 문법을 맛보고 머리가 어질해졌다. 금방 익숙해지겠지.. 리액트를 사용하는 이유 1. 컴포넌트 단위 개발 ( 1000개의 html 문서를 다 바꾼다고 상상해보라) 2. virtual DOM 가상의 돔을 만든다 (아직 와닿진 않음) 3. 명령형이 아니라 선언형이다 (목적을 먼저 말함) 유지보수 컴포넌트 단위로 개발을 할 수 있다는 점이 새로웠다. 확실히 유지보수하는데 좋을 것 같다는 생각이 들었다. JSX 자바스크립트 내에서 html을 쓰는 문법이다. image태드 같은 것도 닫는 태그가 반드시 필요하다. js파일 끼리 (컴포넌트 단위로) 내보내기가 반드시 필요하다 export default Counter; .. 단락회로 평가 && 와 || 같은 논리 연산자에서 뒤에 를 볼 필요도 없는 경우 앞의 것만 보고 판단하게 되는데 이를 단락 회로 평가라고 한다. true || false // 뒤를 볼 것도 없이 true이므로 뒤의 false는 무시됨 false && true // 뒤를 볼 것도 없이 false이므로 뒤의 true는 무시됨 const getName = (person) => { const name = person && person.name; //( 이미 false이므로 person.name은 무시됨) return name || "객체가 아닙니다" ; // 객체가 아닙니다 }; let person; const name = getName(person); console.log(name); const getName = (pers.. 배열 내장함수 11가지 ( forEach map includes indexOf findIndex find filiter slice concat sort join ) 인프런에서 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 수강 중 오늘은 배열 내장 함수를 배워봤다. 잘 정리 된 느낌임 1. forEach const arr = [1,2,3,4]; arr.forEach((e) => console.log(e)); // 1 // 2 // 3 // 4 배열을 순회하는 함수. 배열의 모든 요소를 출력하는 함수. 콜백함수를 매개변수로 넣는다. 2. map const newQrr =arr.map((e)=>{ return e * 2; }); //[ 2, 4 ,6 ,8] 배열을 순회해서 리턴 값을 배열로 반환! 3. includes 주어진 배열에서 전달받은 인자와 일치하는 값이 있는지 확인 . 불 형식으로 알려줌. const arr = [1, 2,3,4]; l.. 이전 1 2 다음
