2주차

Summary

금주는 Client->Server로 HTML을 문법을 이용하여 User의 data를 전송하는 <form> tag 위주로 학습을 진행했습니다. 해당 tag 안에 들어갈수 있는 element들은 다수 존재했지만, 핵심은 Client->Server로 해당 값을 넘긴다는 것이다. 각 element에 대한 내용을 상세히 알고 싶다면, 각 tag에 대한 link를 이용하여 내용을 확인해주세요. HTML에 대한 기본 문법에 대한 학습은 마무리가 됐습니다.

CSS 같은 경우, 간단한 Introduction을 학습하였습니다. 더불어, 텍스트를 스타일하는 방법을 공부하였습니다.

 

<form> tag

<form> tag는 user input을 위한 HTML form을 만드는데 사용됩니다.

쉽게 말해, backend에서 구현된 기능을 수행하기 위한 input을 frontend에서 user로부터 입력받는 역할을 합니다.

• Link

 

<fieldset> tag

<fieldset> tag는 하나의 <form> tag 안에 있는 element들을 grouping하는데 사용됩니다.

<filedset> tag는 연관된 element들 주위에 하나의 box를 그립니다.

<legend> tag는 <filedset> element의 caption(이름표)을 정의하는데 이용됩니다.

• Link

 

<input> tag

<input> tag는 user가 입력할 수 있는 input filed를 명시해줍니다.

<input> element는 <form> tag의 element 중에 가장 중요합니다.

<input> element는 type attribute에 따라서 다른 형식으로 화면에 보여질수 있습니다.

<input> tag 마다 label을 명시할 수 있고, 이에 대한 처리는 <label> tag가 담당한다. 

아래와 같은 type들이 존재합니다.

• Link

 

<label> tag

<label> tag는 몇몇의 element들을 위해 label을 정의하는 역할을 합니다.

<label> tag를 적용 가능한 항목은 아래와 같습니다.

• Link

 

Introduction to CSS

W3C에서는 "디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자!" 라는 목적으로 CSS를 발표했습니다.

HTML은 웹페이지의 Content 만을 포함하고, CSS는 웹페이지의 디자인 요소(글꼴, 색상, 정렬 등 시각적인 내용)만을 포함합니다.

• Link

 

CSS 작성 규칙 (Syntax)

CSS rule은 선택자(selector)와 선언 블럭(declaration block)로 구성됩니다.

출처: https://www.w3schools.com/css/css_syntax.asp

선택자(selector)는 style하길 원하는 HTML element를 의미합니다.

선언 블럭(declation block)은 하나 이상의 선언(declation)을 포함합니다. 각 선언(declation)은 semicolon(;)에 의해 분리됩니다.

각 선언(declation)은 한개의 CSS property name과 value를 가지며, name과 value는 colon(:)에 의해 분리됩니다.

• Link

 

Style을 적용하는 방법

HTML문서에 body에 적용된 element에 Style을 적용하는 방법은 총 3가지가 존재합니다.

1. 인라인 스타일
2. 내부 스타일 시트
3. 외부 스타일 시트

• Link

 

CSS 선택자(Selector)

스타일 규칙은 태그뿐만 아니라 웹 문서 어떤 요소에도 적용 가능합니다. 선택자는 웹 문서에서 어느 부분에 스타일을 적용할 것인지 알려주는 것입니다. 선택자를 사용하는 방법은 미리 약속되어 있습니다.

• Link

 

텍스트를 스타일하는 방법

CSS를 이용하여 텍스트의 스타일을 변경하는 것이 가능합니다.

아래와 같은 항목을 설정할 수 있습니다.

1. font-family: 글꼴
2. font-size: 크기
3. font-style: 이탤리체
4. font-weight: 굵기

• Link