HTML_CSS (6) 썸네일형 리스트형 6. DOM 응용 트위터 댓글창 만들기 1. 신규 댓글 추가 소스 document.querySelector('#type3').onclick = addNewComment; //버튼클릭시 addNewComment함수실행 //새로운 댓글 추가 함수 function addNewComment() { getTimeStamp(){ //날짜 정렬하는 함수 생략 } let name = document.getElementById('type1').value; //신규유저이름 let comment = document.getElementById('type2').value; //신규댓글내용 //1. 새 엘리먼트 li 만든다 let li = document.createElement('LI'); //2.li에 내용을 추가한다. li.innerHTML.. 5. DOM DOM : JavaScript를 이용해서 엘리먼트의 속성값을 얻어 내거나 변경하는 방법 1. DOM 의 주목적과 단점 주목적 : 자바스트립트로 문서를 선택하고 , 속성과 스타일을 적용 할 수 있다. 단점 : 자바스트립트 돔 개발은 IE 이하 버전과 기타 브라우저 간의 호환성이 떨어진다. 2. 선택자 직접선택자, 원거리선택자 : id, class, 폼/요소명(태그명) 인접관계선택자 : parentNode, childNodes, firstchild, children, previousSibling,nextSibling Element 선택 태그 이용 : getElementByTagName('태그명') id 이용 : getElementById('아이디명') class 이용 : getElementsByclassNa.. 4.CSS_레이아웃 1. margin, padding, border width, height width : 가로의 길이 height : 세로의 길이 border : content의 테두리 선 margin : 콘텐츠 테두리 선으로 부터 밖으로 의 공간 padding : 콘텐츠 테두리 선으로 부터 안으로의 공간 //스타일시트 #box{ margin: 10px; padding: 20px } ->가로길이 500 세로길이 500인 박스의 바깥쪽은 상하좌우 10px만큼씩 뛰우기 안쪽으로는 상하좌우 20px만큼씩 뛰우기 margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다 margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다. margin: 30px 10px 20px 50px은 위 30px, 오.. 3.CSS_id와class 1. id 속성 이용 하기 Hello world code //firstStyle.css #hello{color : pink;} #code{color : blue;} 태그 안에 id = "아이디명" 을 지정하고 스타일시트 에서 id를 불러 오기 위해선 앞에 #을 붙이고 아이디명을 쓴뒤 중괄호{} 안에서 코드작성 id명을 겹치면 안되다 각각의 태그들은 아이디명이 다 다르다 2. class 속성 이용 하기 Hello world code //firstStyle.css .hello{color : pink;} .code{color : font-size = 3px;} 태그 안에 class ="클래스명"을 지정하고 스타일시트에서 class를 불러오기 위해서 앞에 .을 붙이고 클래스명을 쓴뒤 중괄호 안에서 코드작성 cl.. 2. CSS_스타일지정 3가지 CSS : 웹페이지 구성요소의 스타일을 정의 하는 언어 1. INLINE 인라인 요소로 스타일 지정하기 2. HTML 내부에 STYLESHEET 로 작성하기 1. HTML HTML : 웹페이지 틀을 만드는 마크업 언어 tag들의 집합 / 부등호()로 묶인 html의 기본 구성 요소 로 시작하여 로 끝내는것이 한 태그 이다. 큰 제목 한줄 자리 차지 : html 문서임을 알린다. : 시작태그로 문서 전체의 틀을 구성 : 문서의 메타데이터를 선언 : 문서의 제목, 브라우저의 탭에 보여짐 : 문서의 내용을 담는 곳 : 자바스크립트 언어 입력하는곳 : 글씨 크기를 조정 h1 부터 h6 까지 있음 : 줄바꿈이 되는 컨테이너 블록요소이다. 한줄을 차지한다. : 줄바꿈이 안되는 컨테이너 인라인요소이다. 컨테츠 만큼 차지한다. : 이미지 태그 닫는 태그가 필요 없음 // src : 이미지의 파일 주소를 가르킨다. 링크이름 : 링크를 넣을때 이미지, 글씨 등에 링크를 넣을수 있음 // t.. 이전 1 다음
