210702

Boyun Jang·2021년 7월 2일

학습한 내용

*html의 기본 셋팅

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

*css의 기본 셋팅
body{
	background-color: red; } 
    
하고 연동되었는지 index.html 웹사이트 열어서 확인

class = "별명"
열린태그와 닫힌태그 안에 있는 게 컨텐츠
ex) <div class="box-model">Hello World</div>
Hello World 가 컨텐츠
웹사이트에서 검사-stlye 보면 margin, border, padding 의 위치를 알 수 있다. (좌표 배치 작업할 때 사용되는 css 의 속성)
Tip. 주석처리 빠르게 하기
윈도우: "CTRl + /" 누르면 /, / 가 빠르게 적용된다.
box-sizing: vorder-box;
내가 만든 공간에 대한 크기는 유지하면서 padding 으로 위치를 변경하고 싶을 때
margin: top right bottom left 순으로 숫자px 기입하면 적용
.inline,.inline-block, .img{vertical-align: top;}
가장 상단으로 정렬하는 vertical-align <- inline(span) 요소에만 사용가능(h1 에 사용 불가)
postion: static; [부모가 높이 값이 없을 때] 자식의 높이 값이 부모의 높이 값에 영향을 준다.
position: absolute; 자식의 높이 값이 부모에게 영향을 줄 수 없다.
fix; 동일
position: relative 양쪽의 영향을 다 갖추고 있음
z-index: 10; z 축의 높이에 영향을 미치는 속성
(2차원인 static 에서는 사용 불가)