html : 뼈대
- head : body이외의 부분
(title, icon, 구글 검색엔진이 내 사이트를 퍼가기 좋게 하는 것들, css/java script, 카카오톡에 내 페이지 공유했을 때 뜨는 이미지, 제목) - body : 눈에 보이는 부분
! 외우는 것 아님, 필요할 때마다 가져다가 써서 만든다.
- div : division. 묶어서 한 번에 옮길 때 많이 쓴다.
- p : paragraph. 문단. 줄바꿈
- h1 : 제목
- h2 : 소제목
- span : 특정한 글자만 묶는 것
- a : 하이퍼링크
- hr : 가로선
+태그 정리 => ctrl + alt + l
css : 꾸미기
- 태그 안에 class로 이름 지칭하기
<head>
<style>
.mytitle{
//꾸미기
}
</style>
</head>
<body>
<h1 class = "mytitle">제목입니당</h1>
</body>- background image -> 다음 세개 같이 다닌다. 복붙 유용.
background-image: url("");
background-size: cover;
background-position: center;
- margin : 바깥으로 여백(margin-top, margin-left.. margin : 위 오른쪽 아래 왼쪽)
- padding : 안으로 여백
- div는 눈에 안보이기 때문에 background color를 깔아서 보는게 중요하다.
- 클래스 중첩 가능 ex)
button class="mybtn red-font" - width: 100px; margin: auto;
width와 margin같이. margin이 auto이면 한 가운데로 - 글씨는 margin auto가 안먹힘. display: block;도 함께써줘야함
- style안에 *{}은 모든 태그에 다 먹인다.
- 주석처리는 ctrl + /. 한번 더 하면 주석 풀린다.
- css파일 따로 만들기
폴더 우클릭->new->stylesheet
stylesheet에다가 style태그 안에 있는거 ctrl+x ctrl+v하고
원래 html의 head에는 link rel="stylesheet" type="text/css" href = "(css파일이름).css" - 글꼴 : 구글 폰트 검색->링크복사해서 head에->css rules복사해서 style에
