본문 바로가기

JavaScript3

댓글쓰기 처음 페이지는 아래의 그림과 같이 text 박스가 있는 상태 text 박스에 댓글쓰면 이렇게 댓글이 달리는 홈페이지 만들기 1. text 박스의 value 가져오기 2. 글 추가하기 2-1) insertAdjacentHTML() 글 쓰고싶은 곳에 div로 위치 잡아주고 id를 줌 id를 변수로 저장하고 변수.insertAdjacentHTML(position, text) 2-2) position position은 아래 있는 단어만 사용 가능 beforebegin : element 앞에 afterbegin : element 안에 가장 첫번째 child beforeend : element 안에 가장 마지막 child afterend : element 뒤에 2-3) 추가될 text에 style 지정 text 위.. 2020. 3. 17.
자기소개 페이지 만들기2 javascript를 이용하여 자기소개 페이지를 더 꾸며보았다. 여기에 이름을 입력하면 이런식으로 뜨고 yes/no 누르면 말풍선이 바뀌게 만들었다. 배경색 바꾸는 버튼도 만들었다. 1. 말풍선 아래의 링크는 원하는 말풍선 모양을 css로 만들어주는 페이지 https://leaverou.github.io/bubbly/ 말풍선이 있었으면 좋겠는 곳에 id나 class등 주고 css에서 말풍선 크기 등 조절하면 된다. 2. input 박스 구성 이름을 입력하는 곳에 input박스를 만들었다. div에 준 id는 말풍선 속성을 조절하기 위하여 input 준 id는 input에 text박스에 입력한 값을 가져오기 위하여 2-1) input 박스 만들기 위의 태그로 input box를 만들 수 있다. input .. 2020. 3. 16.
자기소개 페이지 만들기 사전스터디 첫 과제 아래의 블로그에 있는 디자인을 참고하여서 자기소개 페이지를 만들었다. Design ref (https://iredays.tistory.com/59) 구성은 Index page / about me의 상세페이지 3개 아이콘 및 얼굴 이미지는 누르면 정보가 나오거나 다른 페이지로 이동하게 해두었다. css file을 만들어서 전체적으로 적용했다. 그 외 기록할 것 1. 스타일 시트로 css파일 연결하기 1-1) head에 link 태그를 이용하여 연결 외부에 있는 css파일을 html에 불러오기 위한 태그이다. rel="stylesheet"는 해당파일이 스타일시트(css)라는 뜻, type="text/css"는 해당파일의 text형식이 css파일이라는 뜻, href="name.css"는 해.. 2020. 3. 16.