HTML, CSS, JavaScript18 CSS 첫걸음 CSS는 Cascading Style Sheets의 약자다. casecade는 '작은 폭포, 폭포처럼 쏟아지는 물'이라는 뜻인데 폭포처럼 위에서부터 아래로 스타일을 적용시키는 것이다. css는 html 문서에 우리가 태그로 작성한 요소들에 접근해서 스타일을 적용할 수 있게 한다. 아래는 html의 p요소에 접근해 색깔, 너비, 테두리를 적용한 것이다. p { color: red; width: 500px; border : 1px solid black; } 이렇게 앞에 스타일을 적용하고 싶은 html 요소를 지정하고 {} 안에 원하는 스타일을 적으면 된다. 하지만 위처럼 적용하면 모든 p요소가 저런 스타일로 적용된다. 그래서 다양한 선택자를 통해 더 자세하게 html 요소를 지정할 수 있다. p{} /* .. 2022. 7. 4. HTML 첫걸음 HTML은 HyperText Markup Language의 약자로 HyperText는 웹 페이지를 다른 페이지로 연결하는 링크고, Markup Language는 태그 등을 이용해서 문서나 데이터의 구조를 명기하는 언어다. 대충 링크를 누르면 이 페이지, 저 페이지 이동할 수 있는데 그게 태그로 구조화된 것 같다. 그래서 어떨 때 사용할까? 웹 콘텐츠의 '의미'와 '구조'를 정의할 때 사용한다. html은 안에 원하는 요소를 적어서 문서를 구조화할 수 있는데 안에는 태그 외에도 필요한 속성을 적을 수 있다. 는 닫는 태그인데 경우에 따라 필요없는 경우도 있다. hello world! Mozilla Manifesto html은 이런 태그들을 이용해서 하이퍼링크도 만들고, 문서 구조도 만들고, 입력창, 버튼,.. 2022. 7. 3. 객체 1. 객체 객체는 관련된 데이터와 함수의 집합이다. 객체 안에 있는 데이터는 프로퍼티, 함수는 메서드라고 부른다. 객체의 프로퍼티는 key를 통해서 쉽게 찾을 수 있다. 자바스크립트에서 객체를 만드는 것은 변수를 만드는 것과 비슷하다. var person = {}; 객체에 프로퍼티와 메서드를 넣어보자 const person = { name: ['Bob', 'Smith'], age: 25, gender: 'male', interests: ['music', 'programming'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ; this.age + ' years old. He likes ' + this.interests[0] + ' .. 2022. 6. 30. 화살표 함수 기본 화살표 함수는 함수 표현식을 더 간단하게 쓰는 방법으로 문법의 생김새 때문에 이런 이름이 붙여졌다. let func = (매개변수1, 매개변수2...) => {함수 내용}; 위의 화살표 함수는 아래의 함수 표현식과 같다. let func = function(매개변수1, 매개변수2...){ 함수내용 }; 매개변수가 하나도 없을 때는 괄호를 비워놓으면 되는데, 이 때 괄호를 생략해서는 안된다. let sayHi = () => alert("HI!!"); sayHi(); 참고 : https://ko.javascript.info/arrow-functions-basics 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arr.. 2022. 6. 30. 이전 1 2 3 4 5 다음