본문 바로가기

분류 전체보기

 (177)
[HTML/CSS] css variable과 html data- attribute 오늘은 css에서 유용하게 사용할 수 있는 variable과 html에서 로직을 빠르게 구현해보고 싶을때 유용하게 활용 가능한 data attribute에 대해 배웠다. CSS variable css에서도 JS 처럼 변수를 선언하고 재사용할 수 있는 기능이 있다. syntax는 아래와 같다. :root{ --font-size : 16px; --background-color : whitesmoke; --text-color : darkblue; --base-space : 8px; } .first{ margin-left: calc(var(--base-space) *2); } @media screen and (max-width: 768px){ :root{ --text-color: purple; --base-sp..
[JS] web APIs 오늘은 웹 api에 대한 대략적인 개념과 브라우저를 어떻게 바라보면 좋은지에 대해 공부하였다. 아래는 참고하면 좋을만한 사이트들과 웹에서 제공하는 apis 종류의 일종, 그리고 http와 https의 차이에 대한 내용을 공유한다. WEB Application Programming Interfaces 다양한 브라우저에서 공동으로 제공하기로 약속한 APIs DOM APIs Network APIs Graphics APIs Audio/video APIs Device APIs File APIs Storage APIs HTTP vs HTTPs HTTP : 유저와 서버 간에 request / return이 보안처리 되지 않은 웹 HTTPs : 보안처리가 된 웹 (유저와 서버가 데이터를 주고 받을 때, 해당 데이터가 ..
[JS] API 개념, async vs defer Application Programming Interface (API) 브라우저가 제공/이해할 수 있는 함수들 console도 web API에 포함되나, 통상적으로 많이 쓰여 node.js에서도 지원 node.js JS 엔진이 탑재되어 있어서 웹 브라우저 없이도 Js언어가 구동됨 async vs defer head : 를 에 포함하는 경우, html parsing이 중간에 끊김 - : js 파일이 클 경우, 브라우저 html 로딩이 느려짐 body : 를 맨 끝에 포함하는 경우, html parsing은 중간에 끊지기 않지만, js파일을 fetch하기 전에 유저에 html 페이지가 먼전 랜딩 - : 페이지가 js에 의존적이라면, 사용자가 정상적인 페이지를 볼 수 있을때까지 시간이 오래 걸림 head+as..
[VS code] emmet 설정하고 사용하기 유용한 emmet 단축키 : 하위 태그 추가 div>p>a : 형제 태그 추가 div>ul+ol>li*2 : 갯수 곱하기 ^ : 상위 태그 추가 div>ul>li^ol () : 그룹화 div>(header>ul>li*2>a+footer>p {} : 테그 안에 텍스트 추가 p{hello} {$} : 태그 안에 숫자 추가 p.class${item $}*5 lorem : dummy 태그 자동생성 p>lorem4 VS code studio에서 emmet>tab 사용이 안될때 설정에 들어가서 “emmet”을 검색 아래 두가지에 체크박스를 확인한다. 모두다 체크하고 html 문서로 돌아가면 정상 작동한다! 그래도 안되면... setting.json 파일에 아래를 추가하고 저장한다. "emmet.showSuggest..
[html/css] 반응형 웹 대신 다양한 디바이스별 웹 페이지를 만드는 이유? 오늘은 공부를 하다가 갑자기 질문이 생겼다. bootstrap의 container 기능을 사용하면 반응형 웹 페이지 구축이 너무나 쉬운데, 왜 기업들은 bootstrap과 같은 라이브러리를 사용하는 대신, PC 버전과 모바일 버전을 따로 서비스하는 걸까? 예를 들면, naver의 경우, pc용 페이지와 모바일용 페이지가 서로 다른 주소로 구성이 되어 있다. 즉, 하나의 반응형 웹이 아니라 아예 별도로 웹을 구축한 것이다. https://www.naver.com/ 네이버 네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요 www.naver.com https://m.naver.com/ 네이버 모바일 메인 네이버 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요 m.naver.com 약간의 서..
[tip] 문과생이 웹 프론트 개발자로 전직하기 위해 필요한 것들 오늘은 내가 개발자로 전직하기로 마음먹고 유튜브, 강의, 블로그 후기, 그리고 주변에 실제로 개발자로 전직에 성공한 비전공자 지인들을 통해 얻은 팁을 공유하고자 한다. 인터넷 소스를 통해 알 수 있는 정보와 지인들을 통해 얻은 정보 중 상당수가 일치하고, 또, 지인들을 통해서만 알 수 있었던 추가 팁에 대해 정리한다. 1. 공부방법 독학 vs 국비지원 vs 부트캠프 우선 이 세가지가 공부를 하는 루트의 옵션으로 정리할 수 있다. 지인들과 상의를 통해 얻은 결론은, 학습 방법의 선택은 정답이 없다. 개인적인 이야기를 공유해보자면... 나는 현재 재직 중에 있고, 얼마 전 교통사고를 당해서 건강이 좋지 못한 상태이다. 또, 직장 연계 대출이 있어 함부로 직장을 그만둘 수 없는 상황이다. 여기에 파트너마저 다..
[project] todo list 프로그램 만들기_1 오늘은 todo list 만들기 프로젝트를 시작했다. 오늘 강의에서는 css 사용에 대한 몇가지를 다뤘고, 이를 노트에 정리해보았다. 1. shadow box : 박스의 음영을 주어 '이것이 박스다'를 알게 해주는 스타일링 2. css 단위 : absolute와 relative 단위가 있고, 주로 px, em, rem, vh 등을 자주 사용 3. position : 부모 position을 기준으로 자식의 position을 static, relative, absolute, sticky 등으로 조정하여, 원하는 화면 구성이 가능 보다 자세한 내용은 아래 노션노트 참고 노션노트 - 유용한 css tip_all
[tip] clean code를 쓰는 몇가지 팁 Javascript 기본 문법 강의를 2개 수강하였고, 여러 개발자, 테크 컴퍼니 유튜브 채널의 영상을 많이 보고 있다. 그 중에서 내가 들었던 강의, 그리고 여러 유튜브 채널에서 공통적으로 말하는 클린코드 팁에 대해 정리해 본다. 1. name of variable 첫번째는 변수의 이름에 관한 팁이다. 많은 개발자들이 흔히 하는 실수로, 남이 봤을때, 그리고 몇개월 뒤 자신이 다시 소스 코드를 봤을 때, 변수의 이름이 무엇을 의미하는지 알지 못하게 네이밍하는 실수를 흔히 저지른다고 한다. 좋은 변수명은 무조건 짧은 이름이 아닌, 누가 읽어도 변수가 무엇을 의미하는지 명확하게 알게 하는 것이다. 2. location for declaration 두번째는 변수 선언문의 위치이다. JS를 기준으로 봤을때, ..

티스토리툴바