HTML
HTML : Hyper Text Markup Language
- 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
- 눈에 보이는 정보 : 텍스트, 이미지 등
- 네비게이션, 로그인, 베너 등 영역을 나누는 역할
- 시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고, 새로운 언어가 생기기도 함
HTML 태그 구성 요소
- 태그명 : HTML이 갖고 있는 고유의 기능
<열린태그></닫힌태그>형태로 입력- 닫힌 태그가 없는 태그도 몇 있음
- 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물
- 속성 : 태그가 가지는 추가 정보
- 속성 값 : 어떤 역할을 수행할지 구체적인 명령
HTML 문서 기본 구조
<!DOCTYPE html>html5라는 신조어. 문서를 선언하는 태그<html></html>html 문서의 시작과 끝을 의미<head></head>웹사이트의 간단한 요약 정보를 담는 영역- 웹 사이트에 노출되지 않는 정보
<body></body>웹사이트에서 눈에 보이는 정보를 담는 영역- 텍스트, 이미지 등 출력되는 정보
<meta charset="UTF-8">모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미- 문자 인코딩을 UTF-8로 하겠다.
<title></title>웹사이트 탭에 나타나는 제목을 적는 태그
기본 태그
<h1></h1>: heading의 약자로 제목이나 부제목을 표현- h1~h6 까지 있음 ⇒ 숫자는 정보의 중요도를 나타냄
- h1은 가장 중요한 정보이므로, 하나의 html문서에 한 번만 사용 됨.
<p></p>: Paragraph의 약자로 본문의 내용을 표현- 웹 사이트의 중요 정보를 담는 태그
<ul></ul>: 순서가 없는 리스트 생성- 메뉴 버튼 만들 때 사용 됨
<a href="https://naver.com" target="_self"></a>: 클릭했을 때 다른 웹 페이지로 이동- href 속성 : 연결할 웹페이지의 주소
- target : 웹페이지를 연결하는 방식 ex) _blank : 새 창을 열어서 이동
<img src="logo.png" alt="회사로고">: 이미지를 삽입. 닫힌 태그 없음- src 속성 : 삽입할 이미지 파일 경로
- alt 속성 : 웹사이트가 이미지를 출력하지 못할 경우 대체할 텍스트, 웹 접근성을 위해 필요
- width, height 속성 : 이미지의 크기 지정
구조를 만드는 태그
목차
<header></header>웹 사이트의 머리글<nav></nav>메뉴 버튼을 담는 공간(navigation)- 주로
<ul>,<li>,<a>태그와 함께 사용
- 주로
본문
<main role="main"></main>문서의 주요 내용- role=”main” 속성 : main 역할을 한다는 사실을 표현함. 반드시 입력
<article></article>문서의 주요 정보를 담고 구역을 설정하는 태그- 태그 내에 구역을 대표하는 타이틀
<h>태그가 존재해야 함
- 태그 내에 구역을 대표하는 타이틀
부록
<footer></footer>가장 하단에 들어가는 정보를 표기할 때 사용
임의의 공간
<div></div>작은 구역을 나눌 때 사용
태그의 성격 : block 과 inline 요소
두 요소를 구분 짓는 세 가지 주요 특징
- 줄 바꿈 여부
- 가로 세로 공간 지정 가능 여부
- 상 하 배치 여부
block 요소
- y축 정렬 형태로 출력(줄 바꿈 O)
- 공간을 만들 수 있고, 상하 배치 작업 가능
- ex)
<div>,<p>,<h1>…
inline 요소
- x축 형태로 출력(줄 바꿈 X)
- 공간을 만들 수 없고, 상하 배치 작업 불가
- ex)
<a>,<span>
CSS
CSS : Casting Style Sheet
- 정보(HTML)와 디자인(CSS)의 분리
- 문서의 레이아웃과 스타일 정의
- HTML로 작성된 정보를 꾸며주는 언어
문법
- 선택자 : 디자인을 적용할 HTML 영역
- ex) 태그명, class명, id명
- 속성 : 어떤 디자인을 적용할지 정의
- 속성 값 : 어떤 역할을 수행할지 구체적으로 명령
- ⚠️세미콜론(;) 필수 입력
연동 세 가지 방법
- Inline : 태그 안에 직접 원하는 스타일 적용
- Internal :
<head>에<style>태그 안에 넣기 - External : 외부 파일(.css)로 만들어서
<link>태그로 불러오기<link rel="styledsheet" href="style.css" />- 각각의 문서 안에 따로 관리하여 가독성이 높고 유지-보수가 쉬움
CSS 선택자
: HTML의 어떤 요소에 CSS를 적용할 것인가
- Type : 태그
- Class : 태그 별명
.className {…}
- Id : 태그 이름
#idName {…}
부모 자식 관계
: 특정 태그 안에 다른 태그를 포함하는 관계
- 감싸는 태그를 부모, 포함되는 모든 태그를 자식이라고 한다.
- 자식이 여러 개이면 자식들끼리는 형제 관계이다.
- 부모의 CSS 속성은 자식이 상속 받는다.
- 정확한 CSS 작성을 위해서는 부모를 구체적으로 표기
header h1 {...}- 부모 자식 관계는 띄어쓰기로 표현
- 부모에게 상속 받은 CSS 속성보다 자식 CSS 속성이 우선순위가 더 높다.
캐스케이딩
: CSS의 우선순위
캐스케이딩을 결정하는 세 가지
- 순서 : 나중에 적용한 속성 값의 우선순위가 높음
- 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 높음
- 선택자 : id > class >type // Inline > Internal > External
연동 방식 > 선택자 > 디테일 > 순서
CSS 주요 속성
width, height: 선택한 요소의 너비와 높이 설정- 고정 값(px), 가변 값 (%)
- % : 부모의 크기가 기준이 된다.
font: 폰트 관련 설정font-family서체(폰트) 지정. 입력한 순서대로 우선순위 적용. sans-serif를 마지막에 넣어 디폴트 값으로 사용하는 것을 권장font-weight폰트 굵기 지정. 100~900 사이의 숫자 또는 bold, light 등
border: 테두리 속성. 다음 세 가지를 띄어쓰기로 연결해서 사용 가능border-style테두리 디자인. 실선(solid), 점선(dotted) 등border-width테두리 굵기border-color테두리 색상
background배경 설정. 띄어쓰기로 속성 값 연결해서 사용 가능background-image: 배경을 이미지로 설정.url(이미지 경로);를 값으로 준다.background-repeat: 이미지 반복 효과. repeat-x, repeat-y, no-repeatbackground-position: 공간 안에서 이미지의 좌표를 변경할 때 사용
