Frontend 검색 결과
11 개의 검색 결과가 있습니다.
Frontend/HTML

[HTML] Element(요소) Block vs Inline

Element의 종류 HTML에는 아래 두 가지 종류의 요소(Element)로 구분할 수 있다. Block-level elemets(블록 라벨 요소) Block-level element는 inline-level element에 중첩될 수 없고, Block-level element끼리는 중접될 수 있다. 웹페이지 상에 Block(블록)을 만드는 요소로 앞뒤 Element 사이에 새로운 줄을 만들고 나타난다. 즉 이전 Block-level element와 이후 Element 사이의 줄 바꿈이 일어난다는 것이다. Inline elements(인라인 요소) 새로운 줄을 만들지 않는다. 즉 inline elements 간에는 줄 바꿈이 일어나지 않는다. 항상 Block-level element에 포함되어 있으며,..

2022. 11. 2. 06:40
Frontend/HTML

[HTML] Element(요소)의 구조

Element의 구조 This is my text. Element(요소)는 아래 태그와 내용, 그리고 속성으로 구성되어 있다. Opening tag(여는 태그) : 요소의 이름과 열고 닫는 꺽쇠 괄호()로 구성되며, 이후부터 Element의 효과가 적용되기 시작한다. Opening tag에는 **attributes(속성)**을 작성할 수 있다. Closing tag(닫는 태그) : 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 Opening tag와 같음. Element의 끝에 위치한다. Closing tag를 적어주지 않는 오류가 종종 있으며, 별도의 Error code는 나타나지 않으나, 이상한 결과를 보여준다. Context(내용) : Opening tag와 Closing tag 사이의 tex..

2022. 11. 2. 06:36
Frontend/Javascript

[JavaScript] Strict Mode(엄격 모드) 적용하기

JS의 엄격모드는 JS의 제한된 버전을 선택하여 암묵적인 "느슨한 모드(sloppy Mode)"를 해제하기 위한 방법이다. Strict mode 적용 방법 아래와 같은 코드를 JS 파일 제일 상단에 추가하여 전체 스크립트에 Strict mode를 적용할 수 있다. "use strict"; 또한 아래와 같이 함수에 Strict mode 할 수 있다. function strict() { // 함수-레벨 strict mode 문법 'use strict'; function nested() { return "And so am I!"; } return "Hi! I'm a strict mode function! " + nested(); } function notStrict() { return "I'm not stri..

2022. 7. 7. 17:00
Frontend/Javascript

[JavaScript] 스크립트 삽입 방법(head vs body / async vs defer)

HTML에서 스크립트를 직접 작성하지 않고 외부 스크립트 파일을 로드할 때 로드 방법에 대해 알아보도록 한다. 스크립트 삽입 HTML페이지에서 외부 스크립트 파일은 보통 아래와 같은 코드를 삽입하여 가져오게 된다. HTML 페이지를 파싱(Parsing) 하는 중 위와 같은 코드를 만나게 되면 DOM 생성을 멈추고 스크립트파일 다운로드를 진행하게 된다. 그리고 스크립트 파일 다운로드가 완료되고 나서야 다시 파싱을 재개하게 되는데 여기서 중요한 건 스크립트 삽입 위치에 따라 렌더링 시간이 달라진다는 사실이다. 각기 다른 삽입 위치와 속성에 따른 렌더링 시간의 차이에 대해 알아보자. 1. 에 포함시킬 경우 2. 위와 같이 HTML 페이지를 파싱을 먼저 진행하고 JS파일을 받아오고 실행하게 된다. 에 삽입하게 ..

2022. 7. 7. 16:30
Frontend/Javascript

[Javascript] for in VS for of

for in VS for of for in 문은 객체의 속성 이름(array의 index, dictionary의 key)를 통해 구문을 반복하고, for of 문은 속성 값(array, dictionary의 value)를 통해 구문을 반복한다. for...in 문 for (variable in object) { statements } for...of 문 for (variable of object) { statement }

2022. 6. 18. 16:32
Frontend/Javascript

[Javascript] for문

for 문 for 반복문은 아래와 같은 기본 형태를 가지며, 조건문이 거짓으로 판별될 때까지 반복된다. for ([초기문]; [조건문]; [증감문]) { [반복될 문] } ㅇ for 문의 실행 단계 1. 초기화 구문인 초기문이 존재한다면 초기문이 실행. 보통 1이나 반복문 카운터로 초기 설정이 되며, 변수로 선언되기도 한다. 2. 조건문이 참이라면, 그 반복문은 실행되며 거짓일 경우, for문은 종결된다. 조건문이 생략될 경우 그 조건문은 참으로 추정된다. 3. 반복문이 실행되며, 이후 갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아간다.

2022. 6. 18. 16:09