화성갈끄니까아

Display 속성 값 중 가장 기본적인 inline, block, inline-block 요소에 대해서 알아보자! 1. Inline element 인라인 요소는 기본적으로 줄바꿈 없이 순서대로 배치되며 컨텐츠 크기만큼 영역을 사용하는 요소이다. 그렇기 때문에 width와 height를 이용한 크기를 가질 수 없다. 텍스트와 같다고 이해하면 쉬울 것이다. 상하 마진 적용 불가능! but 좌우 마진 적용 가능 (패딩은 상하좌우 모두 가능!!) / / / / / / / / / / / / 2. Block element 블록 요소는 가로폭 전체의 넓이를 가지는 직사각형 형태의 요소이다. 따라서 한줄을 차지하며 블록 요소 뒤에 또 다른 요소들이 오게 되면 밑에 줄에 입력이 되게 된다. 블록 요소는 width와 h..

CSS를 사용해서 요소의 배치를 옮기는 경우 여러 방법들이 존재한다. 그 중 position 속성에 대해 알아보자! 1. position: static 모든 요소들은 position: static 값을 기본 값으로 설정하고 있다. 그렇기 때문에 어떠한 position값도 할당되지 않는다. static은 따로 쓰지 않아도 된다. 2. position: relative 원래 위치를 기준으로 이동시키는 속성이다. 다시 정리하자면, 자기 자신을 기준으로 해서 위치를 이동시킨다. 요소 위치 지정은 top, bottom, right, left를 사용하여 배치할 수 있다. 예시1) 요소1, 요소2, 요소3에 색을 입히고 요소2에 position: relative 속성을 적용시키고 위로 30px 왼쪽으로 30px을 주..

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 ..