본문 바로가기

분류 전체보기

 (207)
nth-child Pseudo Selector 1. li:first-child li:last-child 첫 번째와 마지막 아이템을 선택하는 방법 li:first-child{ background-color:#f48fb1; } li:last-child{ background-color:#f36339c; } 2. Position 5 특정 위치의 아이템 선택 li:nth-child(5){ background-color:#ce93d8; } 3. 매 3, 4, 5...번째 아이템 선택 li:nth-child(3n){ background-color:#b399ddb; } li:nth-child(4n){} li:nth-child(5n){} 4. 7번째 아이템부터 매 3번째 아이템 선택 li:nth-child(3n+7){ background-color:#a5d6a7; ..
Targeted Selector 1. Child (div p) div p{ background-color:#555; } 라고 하면 div 아래에 있는 모든 p들(div의 child)의 배경색이 변한다. 마지막 hello world는 div의 child가 아니기 때문에 배경 색이 변하지 않는다. 2. Direct Child (div > p) div > p{ background-color:#555; } div > p 라고 selector를 주면 div의 direct child인 p들만 선택이 된다. item2는 (div의 child 중 한 명이지만) ul 속 li의 direct child이기 때문에 선택이 안된다. 3. Directly After (div + p) div + p{ bakground-color:#333; color:#fff;..
TIL1. Java Script란 무엇인가(1) (1*MDN Documentation을 읽으면서 혼자 정리하는 포스트입니다. (공책 낭비하면 나무가 너무 아까우니까요.. 그냥 블로그에 쓰려구요...) 영어 문장을 아주 어색하게 직역하고 있으며, 개인 사담이 많이 들어갑니다. 1. 자바스크립트란? 자바스크립트는 scripting or programming language로 웹 페이지를 동적으로 만들어 준다. 여기서 동적인 웹페이지란 정보를 단순히 나열해서 보여주는 식의 홈페이지가 아니라 (2000년대 초반에 많이 봤던 홈페이지들..) 사용자와 인터액티브하게 반응하는 (클릭을 하면 이미지가 어디서 슝-하고 나타난다거나, 스크롤링 할 때 여러 효과가 나타나고, 2D/3D 그래픽도 들어가는 등등..) 웹페이지라고 할 수 있다. 지금 볼 수 있는 대부분의 웹페..
3. Loan Calculator (JavaScript) - UI 값 입력 후 loading 계산 html 처음에 처음에 로딩과 결과 화면은 display:none으로 // Listen for submit document.getElementById('loan-form').addEventListener('submit', function(e){ // Hide results document.getElementById('results').style.display = 'none'; // Show loader document.getElementById('loading').style.display = 'block'; setTimeout(calculateResults, 2000); e.preventDefault(); }); submit 버튼을 눌렀을 때, 결과는 여전히 no..
2. Task List (JavaScript) 1. 각 요소 DOM으로 const form = document.querySelector("#task-form"); const taskInput = document.querySelector("#task"); const filter = document.querySelector("#filter"); const taskList = document.querySelector(".collection"); const clearBtn = document.querySelector(".clear-tasks"); 2. loadEventListners(); function loadEventListners() { form.addEventListener("submit", addTask); taskList.addEventListe..
Flexbox 기본 상태 display:flex; flex-direction은 기본으로 row; 상태 flex-direction:row-reverse; flex-direction:column; flex-direction:column-reverse;
Position: static, relative, absolute, fixed, sticky 헷갈리면 relative -> absolute -> fixed 순서로 기억할 것. relative는 자기 자신의 원래 위치 기준으로 이동. absolute는 가장 가까운 부모 위치를 기준으로 이동. fixed는 웹 창을 기준으로 이동.
Box Model: Block, inline-block, inline 기본 div, span 성질 - div element는 content없어도 css로 width, height, background-color를 주면 웹에 등장! - span은 css로 꾸며줘도 content가 있어야만 화면에서 볼 수 있다. div에 display:inline div element에 display:inline을 하면 span처럼 inline element가 된다. 그래서 content가 없으면 화면에서 볼 수 없다. div에 display:inline-block; div를 display:inline-block;으로 바꿔주면 화면 크기에 따라 상자 배열이 바뀐다. 화면 크기가 클 때는 저렇게 일렬로 있지만, 화면이 작아지면 뒤에 div 박스들이 아래줄로 내려간다. 기본 span 크기 spa..

티스토리툴바