목록Code개발일지 (93)

Daily Front_Minhhk

[간단정리] innerText 와 textContent 차이점 / Number와 parseInt 차이점

innerHTML과 innerText과 textContent 차이는 innerHTML은 요소 내에 있는 HTML과 XML 모두를 의미하고, innerText는 요소 내에서 사용자에게 보여지는 text를 의미하고, textContent는 script나 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미한다. parseInt와 Number은 비슷하면서도 다른 부분이 있었습니다. 둘 모두 숫자형으로 타입을 바꿔주지만, 문자열이 숫자로 시작하는 경우와 소수점을 표시하는 부분 -> parseInt()에 대해서는 차이점이 있다.
Code개발일지 2022. 11. 1. 20:35
[CSS, JS] 계산기에 기능 추가하기!

🔥 우선 최종적 완성본이다. 나이트메어는 못하겠다~~~ㅜ 지금도 최선을 다했다?! 🗣 그냥 막 사용하는 계산기의 로직이 이렇게 복잡할 줄은 몰랐다ㅎㅎ 역시 쉬운건 없다~ 😵‍💫 오늘은 이렇게 일단락이 되었지만 ,,, 다시 내일을 위해 달려보자고! 깃과 노드에 맛보기 일 듯? 하다 html은 그대로 가져가고, css에서 버튼의 border-bottom 추가와?? 아래 active 추가를 해주었다. 클릭시 효과를 나타낸다! CSS,, .clear__and__enter > button:active { box-shadow: 1px 1px 0 rgba(77, 234, 137, 0.5); position: relative; top:2px; } button:active { color: #ffffff; font-siz..
Code개발일지 2022. 11. 1. 15:28
[CSS] 계산기 목업 간단~

❓ 우선적으로는 간단하게 마쳤다! 기존의 목업 코드에 크게 변경 시키지는 않았지만,, 차근히 다시 공부하는 의미로 속성에 알아보았다. 당장,,,, 내일 해야할 기능 구현이 조금 이상?! 힘들어 보인다ㅠ,, 분발하자. HTML 0 AC Enter 7 8 9 + 4 5 6 - 1 2 3 * 0 . / CSS * { margin: 0; padding: 0; border: 0px; box-sizing: border-box; font-family: "Righteous", cursive; color: #000; } body { background-color: #e9e2f8; } /* 계산기 */ .container { height: 100vh; display: flex; justify-content: center;..
Code개발일지 2022. 10. 31. 15:30
[CSS] Flexbox // 복습!!

와이어프레임(Wireframe) 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다. 특히 이번에 우리가 그려볼 와이어프레임의 가장 큰 목적은, 화면의 영역을 구분하는 일입니다. 참고: 클래스 이름으로 지정된 w10, w20, w70, 또는 h20, h40, h80 을 CSS로 구현 .w70 { width: 70%..
Code개발일지 2022. 10. 30. 14:33
[CSS ] css(Cascading Style Sheets), UI,UX,Selector

CSS (Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다. 지금까지 학습한 HTML로 웹 페이지의 구조를 잘 세우고 나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있습니다. CSS가 개발자인 여러분에게 어떤 의미가 있을까요? 미래의 프론트앤드 개발자로써 앞으로 CSS에 대해 가져야 할 마음가짐을 공유하고자 합니다. 사용자 인터페이스(UI; user interface) 사용자 인터페이스(UI; user interface)에 대해서 설명하기 전, 인터페이스(interface)에 대해서 알아보겠습니다. 쉽게 설명하자면 인터페이스는 컴퓨터..
Code개발일지 2022. 10. 27. 15:00
[HTML] HTML (HyperText Markup Language), 시맨틱 요소

HTML , CSS , JAVASCRIPT 에 대한 이해 HTML : 웹페이지의 구조를 담당하는 마크업 언어 CSS : 디자인요소를 시각화하는 스타일시트 언어 JAVASCRIPT : 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용하게 만드는 언어 VISUAL STUDIO 코드 작성하고 꼭! 저장하고 웹페이지에서 새로고침을 해야한다! → head body 형식이 갖춰진 상태에서 live server extension 사용시 그냥 저장 하면 새로고침 완료~ HTML (HyperText Markup Language) 웹페이지의 틀을 만드는 작업. HTML은 tag들의 집함. tag란 부등호() 로 묶은 HTML의 기본 구성 요소 html 확장자 사용 TREE STRUCTURE (트리구조) HTML 문서 ..
Code개발일지 2022. 10. 26. 13:25
이전 Prev 1 ··· 11 12 13 14 15 16 Next 다음