html이 뭔가요?
웹사이트의 구조를 담당하는
프로그래밍 언어의 한 종류로 뼈대 역할을 맡고 있습니다.
파일을 만든 뒤 .html을 생성
!를 누른 뒤 엔터를 치면
<html lang="ko(원래 en인데 ko로 바꿔줘야함)">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 이름</title>
</head>
<body>
</body>
</html>
이렇게 된다 정말.. very 편하다
(지금 구글에 검색해 보니 다르게 나와서 당황
다음에 메타 요소에 대한 글도 적어야겠다)
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<br> 줄 바꿈
<div>구역을 나눠요</div>
<span>꾸밀 때 자주 써요</span>
<!--제목을 나타내요-->
<h1><h2><h3><h4><h5><h6>
<p>단락을 나눠요</p>
<br>강제로 문단을 나눠요</br>
<!--command+/ 주석을 달아요-->
<b>굵게</b>
<I>이탤릭체</i>
<u>밑줄</u>
<s>중간선</s>
<a href=“링크”>현재 화면에 외부 페이지 표시</a>
<ul>순서와 상관 없는 리스트</ul>
<ol>순서가 필요한 리스트</ol>
<ul> <li> </li> </ul>
<ul>, <ol> 태그의 자식으로는 <li> 태그만 가능
<img src="이미지 경로" alt="이미지를 대체하는 텍스트">
<input> 내용이 없는 빈 요소
<select> 선택지 리스트 형태로
<button> 버튼 만들 때 사용
<!--시멘틱 마크업-->
<strong> 중요한
<em> 강조하는
<ins> 새롭게 추가
<del> 삭제된
css 추가 들어갑니다
전체 선택자 *{}
class 선택자 .~{}
id 선택자 #~{}
선택자는 다르지만 요소가 겹치는 경우
id 선택자 > class 선택자 > 태그 선택자
font-family 글꼴
font-size 글자 크기
{px 절대적인 크기
rem <html>태그의 font-size에 대응하는 상대적 크기
em 부모 태그의 font-size에 대응하는 상대적인 크기}
content: width, height
padding: padding-top/bottom/left padding/right padding
border: border-width
margin: margin-top/bottom/left margin/right margin
content-box: (기본값)content 영역만 포함
border-box: border과 padding까지 포함
position
static 기본 값
relative 자신의 원래 위치를 기준으로 위치를 변경하고 싶을 때 사용
absolute 부모 기준으로 위치 좌표를 잡는다
fixed 브라우저 전체를 기준으로 잡는다
그리고 마지막으로 날 애태우는 가상 클래스
hover 마우스를 위에 올린 상태
active 마우스로 클릭한 상태
focus 위치해 선택된 동안의 스타일 지정
근데 input 같은 애랑 같이 있어야함...ㅋ