HTML 이란?
HTML : Hyper Text Markup Language
HTML 태그 기본 구조
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>
img 태그: 이미지 삽입
<img src="이미지 파일 경로" alt="이미지 텍스트 정보">h 태그 : heading 약자로 제목이나 부제목 표현
ex) h1, h2, h3, h4 등
p 태그 : paragraph의 약자로 본문 내용 표현
ul 태그 : 순서 없는 리스트 생성
ol 태그 : 순서 있는 리스트 생성 (번호 매겨짐)
header : 웹 사이트의 머리글
nav : 메뉴 바 (ul,li,a 태그와 함께 사용)
main, article : 웹사이트의 본문 담당
footer : 웹 사이트 부록 담당
-> p태그, div태그 (Block 요소)
Hello
Hello
Hello
-> a태그, span태그 (Inline 요소)
Hello Hello Hello
CSS이란?
CSS : Cascading Style Sheet 약자로 HTMl을 꾸며주는 언어
선택자 { 속성 : 속성값; }
선택자: 디자인을 적용할 HTML 영역
속성: 어떤 디자인을 적용할지 정의
속성값: 어떤 역할을 수행할지 구체적으로 명령
특정 태그 스타일 적용 : h2{속성}
클래스이용한 스타일 적용 : .h2{속성}
ID이용한 스타일 적용 : #h2{속성}
캐스케이딩 : CSS의 우선순위를 결정하는 세 가지 요소
- 순서 : 나중에 적용한 속성값의 우선순위가 높음
- 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 높음
- 선택자 : style > id > class > type 순으로 우선순위가 높음
width : 요소의 넓이 설정
height : 요소의 높이 설정
(고정값 px, 가변값 %로 표기)
ex) width : 500px, height : 500%
박스 모델
margin : 바깥쪽 여백
padding : 안쪽 여백 (패딩을 입다 -> 몸집이 안에서부터 커진다. 라고 생각하기)
top,right,bottom,left로 여백을 만들 수 있음
