Informatics

목차 4. 태그는 사용된 문자의 집합, 검색 엔진에 대한 키워드, 페이지에 대한 설명, 페이지 작성자, 그리고 뷰포트를 정의하는 데 사용된다. 아래는 각각의 예시를 나타내고 있다. 5. 로 연결해주면 된다. or or 위 3가지 방식은 비슷해 보이지만 미묘한 차이가 있다. 브라우저는 자바스크립트를 가져오고 HTML을 분석하기 때문에 자바스크립트로 HTML 요소를 다루기 위해서는 HTML 요소를 먼저 분석하고 자바스크립트를 가져와야 한다. defer를 사용하는 방식은 문서상의 순서대로 수행을 하는 것이다. async를 사용하면 동기 처리를 통한 병렬로 HTML분석이 이루어질 때도 스크립트를 불러온다. 마지막 방식은 그냥 script태그를 최하단에 위치시키는 것이지만 이 방식은 보기에도 좋지 않고 편리하지 ..

목차 DTD란? Doctype란? 1. DTD란? DTD(Document Type Definition)는 문서 형식을 정의하는 컴퓨터 용어로, SGML 계열의 마크업 언어에서 문서 형식을 정의하는 것이다. SGML을 비롯해 HTML, XHTML, XML 등에서 쓰인다. 2. Doctype이란? Doctype 태그에 대해 설명하기 이전에 HTML의 버전에 대해 알고 있을 필요가 있다. 아래 표는 연도별 HTML의 버전을 보여준다. 아래 표를 보면 알 수 있듯이, HTML에는 다양한 버전이 있다. 각각의 문서 별로 문서의 형식 또한 다르다. 따라서 어떤 형식으로 문서가 작성되는지를 나타내 주는 태그가 DOCTYPE이다. HTML 4의 경우에는 메타태그가 다음과 같이 매우 길었다. http://www.w3.o..

목차 복합 선택자 자식 선택자 하위 선택자 인접 형제 선택자 일반 형제 선택자 1. 복합 선택자 지난 시간에는 전체, 태그, 클래스, id 선택자에 대해서 알아보았다. 또한 전체, 태그, 클래스, id 선택자들의 우선순위에 대해서도 알아보았다. 만약 아직 해당 선택자들을 아직 모른다면 "[CSS]2. 기본 문법 - 선택자의 종류와 우선순위" 글을 읽고 오길 바란다. 복합 선택자는 말 그대로 2개 이상의 선택자를 모두 만족하는 선택 자이다. 아래 예시를 보면 쉽게 이해가 될 것이다. 아래 코드를 설명해 보자면, p태그이면서 ong 클래스를 가리키고 있다. 복합 선택자를 사용하면서 주의해야 하는 점은 선택자를 붙여주어야 한다는 것이다. 이것이 의미하는 것이 무엇이냐면, 아래 예제에서 p. ong이 아닌 p...

목차 기본 문법 전체 선택자 태그 선택자 클래스 선택자 id 선택자 선택자의 우선순위 1. 기본 문법 CSS의 기본적인 문법은 다음과 같다. HTML강의를 들었던 분들은 h1태그가 무엇을 의미하는지 알 것이다. h1태그를 모르는 사람들을 위해 이 태그가 무엇인지 간단하게 설명하고 가자면, h1 태그는 주로 제목을 나타낼 때 쓰인다. 아래 코드를 분석해보자면 중괄호 앞의 h1은 선택자, 중괄호의 시작부터 끝부분 까지를 선언 부라고 한다. color와 font-size와 같이 :의 왼쪽 부분에 위치하는 것은 속성 명, :의 우측에 위치한 것은 속성 값이라고 하며 이 두 개를 하나의 속성이라고 부른다. 또한 속성끼리는 아래와 같이 ;로 구분해줘야 한다. h1{color: yellow; font-size: 5p..

목차 CSS란 무엇인가 CSS의 필요성 이 강의에서 다룰 내용 1. CSS란 무엇인가? CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)로, CSS의 사전적 정의는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)이다. 이를 쉽게 설명하자면 우리가 잘 알고있는 마크업 언어중에 한 종류인 HTML을 예로 들어보자면, HTML을 꾸며준다라고 생각하면 편하다. 2. CSS의 필요성 위에서 말했듯이 CSS는 HTML을 꾸며주는 역할을 한다. 꾸며주는 역할을 한다고 하면 굳이 필요할까? 라는 의문을 가지고 있는 사람도 있을것이다. CSS의 필요성을 위해서 내가 만든 사이트를 비교하면서 보여주겠다. 왼쪽은 내가 HTML, CSS 그리고 간단한 ..

목차 HTML 태그들의 구조 블록 요소와 인라인 요소 HTML 태그의 구조 HTML 태그의 가장 기본적인 형태는 위 사진과 같다. 대부분의 태그는 여는 태그와 닫는 태그로 이루어져 있으며, 여는 태그는 , 닫는 태그는 로 구성되어있다. 다만 img 삽입태그와 같이 일부 태그는 닫는 태그가 존재하지 않는다. 닫는 태그와 여는 태그를 통틀어 요소라 부른다. 블록 요소와 인라인 요소 HTML의 태그들은 블록 요소와 인라인 요소로 분류된다. 아래 글은 mdn에서 정의하는 블록 요소와 인라인 요소의 정의입니다. 블록 레벨 요소(Block-level elements) 는 웹페이지 상에 블록(Block)을 만드는 요소입니다. 블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타납니다. 즉 블록 레벨..

목차 HTML이란? 개발환경 셋팅 기본적인 태그 HTML이란? HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 개발환경(VSC) 셋팅 먼저 https://code.visualstudio.com/download..