간단히 눈에 보이는 부분은 frontend
안 보이는 부분 backend 라고 보면 된다.
html
뼈대에 해당하는 것 이라고 보면 된다.
<head>, <title>,<style>,<meta>,<link>,<script>,<base> 태그 들
- HTML 문서의 메타데이터(metadata)를 정의 함
메타데이터(metadata) -> [meta 더 높은, 초월한]
HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.
<head> ex) 검색엔진이 가져갈 때 등.. 그럴 때 사용
<body> 눈에 보이는 거의 대부분의 부분들을 여기에 입력한다고 보면 된다.
'뼈대 태그들' 이 들어간다고 보면 된다.
ex)
<h1>제목
<h2>h2는 소제목입니다.
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만.
<hr> span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<a href="http://naver.com/"> a 태그: 하이퍼링크 만들 때 </a>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />=> img 태그
<input type="text" />input 태그
<button> button 태그<textarea>textarea 태그=>
textarea 태그는 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용합니다
텍스트 입력 영역에는 개수의 제한 없이 문자를 입력할 수 있으며, 입력된 문자는 고정폭 글꼴로 렌더링됩니다.
텍스트 입력 영역의 크기는 요소의 cols 속성과 rows 속성으로 지정할 수 있으며,
CSS에서 height 속성과 width 속성을 사용하면 더욱 손쉽게 지정할 수 있습니다.
- 절대 다 외우는 것이 아니다.
- 초보 때는 한 줄 입력하고 확인하고, 한 줄 입력하고 확인 필수.
CSS
=> CSS : 사용자에게 문서를 표시하는 방법을 지정하는 언어 (스타일, 레이아웃 등)
꾸미기.
HTML 파일에 CSS를 입히는 방법 크게 2가지
1. HTML 파일에 <style></style>을 이용
- 외부에 CSS 파일을 따로 만든 후 이를 link
=> 장점 : 적용할 스타일이 적으면 내부에 작성하여 한 파일 내에서 HTML과, CSS 코드를 관리 가능 하지만 규모가 커지면 CSS 코드가 엄청나게 길어져 유지보수하기가 힘들어진다는 단점이 존재한다.
=> 1의 장점의 반대 별 것 아닌 것은 귀찮음
일반적으로 간단한 레이아웃을 구성하는데에도 CSS 코드 수가 보통 100줄을 넘어간다.
=> 결론적으로 파일 연결 후 HTML 파일에서 연결하는 방법을 사용해야 한다.
짱구야!
EX)짱구의 바지를 초록색으로 바꿔줘. 를 해야 하는데
짱구의 바지를 뭐라고 지칭해야 할지 모르겠다.
저기에 명찰이 있고, 그 명찰을 불러야 내가 알 수 있다.
그 대상에다가 명찰을 붙이고 그 명찰을 부르는 것이다.
<div class="InfoTeam">
짱구의 바지는 인포팀이다. 보여지는 것이니 <body> 에 있어야 한다.
<style>
.InfoTeam
{
width: 98%;
height: 400px;
...
}이런식으로 써내려 가는 형태다.
