HTML/CSS 기초 정리 1

태그 

head - 헤드 태그, 사이트 제목, 설명, 부가정보, 기술적 내용 

body - 헤드 태그 다음에 위치, 화면에 보이는 컨텐츠

h1~5 - 제목 같은 텍스트를 보여줄 때 사용. 1이 제일 큼

span : 인라인 태그

div : 블록 태그

p : 문단 태그

a : 링크 태그

 

속성

id - 각 태그의 이름을 지정함. 하나만 지정 가능한 고유한 값

class - 각 태그의 이름을 지정함. 여러 태그에 중복하여 지정할 수 있는 값

 

CSS 적용

인라인 스타일 - 태그 안에 직접 style 작성

내부 style 태그 - HTML 파일 내 head에 style 작성

외부 CSS 파일 작성 - HTML 파일과 분리하여 style.css 파일 작성하여 참조

 

폰트 스타일

font-family - 폰트 스타일 ( 폰트명에 띄어쓰기가 있을 때는, 쌍따옴표를 사용 )

font-size - 폰트 크기

font-weight - 폰트 두께

font-style - 서체 

color - 폰트 색깔 ( 색상코드, rgb 적용 가능 )

 

텍스트 스타일

text-align - 텍스트 정렬 

indent - 들여쓰기

 

Element Box

margin - 요소의 border기준 외부 간격 (top,right,bottom,left 순)

padding - 요소의 border기준 내부 간격 (top,right,bottom,left 순)

border - 요소의 테두리 선 ( 두께, 선스타일, 색깔 )

box-sizing - 요소의 박스 크기를 margin과 padding을 계산하여 지정

 

선택자 

특정 태그에 CSS를 적용할 수 있음

태그명 { 속성: 속성값 } 

.클래스명 { 속성: 속성값 }

#아이디명 { 속성: 속성값 }

태그명 .클래스명 { 속성: 속성값 } -> 태그 아래의 클래스에만 CSS 적용

 

CSS 우선순위

inline - 1000점

id - 100점

class - 10점

tag - 1점

tag<class<id<inline 순으로 적용

EX) div.contents { 속성: 속성값 } -> 태그 + 클래스 이므로 11점

 

이미지

태그로 넣기 - <img src="이미지 경로/주소" alt="이미지 텍스트"

background-image로 넣기 - .image{ background-image : 이미지 경로/주소"}

두 방법의 차이는 Semantic Web, Semantic Tags에서 설명