본문 바로가기

HTMLCSS7

[HTML/CSS] CSS Box Model - Width, Height 10) 속성 - width width는 요소의 가로 크기를 정의하는 데 사용하는 속성으로, 정확히는 content 영역의 너비를 지정하는 것을 의미한다. 기본값이 auto이기 때문에 브라우저를 resize할 때 저절로 width가 변화된다. box .box { width: 100px; padding: 20px; border: 10px solid black; } 위 코드를 분석해보면 width에 의해 100px content + ( 20px * 2 ) padding + ( 10px * 2 ) border = 160px이 되는 것이다. child .parent { width: 300px; border: 20px solid red; } .child { width: 50%; padding: 20px; borde.. 2020. 8. 13.
[HTML/CSS] CSS 이해하기 1) CSS 소개 ​ ◆ CSS와 HTML CSS는 Cascading Style Sheets의 약자로, 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인하는 역할을 하고, 마크업 문서인 HTML 자체가 존재하지 않으면 CSS는 무용지물이다. 2) CSS 문법과 적용 ​ ◆ CSS 구문 h1 { color: yellow; font-size: 2em; } 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em" 선언부(declaration block) - "{ col.. 2020. 8. 8.
[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.