2023.05.15 JS 기본개념
·
JavaScript
유저가 에 입력한 값 document.getElementById('').value; document.getElementById('email').value; document.querySelector('form').addEventListener('submit', function(){ if (document.getElementById('email').value == '') { alert('아이디 입력') } else { console.log('완료') } }); 폼 전송 막기 e.preventDefault() else if 문법 → 조건식을 연달아 쓰고 싶을 때 사용 → else 문이 있으면 뒤 조건식을 검사 안할 수도 있음. if ( 1 == 3) { console.log('맞아요1'); } else if ..
2023.05.11 JS 개본개념
·
JavaScript
JS 쓰는 이유 → HTML 조작이 목적 JS 기초 document.getElementById('hello').innerHTML = "안녕"; document.getElementById('??').innerHTML = "??"; document : 문서 . : 의 getElementById : Id가 hello인 html 요소를 가지고 와라 innerHTML : 그거의 내부 HTML 등호(=) : 오른쪽을 왼쪽에 넣어주세요. document.getElementById('??').??? = "????"; ??→ getElementByID → 바꿀 html 요소 id(셀렉터) ??? : 무엇을(.innerHTML / .style / .color ) → 메소드(또는 함수) → html 요소의 어떤 속성을 변경..
2023.05.08 CSS 개본개념
·
HTML & CSS
pseudo-class → 특정 요소가 다른 상태일 때 스타일 줄 수 있게 도와줌 : pseudo-class ::pseudo-element → 내부의 일부분만 스타일 줄 때 ::after → 내부 맨 뒤에 뭔가 추가할 때 ::before → 내부 맨 앞에 뭔가 추가할 때 pseudo-element로 clear:both 박스 만들기 → 요소 뒤에 clear:both 속성을 가진 박스가 필요하다면 div를 만들 필요 없이 그 요소 뒤에 content 빈 공간으로 아래 같이 코드와 같이 입력하면 된다. .box:after { content: ''; display: block; clear: both; float: none; } -webkit- → 사파리, Edge, 크롬에서만 적용되는 스타일 -moz- → Fi..
2023.05.06 CSS 기본 개념
·
HTML & CSS
부트스트랩 .row 안에 col를 사용하면 균일하게 나누기 가능 가로로 나누고 싶으면 → col-차지할 크기 안녕하세요 -> 이 줄을 3의 크기로 4개로 나눈다. 안녕하세요 안녕하세요 안녕하세요 안녕하세요 md 사이즈 이상에서만 적용 안녕하세요 md 사이즈 → 부트스트랩 그리드(Grid) 검색 부트스트랩 사이즈 xl → 1200px lg → 992px md → 768px sm → 576px 부트스트랩 order-first 순서 재배치 가능 order-1 → order-2 → order-3 안녕하세요 안녕하세요 안녕하세요 CSS 덮어쓰기 잘 하는 법 같은 클래스 명이나 스타일을 하단에 작성 같은 클래스명 혹은 스타일이라도 하단에 정의된 것이 우선적으로 적용 .custom { color: green; } /..
2023.05.04 CSS 기본 개념
·
HTML & CSS
font-family: inherit 되는 속성 폰트 적용하는 법 @font-face { font-family: '작명~~'; src : url(../font/NanumSquareR.ttf) } 한글폰트 사이즈는 너무 커서 1~2개만 사용을 권장함 용량을 주리려면 .woff → ttf의 3분의1까지 줄여줌 Anti-aliasing 폰트 부드럽게 처리하는법 → 맥 OS의 경우 자동으로 처리를 해주므로 안해도 무관 아래와 같이 아주 조그만한 각도를 회전시키면 된다. p, h4, h3, h2, h1, span { transform: rotate(0.03deg) } 레이아웃 - Flexbox display: flex → 부모 속성에 주기 flex 특징 width 600px를 준다고 해도 600px가 되지 않는다..
2023.05.03 CSS 기본 개념
·
HTML & CSS
14강 + 숙제 nth-child(n) 셀렉터 : n번째 등장하는 요소만 스타일링 할 때 사용 td 하나로 합치기 colspan = “5” → 5개의 셀을 합쳐주세요. cursor: pointer → 버튼을 눌렀을 때 커서가 변경됨 pseudo-style :hover → 마우스 올릴 때 스타일 변경 :active → 클릭 중 스타일 변경 :focus → 커서 찍혀있을 때 스타일 변경 pseudo-style (a 태크) :link → 방문 전 링크 스타일링 :visited → 방문 후 링크 스타일링 순서가 중요함 :hover → :focus → :active 순서로 함 pseudo-class 특징 거의 모든 스타일을 넣기 가능 Object Oriented CSS 코드양 줄어드는 class 작명법 → 뼈대용..
오류확인자
절대 오류를 확인해!