1. 웹 페이지, 웹사이트, 홈페이지의 차이 1) 웹 페이지(web page) 인터넷을 검색할 때 각 브라우저(browser) 창에 나타나는 문서. 링크를 통하여 다른 웹 페이지나 다른 웹 사이트나 다른 홈페이지로 이동할 수 있다. 2) 웹 사이트(web site) 도메인 1개에 속해 있는 위 1) web page의 집합체. (도메인 1개의 예: 구글, 네이버, 다음.) 3) 홈페이지(homepage) 우리나라에서는 흔히 웹 사이트와 홈페이지를 같은 의미로 혼용하여 쓰는 경우가 많지만, 둘은 정확히 다르다. 위 웹사이트를 방문했을 때 맨 처음 연결되는 페이지가 홈페이지이다. (google의 첫 화면, NANER의 첫 화면, DAUM의 첫 화면, 각자 사이트의 첫 화면.) (과거에는 default.html..

1. 주석이란 무엇인가? 메모. 2. 주석(comment, 메모)은 왜 달아야 하나? 코드가 길어지거나 좀 복잡해지거나 했을 때도 컴퓨터는 그것을 순식간에 알아본다. 그러나 인간은 문제가 있다. 헷갈리고 골치 아프고 시간이 걸리는 인류를 위해 배려하는 것이 주석이다. 컴퓨터(브라우저)가 보기에 너무나 사소한 말들, 컴퓨터는 그 말들을 그냥 외면하거나 못 본 체 눈감아준다. 코딩 인류 간에 전할 말이 있을 때, 혹은 수정자를 위해 메모해 둘 일이 있을 때 유용한 기능 주석은 브라우저에 표시되지 않는다. 3. 주석 다는 법 구문: (아래 코드 입력창 영역 2군데처럼) 시작은!(느낌표가) 있지만 끝은 없다. This is nonsense Lorem ipsum dolor sit amet, consectetur ..

Lorem ipsum이란 무엇일까? 포토샵, 일러스트레이트, 웹사이트, 템플릿, 출판물, HTML 편집창, 워드 프로그램 등에서 텍스트(T) 키를 누르는 순간 자동으로 삽입되는 더미 텍스트, "Lorem ipsum dolor sit amet......"이 있다. 이 문구는 어디에서 왔는가? 1) 그 문구는 로마의 정치인 키케로(영문 발음: 시세로 Cicero)에게서 시작되었다. Lorem ipsum 문구의 내용: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." 그 내용은 "고통 자체를 사랑하고 추구하고 갖고 싶어 하는 사람은 없습니다. 왜냐하면 고통은 고통스럽기 때문입니다" 키케로..

1. meta란 무엇인가? meta의 뜻: 초월의, 본질적인, 그 이면의 meta-physics : 형이상학 = physics(자연학) 너머의 것: 영적인 세계, 정신적인 세계 칸트의 물자체(Das Ding an sich) : meta-physics : 알 수 없는 것. Metaphora: 메타포 : 은유 서양에서는 눈에 보이지 않는 세계를 meta라 한다. HTML의 meta-data는 눈에 보이지 않는 세계이다. head 부분( 사이)에 위치하지만 그 누구의 눈에도 보이지 않는다. 세계 모든 웹페이지에는 오직 부분만이 보인다. 영역에는 '글에 대한 정보'가 아닌 (한 차원 초월한) '문서의 대한 정보'를 담고 있다. 비평에 대한 비평(비평의 비평)을 'meta 비평'이라고 하듯이 속의 정보를 '문서에..

1. 시맨틱 코드 참고할 글 : 2021.04.09 - [코딩/HTML] - 시맨틱 태그(semantic tag) 꼭 써야 할까? 시맨틱(semantic) 태그란 그 이름 자체만으로 브라우저나 길 잃은 사람들, 지구 상의 원주민, 개발자, 수정자들에게 의미를 전달할 수 있는 태그다. 시맨틱 태그가 아닌 , 등은 그 이름만 들어서는 그 내용이 무엇인지 알 수 없다. 그러나, 시맨틱 태그는 =두목, =내비게이션, =그림, 이렇게 이름만 척, 들어도 어림짐작할 수 있다는 게 대단한 장점이라 아니할 수 없다. 2. 많이 쓰는 코드들 1) 말 그대로 머리말 영역으로 문서 또는 섹션의 헤더를 나타낸다. 하나의 문서 안에 여러 개 태그가 올 수 있다. 즉 헤더란 문서 전체의 헤더일 수도 있고, 특정 영역(섹션)의 헤..

