1. HTML
2. CSS
1. HTML
정의
- HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어.
- HTML을 이용하여 웹페이지의 구조를 잡을 수 있다.
HTML element
<tag class="container">content</tag><태그이름> 으로 시작하여 </태그이름> 으로 끝나고 태그 사이에 내용이 있는 구조
끝 태그가 필요없는 경우는 태그가 그 자체로 요소이다.
HTML tag 종류
<!DOCTYPE> : HTML5 버전을 사용한다는 의미
<html> : 모든 HTML elements(요소)들을 감싸는 최상위 <html></html>태그.
<head> : 사이트의 제목, 설명, 부가 정보, 기술적 내용등의 메타데이터 정보를 담고있는 태그
<body> : 화면에 보여지는 문서의 본문을 정의
<p>, <h1>, ...
HTML Attribute
attribute은 시작 태그에 위치하여 해당태그의 속정을 정의.
한 태그내에서 여러 속성을 지정가능
어떤 tag인지에 따라 적용할 수 있는 attribute도 달라진다.
id : 태그에 이름을 주는 속성. 따라서 웹 페이지에 해당 id 이름은 오직 하나이다
class : 해당 태그에 이름을 주는 속성이지만 class는 여러 태그에 중복된 이름을 부여할 수 있다.
LIst
<ul>
<li>List</li>
<li>Set</li>
<li>HashMap</li>
</ul>
<ol>
<li>Stack</li>
<li>Tree</li>
<li>Sorting</li>
</ol><ol> : 순서가 있는 리스트 태그
<ul> : 순서가 없는 리스트 태그
<li> : 리스트 아이템 태그
/* 리스트 스타일링
border와 padding을 이용*/
ul{
list-style: none;
border-left: 3px solid black;
padding: 0 0 0 15px;
}
Table
<table> : 테이블 생성을 선언하는 태그. 테이블은 항상 <table>태그로 감싸져있다.
<tr> : table row의 줄임말로, 테이블의 한 행을 생성하는 태그.
<th> : table heading의 줄임말로,<tr>태그 내에 <th>태그를 사용하여 가운데정렬되고 글씨가 두꺼운 열의 제목을 생성
<td> : table data의 줄임말로,<tr>태그 내에 <td>태그를 사용하여 각각의 셀을 생성
셀병합 : <td>나 <th>태그에 colspan, rowspan이라는 attribute를 추가해서 구현
Form
클라이언트가 정보를 입력 또는 선택할수 있게하고, 웹 서버가 처리할 수 있도록 해당 데이터를 서버에게 전송하는 기능을 한다.
<form> 태그
- 웹 폼을 구성하는 폼 태그들을 담는 컨테이너
- name 속성 : 폼이름 지정
- action 속성 : 폼 데이터를 처리할 웹 서버 응용프로그램의 url
- method 속성 : 폼 데이터를 웹 서버로 전송하는 형식 지정 = "GET|POST"
입력 form element
- <input type="text"> : 한줄 텍스트를 입력받음
- <input type="password"> : 비밀번호 입력받음
- <textarea cols="20" rows="5"> : 20 x 5 크기의 여러줄의 텍스트 입력 받음
- <input type="text" list="datalistId"> : 데이터 목록을 가진 텍스트 입력
<datalost id = "datalistId">
<option value="listItem1">
<option value="listItem2">
</datalist>
버튼 form element
- <button type="button"> : 단순버튼, JS 코드에서 주로 이용
- <button type="submit"> : submit 버튼
- <button type="reset"> : 폼에 입력된 내용 모두 지우고 초기화하는 버튼
- <button type="button"> : 이미지버튼
<img src="imageUrl" alt="이미지버튼">
</button>
placeholder 속성
- 입력할 정보의 예시를 보여주는 속성
form element caption 설정 : 라벨링
- caption : 폼 요소 앞에 붙는 간단한 설명이나 이름
- 라벨링1
<label>
캡션 : <input type="text">
</label> - 라벨링2
<label for="formId">
캡션 :
</label>
<input type="text" id="formId">
다수의 form element를 grouping
- <fieldset> : 폼 요소들을 감싸서 그룹핑. 브라우저는 그룹을 둘러싸는 외곽선 출력
- <legend> : 그룹핑된 그룹의 제목
- <form>
<fieldset>
<legend>회원정보</legend>
이름 : <input type="text"><br>
메일 : <input type="email">
</fieldset>
</form>
2. CSS
CSS 정의
HTML 문서를 스타일링 하는 언어
HTML은 구조(모델)에 해당하고, CSS는 비주얼(표현)에 해당
CSS 적용
<h1 style="color: red;">inline style</h1>1. 인라인 스타일 : html 태그의 style 속성에 직접 작성
<!DOCTYPE html>
<html>
<head>
<!-- 생략 -->
<style>
h2 {
color: #408090;
}
</style>
</head>
<body>
<!-- 생략 -->
</body>
</html>2. <style> 태그 : html 파일의 <style> 사이에 css문법을 사용하여 스타일을 작성
<!DOCTYPE html>
<html>
<head>
<!-- 생략 -->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 생략 -->
</body>
</html>3. css 파일 작성 : html 파일과 css파일을 분리하여 html 파일에서 해당 css파일을 링크하는 태그 추가
- link — link태그로 사용할 css파일을 링크해줍니다.
- href — href 속성에 css 파일 경로를 작성합니다.
- type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
- rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.
CSS Inheritance
부모요소에 적용된 스타일이 자식요소에게도 적용된다
부모에게 color: red;라는 속성이 있더라도 본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용된다.
CSS selector
CSS Specificity
selector 표현마다 우선순위가 존재하며 우선순위는 점수 계산으로 이루어진다.
- inline styling(13줄에 style 요소로 직접): 1000점
- id: 100점
- class: 10점
- tag: 1점
텍스트 정렬 CSS 프로퍼티
- 모든 요소의 기본 정렬은 왼쪽 정렬
- inline-element가 차지하는 영역은 해당 element의 컨텐트 만큼의 길이밖에 안 되기 때문에 정렬이 되지 않는다!
Block Element
Block 요소는 각 태그를 사용하여 요소를 만들었을때, 한줄전체를 차지
즉 너비가 100%라서 요소 왼쪽이나 오른쪽에 다른 요소를 삽입할 수 없으며 요소 생성시 마다 다음 줄에 요소가 생성
ex : <header>, <footer>, <p>, <li>, <table>, <div>, <h1>
Inline Element
요소 좌우에 다른 요소가 올수 있습니다.
ex : <span>, <a>, <img>
Black element <-> Inline element
.spanToBlock {
display: block;
}inline -> block
.divToInline {
display: inline;
}block -> inline
.divToInlineBlock {
display: inline-block;
}block -> inline-block
inline-block : mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
박스모델
웹문서에서 블록 레벨요소들은 위와 같은 박스 형태로 이루어져 있다.
각각의 박스모델은 4가지 영역로 구성됨 : margin, border, padding, content
p {
margin : 10px; /* 10px 10px 10px 10px */
padding: 20px 30px /* 20px 30px 20px 30px */
}css를 이용하면 margin과 padding의 top, left, bottom, right 영역크기를 조절할 수 있다
Block요소에 width를 설정하면 좌우로 쭉 늘어나지 않는데, 이때 margin: auto;를 주면 요소를 좌우 중앙에 배치할 수 있다.
blockquote {
border-top: 4px double red; /* 굵기 모양 색깔 */
border-right: 2px solid #666666;
border-bottom: 6px dashed darkviolet;
border-left: 1px dotted #00ee44;
}css의 border property를 이용하여 boder의 스타일을 조절할 수 있다
box-sizing : border-box;
box-sizing 속성은 기본값으로 content-box를 적용.
box-sizing :border-box property는 width의 기준을 border-left + padding-left + content + padding-right + border-right 으로 설정
시각적으로 보이는 너비에 width를 맞춤으로써 스타일링 구현을 용이하게 해준다.
'Frontend' 카테고리의 다른 글
| Semantic Web과 Semantic Tag (0) | 2020.10.24 |
|---|---|
| CSS 레이아웃 (0) | 2020.10.24 |
| 1. basic react (0) | 2020.10.24 |
| 0. React intro (0) | 2020.10.24 |
| Redux in React (0) | 2020.10.24 |
