[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.
