Front-End 4

[Front-End 기본] JavaScript의 기본 - feat. 나만의 MBTI 테스트

JS는 이렇게 작성해야 해요 표기법 - 낙타 표기법(CamelCase) - JS에서는 낙타 표기법을 사용한다. - 낙타 표기법 : 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위하여 따르는 네이밍컨벤션의 하나이다. - ex) cameCase, helloWorld, parkEunSeo 등 첫 글자는 소문자이고, 중간 띄어쓰기가 들어가는 부분에는 띄어쓰기 없이 대문자를 사용해서 이름을 작성한다. 연산자 .js 파일과 .html 파일 연결하기 - index.html 파일에 main.js 파일을 연결하기 위해 html header 부분에 를 추가해서 연결한다. 자바스크립트의 데이터 타입 문자 데이터, String Data 숫자 데이터 논리 데이터, 불린 데이터 Null 데이터 - 아무것도 존재하지 않는 값..

Front-End 2022.12.23

[Front-End 기본] CSS의 기본 문법(2) - feat. 나만의 MBTI 테스트 만들기

박스 모델과 관련된 CSS 속성들 - .html 파일에서 .(dot)을 입력하고 내가 사용할 class의 이름을 입력하게되면 자동완성 기능을 통해 사용할 클래스 이름의 div 태그가 자동완성된다. .container { background-color: orange; height: 200px; padding-top: 30px; padding-left: 30px; width: 70px; } .item { background-color: royalblue; height: 70px; max-width: 150px; margin-bottom: 30px; border: 4px solid red; border-radius: 30px; box-shadow: 30px 10px 30px rgba(0,0,0,0.5); } ..

Front-End 2022.12.22

[Front-End 기본] CSS의 기본 문법(1) - feat. 나만의 MBTI 테스트 만들기

CSS는 이렇게 작성해야해요 h1{ color: red; font-size: 30px; } 선택자 {속성: 값;} - 선택자의 개념은 HTML 파일의 어떤 요소를 선택할 것인지 정하는 것이다. - "속성: 값 ;"의 형태가 여러 개 있을 수 있다. - .html파일에서 class 속성을 가지고 있는 요소를 변경할 경우 .class 이름을 적어준다. CSS 선택자 태그 선택자 클래스 선택자 - 클래스를 선택할 경우 . (dot)을 사용해야 된다! 하위 선택자 - 하위선택자는 div라는 요소 안에 들어있는 것들 중에 .orange class를 가지고 있는 요소들을 의미한다. - 띄어쓰기는 하위 선택자라는 것을 의미한다. - 위 코드 해석은 .orange라는 클래스의 요소들을 찾는데, div의 하위인 요소들을..

Front-End 2022.12.21

[Front-End 기본] HTML의 기본 문법 - feat. 나만의 MBTI 테스트 만들기

HTML은 이렇게 작성해야 해요 Hello World! 내용 내용 내용 Hello World! 내용 - / (슬래시)가 있는 태그는 종료태그, 닫힌태그라고 부른다. - 태그 사이 부분에 내용과 다른 태그를 입력할 수 있다. - 태그에는 속성과 값을 사용할 수 있다. - class는 h1태그에 또 다른 별명이 된다. 비어있는 태그도 있어요 - br : break의 약자로 종료태그가 없고, 줄바꿈을 할 때 사용한다. - img : image의 약자로, source에 이미지의 경로를 추가하면 이미지가 추가된다, alt는 alternative의 약자로 이미지의 이름을 지정할 수 있다. HTML 요소의 부모와 자식 관계 Apple Banana -ul 내 li들은 ul의 자식 요소이고, li들은 ul이 부모 요소가..

Front-End 2022.12.18