고양의 성장일기

헤드 태그 내부엔 여러 가지 메타데이터나 CSS 등 HTML 전역 구조와 스타일에 영향을 미치는 요소가 포함됩니다.같은 맥락으로 아래와 같은 경우 스크립트 태그는 헤드 태그 내부에 위치하게 됩니다. 1. 라이브러리를 로드하는 경우2. 소셜미디어 API를 초기화 / 호출3. DOM을 초기화 또는 전역변수 / 함수 선언4. SEO 및 Google Analytics와 같은 추적 코드 바디 태그 내에 스크립트 태그가 포함되는 것은 일반적이지 않지만, 바디태그 내부에 스크립트가 위치해야 하는 경우가 있습니다.광고나 소셜미디어 위젯과 같이 특정 DOM 안에서만 작용해야하는 경우 해당 요소 내부에 스크립트 태그가 배치됩니다. 왜 일반적이지 않은지 그 이유는 아래에서 설명하도록 하겠습니다.가장 일반적이고 좋은 ..

태그에서 업로드 파일 타입 제한하기HTML의 file 타입의 input 태그를 통해 파일을 업로드 할 떄, 업로드 파일의 속성을 제한할 수가 있습니다.정확히 말하면 accept 속성을 사용하여 업로드 가능한 화이트리스트를 설정해주는 것이죠. 특정 파일 타입 허용하기MIME 타입을 이용해 특정 카테고리의 파일만 허용할 수 있습니다.//이미지 타입만 허용//오디오 타입만 허용//비디오 타입만 허용//여러 개의 카테고리 허용 몇몇 개의 특정 확장자만 허용하고 싶은 경우 아래와 같이 설정할 수 있죠.//JPG만 허용//PNG도 허용//문서파일만 허용'제한적'인 '업로드 제한'input 태그를 통한 업로드 제한은 클라이언트 조치이기 때문에 개발자 도구를 통해 우회하거나 파일 선택 단계에서 우회할 수도 있습니다.따..

HTML 요소에 공간 할당하기(Block, Inline, Inline-blcock) HTML 문서에 존재하는 거의 모든 요소는 저마다의 공간을 할당받아 차지하게 됩니다. 어떤 요소가 얼마만큼의 공간을 할당받는지 결정하는 속성이 바로 "display"입니다. display 속성의 값 요소가 화면에 어떻게 표시되는지를 정의하며 속성 값으로는 네 가지 값을 가지게 됩니다. none block inline inline-block 각각 속성에 따라 화면에 어떻게 표시되는지 간단히 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 "display: none" "display: block" "display: inline" "display: inline-block" none 요소가 화면에서 보이지 않게 됩니다. ..

HTML 문서에 표 만들기 - 테이블 자료를 단순히 나열하는 1차원 데이터의 경우 리스트를 사용할 수 있지만 행과 열을 나누어 데이터를 효율적으로 표시하기 위해서는 표를 사용하는 편이 더 좋습니다. HTML은 다량의 데이터를 체계적이고 효율적으로 표시하기 위해 태그를 제공합니다. 또한 태그와 관련되어 여러 가지 다양한 성격을 가진 하위 태그들이 존재하는데 한번 가볍게 훑어보겠습니다.😊 테이블을 표현하는 기본적인 방법 태그의 하위 태그로서 가장 대표적이고 보편적으로 쓰이는 태그와 , 태그가 있습니다. 태그는 Table row, 즉 하나의 행을 표시합니다. , 태그는 Table head와 Table data로서 각 행의 열을 담당합니다. 사용 예시를 들어보겠습니다. 🙂 HTML 삽입 미리보기할 수 없는 소스..

HTML 문서에 체계적인 자료 구성하기 - 리스트와 테이블 리스트 (List) HTML에서는 예를 들거나 순서를 설명할 때 사용되는 리스트 요소를 제공합니다. 리스트 요소는 크게 세가지로 구분됩니다. 순서가 있는 리스트(Ordered list) 순서가 없는 리스트(Unordered list) 내용을 정의하는 리스트(Definition list) 순서가 있는 리스트 리스트 세트 태그와 리스트 요소 태그로 이루어집니다. 순서가 없는 리스트 리스트 세트 태그와 리스트 요소 태그로 이루어집니다. 내용을 정의하는 리스트 리스트 세트 태그, 용어를 정의하는 태그, 용어를 설명하는 태그로 이루어집니다. HTML 삽입 미리보기할 수 없는 소스 순서가 있는 리스트! Ordered list 샘플입니다. Ordered li..

HTML 문서에 링크와 이미지를 삽입해 보자 HTML 문서에는 텍스트 외에도 다양한 리소스가 포함될 수 있습니다. 다른 웹페이지로 이동시켜 주는 하이퍼 링크, 이미지, 각종 동영상 등등 웹페이지에서 볼 수 있는 모든 것이 포함됩니다. HTML 링크 삽입하기 링크는 역할에 따라 크게 두 가지로 나눌 수 있습니다. 다른 웹 페이지로 이동시켜 주는 링크 문서 내 다른 위치로 이동시켜 주는 링크 링크를 표시할 때에는 태그를 사용하며 href 속성으로 URL을 지정해 줍니다. 외부 웹 사이트로 이동하고 싶을 때에는 href 속성에 해당 웹 사이트 주소를 넣어주면 됩니다. 동일한 웹 페이지의 특정 요소로 이동하는 북마크를 만드는 방법은 아래와 같습니다. 요소 주변에 태그를 넣고 name 속성으로 이름을 정해줍니다...

