HTML
Hypertext Markup Language
웹페이지 만드는데 사용되는 언어
(Hypertext : HTML페이지가 가지고 있는 하이퍼링크/
Markup Language : 페이지 내의 레이아웃 및 요소를 정의하는 언어)
HTML 문서의 구조
<!DOCTYPE html> <head> <meta charset="utf-8"> <title> 제목표시줄에 표시할 title </title> <link rel="stylesheet" type="text/css" href="파일이름.css"> <script src="파일이름.js"></script> </head> <body> <p> 본문내용 </p> </body> </html>
DOCTYPE선언/<!DOCTYPE html>
: html을 사용하기 위해서는 먼저 문서의 최상단에서 DocType을 선언
HEAD/<meta charset="utf-8">
: 모든 언어를 표시할 수 있는 표준코드로, 설정하지 않을 시 글자 깨짐 현상 발생
HEAD/<title> 제목표시줄에 표시할 title</title>
: 제목 표시줄에 보일 내용을 지정
HEAD/<link rel="stylesheet" type="text/css" href="파일이름.css">
rel="stylesheet" : 링크의 내용이 이 문서의 스타일 시트임을 나타냄
type="text/css" : type attribute를 명확하게 하기 위해
href="파일이름.css" : 스타일 시트 파일을 연결, 확장자명 포함
HEAD/<script src="파일이름.js"></script>
: javascript파일을 연결, 확장자명 포함
BODY 안에 페이지 내용이 포함
HTML용어 : 요소, 태그, 속성
<div class="main">제목입니다..</div>
<a href="https://google.com">GOOGLE</a>
<img id="profile" src="profile.jpg" width="200px" alt="profile:> 요소 element : 각각이 모두 요소에 해당
태그 tag : div, a, img는 태그
속성 attribute : class, href, id, src, width, alt 모두 속성
CSS
Cascading Style Sheet 웹페이지의 레이아웃을 갖추는 스타일 시트
CSS는 텍스트 스타일, 표의 크기 및 HTML에서 미리 정의된 웹페이지의 모양 나타냄
CSS용어 : 선택자, 선언, 속성, 속성값
선택자 Selector : 특정요소를 선택하여 스타일을 적용할 수 있게,
tag선택자 외에도 전체 선택자, class선택자, id선택자 등 이용가능
* { background-color: yellow } 전체 선택자
p { background-color: yellow } tag 선택자
.classname { background-color: yellow } class 선택자
#idname { background-color: yellow } id 선택자
.classname p { background-color: yellow } 복합 선택자위 예시 중 복합 선택자는 classname이라는 class를 부모로 가진 p tag에 해당하는 요소를 선택하여 스타일을 적용
선언 Declaration : 속성값을 선언하여 선택한 요소에 스타일을 적용
속성 Property : 아래 예시는 CSS에서 자주 사용되는 텍스트 관련 속성
- color : 텍스트 색상 결정, 색이름 & RGB(a) & HEX 이용
- font-weight : 텍스트 두께 설정, 100 ~ 900 사이의 숫자 또는 lighter, normal, bold, bolder 를 사용
- text-decoration : 꾸밈 설정, 밑줄을 넣거나(underline) 뺄 수 있음(none)
- font-style : 기울임 설정, italic과 oblique(그대로 기울임)사용
- font-family : 글씨체 설정
구조:웹콘텐츠에 의미를 부여하고 구조 형성->HTML
표현:시각적인 디자인과 레이아웃 표현->CSS
행위:모든 front-end의 브라우저 상호작용 담당->JavaScript
