정리용입니다. ㅎㅎ...
웹을 구성하는 요소
웹 사이트 제작
건물짓기에 비유할 수 있다
- HTML : 설계도
- CSS : 인테리어 디자인
- JavaScript : 기능과 효과
제작시 고려사항
- 웹 표준 : 작성시 따라야하는 표준 규격
- 반드시 지킬 필요는 없음
- 지킨다면 검색엔진에 노출이 잘 됨
- 웹 접근성 : 장애 여부와 관계없이 모두 이용할 수 있을 때
- 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록하는 기법
HTML
Hyper Text Markup Language
특징
- 눈에 보이는 정보나 특정 구역을 설정시 사용하는 언어
- 담겨있는 정보를 파악해서 특징 별로 구역을 설정하는 것까지
- 많은 변화가 있어서서 신조어가 있음
현재 : HTML5 가 기준
구성요소
<열린 태그> 컨텐츠 </닫힌 태그>
- 열린 태그에 속성을 넣을 수 잇음
속성 = "속성값"
속성값 : 어떤 역할을 할지 구체적인 명령을 하는 것
문서
<!DOCTYPE HTML>
html5 라는 것을 의미
html 문서 선언<html></html>
html 문서 시작과 끝을 의미<head></head>
웹사이트와 관련된 요약 정보
노출되지 않음<body></body>
눈에 보이는 정보. 이미지, 텍스트<meta charset="utf-8">
character setting의 약자
문자코드
안넣으면 한글이 깨짐<title></title>
제목을 적는 태그
구성 태그
<img src="logo.png" alt="로고"/>
- 열림 태그로 구성돼있음
- src: 이미지 파일 경로
- alt: 이미지 출력이 안됐을 때, 텍스트 정보로 대체
빈공가능로 나오면 안되어 사용한다. 뭐가 있었는지 알려줌.
시각 장애인은 screen reader을 이용하는데 html만 읽음.
접근성과 표준을 지키는데에는 default임
-
title 태그
h1~h6이용
heading의 약자
숫자 값이 클수록 폰트 사이즈가 작음. 숫자는 정보의 중요도를 나타냄.
h1은 가장 중요한 정보로 한번만 사용된다. 동급이 있을수도 초월할 수도 없다. -
p 태그
본문 내용 -
리스트 태그
- ul: 순서가 없는 list
- ol: 순서가 있는 list
구조를 잡을 때 쓰는 태그
< 구조 >
- 목차 : 내비게이션 상단
- 본문
- 부록 : 최하단
-
<header>머리글 태그
사용자에게 가장 먼저 보이는 부분 -
<nav>메뉴 영역
ul > li > a 와 함께 사용 -
<main role="main">,<article>
- main > article
- article : 태그 내에 구역을 대표하는 태그가 필요 (웹 표준)
- 정보 영역: 주요 이미지, 텍스트 등의 정보
<footer>: 하단 영역
사업자 등록 번호, 연락처 등..
div> 임의의 공간을 만들 때 사용
두 가지 성격
Block
- 줄 바꿈 현상
- y축 정렬 형태
- 공간을 만들거나 상하 배치
h1~h6,header,div- width, height을 설정할 수 있음
Inline
- 한 줄에 모두 출력
- x축 정렬 형태
- 공간 x, 상하 배치 x
CSS
Cascading Style Sheet
- 디자인
- 상하 배치 작업
- 공간 크기 설정
구성요소
선택자{ 속성: 속성값}
- 선택자 : 디자인을 적용할 HTML 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 뭐로 수행할지 구체적으로 명령
⭐️;필수 입력
연동 방법
-
Inline Style Sheet
<h1 style="color:red;">
태그 안에 직접 적용 -
Internal Style Sheet
<style>이용 (head>style) -
External Style Sheet
.css 확장자를 가지는 파일을 만들어서 link 연동 방식으로 연결
장점 : html과 분리되어 각각의 언어로 각각의 문서를 관리할 수 있어 가독성과 유지보수가 쉬움
<link rel="stylesheet" href="style.css">
CSS 선택자
- Type (html 태그)
h1{ } - Class (별명)
<h2 class="클래스 명">
.클래스 명 { } - id (이름)
<h2 id="아이디 명">
#아이디 명{ }
부모-자식 관계
<header>
<h1></h1>
<p></p>
</header>header : 부모
h1, p : 자식 - 형제
➡️ 원하는 지역에만 CSS 속성을 적용하려 함. 그래서 부모를 구체적으로 표기해야함
케스케이딩 : 우선 순위
CSS 적용시 우선적으로 결정되는 것이 무엇인지
1. 순서 : 나중에 적용한 속성값이 우선순위가 높음
2. 디테일 : 더 구체적으로 작성된 것이 !
p{} < p{ color: blue }
3. 선택자
style > id > class > type
inline으로 적용된 style이 가장 우선적으로 적용됨
우선순위를 이용해서 수정하는 것이 원본 코드를 유지하는 방법
CSS 주요 속성
- width, height
특정 공간에 대한 영역 설정
- px: 고정적인 공간, 고정값
- %: 가변 값
- font-
- family : 여러개 입력 가능. 앞쪽이 없으면 뒤쪽으로
브라우저마다 지원하는 폰트가 다름으로 여러개 적용해주는 것이 좋음
마지막은 sans-serif (디폴트) - weight : 굵기. 100~900. 숫자가 클수록 굵어짐
- border-
아래를 한 줄로 작성할 수 있음
- style : solid(실선), dotted(점선)
- width: 굵기 (고정값 이용)
- color
- background-
아래를 한 줄로 작성할 수 있음
- color
- image : url('이미지 경로')
- repeat : no-repeat, repeat-x, repeat-y
공간 내 이미지 반복 효과 지정시 사용 - position : 공간 내 이미지 좌표 변경시
박스 모델
공간 크기 구성요소
- margin : border 밖
top, right, bottom, left - border : 이게 기준! 0이어도 항상 존재함
- padding : border와 contents 사이
top,right, bottom, left - content
block & inline 요소
- Block
p,h1~h6,header,div- 줄바꿈 현상
- width, height 지정 가능 (공간 만들기 가능)
- margin, padding : 상하좌우 배치 작업
- Inline
a,span- 줄바꿈 x
- margin- top, bottom / padding- top,bottom : 상하배치는 가능
마진 병합 현상
- 형제 지간
- 큰 값을 선택
- 부모 - 자식
자식에게 margin-top 적용시 부모까지 포함해서 적용됨
레이아웃에 영향을 미치는 속성
-
display
block, inline, inline-block(두 요소 성격을 모두 갖음, 내비게이션 용도로 자주 쓰임)
위와 같은 요소의 성격을 바꿀 때 사용 -
float
- 좌우 정렬에 사용됨
- 더 이상 정렬될 공간이 없다면 자동으로 다음줄에 배치됨
- 공중에 띄우는 역할. 레이어층을 만듦
- 레이어가 겹치지지 않도록 왼쪽에서 정렬시키고 싶으면
float:left를 연달아 기입
clear : float에 대한 속성을 제어시 사용
float이 적용된 다음 태그가 뜻대로 배치가 안될 경우 사용.
clear:both를 마지막 float 태그에 적용해 끄겠다!!
브라우저와 공간 사이에 미세한 공백이 있음
html,body {
margin:0;
padding:0;
}을 통해 공백 제거
html,body대신*을 사용해도 됨 : 모든 html 태그를 선택하겠다는 의미
