본문 바로가기

HTML CSS17

validation check 유효성체크 form 사용 니코 #바닐라JS로크롬앱만들기 index.html Log In app.js const loginForm = document.querySelector("#login-form"); // console.dir(loginForm) const loginInput = loginForm.querySelector("input"); const loginBtn = loginForm.querySelector("button"); console.dir(loginInput); console.log(loginBtn); let userName = ""; function getUserName (){ userName = loginInput.value; console.log(userName); // validation check if (.. 2022. 4. 6.
atom의 emmet 의 tab 단축키가 안 먹힐 경우 또는 emmet이 작동 안할 때 https://github.com/emmetio/emmet-atom/issues/503 Tab doesn't work · Issue #503 · emmetio/emmet-atom Hi, just installed atom and find that I can't TAB, can't expand even by shift+cmd+e, it deletes the word. If I disable the emmet package, TAB works well. github.com f you find after installing emmet, tab completion doesn’t work as described in the documentation, go to Atom > Keymap or File > Keyma.. 2021. 9. 2.
CSS Reset 각 브라우저마다 heading 이라던지 body라던지.. 각각 태그에 css가 먹혀져있다(마진 글씨크기 등..) 기본적인 스타일 이 먹혀진 상태에서 내가 원하는 스타일을 또 입히게 되면 원하지 않는 결과가 나올 수 있으므로 이걸 다 초기화 한 상태에서 내가 원하는 스타일을 입혀야함 Reset.css를 사용해 초기화 해준다 reset.css cdn reset.css가 내가 사용할 css보다 먼저 호출되어야 한다 == 2021. 8. 28.
절대경로/상대경로 절대경로일때 https://어쩌구저쩌구.com/assets/images/sss.img 일때 /assets/images/sss.img 이런식으로 주소를 생략하고 / 만 사용할 수 있다. 2021. 8. 24.
form hidden 전송 이 코드에서 버튼 태그를 form 밖에 쓰려면 이렇게 이름을 똑같이 해줘야함. 버튼 태그를 form 안에 쓰면 필요 없다.. 2021. 8. 24.
<input> 과 <button> 으로 각각 reset, submit 만들기 초기화 제출 각각 버튼은 생김새도 같고 같은 기능을 한다 2021. 8. 22.
<noscript> 자바스크립트 지원하지 않는 환경일 경우에 뭘 나타내고 싶을 때 2021. 8. 22.
<br> 줄바꿈 태그 줄의 간격을 넓게 하고싶을 때? 태그를 여러개 쓰면 줄 간격이 넓어지긴 하지만 이렇게 쓰는것은 절대 안된다 line-height 를 css에서 써줘야한다 2021. 8. 21.
<a> google readme.md image download a { font-weight: bold; width: 100px; line-height: 40px; height: 40px; border: 1px solid black; border-radius: 6px; display:block; text-align:center; } a:hover { background-color: lightcoral; } - 목차 제목1 제목2 제목1 제목2 제목3 h2 { padding-bottom: 1000px; } http://127.0.0.1:5501/TEST/index.html#title1 클릭 시 주소 뒤에 id 값 이 붙게 된다 타 페이지에서 http://127.0.0.1:5501/TEST/index.html#ti.. 2021. 8. 18.
dl, dt, dd 태그 사용 시 css를 먹히고 싶을 때 바꿀 수 잇는 방법 dl 태그 내부에는 dt와 dd 만 올 수 있고 이외의 태그는 넣지 못한다. 그런데 만약 내부의 css를 수정하고 싶다면 어떻게 해야되느냐? (예를들어 하나의 dt dd 묶음에 div를 주ㅓ서 css 를 주고싶다고 칠 때 !) 아래처럼 dl 태그 말고 li dfn p 태그를 쓰는걸로 바꾸면 된다. Coffee Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species. Milk Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals. Coffee Coffee is a bre.. 2021. 8. 16.
기본구조: header main footer 메뉴1 메뉴2 메뉴3 section Article1 Contents.... Article2 Contents.... Article3 Contents.... Aside id@gmail.com 010-9999-8888 main.css header{ background-color: tomato; margin: 10px; padding: 20px; } header nav { } header nav ul{ display: flex; } header nav ul li{ list-style-type: none; margin: 10px; } main{ display:flex; } section { width: 70%; background-color: lightgray; margin: 10px; padding: 10px;.. 2021. 8. 16.
header, body https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta 2021. 8. 14.
span tag 공백 span tag는 공백이 있음 (띄워쓰기,탭,엔터 모두 포함. 몇칸이 띄워져 있는지는 상관 없음) // 공백없음 으로 구분된다 div, h1,p, span각 태그의 기본값 2021. 8. 14.
input text box 투명하게 만드는 방법, 박스 테두리 없애기 테두리를 없애고 배경을 투명하게 설정해줌 2021. 7. 29.
페이지 최우측 하단 copyright 표시 바디 내부에 footer 내에 div를 넣어주고 COPYRIGHT ⓒ RRIGHT head 태그 내 스타일 안에 아래외 같이 넣어줌. class 이름을 똑같이 해준다 2021. 7. 8.
text box 에 이미 입력되어있는 text.. placeholder를 사용한다 이런 식으로 뜸 . text 박스에 내용 입력시 내용입력은 사라짐 2021. 7. 6.
CSS 압축해제 unminify.com 2021. 7. 1.