gwooden_코린이

1. 브라우저 기본동작 - a태그 같은거 클릭하면 -> 해당 페이지로 이동 폼 전송을 클릭하거나 엔터를 누르면 서버로 전송 네이버 구글 - 기본동작을 막음 네이버 구글 HTML 삽입 미리보기할 수 없는 소스 return false 보다는 event.preventDefault()를 주로 사용해서 원치않는 동작을 막아줄 수 있다. 폼 전송을 할때 주로 사용한다. 2. 할일목록 만들어보기 - HTML - JS const todos = document.querySelector('#todos'); const todoList = document.querySelector('#todo-list'); const todoInput = todos.querySelector('input'); todos.addEventListe..

alert console document // 브라우저 알림참으로 표시 alert('hello js'); //개발환경 콘솔 창에 표시 console.log('hello'); // 웹 페이지에 출력 표시 docyment 방법은 잘 사용안함 document.write('JS'); - 변수 상수 let 변수명; mathScore const 상수; PL let message; message = 'hello'; //작은 따옴표 또는 큰 따옴표 중에 원하는 스타일로 하면 된다. console.log(message); let message; message = 'hello'; console.log(message); message = 12345; console.log(message); let a = 'hello'; le..

1. CSS 그리드(Grid) grid-container grit-item grid-gap(gutter) grid-line grid-number 1 2 3 4 5 6 7 .containter { border: 2px solid red; display: grid; /* 픽셀값으로 (열)너비 조절 (px값은 고정) */ /* grid-template-columns: 200px 100px 200px; */ /* 비율로 (열)너비 조절 */ /* grid-template-columns: 200px 2fr 1fr; */ grid-template-columns: 1fr 1fr 1fr; /* 행 너비 조절 */ grid-template-rows: 100px 100px 100px; /* 해당 하는 컨테이너 높이값이 존..

header aside1 피가 유소년에게서 생의 청춘은 온갖 청춘의 노래하며 끝까지 위하여, 운다. 돋고, 고동을 공자는 품었기 놀이 그러므로 찾아다녀도, 청춘의 주며, 황금시대다. 인생에 행복스럽고 인간은 피에 하는 우리 가슴에 지혜는 이상을 그리하였는가? 피고 붙잡아 가치를 때문이다. 품으며, 길을 같이, 구할 노래하며 때까지 구하지 그러므로 것이다. 인생에 일월과 대한 공자는 바이며, 인간은 살았으며, 풀밭에 맺어, 끓는다. 귀는 트고, 그들의 같으며, 그들의 투명하되 사는가 말이다. 꽃이 길을 끓는 크고 무한한 황금시대다. 기관과 아름답고 그들의 있는 어디 속에서 영락과 보이는 못할 피다. 청춘이 황금시대의 청춘의 어디 교향악이다. aside2 footer * { margin: o; padding..

더보기 중고거래 동네가게 알바 부동산 직거래 채팅하기 당신 근처의 당근마켓 중고 거래부터 동네 정보까지, 이웃과 함께해 가깝고 따뜻한 당신의 근처를 만들어요. 우리 동네 중고 직거래 마켓 동네 주민들과 가깝고 따뜻한 거래를 지금 경험해보세요. 인기매물 보기 믿을 수 있는 중고거래 중고거래 동네가게 당근알바 당근비즈니스 채팅하기 자주 묻는 질문 회사 소개 인재 채용 당근마켓 앱 다운로드 App Store App Store * { margin: 0; padding: 0; box-sizing: border-box; } header { width: 100vw; background: white; height: 60px; padding: 15px; display: flex; justify-content: space..

1. 시맨틱 태그(semantic) 기능 있음 - h1, a, img 기능 없음 - div, span header : 머리말 (로고 - 네비()) section : 페이지 구분 asdie : 사이드바 article : 본문 내용 footer : 바닥글 - 회사 카피라이트 1 2 3 * { margin: 0; padding: 0; } .container div { border: 1px solid black; width: 200px; height: 200px; background-color: skyblue; display: inline-block; margin-right: -6px; font-size: 16px; } .container { font-size: 0; }

.container { border: 2px solid red; height: 500px; display: flex; /* justify-content: center; */ /* justify-content: flex-end; */ /* justify-content: flex-start; */ } /* .container div { border: 1px solid black; background: skyblue; height: 50px; width: 100px; } */ .box1 { border: 1px solid black; background: skyblue; height: 100px; width: 100px; } .box2 { border: 1px solid black; background: sk..

::before ::after 태그::before 해당 태그 부모 before, after -> 자식 (인라인) hello css asdasdasd h1::before { content: "★"; /* 콘텐트 필수 속성 */ color: red; } h1::after { content: "☆"; background-color: red; color: wheat; font-size: 10px; } .con { width: 400px; height: 400px; background: url('../image/bambi.jpg'); position: relative; } .con p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -5..