프로그래밍에 신경 쓰는 사람을 위한 우선 터치 강좌(html css편position)
줄거리
지난번에 html과 css 표시 위치를 조정하는 방법 중 하나를 배웠습니다.margin과padding은 닮은 것 같고 좀 다르기 때문에 차이를 잘 기억하세요.
이번 학생들은 내 힌트 없이 풀린 것 같다.두 번째는 난이도가 너무 높지 않아요?그렇게 생각하지만 좋아요!나는 어떤 답이 나올지 매우 기대한다.
8/9 추기에 의하면 학생들은height100%,width100%가 상황 형상에 따라 변화하는 일은 기억하기 어려울 것 같고 그 결합이padding과margin에 미치는 영향도 어렵다고 한다.지난번 실연이 달콤하다는 것을 통감하고 다시 실연을 했다.이 강좌 숙제를 보고 싶은 학생과 독자는 잠시만 기다리세요.
숙제 답안
언뜻 보니 옳았다.일본 국기 제작의 발전 문제는 이번 흰색 부분은 패딩을 부모 요소로 하고 홍환은 마르킨으로 조정하면 순조롭다.
이번 목적
포지션이라는 위치를 조정하는 방법을 습득하다.
사용 빈도가 높은 것을 제외하고는 모두 생략하였으니 각자 검색해 주십시오.
position
상자의 배치 방법 (데이텀 위치) 이 상대 위치인지 절대 위치인지 지정할 때 사용합니다자세한 내용
무슨 뜻인지 제가 설명해 드릴게요.
position:static
위치를 따로 설정하지 않으면 설정합니다.데이텀 위치를 특별히 설정하지 않습니다.
요소를 덮어쓰고 초기화하고 싶을 때만 사용하기 때문에 사용 빈도가 많지 않다.
position: absolute
원점에서 이동할 위치를 결정합니다.예를 들어 top:20px;문서 레지스트리에 항목을 추가합니다.그리고 왼쪽,right,bottom도 있습니다.
기준과 관련해 아무것도 설정되지 않으면 화면의 왼쪽 상단이 기준이다.상위 레벨이 static 이외의 위치를 적용하면 상위 레벨의 왼쪽 상단이 기준입니다.
position: relative
상대 위치에 배치합니다.위치 속성에서 static을 지정할 때 표시되는 위치는 데이텀 위치입니다.
이렇게 쓰지만 평소 사용하는 인상에서는 absolute 요소의 기준을 결정하기 위해 부모 요소로 설정하는 사용법이 많다.
position: fixed
설정 방법은 absolute와 같지만fixed가 고정된 것은 아무리 화면을 움직여도 제자리에 멈추지 않습니다.머리글을 자주 표시하려면 사이드바를 옆에 놓을 때 사용하십시오.
견본
샘플을 준비했습니다.포지션이 어떤 동작을 할지 모색해 봅시다.
class3.html<html>
<head>
<title>class3</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="class3.css">
</head>
<body>
<header>title:class3</header>
<div class="content">
<div class="content" id="content1">
<div class="block">position:static</div>
</div>
<div class="content" id="content2">
<div class="block">position:static</div>
</div>
<div class="content" id="content3">
<div class="block">position:static</div>
</div>
<div class="content" id="content4">
<div class="block">position:static</div>
</div>
<div class="content" id="content5">
<div class="block">position:static</div>
</div>
<div class="content" id="content6">
<div class="block">position:static</div>
</div>
</div>
</body>
</html>
class3.cssbody{
height:200%:
width:200%;
}
header{
height:150px;
width:100%;
background-color: orange;
font-size:32px;
padding:20px;
/* position: fixed;
top:0;
left:0;*/
}
.content{
height:400px;
width:100%;
}
.content:nth-child(2n-1){
background-color:#CCC;
}
.content:nth-child(2n){
background-color:#EEE;
}
.block{
height:300px;
width:300px;
font-size:32px;
}
#content1 .block{
background-color: red;
}
#content2 .block{
background-color: green;
}
#content3 .block{
background-color: blue;
}
#content4 .block{
background-color: skyblue;
}
#content5 .block{
background-color: yellow;
}
#content6 .block{
background-color: pink;
}
작업
수업이 끝나면 추가합니다.
Reference
이 문제에 관하여(프로그래밍에 신경 쓰는 사람을 위한 우선 터치 강좌(html css편position)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/PAmatsuti/items/d8b1c315695fd577d7a8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<title>class3</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="class3.css">
</head>
<body>
<header>title:class3</header>
<div class="content">
<div class="content" id="content1">
<div class="block">position:static</div>
</div>
<div class="content" id="content2">
<div class="block">position:static</div>
</div>
<div class="content" id="content3">
<div class="block">position:static</div>
</div>
<div class="content" id="content4">
<div class="block">position:static</div>
</div>
<div class="content" id="content5">
<div class="block">position:static</div>
</div>
<div class="content" id="content6">
<div class="block">position:static</div>
</div>
</div>
</body>
</html>
body{
height:200%:
width:200%;
}
header{
height:150px;
width:100%;
background-color: orange;
font-size:32px;
padding:20px;
/* position: fixed;
top:0;
left:0;*/
}
.content{
height:400px;
width:100%;
}
.content:nth-child(2n-1){
background-color:#CCC;
}
.content:nth-child(2n){
background-color:#EEE;
}
.block{
height:300px;
width:300px;
font-size:32px;
}
#content1 .block{
background-color: red;
}
#content2 .block{
background-color: green;
}
#content3 .block{
background-color: blue;
}
#content4 .block{
background-color: skyblue;
}
#content5 .block{
background-color: yellow;
}
#content6 .block{
background-color: pink;
}
Reference
이 문제에 관하여(프로그래밍에 신경 쓰는 사람을 위한 우선 터치 강좌(html css편position)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/PAmatsuti/items/d8b1c315695fd577d7a8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