1. semantic이란? 참고할 글: 2021.04.11 - [코딩/HTML] - 시맨틱 태그(semantic tag) 사용 방법 웹 페이지를 하나의 도시라고 비유한다면, 그 도시를 여행함에 있어 버스정류장이 어디인지, 도로가 어디인지, 기차역, 혹은 대합실, 특실, 일반실이 각각 어디인지를 알려주는 태그가 시맨틱 태그다. 즉, semantic은 그 도시의 설계도를 보여준다. semantic의 뜻: 의미의, 의미론의 시맨틱 태그들은 검색엔진에게 의미론적 구조를 알려준다.(←의미론적 구조=그 영역이 문서 구조에서 어떤 의미인지) 이름만 듣고도 그 영역이 어떤 역할을 하는 곳인지 알 수 있게 한다. 또한, 여행객 또는 웹페이지를 개발 또는 수정코자 하는 사람에게 의미론적 구조를 알려준다. 사람들은 html..

1. 내가 헤딩 1이다 내가 헤딩 2이다 내가 헤딩 3이다 내가 헤딩 4이다 내가 헤딩 5이다 내가 헤딩 6이다 2) 브라우저 출력 모습 3. 시맨틱 태그(Semantic Tags)에서의 영역이다. body 속에 위치한다. 위 1의 그림의 3이 헤더이다. (시맨틱 태그에 대해서는 다음 글에서 위 1에 나오는 메타 데이터(메타 태그)에 대해서는 그 다음 글에 적는다.)

1. 이 태그들은 왜 안 쓰는 게 좋은가? 2014년에 HTML5가 나온 후, HTML5에서 지원되지 않는 태그들이 있다. 이 태그들을 사용할 경우 웹페이지가 잘못 표시될 수 있을 뿐 아니라 또한 방문자가 많더라도 콘텐츠 확인이 불가하여 사이트에 좋지 않은 영향을 주고, seo (검색엔진 최적화)에 불리하다. 2. HTML5에서 지원하지 않는 태그 종류. , (구) 축약어 표시에 사용되던 것 - 이것 대신 로 사용. 예) 나는 간다 → 나는 간다 (참고) 위 에디터 입력 내용을 크롬 등 브라우저로 열고 → 나는 간다에 마우스를 올리면 "이제 그만 잊어다오"가 나타난다. 위 처럼 사라져 가고 있는 태그에는 다음과 같은 것들이 있다. 애플릿 정의에 사용 → 이것 대신 사용. (구) 문서의 기본 글꼴 정의 →..

HTML에서 요소와 속성은 웹 페이지 구조를 정의하는 핵심 개념으로, 태그와 속성값, 콘텐츠의 관계를 쉽게 이해할 수 있도록 설명합니다HTML 요소와 속성의 기본 이해HTML을 작성하면서 가장 자주 만나는 개념은 요소(Element)와 속성(Attribute)입니다. 두 개념은 밀접하게 연결되어 있으며, 웹 페이지의 구조와 동작을 정의합니다. HTML 요소(Element)란?요소의 구성HTML 요소는 시작 태그(Start Tag), 내용(Content), 종료 태그(End Tag)로 구성됩니다.기본 구조:Content예제:Hello, World!: 시작 태그Hello, World!: 내용(content): 종료 태그주요 특징:시작 태그: 요소의 시작을 정의하며, 태그 이름을 포함.내용: 요소 안에 포함된..

HTML에서 폼 요소는 사용자 입력을 수집하는 핵심 도구로, input, textarea, button 태그의 사용법과 예제를 통해 쉽게 알아봅니다.HTML 폼 요소란?HTML 폼 요소는 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 합니다. 폼 요소는 웹 애플리케이션에서 필수적이며, , , 은 가장 자주 사용되는 태그입니다.1. 태그: 사용자 입력 필드의 기본 개념은 한 줄로 입력할 수 있는 입력 필드를 생성합니다. 다양한 type 속성을 통해 여러 형태로 사용할 수 있습니다.주요 type 속성text: 기본 텍스트 입력사용자가 이름이나 텍스트 데이터를 입력할 때 적합.email: 이메일 입력이메일 형식만 입력 가능password: 비밀번호입력 내용을 가리는 필드.checkbox: 선택 박스 ..