HTML 요소에 스타일을 적용해보자 스타일 (CSS, Cascading Style Sheet) 여기서 언급되는 스타일이란 HTML문서의 스타일과 레이아웃을 결정짓는 언어인 CSS3를 지칭합니다. 스타일 적용하기 (Inline Style) HTML 문서에 스타일을 적용하기 위해 "style" 속성을 사용할 수 있습니다. 글자나 요소를 가운데로 정렬하거나 배경, 요소의 크기 등을 조절할 수 있습니다. 여러가지 스타일을 적용하고 싶다면 값을 세미콜론으로 구분해 지정할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 HTML에 스타일 적용하기! HTML에 스타일 적용하기! HTML에 스타일 적용하기! 글씨색을 변경하고 바로 위 요소와 10 Pixel 만큼 거리를 띄우는 스타일을 적용한 예제입니다. 또한 모..

HTML 텍스트 요소를 정리해 보자 - Character Set과 Entity 문자 Character Set (문자셋) 문자셋은 HTML 문서가 문자를 표시하는 일종의 인코딩 방식입니다. 문자셋은 여러 종류가 존재하며 각각 표현할 수 있는 문자의 수와 종류가 다릅니다. Page Title ... 중략 현재 대표적으로 아래와 같은 문자셋이 사용됩니다. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다. ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다. UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 ..

HTML 텍스트 요소를 정리해 보자 - 축약어와 주소 축약어 (Abbreviation) HTML은 각종 축약된 용어를 강조하기 위한 태그도 제공합니다. 태그는 사실 아무 곳에나 사용할 수 있지만, 이 태그가 적용된 단어는 어떤 용어의 축약형이라는 약속입니다. 주로 title 속성과 한 쌍을 이루어 사용합니다. HTML 삽입 미리보기할 수 없는 소스 별다줄 축약어 URI : 웹에서 사용하는 리소스를 구별하는 식별자. URL : 웹페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열입니다. URF : League of legend의 인기 게임 모드 중 하나. 스킬 사용의 대기 시간이 대폭 감소하는 모드입니다. 주소 (Address) 태그는 특정 주소를 표시하기 위해 사용됩니다. 이 태그로 감싸진 텍스..

HTML 텍스트 요소를 정리해 보자 - 주석과 인용구 주석 (Comment) 주석은 개발자라면 수 없이 접하게 될 아주 중요한 요소입니다. 주석의 용도는 크게 두 가지로 나눌 수 있습니다. 코드에 부연 설명을 달거나 디버깅을 하기 위해 사용합니다. 지금은 사용하지 않게 된 코드를 무효화(?) 하기 위해 사용합니다. 또한 주석은 아래와 같은 여러 가지 특징을 지니고 있습니다. HTML 문서의 경우 주석은 웹브라우저에 표시되지 않습니다. HTML 문서의 경우 다음과 같이 표시합니다. 언어나 문서의 종류에 따라 주석의 형태가 다릅니다. 주석 처리 된 문장은 아무런 기능도 수행하지 않게 됩니다.

HTML 텍스트 요소를 정리해보자 - 서식 서식 (Formatting) HTML이 제공하는 여러 서식 태그를 이용하면 글씨에 다양한 효과를 더할 수 있습니다. 강조하기 글씨를 굵게 강조하고 싶을 땐 태그나 태그를 이용할 수 있습니다. 또는 외래어 등을 표시할 때 기울임체 (이탤릭체)로 쓰는 경우가 있는데 태그와 태그가 이 효과를 지원합니다. 태그나 태그나, 태그나 태그나. 겉으로는 별반 차이가 없는데 같은 기능을 하는 태그가 왜 두개씩 존재할까요? 태그와 태그는 해당 태그 내부의 내용 또한 중요하다는 의미를 내포하고 있다고 합니다. 따라서 검색엔진은 이 태그들로 강조된 텍스트를 더 중요하게 인식한다고 합니다. HTML 삽입 미리보기할 수 없는 소스 글씨를 강조해봅시다. 굵직한 b 태그입니다. 굵직한 st..

HTML 텍스트 요소를 정리해 보자 - 제목과 문단 제목 (Heading) HTML은 문서의 제목을 정의하는 요소로서 여섯 개의 태그를 제공합니다. 태그로부터 태그까지 크기가 점점 작아집니다. HTML 삽입 미리보기할 수 없는 소스 h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. 태그는 검색엔진에 의해 문서의 제목으로 인식되고 키워드를 수집하는 수단으로써 중요한 역할을 맡고 있습니다. 문단 (Paragraph) 내용의 문단을 표현하기 위해 HTML은 태그를 제공합니다. HTML 삽입 미리보기할 수 없는 소스 HTML 텍스트 요소를 정리해보자 HTML 텍스트 요소를 정리해보자 태그는 문단을 나눠주는 태그이기 때문에 자동으로 한줄의 줄 바꿈이 실행됩..