본문 바로가기

HTML29

[HTML/CSS] HTML - 콘텐츠 모델, 시멘틱 마크업, HTML5 시멘틱 요소, Block-level & Inline-level 1) 콘텐츠 모델 Content Models 의 7 분류 1. Metadata Content 2. Flow Content 3. Sectioning Content 4. Heading Content 5. Phrasing Content 6. Embedded Content 7. Interacitve Content ​ 1. Metadata " base, link, meta, noscript, script, style, title " Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함되고, 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 Header Home Our team Projects Contact Article heading.. 2020. 8. 3.
[HTML/CSS] HTML Form 요소 2 - <select>, <option>, <textarea>, <label>, <fieldset>, <legend> 12) 폼 요소 3 ● 는 선택 목록 상자 또는 콤보박스라고도 하는데, 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그다. (multiple 속성을 사용하면 다중 선택도 가능) 거주지: 서울 경기 인천 기타 내부의 으로 각 항목을 나타내고, 의 selected 속성으로 미리 선택돼 있을 항목을 정한다. ​ ​ ● 한 줄만을 입력할 수 있는 와 달리 여러 줄의 텍스트를 입력할 때 사용한다. 자기소개: 에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있고, 다른 태그와 마찬가지로 placeholder 속성을 이용해 하고싶은 말을 미리 적어둘 수 있다. - cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 영문 기준이라 한글은 정확하진 않음) .. 2020. 8. 2.
[HTML/CSS] HTML Form 요소 1 - <form>, <input> type = "text", "password", "radio", "checkbox", "file" 10) Form 요소 1 Form 요소는 서버에 데이터를 전달하기 위한 요소이며, 태그는 대표적인 Form 요소 태그다. 은 내용이 없는 빈 요소이며, type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다. ​ 하지만 Form 태그 안의 태그들을 동작시키려면 태그에 action이라는 속성을 부여해서 어떤식으로 동작할지 명시해줘야한다. ​ 하나의 예시 코드를 들어보자면, 위와 같이 작성한 Form이 submit(제출)되면, /test.html로 이동하는 action 속성을 부여했다. ● type="text" 아이디: 주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용하고, type="text"에는 placeholder 속성이 존재하는데, 이 placeholder 속성은 사용자.. 2020. 8. 1.
[HTML/CSS] HTML 표 태그 - <table>, <tr>, <th>, <td>, <caption>, <thead>, <tbody>, <tfoot> 8) 테이블 요소 1 표의 구성 요소 표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있는데, 표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 한다. ● : 표를 나타내는 태그 ● : 행을 나타내는 태그 ● : 제목 셀을 나타내는 태그 ● : 셀을 나타내는 태그 하나의 은 하나 이상의 로 이루어져 있으며, 은 셀을 나타내는 , 를 자식으로 가지게 된다. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 된다. 1 2 3 4 5 6 7 8 위는 1부터 8을 표현한 4행 2열의 표를 나타내는 코드인데, 위 사진에 보이는 것 같이 테두리가 없어서 표가 어색해 보인다. 이는 브라우저에서 제공하는 테이블의 기본 스타일에는 테두리가 없기 때문인데, 위와 같이 CSS 코드를 안에 입력하면.. 2020. 7. 30.
[HTML/CSS] HTML 이해하기 1) HTML 소개 HTML이란 Hyper Text Markup Language의 줄임말로, ​ 1990년대 영국의 물리학자 팀 버너스리가 제안하여 개발되었다. 초기 개발 목적은 연구소의 연구원들이 신속하게 정보와 문서를 공유하기 위해서였고, 현재의 웹은 문서의 형태는 아니지만, 정보를 공유한다는 목적은 여전히 같다. ​ Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 가진 텍스트, 즉 링크를 의미한다. Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능한 특징이 있다. ​ HTML은 .html 파일 확장자를 쓰면, 그 파일 안에 html 코드를 작성하게 된다. ​ https://developer.mozilla.org/ko.. 2020. 7. 29.