코드와 내용을 정리하고 수업시간에 풀리지 않은 부분은 챙겨서 늦게 올려요..
#구조 선택기
점차적으로 증가하는 숫자를 표현할 때
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
</html>ul {
overflow: hidden;
}
/* 자식이 float를 써서 강제로 옮겼다면 부모는 잡아주기 위해!
overflow: hidden을 사용해준다. */
li {
list-style: none;
float: left;
padding: 15px;
}
li:nth-child(2n){
background-color: red;
}
li:nth-child(2n+1){
background-color: blue;
}
li:first-child {
border-radius: 10px 0 0 10px ;
/* 시계방향으로 적용 */
}
li:last-child {
border-radius: 0 10px 10px 0 ;
}
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
</head>
<body>
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</body>
</html>li:first-child > a {
color: red;
}
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
</head>
<body>
<h1> Header -1</h1>
<h2> Header -2</h2>
<h3> Header -3</h3>
<h3> Header -3</h3>
<h2> Header -2</h2>
<h1> Header -1</h1>
</body>
</html>h1:first-of-type{
color: red;
}
h2:first-of-type{
color: red;
}
h3:first-of-type{
color: red;
}
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
</head>
<body>
<h1> Header -1</h1>
<h2> Header -2</h2>
<h3> Header -3</h3>
<h4> Header -4</h4>
<h5> Header -5</h5>
<h6> Header -6</h6>
<h1> Header -1</h1>
<h2> Header -2</h2>
<h3> Header -3</h3>
<h4> Header -4</h4>
<h5> Header -5</h5>
<h6> Header -6</h6>
</body>
</html>
body > *:first-of-type{
color: red;
}
# 캐릭터 선택
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam corrupti amet unde possimus dolorem. Dolor rerum facilis doloremque impedit, numquam optio et, iure, cupiditate eum assumenda maiores fugit necessitatibus deserunt.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, nostrum veritatis. Excepturi tempore obcaecati assumenda, quam expedita debitis temporibus eaque labore harum perferendis ullam sunt quo voluptatum hic at dolorum.</p>
</body>
</html>p::first-letter {
color: red;
font-size: 3em;
/* 디바이스에 따라서 폰트가 달라져야 하는 경우..
하위요소가 상대적으로 비율을 조절해야하는 경우
em을 사용.. 배수 라는 의미 폰트사이즈의 몇배? */
}
p::first-line {
background-color: skyblue;
}
# 전후 선택자
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p data-page="52">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam corrupti amet unde possimus dolorem. Dolor rerum facilis doloremque impedit, numquam optio et, iure, cupiditate eum assumenda maiores fugit necessitatibus deserunt.</p>
<p data-page="273">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, nostrum veritatis. Excepturi tempore obcaecati assumenda, quam expedita debitis temporibus eaque labore harum perferendis ullam sunt quo voluptatum hic at dolorum.</p>
</body>
</html>/* 중요.. */
p{
counter-increment: rint;
/* 속성값 증가 시켜라 rint라는 가상의 공간안에서*/
}
p::before {
content: counter(rint) ".";
/* 태그 앞에다가 어떠한 표현을 해라 어떤 컨텐츠를 생성해라 어떤: rint를 가져와서 p안에 카운터를 해 줘라 문자를 주기위해 큰따옴표 두개와 점 하나 주기*/
}
p::after {
content: " - " attr(data-page) " page";
}
p::first-letter {
font-size: 3em;
}
}
<지름길 친척=“스타일 템플릿” 헥사=“http://whoami-whereami.m/style.css”>
<스크립트 원천=“https://code.jquery.com/jquery-1.12.4.js“ 진실성=“sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=” 교차 원산지=“익명의”>스크립트>
jQuery 레이아웃 순서(위치) 중요……매우 중요
이를 구문 분석이라고 합니다. Chrome은 작성된 순서대로 코드를 읽습니다.
JavaScript라는 언어는 외부 플러그인을 가져와서 설치하는 프로그래밍 언어이기 때문입니다.
언어이니까!!
먼저 css를 받아들이고 자바스크립트를 받아 완성!!!
위치를 변경하면 페이지가 작동하지 않는 것처럼 보입니다.
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<ul data-role="listview">
<li data-role="list-divider">HTML5</li>
<li>Multimedia</li>
<li>Connectivity</li>
<li>Device Access</li>
<li data-role="list-divider">CSS3</li>
<li>Animation</li>
<li>3D transition</li>
</ul>
</body>
</html>
DOCTYPE HTML>
<HTML 긴=“코르”>
<머리>
<메타 문자 집합=“UTF-8”>
<메타 http 동등=“X-UA 호환” 내용물=“IE=에지”>
<메타 성=“뷰포트” 내용물=“너비 = 장치 너비, 초기 스케일 = 1.0”>
<제목>문서제목>
<지름길 친척=“스타일 템플릿” 헥사=“http://whoami-whereami.m/style.css”>
<스크립트 원천=“https://code.jquery.com/jquery-1.12.4.js“ 진실성=“sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=” 교차 원산지=“익명의”>스크립트>
머리>
<몸>
<다양한 데이터 롤=“도서 페이지”>
<다양한 데이터 롤=“헤더” 데이터 테마=“비”>
<h1>HTML5 및 CSS3h1>
다양한>
<울 데이터 롤=“목록보기”>
<왼쪽 데이터 롤=“목록 구분선”>HTML5왼쪽>
<왼쪽>멀티미디어왼쪽>
<왼쪽>연결성왼쪽>
<왼쪽>기기 액세스왼쪽>
<왼쪽 데이터 롤=“목록 구분선”>CSS3왼쪽>
<왼쪽>애니메이션왼쪽>
<왼쪽>3D 전환왼쪽>
울>
다양한>
몸>
HTML>
#리액티브 캐릭터 선택
DOCTYPE HTML>
<HTML 긴=“코르”>
<머리>
<메타 문자 집합=“UTF-8”>
<메타 http 동등=“X-UA 호환” 내용물=“IE=엣지”>
<메타 성=“뷰포트” 내용물=“너비 = 장치 너비, 초기 스케일 = 1.0”>
<제목>문서제목>
<지름길 친척=“스타일 템플릿” 헥사=“http://whoami-whereami.m/style.css”>
<스크립트 원천=“https://code.jquery.com/jquery-1.12.4.js“ 진실성=“sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=” 교차 원산지=“익명의”>스크립트>
머리>
<몸>
<h1>Lorem ipsum dolor sit ameth1>
<피>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta harum fuga quaerat earum dolorem ut, non eius sunt dignissimos voluptatem error a autem mollitia veniam consequuntur doloremque pariatur modi ratione?피>
<피>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error voluptate, commodi reiciendis non nostrum voluptatem obcaecati consequuntur eos optio id exercitationem ex nulla modi quis. Illum, Konsequatur. 오류, 공식석?피>
몸>
HTML>
피::선택{
배경색: 검은색;
색상: 하얀색;
}
DOCTYPE HTML>
<HTML 긴=“코르”>
<머리>
<메타 문자 집합=“UTF-8”>
<메타 http 동등=“X-UA 호환” 내용물=“IE=엣지”>
<메타 성=“뷰포트” 내용물=“너비 = 장치 너비, 초기 스케일 = 1.0”>
<제목>문서제목>
<지름길 친척=“스타일 템플릿” 헥사=“http://whoami-whereami.m/style.css”>
<스크립트 원천=“https://code.jquery.com/jquery-1.12.4.js“ 진실성=“sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=” 교차 원산지=“익명의”>스크립트>
머리>
<몸>
<h1>ㅏ>아무것도ㅏ>h1>
몸>
HTML>
ㅏ {
텍스트 장식: 없음;
}
ㅏ:방문 {
색상: 빨간색;
}
ㅏ:링크::이후{
내용물: ‘-‘ 속성(헥사);
}
#네거티브 선택
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
<body>
<input type="password">
<input type="text">
<input type="password">
<input type="text">
</body>
</html>input:not((type=password)) {
background-color: red;
}
W3C 마크업 유효성 검사 서비스
파일 업로드 확인 참고: Windows XP 서비스 팩 2의 일부 버전에서는 Internet Explorer에서 파일 업로드가 작동하지 않을 수 있습니다. W3C QA 사이트의 정보 페이지를 참조하십시오.
validator.w3.org
내가 만든 웹사이트에 문제가 있다면 보이지 않는 문제가 있다면 이 웹사이트를 이용하세요.
개발자 도구에서 버그를 찾을 수 있습니다.
우선 사항!!!!! 우선 사항
DOCTYPE HTML>
<HTML 긴=“코르”>
<머리>
<메타 문자 집합=“UTF-8”>
<메타 http 동등=“X-UA 호환” 내용물=“IE=에지”>
<메타 성=“뷰포트” 내용물=“너비 = 장치 너비, 초기 스케일 = 1.0”>
<제목>문서제목>
<지름길 친척=“스타일 템플릿” 헥사=“http://whoami-whereami.m/style.css”>
<몸>
<다양한 ID=“내 상자”>
<다양한 수업=“텍스트”>내 텍스트 1다양한>
<다양한 수업=“텍스트 검정” >내 문자 2다양한>
<다양한 수업=“텍스트 중요-검은색”>내 텍스트 3다양한>
다양한>
몸>
HTML>
#마이박스{
색상: 파란색;
}
.검은색{
색상: 빨간색;
/* 직접 스타일을 먼저 적용 */
}
.important-블랙{
색상: 녹색 !중요한
/* 변수가 많을수록 더 유연한 장점 규칙성이 적음 단점
패턴을 만드는 것은 어렵습니다. 큰 위험
Important는 정말 필요할 때만 사용합니다.
}
/* #my-box.text {
직접/상속X
파란색;
} */
CSS 크기 단위: vw / vh
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
<body>
<div id="box1"></div>
<hr>
<div id="box2"></div>
<hr>
<div id="box3"></div>
<hr>
</body>
</html>#box1 {
width: 200px; height: 200px;
background-color: red;
}
#box2 {
width: 50vw; height: 30vh;
background-color: red;
}
%(퍼센트) / em / rem(루트 요소)
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/style.css">
<body>
<p>Lorem ipsum dolor<p>
<p>Lorem ipsum dolor<p>
<p>Lorem ipsum dolor<p>
<p>Lorem ipsum dolor<p>
</body>
</html>p:nth-child(1) {
}
p:nth-child(2) {
font-size: 1em;
}
p:nth-child(3) {
font-size: 1.5em;
}
p:nth-child(4) {
font-size: 2em;
}
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/./style.css">
</head>
<body>
<div>
<p>Lorem ipsum dolor<p>
<p>Lorem ipsum dolor<p>
<p>Lorem ipsum dolor<p>
<p>Lorem ipsum dolor<p>
</div>
</body>
</html>* {
font-size: 30px;
}
div{
font-size: 20px;
}
p:nth-child(1){
}
p:nth-child(2){
font-size: 50px;
}
p:nth-child(3){
font-size: 2em;
}
p:nth-child(4){
font-size: 2rem;
}
/* 60픽셀 전체 선택자 기준으로 배수*/
#hex 코드
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/./style.css">
</head>
<body>
<div>
<p class="text1">Lorem ipsum dolor<p>
<p class="text2">Lorem ipsum dolor<p>
<p class="text3">Lorem ipsum dolor<p>
<p>Lorem ipsum dolor<p>
</div>
</body>
</html>p.text1 {
color: red;
}
p.text2{
color: rgba(0, 0, 0 , 1);
}
p.text3{
color: #FFFFFF;
}
#DisplayAttribute
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/./style.css">
</head>
<body>
<span>Dummy</span>
<div id="box1">
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span>
</div>
<span>Dummy</span>
<hr />
<span>Dummy</span>
<div id="box2">
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span>
</div>
<span>Dummy</span>
</body>
</html>#box1{
display: inline;
background-color: red;
width: 300px; height: 50px;
margin: 10px;
}
/* 인라인 요소는 높이넓이 먹지 않음 */
#box2{
display: inline-block;
background-color: red;
width: 300px; height: 50px;
margin: 10px;
}
인라인 블록이 자주 사용됨
블록 요소이고 위, 아래, 왼쪽, 오른쪽 여백 값을 지정하려는 경우
단일 행에 속성 스타일을 적용하고자 할 때 사용합니다.
시야 범위
방을 나가고 요소만 보이지 않게 합니다.
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/./style.css">
</head>
<body>
<span>Dummy</span>
<div id="box">
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span>
</div>
<span>Dummy</span>
</body>
</html>#box{
visibility: hidden;
}
불투명
#box{
background-color: black;
color: white;
opacity: 0.2;
}
#box{
background-color: black;
color: rgba(255, 255, 255, 0.3)
}
******************중요한******************
엣지 인레이
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/./style.css">
</head>
<body>
<div>박스</div>
</body>
</html>
div {
text-align: center;
line-height: 200px;
font-size: 20px;
font-weight: 900;
color: white;
width: 200px; height: 200px;
background-color: red;
border: 20px solid black;
margin: 30px 40px 50px 60px ; padding: 30px;
}
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://whoami-whereami.m/./style.css">
</head>
<body>
<div></div>
<div></div>
</body>
</html>div {
width: 100px; height: 100px;
border: 10px solid black;
margin: 10px; padding: 10px;
}
div:first-child{
background-color: red;
}
div:last-child{
background-color: orange;
}
프로젝트 둘러보기(Github에 첨부)
＊참고 개념
텍스트 오버플로: 타원;
여백: 노랩;
과다: 숨겨진;
형제 3명과 이사
웹 브라우저 자체에 여백이 있습니다.
테두리와 패딩을 0으로 설정하고 벽에 붙입니다.
DOCTYPE HTML>
<HTML 긴=“코르”>
<머리>
<메타 문자 집합=“UTF-8”>
<메타 http 동등=“X-UA 호환” 내용물=“IE=엣지”>
<메타 성=“뷰포트” 내용물=“너비 = 장치 너비, 초기 스케일 = 1.0”>
<제목>문서제목>
<지름길 친척=“스타일 템플릿” 헥사=“http://whoami-whereami.m/./style.css”>
머리>
<몸>
<다양한 ID=“포장하다”>
<h1>Lorem ipsum dollor sith1>
<피>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데.
피>
<피>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데.
피>
<피>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데.
피>
<피>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데.
피>
<피>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque voluptatibus magnam dignissimos, reprehenderit maxime eius error hic qui nisi commodi iste differenceio voluptatum illo molestiae, architecto, velit soluta rem. 언데.
피>
다양한>
몸>
HTML>
#포장하다 {
넓은: 100폭스바겐; 키: 100%;
위치: 상대적인;
가구류: 10픽셀;
}
#포장하다::전에 {
내용물: “”;
/* 래퍼 뒤에 이미지를 넣고 싶습니다 */
배경 이미지: URL(./img/BackgroundFront.png), URL(./img/BackgroundBack.png) ;
배경 크기: 100%;
배경 첨부: 단단히;
배경 위치: 맨 아래;
백그라운드 반복: 반복 없음;
맨 위: 0; 맨 아래: 0; 오른쪽으로: 0; 왼쪽: 0;
광고: 차단하다;
위치: 전적으로;
불투명: 0.4;
}
/* before로 뒤의 가상 이미지를 뺍니다.
절대 위치, 상대 위치 */
#포장하다 > h1, #포장하다 > 피 {
위치: 상대적인;
/* 위치에 영향을 주지 않고 앞으로 드래그합니다.. */
}
집중력. 근본 문제로 인한 이해 부족
그리고 사진이 안나오네요..왜요?! 다시 시도해야합니다 ..
이미 알고 있는 내용도 많지만…
지식을 실전에서 현명하고 유연하게 사용할 수 있는지,
수업 시간에 배운 내용을 잘 이해하고 있는지 지속적으로 확인해야 합니다.
부실공사로 피해를 보는 날이 오지 않았으면 좋겠습니다