HTML/CSS 정리_200423

1. HTML

HTML의 기능 : 구조를 짜는 것

Tag : 태그는 <>로 감싸져 있습니다.

• 시멘틱 테그 (의미를 가지고 있는 테그) -> 테그를 잘 써야 SEO 검색에 잘 걸림. DIV는 시멘틱 테그가 아님.

Element : <태그이름>내용</태그이름>

Attribute : 속성은 시작 태그에 위치하며, 속성을 지정할 수 있음. 속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있음.

2. CSS

CSS를 html에 적용시키는 방법은 3가지가 있다 -> Inline 태그, Style tag, CSS파일. CSS는 정답이 없다. 그래서 어렵다고함.

3. Margin, Padding

• 요소와 요소를 구분할 때는 margin

4. Box Sizing

Content-box : 보더 안 쪽에 컨텐츠만 width 정의
Border-box : 보더 포함하여 width 정의
*{ : 전체 프로그램에 다 적용하겠다

5. Selector : ID(#), CLASS(.), DIV

우선순위 : ID > CLASS
개발은 다 같이 하는 것이기에 웬만하면 CLASS로 하는게 나음. 부득이할 때 ID 사용

6. 이미지 삽입

(1) 태그로 넣기
(2) DIV로 BACKGROUND IMAGE로 넣기 -> CSS로 조정하기가 좋음

7. DISPLAY : NONE

DISPLAY : BLOCK
반응형 웹에 사용

8. FLEX

부모 부분에 아래와 같이 주면 자식 부분이 화면 가운데로 오게됨

Display:flex
Justify-contents:center (가로 가운데 정렬)
Align-items:center (세로 가운데 정렬)

부모

<div>
<div>
<div>