개발/HTML
HTML 기본 용어 요소, 태그, 속성 설명
HTML을 이해하려면 다음의 세 가지 기본 용어에 대해 알아야 합니다. 요소(elements) 태그(tags) 속성(attributes) 요소 요소(elements)는 페이지 내 구조와 콘텐츠를 정의합니다. 가장 많이 사용되는 요소로는 제목에 사용되는 ~ 요소와 문단에 사용되는 뿐, 그리고 , 등이 있습니다. 이처럼 요소는 을 사용하여 표시합니다. 태그 태그(tags)는 요소를 감싸고 있는 를 일컫습니다. 이러한 태그는 보통 여는 태그와 닫는 태그로 구성됩니다. 다음 예시에서 여는 태그 와 닫는 태그 활용 예시를 살펴볼 수 있습니다. 콘텐츠는 각 여는 태그와 닫는 태그 사이에 작성합니다. Hello, World! , img,
HTML 역사, HTML 5가 되기까지 무슨 일이 있었던 걸까요?
HTML은 하이퍼링크를 통해 문서들을 전자적으로 연결하기 위한 방식으로 처음 만들어졌습니다. 당시는 1990년대 초반이었는데요. 컴퓨터 과학자들은 다양한 논문 자료들의 목록을 관리하기 위해 인터넷을 사용하고 있었습니다. 그러나 오늘날에는 당연시 되는 하이퍼텍스트를 사용한 링크의 개념이 당시에는 존재하지 않았는데요. 즉, 이 글을 읽다가 이전 글로 이동하게 되는 개념이 없었던 것이죠. 과학자들에게는(?) 스타일링이니 폰트니 그런 것들은 중요하지 않았고, 그저 멋진 다른 논문을 빠르게 읽기 위한 방법이 필요했습니다. 이러한 문서들을 빠르게 연결하기 위해 HTML이 처음 등장하게 되었습니다. 그러다 1993년 모자익(Mosaic)이라는 회사가 '인터넷에서 재미없는 논문말고 사진도 좀 보여주고 해야지 않겠냐'하..
HTML이란? HTML 뜻 설명 ✔️
HTML은 HyperText Markup Language을 뜻합니다. 어떤 의미일까요? 용어를 하나씩 살펴보도록 하겠습니다. 하이퍼텍스트 먼저, 하이퍼텍스트(HyperText)입니다. 하이퍼텍스트는 링크를 통해 한 문서에서 다른 문서로 이동할 수 있는 텍스트입니다. 하이퍼는 초(超)라는 의미를 갖고 있죠. 여러분이 어떻게 지금 이 웹페이지에 방문할 수 있었을까요? 바로 하이퍼텍스트를 통해서 입니다. 검색 또는 우연한 기회로 이곳으로 이동하는 링크가 걸린 텍스트를 클릭한 것입니다. 이처럼 여러 HTML 문서들은 하이퍼텍스트를 통해 서로에게 연결됩니다. 마크업 다음으로 마크업(Markup)입니다. 마크업은 텍스트(콘텐츠)가 표시되는 방법을 의미합니다. 쉽게 이해가 안 될 수도 있지만, 예를 살펴보면 간단합니..
HTML에 자바스크립트를 연결하는 세 가지 방법 ✔️
HTML 문서에서 다음 세 가지 방법으로 자바스크립트 코드를 연결할 수 있습니다. 1. script 태그 내에 직접 작성 이때, HTML 4.x 버전의 경우 아래와 같이 그러나 HTML 5의 경우에는 자바스크립트가 기본 언어로 지정되어 있기 때문에 이러한 속성을 부여해 주지 않아도 됩니다. 2. 외부 파일 추가 HTML 파일 내에 직접 코드를 작성하지 않고 싶다면, 다음과 같이 별도의 외부 파일로 자바스크립트를 삽입할 수 있습니다. 이처럼 외부 파일을 통해 자바스크립트를 추가할 경우, HTML과 코드가 분리되어 관리가 용이하며, 내부에 직접 자바스크립트를 추가하는 것보다 페이지 로딩 속도가 빨라질 수 있습니다. 참고 자료 w3schools - JavaScript Where To Tutorial Teach..
HTML 라디오 버튼 설명
라디오 버튼은 여러 선택지들 중에서 하나를 선택해야 할 때 사용합니다. 라디오 버튼은 보통 여러 개의 라디오 버튼이 존재하는 라디오 그룹을 구성하며 태그에 type="radio" 속성을 부여해 생성합니다. Please select your favorite food: Orange Banana Tomato Submit 이러한 라디오 그룹을 구분하는 기준은 name 속성입니다. 동일한 name인 경우, 같은 라디오 그룹에 속합니다. 라디오 버튼은 하나만 선택할 수 있으며, value 속성을 통해 선택된 라디오 버튼 값을 저장할 수 있습니다. 그러나 위 태그와 속성은 사용자 화면에는 표시되지 않습니다. 따라서 다음과 같이 id와 태그의 for 속성을 사용해야 합니다. Orange 이를 활용해 다음과 같은 라디오..
메타 태그란 무엇이며 왜 사용할까?
메타(meta) 태그를 사용하는 이유는 HTML을 통해 만든 웹페이지를 브라우저가 개괄적으로 판단할 수 있도록 도움을 주기 위해서다. 우리는 웹을 훑어보고 어떤 주제와 내용을 담고 있는지 살펴볼 수 있다. 그러나 브라우저는 인간처럼 그렇게 하지 못하기 때문에, 메타 태그를 설정해 줌으로써 브라우저가 웹을 더욱 잘 이해할 수 있게 도와주는 것이다. 즉, 메타 태그를 통해 웹에 대한 개략적인 정보를 제공하고, 브라우저는 이를 통해 보다 체계적인 분류를 진행한다. 가장 일반적으로 널리 사용되는 태그는 다. 이는 브라우저가 웹페이지를 해석하는 방식(디코딩)을 지정해주는 것인데, 이를 인코딩 과정이라 한다. 참고로 UTF-8(8-bit Unicode Transformation Format)이란 전 세계 모든 문자..
파싱이란? 파싱의 뜻은 무엇일까? (번역)
파싱(parsing: 구문 분석)은 하나의 프로그램을 런타임 환경(예를 들면, 브라우저 내 자바스크립트 엔진)이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미합니다. 즉, 파싱은 문서의 내용을 토큰(token)으로 분석하고, 문법적 의미와 구조를 반영한 파스 트리(parse tree)를 생성하는 과정입니다. 브라우저는 HTML을 DOM 트리로 파싱합니다. HTML 파싱에는 토큰화와 트리 구조가 포함됩니다. HTML 토큰에는 시작 태그와 마침 태그가 포함되며, 속성 이름과 값도 포함됩니다. 형식을 잘 갖춘 문서라면 파싱은 직관적이고 빠르게 진행될 것입니다. 파서(parser)는 토큰화된 입력값을 문서에 파싱하며, 다큐먼트 트리를 구성합니다. HTML 파서가 이미지와 같은 비블로킹 자료(..
