< Code diaries />

HTML(Hyper Text Markup Language)   안에 사용하는 HTML TAG를 공부해 봅시다.  01. 제목과 글자를 다루는 태그TagDescriptionMeaning~헤딩요소.문서의 내용중 제목을 나타낼 때에 사용하며,보통 문서의 가장 큰제목은 '로고 - 사이트 제목' 로 분류되어태그는 로고를 묶거나, 사이트명을 적을때에 한번만 사용하는 것이 대부분 입니다.Heading이 요소가 있는 부분에서 강제 줄바꿈 처리되며 빈요소 이다.Line break긴 단어인 경우에 브라우저에서 공간이 부족할 때에 우리가 원치않는 곳에서 줄바꿈을 해버리는 경우가 종종 있다. 그걸 원하는 곳에서 단어의 줄바꿈 위치를 잡는 역할을 하는데 한글에서는 지원되지 않는다.예를 들어 : 단어내의 줄바뀜 부분을 처리하는 ..

HTML(Hyper Text Markup Language)    안에 마크업 할 수 있는 HTML TAG 종류중 Semantic Tag들에 대하여 알아봅시다~! 시멘틱 태그란 내용에 의미를 부여할 수 있는 태그들이며, 그중 HTML5에서 새로 정의된 태그들에 대하여 시멘틱 태그라고 합니다. 하지만, 새로 나온 태그가 아니어도 의미가 담겨있는 태그 등 100여가지를 모두 시멘틱 태그로 분류하고 있습니다.https://developer.mozilla.org/ko/docs/Glossary/Semantics Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타냅니다. 예를 들어, ("이게 어떻게 시각적으로 보여질까?" 보다는), 이..

HTML(Hyper Text Markup Language)  HTML 웹문서는 브라우저에서 읽을 수 있는 텍스트로 이루어진 마크업 언어입니다.일반 문서를 만들듯이 큰제목, 두번째 제목... 내용, 이미지, 섹션, 머릿말, 꼬릿말등 계층구조에 맞춰서 시각적인 요소와 상관없이도 계층구조가 맞게 마크업을 하는 것이 중요하고, 이것을 우리는 웹표준이라고 합니다.100% 웹표준이라는 말은 없습니다. 최대한 웹표준에 맞게 문법의 계층구조를 지키고, HTML요소 중 필수속성의 사용을 지키며, 위계를 지켜 마크업하는 것이 중요합니다.  기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.  01. 영역의 의미를 정의하는 태그(Semantic Tag)TagDescriptionMeaning머릿말 태그로,태그의..

DOM(Document Object Model)  HTML을 코딩하는 것을 마크업 한다고합니다. 모든 태그는 컨텐츠 요소로 다른 태그를 포함할 수 있는 중첩구조를 가지게 됩니다.그러다보면 처음에 열린 태그, 두번째 열린태그 등.. 계층구조를 가지며 DOM 트리구조를 형성하게 됩니다.DOM 트리구조를 이해해야 CSS에서 HTML을 선택할 때에도 잘 이해할 수 있게 됩니다.단, 빈요소(Empty Element) 태그는 다른 태그를 컨텐츠요소로 포함 할 수 없습니다.  중첩코딩  Hello, HTML Menu 1 Menu 2 Menu 3 Let's coding. Important content             ..

HTML(Hyper Text Markup Language)HTML 웹문서는 브라우저에서 읽을 수 있는 텍스트로 이루어진 마크업 언어입니다.일반 문서를 만들듯이 큰제목, 두번째 제목... 내용, 이미지, 섹션, 머릿말, 꼬릿말등 계층구조에 맞춰서 시각적인 요소와 상관없이도 계층구조가 맞게 마크업을 하는 것이 중요하고, 이것을 우리는 웹표준이라고 합니다.100% 웹표준이라는 말은 없습니다. 최대한 웹표준에 맞게 문법의 계층구조를 지키고, HTML요소 중 필수속성의 사용을 지키며, 위계를 지켜 마크업하는 것이 중요합니다.  기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다. HTML Syntax   A. 시작태그(start tag)- 마크업은 시작태그로 시작을 합니다. 시작태그에는 속성(Attr..

html의 input태그에 pattern속성을 이용하여 입력받는 텍스트를 제어할수 있다. css를 이용하여 패턴식에 맞지않을때에 style 처리도 가능하다. 이는 HTML5 에 추가된 속성이다. Input pattern 정규표현식 기본사용법 [ html 코드 ] [ css 코드 ] input:invalid { color:red } /* 패턴과 일치하지않을경우 박스에 안내가 표시되며, 글자색은 레드로 바뀐다 */ The pattern attribute is an attribute of the text, tel, email, url, password, and search input types. 패턴 속성은 input의 text, email, url, password,search types에 사용할 수 있다...