전체 글
스타일 작성 규칙(Syntax)
Definition CSS rule은 선택자(selector)와 선언 블럭(declaration block)로 구성됩니다. 선택자(selector)는 style하길 원하는 HTML element를 의미합니다. 선언 블럭(declation block)은 하나 이상의 선언(declation)을 포함합니다. 각 선언(declation)은 semicolon(;)에 의해 분리됩니다. 각 선언(declation)은 한개의 CSS property name과 value를 가지며, name과 value는 colon(:)에 의해 분리됩니다. Reference https://www.w3schools.com/css/css_syntax.asp
Introduction to CSS
Definition W3C에서는 "디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자!" 라는 목적으로 CSS를 발표했습니다. HTML은 웹페이지의 Content 만을 포함하고, CSS는 웹페이지의 디자인 요소(글꼴, 색상, 정렬 등 시각적인 내용)만을 포함합니다. CSS 사용의 장점 웹 문서의 내용과 상관없이 디자인을 바꿀 수 있습니다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다. (반응형 웹디자인) 개발 속도가 빨라지며, 유지보수에 용이합니다. (웹개발자와 웹디자이너가 병렬로 작업 가능) Reference https://namu.wiki/w/CSS
<label> tag
Definition tag는 몇몇의 element들을 위해 label을 정의하는 역할을 합니다. tag를 적용 가능한 항목은 아래와 같습니다. Example Code 이메일 이메일 Result Reference https://www.w3schools.com/tags/tag_label.asp
<input> tag
Definition tag는 user가 입력할 수 있는 input filed를 명시해줍니다. element는 tag의 element 중에 가장 중요합니다. element는 type attribute에 따라서 다른 형식으로 화면에 보여질수 있습니다. tag 마다 label을 명시할 수 있고, 이에 대한 처리는 tag가 담당한다. 아래와 같은 type들이 존재합니다. (default value) Attributes Attribute Value Description autofocus autofocus Specifies that an element should automatically get focus when the page loads placeholder text Specifies a short hint t..
<fieldset> tag
Definition tag는 하나의 tag 안에 있는 element들을 grouping하는데 사용됩니다. tag는 연관된 element들 주위에 하나의 box를 그립니다. tag는 element의 caption(이름표)을 정의하는데 이용됩니다. Example Code Example legend 1 legend 2 Result Reference https://www.w3schools.com/tags/tag_fieldset.asp
<form> tag
Definition tag는 user input을 위한 HTML form을 만드는데 사용됩니다. 쉽게 말해, backend에서 구현된 기능을 수행하기 위한 input을 frontend에서 user로부터 입력받는 역할을 합니다. ~ tag 사이에 아래 명시된 element를 한개 이상 포함할 수 있습니다. Attributes Attribute Value Description method get post form data를 전송할때 사용되는 HTTP method를 명시 name text form의 name을 명시 action URL form이 submit될 때, form data가 보내질 곳을 명시 target _blank _self _parent _top form을 submit한 후에 receive되어지는..
기본구조
HTML 문서를 작성할때, 아래 기본 구조를 준수해야만 합니다. HTML 문서는 크게 왕초보 웹개발 Study HTML CSS 자바스크립트 설명 로 시작해서 , 은 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 포함 ~ 은 웹 브라우저에 나타나는 Content를 의미
2주차
Summary 금주는 Client->Server로 HTML을 문법을 이용하여 User의 data를 전송하는 tag 위주로 학습을 진행했습니다. 해당 tag 안에 들어갈수 있는 element들은 다수 존재했지만, 핵심은 Client->Server로 해당 값을 넘긴다는 것이다. 각 element에 대한 내용을 상세히 알고 싶다면, 각 tag에 대한 link를 이용하여 내용을 확인해주세요. HTML에 대한 기본 문법에 대한 학습은 마무리가 됐습니다. CSS 같은 경우, 간단한 Introduction을 학습하였습니다. 더불어, 텍스트를 스타일하는 방법을 공부하였습니다. tag tag는 user input을 위한 HTML form을 만드는데 사용됩니다. 쉽게 말해, backend에서 구현된 기능을 수행하기 위한 ..