HTML, CSS

html에서 자주 사용하는 태그! css에서 알아두면 좋은 속성!

div : 구역을 나누는 태그

p : 문단 태그

ul: li태그를 감싸는 태그
• li : 리스트 형식의 태그1
• li : 리스트 형식의 태그2
• li : 리스트 형식의 태그3

h1 : 제목을 나타내는 태그 (이 태그를 쓰면 구글 검색이 잘된다.

h2 : 소제목 태그

h3~h6 : 숫자가 높아질수록 크기가 작아짐

---

span : 특정 글자를 꾸밀때 사용한다!

---

a : 하이퍼링크 태그 구글로 이동!

---

img : 이미지 태그

---

input :

---

button : 버튼

---

textarea :

---

폰트를 사용하는 방법으로는 대표적으로, 구글폰트 사이트에서 사용가능 하다. 구글폰트 사이트 이동!

---

사이트에서 마음에 드는 폰트를 고르면 우측에 아래 이미지와 같은 창이뜬다.

이미지의 1번으로 표기한 부분을 복사해서 head태그 안에 붙여넣기 하고
2번으로 표기한 부분을 복사해서 style태그안에 *{} 전체선택자 안에 붙혀넣기 해준다.

---

그리고, background-image 속성을 사용할 때 세트로 사용해야 하는 것들이 있다.

background-image: url("이미지경로");

background-size: cover;

background-position: center;

이 세가지 속성을 세트로 많이 사용한다!

---

display : flex;

display : flex; 속성 역시 background-image와 동일하게 따라다니는 세트들이 있다.

display: flex;

flex-direction: column; (세로정렬), 가로정렬은 row

justify-content: center;

align-items: center;

이 4가지를 사용하면 안의 요소들이 보기좋게 가운데로 정렬시킬 수 있다.

---

background-color : transparent;

이 속성을 사용하면 배경이 투명해진다.

border-radius

테두리의 둥근 정도를 설정한다.

hover

태그/클래스명:hover{} 형식으로 사용된다.
마우스를 올렸을때 나타내는 효과를 줄 수 있다.

max-width

모바일을 고려했을 때 그냥 width:700px 이런식으로 속성을주면 보기 불편하다.
그러므로

width:95%;
max-width: 500px;

이렇게 주게되면 해당 요소의 넓이는 화면의 95%를 차지하는데, 최대로 500px 까지만
되게끔 설정을 할 수 있는 것이다.