html,css5일차
position
부모 요소에relative로 기준을 잡고
자식요소에는 absolute를 사용하면 부모요소를 기준으로 좌표가 잡힌다
#container{
width: 500px; height: 300px;
border: 3px solid black;
overflow: hidden;
position: relative;
}
.circle{
position: absolute;
width: 100px; height: 100px;
border-radius: 50% 50%;
}
#red{
background-color: red;
left: 20px; top: 20px;
}
#green{
background-color: green;
right: 20px; top: 20px;
}
#blue{
background-color: blue;
left: 20px; bottom: 20px;
}
#yellow{
background-color: yellow;
right: 20px; bottom: 20px;
}
<div id="container">
<div id="red" class="circle"></div>
<div id="green" class="circle"></div>
<div id="blue" class="circle"></div>
<div id="yellow" class="circle"></div>
</div>
결과
부모 좌표의 기준으로 오른쪽 왼쪽 위아래 설정이 가능하다
요소중앙에 배치
*{margin: 0; padding: 0;}
body{
background-color: red;
}
#container{
width: 500px; height: 250px;
background-color: orange;
position: absolute;
left: 50%; top: 50%;
margin-left: -250px;
margin-top: -125px;
}
<body>
<div id="container">
<h1>중앙요소배치배치</h1>
</div>
</body>
container 의css 부분에서 왜 마진 위와 왼쪽을 -값을 주냐면 container의 생성 범위지점 중앙이기에 너비가 높이를 주면
직사각형 중심이 중앙이 아니라 직사각형 시작점이 중앙이기에 직사각형이 중앙을 화면 중간에 오게 하기 위해서
마진을 -값을 주었다
글자생략
ellipsis를 이용하여 글자를 생략할수 있다
h1,p{
width: 300px;
}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h1 class="ellipsis">가나다라마바사아자차카타파하가나다라마바사</h1>
<p class="ellipsis">가나다라마바사아자차카타파하가나다라마바사</p>
white-space:nowrap 는 자동으로 줄바꿈이 일어나지 않게 하는 역할을 한다 만약이게 없다면
이렇게 나온다
그다음 text-overflow:ellipsis가 바로 넘어가는 부분을 .... 으로 처리한다
미디어 쿼리 설정
css에서 어떤 스타일은 특정 조건에서 그것을 적용하고 싶을때 사용할수 있다
@media (조건){
css코드
}
@media screen and (min-width: 768px) and (max-width: 958px) {
body{
background-color: rgb(8, 245, 174);
}
}
이렇게 코드를 주면 화면의 너비가 768 이상 958 이하일때 css 에 지정된 색으로 배경이 바뀐다는걸 의미한다
이걸이용하면 pc환경과 모바일 환경의 눈에 보이는 화면을 서로 다르게도 할수 있다
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu{
width: 260px;
float: left;
}
#section{
width: 700px;
float: left;
}
li{
list-style: none;
}
@media screen and (max-width: 760px) {
body{
width: auto;
}
#menu{width: auto; float: none;}
#section{width: auto; float: none;}
}
</style>
</head>
<body>
<div id="section">
<h1>afkjhdks</h1>
<p>dnhfadjhujafoeajfjsdalkfjadklfjioljkldjklandklfioahihkjcigfjhdei</p>
</div>
<div id="menu">
<ul>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
</ul >
</div>
</body>
기본화면으로는 이렇게 출력되고
미디어 커리 조건에 맞게 화면을 줄이면 아래와 같이 화면이 보여진다
반응형
'html,css,js 공부' 카테고리의 다른 글
| (2024 02 23) js 6일차 (0) | 2024.02.24 |
|---|---|
| 반응형 웹 만들어보기 (0) | 2024.02.21 |
| (2024 02 20) html,css 4일 (1) | 2024.02.21 |
| (2024.02.16) 3일차 html,css (2) | 2024.02.17 |
| (2024.02.15)2일차 html (0) | 2024.02.16 |