HTML - 마크업 언어 : 텍스트에 의미를 부여하기 위해 문서에 주석을 다는 표현 시스템
태그는 <> 를 사용하여 나타내고 종료 태그 앞에는 /를 붙여야 함
단, 모든 태그가 종료 태그를 가지는 것은 아님
태그이름은 대소문자를 구분핮 ㅣ않음
태그에 추가적인 정보 부여는 속성을 사용
속성
태그에 추가 정보를 제공하기 위해 사용
ex) <img src="photo.jpg" alt="사진"> // 이미지 파일을 찾을 수 없을 때 출력할 대체 텍스트가 alt
태그보디 : 시작 태그와 종료 태그 사이에 위치하는 내용
시맨틱 태그
HTML5에서 도입된 개념으로 특별한 의미를 가지는 태그
문서의 구조를 정의하는데 주로 사용
시맨틱 태그 그 자체로는 별다른 역할을 수행하지 않고 화면 디자인에도 영향을 미치지 않지만 코드의 가독성을 높이는 데 도움을 줌
<header> <footer> <article> <section> <aside> <nav>
HTML 문서의 구조
<!DOCTYPE html> : html5 문서를 선언하는 구문
제목 태그 <h1>~<h6> 중요한 이유는 SEO(Search Engine Optimization) 때문, 이것은 구글과 같은 검색 엔진에서 우리가 만든 HTML 문서의 내용이 잘 검새고딜 수 있도록 최적화 작업
문단 태그 <p> 줄바꿈은 <br>
목록 태그가 <div>로 묶여 많이 사용되고 중요
목록 태그 사용법
<ul> 순서가 없는 목록
<ol> 순서가 있는 목록
<li> 리스트의 아이템
블록 태그 : 라인 전체를 사용하는 태그 즉, 다른 태그 요소와 같은 라인에 배치할 수 없음
<p> <div> <h> <ul> <ol> <form>
인라인 태그
다른 태그 요소와 같은 라인에서 나란히 배치될 수 있는 태그
<span> <img> <a>
CSS : 디자인 요소 담당
CSS 구문은 선택자와 선언부로 구성됨
선택자는 디자인을 적용하고자 하는 HTML 요소이므로 선택자 정의가 중요 ex) h1
선언부는 {} 블록을 사용, 다수의 속성을 포함
각 속성 정의는 속성:값; 형식이며 세미콜론으로 끝남
CSS를 HTML에 적용하기 위한 방법
1. 인라인 스타일 시트 : HTML 태그에 CSS 속성을 정의
2. 내장 스타일 시트 : HTML 문서의 <head> 부분에 CSS 정의 부분 포함 단, 현재 작성한 문서에만 적용
3. 외장 스타일 시트 : 별도의 CSS파일을 생성한 후 HTML 문서에 링크로 포함, 하나의 파일로 여러 문서에 적용 가능
CSS 중첩(Cascading) 적용 방식
CSS는 위에서 아래로 중첩되는 방식
- 외장 CSS에서 적용한 디자인 속성은 내장 스타일 시트에서 수정하거나 속성을 추가할 수 있음
- 셀렉터의 중첩에 의해 발생하는 경우에도 동일하게 적용
셀렉터 : 선택자의 다른 명칭, HTML 문서에서 특정 부분을 선택하기 위한 구문을 의미, 기본적인 선택자는 태그, 아이디, 클래스가 있다.
태그 셀렉터
p{color: red};
h1,h2,h3,h4 {color:blue}; 이런식을 일괄 적용도 가능
아이디 셀렉터
아이디(id) 속성을 사용
문서에 존재하는 유일한 값으로 아이디를 지정하여 특정 요소를 가장 확실하게 선택할 수 있는 방법
#id_name {color: blue};
클래스 셀렉터
가장 대표적인 CSS 셀렉터
클래스 이름으로 구분해 스타일을 만들어두고 HTML에서 클래스 속성을 적용해 원하는 디자인을 적용하는 방법 ( CSS 선언이 먼저, HTML에서 이를 사용)
재활용이 용이하고 누구나 사용할 수 있도록 라이브러리 등을 만드는 데도 기본이 되는 방법임
HTML 요소의 클래스가 선택자로 올 때는 클래스 앞에 온점(.) 을 붙여 정의
.title{color:blue;}
p.title(color:red;}
부트스트랩 : 가장 대표적인 오픈소스 CSS 라이브러리