Semantic Web이란? 시멘틱 웹은 직역을 하면 의미있는 웹이라는 뜻이다. 제목 위의 예시에는 제목을 표현하기 위해서 h1이라는 태그를 사용하였다. h1을 사용함으로써 개발자가 의도한 목적을 쉽게 알 수 있으며 코드의 가독성 또한 높여줄 수 있는 효과를 가질 수 있다. 제목 HTML5 이전에는 시멘틱 태그라는 개념이 존재하지 않았기 때문에 span태그와 div태그가 남발되었는데 이는 코드의 가독성을 감소시킬뿐만 아니라 웹의 접근성 좋지않은 단점을 지니고 있다. 쉽게 말해서 시멘틱 웹은 개발자가 의도한 의미를 가지고 있는 웹이다. Semantic Tag Semantic tag table img header nav section article footer time summary Non-semantic ..
▶ HTML 띄워쓰기 기본적으로 HTML은 한번의 스페이스바만 인식하기 때문에 아무리 많은 스페이스바를 표현하려 해도 출력되지 않는다. 따라서, 2칸 이상 띄워쓰기 효과를 나타내기 위해서는 2가지의 방법이 있다. 1. 2. text-indent 첫 번째 방법은 HTML 태그안에서 사용하는 방법이다. 안녕 예시입니다. 위의 예시는 p태그에 를 입력하였다. 는 한번의 스페이스바를 누른 것과 같은 효과이다. 따라서 예시에서 6번의 를 입력하였으니 6번의 스페이스바를 누른것과 같다. 두 번째 방법은 css를 통한 방법이다. text-indent: 50px; text-indent를 통하여 50px만큼 앞에 공간을 띄운 뒤 텍스트를 출력해주는 방식이다. ▶ border HTML에서 텍스트를 입력한 뒤 해당 텍스트의..
자바스크립트 반복문 반복문은 왜 사용하는 것일까? 반복문을 사용하는 가장 큰 이유 중 하나는 중복된 작업을 피하기 위해서다. 예를 들어서 8을 100번 출력해야하는 과제가 있다. 반복문을 사용하지 않으면 다음과 같은 코드를 100번 입력해야 한다. console.log(8) 따라서 100번의 작업을 하다보면 실수의 가능성 또한 높아지고 여러므로 좋지 않다는 것을 느낄 수 있을 것이다. 반복문(loop) 사용하기 : 자바스크립트에서는 for, while, do while을 사용할 수 있지만 이번에는 for문만 알아보겠다. for문의 기본 문법 for(let i=0; i
자바스크립트에서 자주 사용되는 메소드를 알아보자! 1. Number 메소드 1. Number.parseFloat() Number.parseFloat()는 문자열로 선언된 숫자만 실수 형태로 반환하는 메소드이다. Number.parseFloat("123"); // 123 Number.parseFloat("32.12"); // 32.12 Number.parseFloat("30HELLO"); // 30 Number.parseFloat("10 20 30"); // 10 Number.parseFloat("HELLO 50")); // NaN 다음과 같이 문자열로 선언된 123이 실수 형태의 123으로 반환하였다. 문자열에 여러개의 숫자가 있으면, 가장 첫 번째 문자열의 숫자만 반환한다. 5번째 줄의 문자열에 문자-..
변수가 필요한 이유는 무엇일까? console.log(7); console.log(7); console.log(7); 이러한 문장이 100개가 있다고 가정하자. 만약 7에서 8로 수정작업이 필요하다면 하나하나 100번의 작업이 필요하게 되는 셈이다. 하지만 변수를 활용하여 7의 값을 a라는 변수에 적용하고 값을 변경하는 작업이 필요할 때에는 a에 들어가는 7의 값만 고쳐주기만 하면 된다. 예시는 밑의 코드와 같다. let a = 8; console.log(a); console.log(a); console.log(a); ★ 따라서 변수를 통하여 중복된 작업을 피할 수 있으며 코드의 가독성 또한 높아진다는 것을 알 수 있다. 그렇다면 변수를 선언하는 방법은 어떤것이 있을까? var & let & const ..
자기소개 페이지를 구성하고 있는 CSS 코드이다. body { margin-left: 0; margin-top: 0; margin-bottom: 0; margin-right: 0; } /* --- navbar --- */ .navbar { background-color: #DAB88B; height: 60px; } .navbar:hover { opacity: 0.7; } .navbar p { font-size: 25px; font-family: 'Nunito Sans'; font-weight: bold; color: white; display: inline; margin-left: 200px; line-height: 50px; } .navbar ul { float: right; } .navbar li {..
- Total
- Today
- Yesterday