HTML+CSS+자바스크립트12 자바스크립트 자바스크립트 동적인 웹 문서 제작과 웹 응용 프로그램 개발을 위한 사용자 인터페이스 개발을 위해서 필수적으로 사용됨. 인터프리터 기반 언어 객체 기반 대소문자 구분 작성방법 브라우저 콘솔에 직접 작성 html 내부에 script 태그를 이용해서 작성 html 외부에 (.js) 파일을 이용해서 작성 태그에 직접 JS코드를 작성 src가 있는 스크립터는 내용X [window.] alert("알림창에 출력할 문구"); console.lof("콘솔창에 출력할 문구"); document.write("화면상에 출력할 문구"); 선택한 요소.innerText = "요소에 출력할 문구"; 선택한 요소.innerHTML="요소에 출력할 문구"; document.write("내용") innerText: 자바스크립트에서 요.. 2023. 5. 25. CSS고급 선택자 background-repeat: 브라우저 화면에 가득 찰때 까지 가로와 세로로 반복하는 것이 기본값. no-repeat을 자주 씀. background-position: 배경 이미지의 위치를 조절 [background-position: ;] background: tor url(() no-repeat center bottom fixed; 속성값이 다르므로 입력 순서는 상관 없습니다. /*img{ background-origin: content-box; right: 0; background-repeat: no-repeat; background-size: cover; position: absolute; } p{ position: relative; }*/ body{ background: white url("... 2023. 5. 24. CSS,박스 모델 궁금했던것: div 태그(한 라인 전체 차지)는 Division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용, 논리적 구분을 정의, CSS를 활용하여 스타일 적용,display 속성이 block임, 줄바꿈이 됨 inline은 한줄에 여러 개(image) span 태그는 display 속성이 inline, 줄바꿈이 안됨. 블록 레벨 요소: 요서를 삽입했을 때 혼자 한 줄을 차지하는 요소, 요소 너비가 100%(h1, div, p) 인라인 레벨 요소: 줄을 차지하지 않는 요소, 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음(image, strong, span) 박스모델: 박스 형태의 요소 콘텐츠 영역 패딩: 박스와 콘텐츠 영역 사이의 여백 테두리: 박스 테두리 마진.. 2023. 5. 23. p.233,234,235 예제 DOCTYPE html> webtrend ul{ list-style: none; line-height: 200%; } strong{ color:#ad3000; } #container{ width: 600px; margin: 20px auto; border: 1px solid #000; background-color: #000; } h2{ color: white; text-shadow: 3px 2px 5px black; } table,td,th{ caption-side: bottom; border: 1px solid black; padding: 10px; border-collapse: collapse; } .heading{ background-color: #eee; } 최신 웹 디자인 트렌드 반응형 웹 디.. 2023. 5. 22. p.191, 192 예제 DOCTYPE html> 상품 소개 페이지 웹 기술-기본 HTML CSS Javascript 기초 h1{ display: inline-block; background-color: #222; color: #fff; padding: 10px; } ul{ list-style: none; } li{ font-size: 1.2em; line-height: 1.5em; color: blue; } 2023. 5. 22. CSS의 기본(1) 스타일(style): HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴. 반응형 웹 디자인 : PC, 모바일과 상관없이 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법. 하나의 웹문서에서 작동하도록하는 것이 스타일의 역할. 배치가 달라짐. CSS스타일의 형식 [선택자 {속성1: 속성값1; 속성2: 속성값2; }] //속성1: 속성값1 = 스타일 규칙. p(타입 선택자: 스타일을 어느 태그에 적용할지 알려줌){(괄호 안에 스타일 정보) text-align(텍스트 정렬 속성): center(값); color(글자색 속성): blue(값); } 스타일 규칙 ;으로 구분하고 {} 안에 나열함. 스타일 주석: /**/으로 여러.. 2023. 5. 22. 이전 1 2 다음
