반응형

html 6

html/css 가상요소선택자와 가상클래스선택자의 차이점

선택자라는 단어의 의미를 짚어보면 타겟이 있어야 한다는 것을 알 수 있다. id선택자, class 선택자, 태크 선택자는 각 타겟들이 요소의 속성인 id, class, tag가 된다.하지만 가상 클래스 선택자, 또는 가상요소선택자는 언뜻 이해가 안되기도 한다. 왜 가상, 요소가 붙었나..그럼 좀 더 의미를 되새겨보자.DOM에서 요소는 실체가 있는 것들이다. 그리고 클래스나 id는 출생년도나, 주민등록번호처럼 요소를 카테고리할 수 있는 속성으로 볼 수 있다. 분명 이 둘은 다른 것임을 알 수 있다.가상클래스는 이런 속성이 실제로 마크업 상에 명시되지는 않은 속성을 지칭하는 말이다. 예를들어 마우스를 올려놓았을 때나 클릭을 했을 때를 하나의 속성으로 본다는 것이다. 이런 속성들은 사용자가 만드는 행동이라 그..

메타태그 정리 (html meta 태그) 정보의 설명

지금까지 많은 태그들을 살펴보았지만 오늘 살펴볼 메타태그는 웹 사이트의 검색 최적화와 관련된 중요한 태그다. 메타(meta)라는 말의 의미는 다양하지만 여기에서 메타는 "정보를 설명하는 정보" 정도가 적당할 듯하다. 다시말해 HTML 문서는 웹에서 어떤 정보를 전달하기 위한 형태의 문서이며 메타태그는 HTML 문서가 어떤 문서인지에 대해서 설명하거나 추가적인 정보를 알리기 위해 사용되는 태그다.비유하자면 HTML 문서가 책이라면 메타 태그는 책의 겉 표지라고 볼 수 있겠다. 책의 겉 표지는 책의 제목과 가격, 지은이, 책을 대표하는 그림 등의 정보가 있어 책이 어떤 성격의 책인지를 쉽게 파악할 수 있도록 만든다. 마찬가지로 메타태그 역시 HTML 문서가 어떤 정보를 포함하며 어떤 성격의 문서(사이트)인지..

HTML select 태그 정리(form 태그, submit 설명)

이번에 정리할 HTML 태그는 select입니다. 모든 학문이 그렇지만 특히 프로그래밍 공부는 이름으로부터 쓰임새를 유추하는 습관을 들여야 학습 효율이 높아짐니다. select 태그는 말 그대로 다양한 선택지 중에서 선택을 하는 드롭박스를 만드는 태그입니다. 물론 선택을 하는 사람은 웹페이지를 보고 있는 사용자 입니다. 그리고 선택된 내용은 일반적으로 웹서버로 전송해야 하겠죠. 앞서 우리는 input 태그를 공부한 적이 있습니다. input태그 역시 사용자 입력을 받는 다양한 type들을 지정하여 사용했었습니다(text, password 등등). 이렇게 사용자로 부터 입력받은 데이터들을 서버로 전송하려면 form 태그가 필요합니다. 구체적으로 form태그로 사용자 입력을 받는 태그들을 감싸주면 되는 것이..

html 표만들기 정리

html 표만들기 태그를 정리입니다.html 표 만들기 태그의 구조 예제 값 ..... 값 ..... 표는 행과 열로 구성되어 있다. HTML 문서라고 다를 것은 없다. HTML 문서에서 표를 만들기 위해서는 세 개의 태그를 사용하는데 table 태그, tr 태그, td 태그다. table 태그는 표의 시작과 끝을 알려주는 태그다. 실질적으로 table 태그가 표를 그려주는 것은 아니다. tr 태그는 행을 그려준다. 앞에서 보여준 html 예제는 tr 태그가 두 번 사용되었다. 태그 시작과 끝을 포함해서 ... 을 한번으로 친다. 그리고 한 번의 tr 태그는 하나의 행을 만들어 준다. 따라서 앞에서 예로든 html 테이블은 두 개의 행을 가질 것다. table 태그와 tr 태그만 있는 표는 다음과 같아야..

HTML 태그와 속성 이해하기

HTML 태그란 무엇인가? 그냥 무작정 태그를 공부하기 보단 그 전에 왜 태그라는 것이 존재하는가에 대해서 나름 개인적으로 생각한 바를 이야기해 보겠습니다. HTML(Hyper Text Markup Language)은 웹문서를 작성하는 언어입니다. HTML은 프로그래밍 언어의 범주에 들어있지만 범용적인 프로그래밍 언어와 달리 문서를 작성하는데 특화된 언어입니다. 그래서 범용적인 프로그래밍 언어와는 구조적으로 많은 차이가 있습니다. 우선 HTML은 구조가 단순합니다. 문서를 만드는 언어이므로 가장 중요한 것은 문서의 내용입니다. HTML은 여기에 보조적인 역할을 하는 것이죠. 예를들어 특정 텍스트에 링크가 걸려있는 것은 웹 문서에서 흔하게 볼 수 있습니다. 바로 HTML 태그를 사용해서 이런 기능을 추가하..

HTML5 강의 시작

HTML(Hyper Text Markup Language)란 웹(web) 페이지를 만들기위해 사용되는 프로그래밍 언어! 그렇다면 웹(web)이란 일종의 문서 전송을 위한 서비스로 HTML로 만든 문서들이 얽혀 있는 것을 본 따서 웹(web)이라고 이야기 합니다. 대충 구조를 보자면 HTML로->웹문서가 만들어지고->웹(Web) 서비스를 통해서 사용자들에게 문서가 전달됩니다. www웹(wed)이라 하면 www(World Wide Web)를 뜻하는데 인터넷 상에서 이루어지는 서비스입니다. 구체적으로 웹(Web) 서비스라고 하면 HTTP를 통해서 HTML로 만든 문서를 전송할 수 있도록 구축된 서비스를 말하죠. 웹(web)서버, 웹(web)문서 웹(web)페이지 등등 웹이라는 말은 익히 많이 들어 봤을 겁니다..

반응형