console.log

ele= document.querySelector('#root'); ele.innerHTML= "Hello, World!"; ------------------------------------------------------ document.querySelector('#root'); root에 해당하는 div값을 ele라는 변수에 넣어라. 같은 말로 document.getElementById('root')' 가 있음. ------------------------------------------------------ *객체 ()= 함수, 다른말로 매서드 '=' = 속성 '.'의 의미는 안에 있는 엘리먼트라는 뜻. 예를 들어 document.querySelector 가 있으면 document 안에 queryS..

html과 달리 java script는 동적이다. 안에 쓰도록 권장되지만 안에 쓸 수도 있음. document.writr(); 는 한묶음으로 외울것. alert("hello, world!"); 는 경고창 console.log(""); 는 개발자 도구 콘솔창에 표시되는 내용 . 디버깅할 때 사용함. 자바는 헤드에서 안에 쓰거나 엘리먼트 안에 이벤트를 줘서 사용할 수 있음. 을 치면 input박스가 나오고 박스를 클릭하면 '경고창임'이라는 경고창이 뜸. 변수 설정에서 "="의 의미는 같다는 뜻이 아니까 입력값을 넣는다 라는 의미로 이해. ingoo = 40; 라는 변수를 만들었을때, console.log(ingoo) 라고 하면 40 이라는 수가 결과값에 뜸. 그냥 ingoo=40; 이랑 ingoo2='40'..

1) transform: transrateX(-50%)

1. position:absolute { position:absolute; } /* absolute를 쓰면 원래 브라우저는 2차원의 공간인데 3차원의 공간이 생기게 됨. 즉, 두개 이상의 박스를 해당 공간에 겹쳐서 쓸 수 있음. absolute는 left, right, top, bottom을 씀.*/ { position:absolute; left:50px; } /*예를 들어 left:50px을 주면 해당 박스만 왼쪽에서 50px 떨어지게 됨.*/ 이런식으로 position:absolute:를 왼쪽으로 50px만큼주면 해당 박스만 오른쪽으로 떨어지고 새로운 한겹이 더 생긴것이므로 해당 공간이 비게 된것. 따라서 해당 공간에 원래 아래에 있어야 할 box2가 들어온 것이다. /*주의할 것은 하위 엘리먼트에 ..

1. 컨테이너를 만들기- 먼저 내가 사용할 전체 영역 박스를 가운데로 정렬해놓기 (높이는 지정x 그 박스 안에 들어가는 각각 엘리먼트들에서 지정하면 자동으로 만들어짐) 2. 그 안에 들어갈 박스 갯수를 나눔 3. 각각 요소에 픽셀 지정하고 플렛 줘서 정렬 4. 작업할 영역, 시작되는 영역을 확실히 나눠줌 (패딩, 선 등등) 5.

1. 페이지에 사진 크게 넣을 때 높이까지 지정해줄것 - 그 다음에 내용 작성할때 사진 뒤로 넘어가서 안보이게 되는 경우 방지 2. 하이퍼 링크 목록 만들기 순서 주의 학교소개 (ㅇ) ----------------------------------- 3. padding주기 시작지점에서 퍼지게 해줌. 원래라면 왼쪽 위 모서리 맨끝부터 시작이라면 패등을 주면 시작점이 패딩 준 만큼 오른쪽 아래로 이동하게 되는것임. 박스 크기도 커짐. ----------------------------------- 4. 사진넣기 개발자도구에서 이미지 저장- 우클릭 눌러서 open in new web해서 저장 css창에 코드입력 .box{backgrouund : url("경로") no-repeat;}

1.새 폴더 만들기- 폴더 이름 지정 common2. common폴더 안에 또 css폴더 만들기이름에- common/css라고 나옴3. 새 파일 만들기 index.css 4. html로 돌아가서 head에 링크 만들기rel="stylesheet" href="./common/css/index.css">   .은 자기 자신을 의미함   ./common/css/index.css 는 지금 위치에서 common으로 가서 css로 가서 index.css로 가라..(점 두개)는 현재 위치에서 밖으로 나가라는 의미  참고) 이미 넣을 때(경로 설정 할 때) 해당 이미지가 그 html 파일 근처에 있어야 함. 예를 들어 해당 html 파일이 폴더안에 있으면 그 이미지도 해당 폴더 안에 있어야 함. ex) 위 사진의 경로..

DOCTYPE html> Document .top{ background:blue; width: 400px; height: 400px; color:white; } #bottom{ background: red; width:200px; height:200px; } bottom top 네모안에 네모 넣기 (오류가 났을 때는 해당 부분 윗부분을 고쳐볼것. 오타 있으면 뒤로도 실행 안됨) 여백을 없애고 싶을때는 *{ margin:0%; padding:0%; } ------------------------------------------------ css로 ul- li 리스트 안에 점 없애기 ul,li{ list-style:none; } --------------------------------------------..

html 회원가입 사이트 만들기 코드 정리 줄맞춰서 잘하기 중요 html 시작할때 꺽쇠로 쓰지말고 그냥 html:5 치고 엔터 누르면 자동으로 설정됨 class 는 여러개 사용 가능 id는 하나만 사용가능 .은 class를 명시할 때 사용 #은 id값을 명시할 때 사용.-> 중요. 맞춰서 쓰지 않으면 실행 안됨 DOCTYPE html> Document .top{ background:blue; } #bottom{ background: red; } top bottom

6. 줄 바꾸기 태그와 태그가 있다. 태그는 줄 바꾸고 싶은 내용 뒤에 붙여준다. 태그는 해당 내용 앞 뒤에 열고 닫아준다. 7. input 버튼, 체크박스, 아이디/패스워드 입력 칸 등등 삽입하고 싶은 것이 있을 때 사용한다. input태그는 닫지 않아도 된다.