본문 바로가기

전체 글540

[JavaScript] Chapter 01. 자바스크립트와 웹 브라우저 렌더링 엔진 HTML / CSS 코드를 해석하여 트리를 구성해 전달해주는 역할 받아온 것 중, 자바스크립트는 인터프리터에게 줌 자바스크립트 해석기 인터프리터 HTML 태그 동적으로 움직이게 함 자바스크립트 위치 중요 스크립트는 body 요소 가장 아래 위치 페이지 로딩 문제 중간중간에 자바스크립트 코드가 들어간다면, DOM을 생성하다가 다시 자바스크립트 실행기에 자바스크립트 코드를 보내고 난 후, 다시 DOM을 생성하는 형식이 되기 때문이다. DOM 조작 에러 발생 페이지가 만들어지지 않은 상태에서 에러가 발생할 수 있다. DOM (Document Object Model) 문서 객체 모델 웹 페이지를 이루는 Tag들을 자바스크립트가 이용할 수 있게 브라우저가 렌더링 엔진을 이용해서 Node 객체들이 구성.. 2022. 12. 4.
[CSS] Chapter 05. 선택자(Selector)_3 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 26.
[CSS] Chapter 04. 선택자(Selector)_2 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 25.
[CSS] Chapter 03. 선택자(Selector)_1 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 24.
[CSS] Chapter 02. Cascading 원칙 (적용 우선순위) Cascading : 폭포같은, 계단식의, 위에서 아래로 흐르는, 연속적인 CSS 개발을 할 때, 흔히 겪을 수 있는 실수 : 요소에 CSS를 줬지만 적용되지 않을 때 1. 스타일 우선순위 2. 스타일 상속 1. 스타일 우선순위 선언된 위치 : 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다 브라우저 기본 스타일 < 외부 스타일(External) < 내부 스타일(Embedded) < inline 스타일 Specificity(명시도) : 적용 범위가 더 구체적일수록 우선적으로 적용된다. tag 스타일 < class 스타일 < id 스타일 < inline 스타일 단순 tag로 지정된 스타일 < id/class/attribute 등 직접 지정한 스타일 id는 calss보다 우선이다. 부모로부터 상속받.. 2022. 11. 24.
[CSS] Chapter 01. CSS 적용 1. 내부 스타일 (embedded) 2. 인라인 스타일 (inline) 3. 외부 스타일 (external) 1. 내부 스타일 (embedded) 코드는 위에서부터 아래로 읽는다. style 태그는 body 태그 안에 맨 마지막에 놔둬도 적용이 된다. 렌더링이 잘 되지만, 추후 웹 페이지에 다양한 기능들로 인해 스크립트들이 추가되고, 맨 마지막에 style 태그 코드가 있다면? 맨 처음에는 style 적용이 안된 상태로 렌더링이 되었다가 다양한 기능 로딩후에 style 적용이 된 상태로 렌더링 될 것이다. 그래서 style 태그는 head에 정의해두는 것이다. 2. 인라인 스타일 (inline) Welcom! 3. 외부 스타일 (external) link 태그의 위치는 최상단에 두어야 한다. html의.. 2022. 11. 24.
[HTML] Chapter 04. 시멘틱 웹 시멘틱 웹(Semantic Web) Semantic : 의미의, 의미론적인 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다. non-semantic(div, span) non-semantic 태그를 사용하기 전에, "과연 이게 non-semantic 태그 밖에 사용할 수 없는 것일까?" 내부에 담긴 콘텐츠들이 의미를 갖고있다면 그 의미에 적합한 태그를 사용하는 고민을 해볼 것. 의미론적인 마크업을 사용하면 아래와 같은 이점이 있다. 검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때, 의미론적 마크업을 푯말로 사용할 수 있다. 의미가 없는 끊임없는 div들을 탐색하는 것보다, 의미있.. 2022. 11. 18.
[HTML] Chapter 03. 콘텐츠 블록(Block)과 인라인(Inline) 블록 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다. 상자를 아래로 쌓는 것 인라인(Inline) 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다. 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다. 차이점 블록은 자기가 차지할 수 있는 가로를 죄다 차지하는 반면, 인라인은 컨텐츠가 가지고 있는 공간 만큼만 차지한다. 포함 규칙 - 같은 형태의 다른 요소를 안에 포함할 수 있다. (블록 > 블록, 인라인 > 인라인) - 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다. - 인라인 요소는 블록 요소를 포함 할 수 없다. ("자식이 부모를 가질 수 없다".. 2022. 11. 15.
[HTML] Chapter 02. HTML 문서의 구조 빈 요소 (Empty Elements) 내용(content)이 없다면? → 이미지 , 수평선 , 줄바꿈 등 내용이 없는 요소를 빈 요소(Empty Element)라 부른다. 이 경우, 닫는 태그를 추가로 명시하지 않아도 된다. Empty element, Self-Closing element, Void element, Single tag ... 예시 만약 를 한다고 해서, 빈 요소가 될 수 없다. 빈 요소를 쓸 수 있는 태그들은 태어날 때 부터 웹표준에 정의되어있다. HTML 문서의 구조 html : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보 meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시 body : 웹브라우저.. 2022. 11. 10.
[HTML] Chapter 01. HTML, CSS 그리고 JavaScript 1. HTML(Hyper Text Markup Language)이란? HTML : 다양한 인터넷 정보를 웹 브라우저에 보여줄 때 사용하는 언어, 웹 문서를 만들 때 쓰이는 언어이다. Hyper Text : 문서를 서로 연결해주는 링크를 말한다. 엑셀이나 워드오 다르게 웹 문서를 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다르다. [구조] HTML : 웹 문서의 기본적인 골격을 담당 [표현] CSS : 각 요소들의 레이아웃, 스타일링을 담당 [동작] JavaScript : 동적인 요소(사용자와의 인터랙션)을 담당 웹 페이지 방향성 : 웹 표준, 웹 접근성, 웹 호환성 웹 표준 (Web Standards) 브라우저들끼리의 법칙. HTML5는 W3C에서 2014년에 공식 표준화 2019년에 WH.. 2022. 11. 9.

티스토리툴바