수업 2일차
실시간 온라인 수업이 아닌 개인적으로 수업을 들어 완료해야한다.
실시간 수업보다는 시간에 압박감이 조금 덜했다.
수업내용
-
HTML
HTML 태그 구성요소 : 태그명, 컨텐츠, 속성, 속성값
!DOCTYPE html : HTML5라는 신조어로 문서를 선언하는 태그
html : HTML 문서의 시작과 끝을 의미
head : 웹사이트의 간단한 요약정보, 웹사이트에 노출되지 않음
body : 웹사이트에서 눈에 보이는 정보
meta charset="UTF-8" : 모든 문자를 웹 브라우저에서 깨짐없이 표시하겠다는 의미
title : 웹사이트 탭에 나타내는 제목을 적는 태그
img : 정보성을 갖고 있는 이미지를 삽입 src(파일경로), alt(텍스트 정보로 대체)
h : Heading의 약자로 제목이나 부제목을 표현, 숫자가 클수록 폰트사이즈가 작음
p : paragraph의 약자로 본문 내용을 표현
ul : 순서가 없는 리스트 생성, 메뉴 버튼을 만들때 사용
header : 웹사이트의 머리글을 담는 공간
nav : 메뉴 버튼을 담는 공간 ul,li,a와 함께 사용
main : 문서의 주요내용을 담는 태그, IE는 지원하지 않으므로 role="main" 속성 필수 입력
article : 정보를 담고 구역을 설정하는 태그, h태그가 존재해야함
footer : 가장 하단에 들어가는 정보를 표기할 때 사용
div : 임의의 공간을 만들때 사용
block 요소 : y축 정렬 형태로 출력(줄바꿈 현상 일어남)
inline 요소 : x축 정렬 형태로 출력(한 줄에 출력) -
CSS
CSS 구성 요소 : 선택자, 속성, 속성값
inline Style Sheet : 태그 안에 직접 원하는 스타일을 적용
internal Style Sheet : style 태그안에 넣기
external Style Sheet : link 태그로 불러오기, 문서를 따로 관리하여 가독성이 좋고 유지보수가 쉬움
Type 선택자 : 특정 태그에 스타일을 적용
class 선택자 : 클래스 이름으로 특정 위치에 스타일을 적용(.사용)
id 선택자 : ID를 이용하여 스타일을 적용(#사용)
캐스케이딩 : CSS의 우선순위를 결정하는 요소, (순서, 디테일, 선택자) style > id > class > type
width : 선택한 요소의 넓이를 설정, 고정값(px), 가변값(%)
height : 선택한 요소의 높이를 설정
font-size : 글자 크기
font-family : 글꼴, 브라우저마다 지원하는 폰트가 다름, sans-serif는 마지막에 작성하는 기본값
font-style : 글자 기울기
font-weight : 글자 두께, 100~900
border-style : 테두리 종류, solid(실선), dotted(점선)
border-width : 테두리 선의 굵기 설정
border-color : 테두리 색상 설정
background-color : 배경 색상 설정
background-image : 배경 이미지 설정
background-repeat : 이미지에 대한 반복효과 설정, repeat-x, repeat-y, no-repeat
background-position : 공간 안에서 이미지의 좌표를 변경
background 만 입력해서 가능 순서 상관 없음
박스모델 작성순서 : 시계방향, top, right bottom left
margin-left : border 바깥쪽에서 왼쪽에 여백을 만듦
padding-left : border 안쪽에서 왼족에 여백을 만듦
형제지간에 마진 병합현상 : 크키가 큰쪽이 작은쪽을 먹어버림 ex) 150px, 100px 면 250px아니라 150px임
부모 자식간의 마진 병합 : 자식에게 마진을 적용하는 순간 부모에도 영향을 줌
display : Block과 Inline 요소의 성격을 바꿀때 사용 , inline-block을 사용하면 두 요소의 성격 모두가짐
float : 정렬을 시키고자 할때 사용, 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것
clear : float에 대한 속성을 제어하고자 할 때
브라우저와 공간 사이의 공백 제거하기 : margin과 padding값을 0으로 변경, *로 모든 html태그 가능
실습
Block 요소와 Inline요소 차이확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Block 요소와 Inline 요소</title>
<style>
p {
width: 200px;
height: 200px;
background: yellow;
margin-top: 100px;
}
a {
width: 200px;
height: 200px;
background: pink;
margin-top: 100px;
}
</style>
</head>
<body>
Block 요소
<p>Block 요소</p>
<p>Block 요소</p>
<p>Block 요소</p>
Inline 요소
<a href="#">Inline 요소</a>
<a href="#">Inline 요소</a>
<a href="#">Inline 요소</a>
</body>
</html>