✍🏻HTML
HTML이란?
- HyperText Markup Language의 약자
- 웹 페이지의 틀을 만드는 마크업 언어(정적 언어로 웹의 구조를 담당)
- 트리 구조로 이루어져 있다.
어떻게 사용하는지?
- HTML은 Tag들의 집합
- Tag란? HTML을 구성하는 가장 문법정인 요소이다. 기본적인 형태는 <...>시작과 </...>종료 형태로 이루어져 있다.
<!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body>
- Self-Closing Tag
- img Tag같은 경우는 닫는 태그가 없다.
- 태그마다 여러 속성을 부여할 수 있다.
<img src="" alt="" class="" >
✍🏻 CSS
CSS란?
- Cascading Style Sheets의 약자
- HTML로 구조를 만들고 그 구조를 꾸며주는 역할을 한다.
- CSS로 디자인하는 3가지 방법
- 외부 스타일 시트
- 내부 스타일 시트
- 인라인 스타일 시트
어떻게 사용하는지?
- body를 select한다.
- {} 선언 블록을 만든다.
- 속성을 정하고 선언한뒤 값을 넣어준다(margin(속성), 0(속성값), ;선언 구분)
body { margin: 0; padding: 0; }
질문
- 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
- text-align
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 가운데 정렬
- justify : 양쪽 정렬
- initial : 기본값
- inherit : 부모 요소의 속성값
- text-align
- 글자 색을 바꾸기 위한 속성은 무엇인가요?
- color
- 배경 색을 바꾸기 위한 속성은 무엇인가요?
- background
- background 속성과 background-color 속성은 어떻게 다른가요?
- background 속성은 배경 스타일을 한번에 지정한다.
- background-color 속성은 background의 하위 속성이며, 해당 요소의 배경색을 지정한다.
- em의 의미는 무엇인가요?
- em의 단위는 상위 요소를 기준으로 한다. 상위 요소의 값이 바뀌면 하위 요소의 값도 바뀐다.
- rem의 단위는 최상위 요소를 기준으로 한다.
