프론트엔드 기록

자바스크립트 function 문법 function (일명 함수) 라는 문법이 있는데 이 문법 쓰는 이유부터 알고 지나가봅시다. 함수는 길고 더러운 코드 한 단어로 축약하고 싶을 때 쓰는 문법입니다. 간지나는 개발자말로 표현하면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법 인데 어려우니 그냥 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법이라고 외우면 됩니다. function 자유롭게작명(){ 축약하고 싶은 긴 코드 } 1. function 키워드 쓰고 소괄호, 중괄호 붙이면 됩니다. 2. 그리고 소괄호 왼쪽에 작명하고 3. 긴 코드를 중괄호 안에 담으면 코드 축약 끝입니다. 그럼 이제 자유롭게작명() 이거 쓸 때 마다 그 자리에 긴 코드가 실행됩니다. 진짜임 실험해보셈 Alert 여는 코드 fun..

카테고리 없음 2024. 1. 27. 01:23

기본적인 UI 만드는 법칙 웹페이지에선 탭, 모달창, 서브메뉴, 툴팁 등 수백개의 동적인 UI를 만들 수 있습니다. 이런거 하나하나 다 가르치면 100강도 모자라기 때문에 UI 만드는 법을 알려드릴테니 이거 외워가시면 저런 UI는 알아서 다 만들 수 있습니다. 1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김 2. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드짬 이게 다임 step 1. Alert UI 디자인부터 하기 작업폴더에 main.css 이런거 하나 만들고 index.html 알림창임 버튼 오늘의 숙제 : Alert 박스 내에 닫기 버튼과 기능을 만들어보십시오 닫기 버튼을 누르면 Alert 박스가 뿅 사라져야합니다. ▲ 오늘은 이런 Alert UI를 만들어보면서..

자바스크립트 2024. 1. 27. 01:17

개발환경 셋팅 0. 에디터를 설치합니다 저는 강의용으로 Brackets 쓸거고 VSCode 이런거 쓰셔도 됩니다. 다 컸으니 알아서 설치하십시오 1. 코드짤 작업폴더를 바탕화면 아무데나 만드시고 2. 파일 - 폴더열기 등으로 여러분이 작업할 폴더를 열고 3. 좌측에서 index.html 파일 만들고 코딩 시작하십시오. 4. html 파일을 미리보기 띄우고 싶으면 Brackets 에디터에선 우측상단 실시간 미리보기 띄우기 버튼 누르시면 되고 Visual Studio Code 에디터에선 왼쪽 Extensions 메뉴에서 live server 부가기능 찾아서 설치하시고 html 파일 우클릭 - live server 띄우기 누르면 됩니다 (주의) 에디터에서 작업폴더를 안열고 시작하면 HTML 미리보기가 제대로 ..

자바스크립트 2024. 1. 27. 01:08

이메일 성 이름 메세지 구독 h3 { font-family: "Gamja Flower", sans-serif; font-weight: 800; font-style: normal; transform: rotate(0.04deg); } .profile { display: block; margin-left: auto; margin-right: auto; border-radius: 100px; } .title { font-size: 16px; text-align: center; } .box { width: 200px; background-color: violet; margin: 10px; padding: 40px; border: 2px solid black; border-radius: 10px; margin-l..

HTML, CSS 2024. 1. 21. 10:46

아우리 1시간 전 4K빔프로젝터 가성비최강으로 선택했어요. 어쩌구저쩌구쌸ㄹ랄랄ㄹ .container { width: 800px; } .left-container { width: 60%; float: left; } .right-container { width: 40%; float: left; } .profile-img { border-radius: 100px; width: 100px; height: 80px; float: left; margin: 10px; } p { float: left; } .time { font-size: 12px; color: grey; } .title { margin: 15px; clear: both; } .content { margin: 15px; color: grey; } 무엇..

HTML, CSS 2024. 1. 21. 08:32

display: block은 한 행을 전부 차지 display: inline-block은 내 크기만큼을 차지 즉, display-block을 사용해서 두 개의 를 가로 배치할 수 있다. 여기서 주의할 점은 inline-block을 사용하면 박스 사이에 공백 제거를 반드시 해야 한다. 부모 태그의 font-size: 0px;로 주게 되면 두개의 태그 사이에 공백이 있어도 가로 정렬이 가능하다. .container { width: 800px; } .header { width: 100%; height: 100px; background: pink; } .left-menu { width: 20%; height: 400px; background: rebeccapurple; display: inline-block; ..

HTML, CSS 2024. 1. 21. 05:48

다음의 코드를 사용하면 된다. display: block; margin-left: auto; marign-right: auto; 여기서 display: block이란? 가로행을 전부 차지하란 의미이다! , , 는 display: block이 기본으로 있다. 즉, 는 기본적으로 가로행을 모두 차지한다. 따라서 두개의 를 쓰게 되면 하나의 가 밑으로 내려간다. .container { width: 800px; } .header { width: 100%; height: 100px; background: pink; } .left-menu { width: 20%; height: 400px; background: rebeccapurple; /* float: left; */ } .right-menu { width: 8..

HTML, CSS 2024. 1. 15. 03:54

Input State 바인딩 import { Fragment, useState } from "react"; function App() { const [title, setTitle] = useState(""); return ( { setTitle(e.target.value); }} /> Post ); } export default App; Textarea State 바인딩 import { Fragment, useState } from "react"; function App() { const [title, setTitle] = useState(""); const [body, setBody] = useState(""); const onSubmit = () => { console.log(title, body);..

리액트 스터디 2023. 10. 12. 15:11