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에서 지원하지 않는 태그 종류. , (구) 축약어 표시에 사용되던 것 - 이것 대신 로 사용. 예) 나는 간다 → 나는 간다 (참고) 위 에디터 입력 내용을 크롬 등 브라우저로 열고 → 나는 간다에 마우스를 올리면 "이제 그만 잊어다오"가 나타난다. 위 처럼 사라져 가고 있는 태그에는 다음과 같은 것들이 있다. 애플릿 정의에 사용 → 이것 대신 사용. (구) 문서의 기본 글꼴 정의 →..

1. attributes의 뜻 = 속성; …에 귀착시키다; … 의 덕분으로 돌리다; …에 돌리다. 2. 속성의 표시 방법 1) 속성, 속성 값, =, "따옴표" 표시 속성 이름="속성 값(value)"의 형식으로 표시한다. : 일반적으로 큰 따옴표로 묶지만, 큰 따옴표 대신 작은따옴표를 사용해도 된다. 그러나 속성 값 자체에 큰 따옴표가 포함된 경우에는 값을 작은따옴표로 묶는다. (예 :value='kk"Kim"gg') (실제, HTML5 표준에서는 따옴표 사용을 강제하진 않는다고 한다) (그러나 오류가 발생될 수 있으므로, 따옴표를 쓰는 게 좋다) 2) 대, 소문자 구분 속성 값은 특정 속성(id 및 class속성 등)을 제외하고 대소문자 구분하지 않는다. 그러나 W3C (World Wide Web C..

1. element의 뜻 : 요소, 구성 요소, 원소, 성분 2. html과 요소(element)의 관계 html의 구성요소가 요소(element)이다.(시작 태그부터 종료 태그까지의 한 묶음) → html = 이 요소들의 집합으로 이루어져 있다. 3. 요소(element)의 구성요소는 무엇인가? 다음 5가지이다. 즉 요소란 다음 다섯 가지의 집합이다. 1) ①시작 태그(②속성 이름, ③속성 값을 포함) 2) ④내용(content) 3) ⑤종료 태그 4. 요소(element)의 시각화 시작 태그(start tag)는 opening tag라고도 한다. 종료 태그(end tag)는 closing tag라고도 한다. 종료 태그(closing tag)가 없는 경우도 있다 5. 위 구문의 예외 종료 태그가 없는 ..

1. 은 무엇인가? Doc=Document의 준말. 즉 Document Type을 정의(Define)하는 것이다. 지금 작성하는 html 코드에 대한 어떤 방식의 html 코드인지를 브라우저에게 알려주는 선언이다. (즉, DTD=Document Type Definition 문서형식 정의) 2. 이 선언을 해야하는 이유. HTML의 발달 역사 때문이다. Html은 1989년 Tim Berners-Lee가 처음 고안했을 때부터 지금까지 버전 변화가 있었다. 그리고 버전 별로 태그(tag)의 변화가 있었다. 이 선언을 하지 않으면 웹브라우저(크롬, 엣지, 익스플로러, 사파리 등)가 어느 버전의 문서인지 헷갈려서 해야 할 일을 제대로 못한다. 버전별로 선언 형식이 다르기 때문이다. 3. 버전 변화 과정 1) T..

1. html 구조의 시각화. 정의하다= define 브라우저에 표시되는 내용 : body 속의 내용. 브라우저의 문서 제목 표시줄(페이지 탭)에 표시되는 내용 : title의 내용. 2. Html 문서 구조의 설명 1) 먼저, 문서 유형의 선언으로 시작된다. = 이 문서는 HTML5 문서로 작성되었습니다 (문서의 맨 앞에 한 번만 사용, 대소문자 구분하지 않음) 2) = 이것은 html 문서입니다. = html 문서 끝났습니다. 3) = 문서의 head가 끝났습니다. 이 곳에서 html 문서에 대한 데이터를 정의(define)한다. (문서 제목, 스타일, 링크, 스크립트 등) 4) = 문서의 본문이 시작됩니다. (/body> = 본문이 끝났습니다. 문서 본문의 내용을 정의(define)한다. (제목, ..

1. 크게 다음과 같다. ( 1,2,3은 요식행위, 실제 구조는 4,5의 두 단계이다) 1) 2) 3) 4) 5) 2. 에디터 입력 모습 tag란 태그(tag)= 꼬리표; 정가표; = 꼬리표, 즉 설명 태그는 꺽쇠(angle bracket)로 감싸기로 약속 (다시 다른 태그로 감싸 중첩하여 사용 가능) 태그는 꺽쇠와 슬러쉬 꺽쇠의 한쌍으로 표현한다 (그러나, 단독사용 가능한 태그도 있다; img, br/ 등) 주로 많이 쓰는 태그: 약 30개 3. 크롬 브라우저 출력 모습 1) tytle의 내용은 크롬 창 상단에 문서 제목으로 나타난다.(아래 그림) 2) body 속의 내용이 크롬 창 안에 나타난다.(아래 그림) 4. 결론 : html은 너무나 간단한 문서 구조이다.

1. 코딩이란 무엇인가? code + ing = 즉, code의 ing이다. 2. 그럼, code는 뭔데? 스파이 영화에서 못 봤나? code = 부호, 기호, 암호를 뜻하며 여기서는 html 언어, css 언어, C 언어, JAVA(자바), Python(파이썬) 등 프로그래밍 언어를 말한다. 3. 언어(프로그래밍 언어)를 왜 코드라고 하는가? 그러게 말이다. html 등 이 언어들은 사람과 컴퓨터 간의 언어이므로 code(즉, 사람과 컴퓨터 간 사전 약속된 부호)이기도 하다. 대충, 쓱 봐도 이들은 모두 코드처럼 생겼다. 4. cording(cord + ing)은 프로그래밍인가? 좁게 보면 아니다. 넓게 보면 맞다. 프로그램 제작을 위하여 코드를 입력하는 작업 = 코딩. 프로그램 제작을 위한 기획 단계..