Front-end (23) 썸네일형 리스트형 [CSS] float 속성과 clear 속성 float는 요소를 붕 띄워서 왼쪽으로 정렬하게끔 해주는 속성이다. 예를 들어 과 같은 화면을 만들고자 할 때 html 코드가 이고 CSS 코드를 .container_wrapper { width: 800px; } .header { width: 100%; height: 50px; background: aquamarine; } .left_container { width: 20%; height: 400px; background: cornflowerblue; } .right_container { width: 80%; height: 400px; background: coral; } .footer { width: 100%; height: 100px; background-color: grey; } 이렇게만 쳤을 때 .. [CSS] 글자 스타일링 방법 1. 자간 조절 - letter-spacing: 1px; 2. 스타일이 겹칠 경우 - html 코드 안의 style 속성 > id > class > tag 순으로 적용됨 [HTML] 이미지 경로 지정 : 절대경로와 상대경로 이미지의 경로를 지정하는 방법은 절대경로와 상대경로가 있다. 이 절대경로와 상대경로는 이미지 삽입뿐 아니라 링크를 걸때도 똑같이 적용되는 부분이므로 아주 중요하다. 절대경로와 상대경로를 처음에 제대로 지정하지 않으면 프로젝트가 커졌을 때 큰 어려움을 겪을 수 있기 때문에 처음부터 제대로 설정하는 것이 중요하다. 절대경로 어떠한 웹 페이지나 파일이 가지고 있는 고유한 경로를 절대경로라고 한다. 웹페이지에서 이미지의 URL을 가지고 오거나 내 컴퓨터 안의 이미지 경로를 가져올 때 절대경로를 사용한다고 한다. 웹페이지의 이미지 주소를 불러오는 경우 코드를 이런 식으로 짤 수가 있고 내 컴퓨터 안의 이미지 경로를 불러오는 경우에는 이렇게 코드를 짤 수가 있다. 이러한 방식들이 절대경로를 이용한 방식이다. 그러나.. [JavaScript] document.getElementById('').style.display와 document.getElementsByClassName('').style.display의 차이 button의 onclick 속성을 이용해서 버튼을 누르면 알림창이 닫히고 나오는 연습을 하고 있었다. 먼저 html 코드는 알림창임 닫기 버튼 css 코드는 .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } JavaScritp 코드는 함수를 이용해서 function display(css) { document.getElementById('alert').style.display = css; } 이런식으로 짜봤더니 잘 실행 되었다. 이번엔 id값을 따로 주지 않고 class값만 주어서 코드를 짜봤다. html 코드는 ID를 입력하세요 버튼1 PASSWORD를 입력하세요 .. [JavaScript] 자바스크립트 Document 1. Document속성 브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조한다. 즉 window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다. window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다. 이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다. 자바스크립트에서 'window.'은 생략할 수 있다. document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API(Application Programming Interface)를 제공한다. 2. 요소를 선택하기 위해 사용할 수 있.. div class, id, name의 차이? 1. 와 의 차이 : id 선택자는 특정(하나의) 요소만 지칭하고자 할 때 쓰인다. : class 선택자는 여러 요소들에 정체성을 부여하여 지칭할 수 있다. 2. , , 의 차이 1) html 태그의 id나 class 속성에 부여된 값은 CSS 파일이나 태그에서 선택자로서 역할을 수행할 수가 있다. 2) name은 선택자로서의 역할을 수행할 수 없다 Q. 그럼에도 name을 사용하는 이유? · name 속성은 요소의 역할에 대한 참조로써 지정하는 속성이며, 자바스크립트 코드에서도 참조될 수 있는 속성으로서 의미가 있는 속성이라고 할 수 있다. CSS에서는 선택자로 사용되지 않는 name이지만 자바스크립트에서는 가능하다. 참고 1. html - Which to use or ? - Stack Overflow.. [JavaScript] 자바스크립트 DOM이란? DOM은 'The Document Object Model'의 약자이며, 이것을 번역하면 '문서 객체 모델이다. 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서에 접근하기 위한 일종의 프로그래밍 *인터페이스(interface)이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. - DOM은 웹문서의 구조와 내용이 담긴 객체를 데이터로 표현하는 방식이다. 인터페이스(interface)는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면이다. 즉, 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미한다. 컴퓨팅에서는 컴퓨터 시스템끼리 정보를 교환하는 공유 경계면.. [JavaScript] 자바스크립트 for 반복문 연습 (구구단) for (let i = 2; i [JavaScript] i++와 ++i의 차이점 참고 : 자바스크립트 a++와 ++a의 차이점 (yongho-coding.com) i++는 기존의 값을 가진채로 이후에 +1을 한다. ++i는 기존의 값에서 +1을 한 값을 가진다. ex) let a = 1; let b = 1; console.log(a++); // 1 console.log(++b); // 2 document.write() console.log() 와는달리 괄호 안에 들어가 있는 것을 페이지에 "쓰는(출력하는)" 함수 이전 1 2 3 다음
