HTML 기본 태그
HTML 태그 구성 요소
<열린태그 "속성 = 속성값"> 컨텐츠 </닫힌태그>
HTML 문서의 기본 구조
- !DOCTYPE html : HTML5 언어로 문서를 선언하는 태그
- html, /html : HTML 문서의 시작과 끝을 의미
- head, /head : 웹사이트의 간단한 요약 정보를 담는 영역, 노출X
- body, /body : 눈에 보이는 정보를 담는 영역, 이미지나 텍스트 같이 출력되는 정보
- meta charset = "UTF-8" : 문자코드, 모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
- title, /title : 웹사이트의 제목
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title> 제목 </title> </head> <body> <!-- 컨텐츠 --> </body> </html>
HTML 기본 태그
- img 태그
img src = "파일명" alt = "로고"
alt : 웹사이트가 이미지를 출력하지 못하였을 때, 텍스트로 대체
(웹 접근성을 고려해 꼭 넣어주기) - h 태그
h : 제목이나 부제목
숫자 값이 클 수록 폰트 사이즈 작음. 즉, 숫자는 정보의 중요도
h1태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에 한 번만 사용 - p 태그
본문 내용 표현
- ul 태그
ul : 순서가 없는 리스트 생성(각각의 정보가 동급일 때), 메뉴 버튼 만들 때 사용
항상 첫 번째 자식으로 li 태그가 들어가야함
실습 - 링크와 이미지 입력하기
실습 - 텍스트 입력하기
구조를 잡을 때 사용하는 태그
- header 태그 : 웹 사이트의 머리글을 담는 공간
- nav 태그 : 메뉴 버튼을 담는 공간(navigation), ul, li, a와 함께 사용
- main 태그 : 문서의 주요 내용을 담는 태그, role = "main" 속성 필수 입력
- article 태그 : 웹 사이트의 주요 이미지나 텍스트 정보를 담고 구역을 설정, 태그 내에 구역을 대표하는 타이틀 <h#> 태그가 존재해야 함
- footer 태그 : 가장 하단에 들어가는 정보를 표기할 때 사용(사업자 정보, 전화 번호 등)
- div 태그 : 임의의 공간을 만들 때 사용
실습
HTML 두 가지 성격
- Block 요소 : y축 정렬 형태로 출력(줄바꿈 현상 나타남), 공간을 만들 수 있고, 상하 배치 작업 가능
- Inline 요소: x축 정렬 형태로 출력(한 줄에 출력), 공간을 만들 수 없고, 상하 배치 작업 불가능
CSS
구성 요소 : 선택자 { 속성 : 속성값; }
- 선택자: 디자인을 적용할 HTML 영역
- 속성: 어떤 디자인을 적용할지 정의
- 속성값: 어떤 역할을 수행할지 구체적으로 명령. 세미콜론 필수
CSS 연동 방법 세 가지
- Inline : 태그 안에 직접 원하는 스타일 적용
- Internal : style 태그로 감싸기(태그 안에 넣기), head 태그 안에 style 태그
- External : css라는 파일 만들어서 만들고 link 태그로 불러오기(link 태그는 닫힌 태그 없음), 가독성이 좋고 유지보수가 쉬움
실습
CSS 선택자
- 선택자 : HTML의 어떤 요소에 CSS를 적용할 것인가
선택자는 Type(태그), Class(태그 별명), ID(태그 이름)
Class는 .(사용자 지정 별명), ID는 #(사용자 지정 이름)으로 사용
실습
Class 선택자
<head> <style> .coding { color: blue; } </style> </head> <body> <h1 class= "coding">Class Elice</h1> </body>
ID 선택자
<head> <style> #coding { color: blue; } </style> </head> <body> <h1 id= "coding">ID Elice</h1> </body>
부모 자식 관계
실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS 속성의 상속</title> <style> header h2 {color:blue;} header p {color:red;} footer h2 {color:black;} footer p {color:green;} </style> </head> <body> <header> <h2>나? 자식</h2> <p>나도</p> </header> <footer> <h2>나? 자식</h2> <p>나도</p> </footer> </body> </html>
캐스케이딩
: CSS의 우선순위를 결정하는 세 가지 요소
- 순서 : 나중에 적용한 속성값 우선
- 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 더 높음
- 선택자 : style > id > class > type 순으로 우선순위가 높음
CSS 주요 속성 살펴보기
- width, height :고정값은 px 가변값은 %
- font-size: 글자 크기
- font-family: 글꼴(,로 여러 폰트를 적어놓는것이 좋음, sans-serif는 마지막에 작성하는 디폴트값)
- font-style: 글자 기울기
- font-weight: 글자 두께
- border: 테두리
- border-style: 실선(solid), 점선(dotted)
- border-width : 테두리 굵기
- border-color : 테두리 색상
- ** border : solid 10px red 이런 식으로 쉼표 사용 없이 띄어쓰기로 한 번에 표현 가능(순서는 상관 없음)
- background : 특정 영역 안의 배경 이미지 변경
- background-color : yellow; (색상)
- background-image : url(이미지 경로);
- background-repeat : 이미지의 반복효과(x 축 반복 : repeat-x, y축 반복:repeat-y, 반복안함:no-repeat)
- background-position : 공간 안에서 이미지의 좌표를 변경할 때(top, bottom, left, right, center 등)
