728x90
padding은 내용과 border사이
(글자 메뉴와 네모테두리)
정중앙 배치하기
<style>
*{
margin : 0;
padding : 0; /* 기본적으로 갖는 margin과 padding을 지워준다. */
}
body{
background-color : cadetblue;
}
#container{
width : 500px;
height : 250px;
background-color: rebeccapurple;
position : absolute;
left : 50%; top : 50%;
margin-left : -250px;
margin-top : -125px;
}
</style>
</head>
<body>
<div id="container">
<h1>요소의 중앙 배치</h1>
</div>
</body>
상단, 왼쪽 박스 고정
<style>
#top{
background-color: rgb(81, 194, 81);
position: fixed;
top : 0; left : 0; right:0;
height : 50px;
}
#left{
background-color: brown;
position : fixed;
top:50px; left:0; bottom:0;
width:50px;
}
#container{
background-color:white;
margin-top:50px;
margin-left:50px;
width:500px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores voluptatem quam accusamus maxime optio, expedita earum odit fugit cum porro exercitationem saepe voluptatum sit ducimus sunt. Excepturi iusto id quisquam?
Magni, harum. Eius at consequatur voluptatibus, illum ut quasi animi suscipit soluta autem, adipisci quisquam sit sed? Corrupti rerum autem perferendis perspiciatis voluptatibus soluta omnis nostrum, minus recusandae magnam error.
Quia quibusdam cupiditate consequuntur culpa fugiat, quisquam voluptatibus libero quasi quidem nihil quod veniam ratione repellendus nobis laborum neque praesentium maxime ipsam laudantium. Animi eius vel obcaecati voluptatem impedit nostrum.
Itaque odio nemo impedit tenetur, consectetur culpa voluptates aut laborum? Numquam corporis voluptates at sapiente. Cumque vitae doloribus consequatur dolorem eius voluptatem fuga perferendis tempora, harum, earum, quidem expedita voluptatum?
</div>
글자가 넘어가면 ...으로 표시되게 하기
#ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="container">
<p id=ellipsis>Magni, harum. Eius at consequatur voluptatibus, illum ut quasi animi suscipit soluta autem,
adis</p>
</div>
</body>
반응형 웹을 위한 설정 - 미디어 쿼리 설정
<style>
@media screen{
body{ background-color: navajowhite;}
}
@media print{
body{ background-color: orange;}
}
</style>
<link>를 이용하여 style을 외부파일로 넘기기
<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="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<h1>Lorem, Lorem ipsum dolor sit ectetur.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing</p>
반응형 웹 - 스마트폰, 태블릿pc, 데스크톱 구분
<style>
@media screen and (max-width : 767px){ //스마트폰
body {background-color: red;}
}
@media screen and (min-width : 768px) and (max-width: 959px){ //태블릿
body { background-color: green;}
}
@media screen and (min-width : 960px){ //PC
body { background-color: yellow;}
}
</style>
모바일 세로, 가로 배경색깔 다르게 주기
<style>
@media screen and (orientation:portrait){ //세로 모바일
body{background-color: aqua;}
}
@media screen and (orientation:landscape){ //가로 모바일
body{ background-color: brown;}
}
</style>
728x90
'웹개발 > HTML' 카테고리의 다른 글
| [JavaScript] 조건문, 반복문 23.04.12 (0) | 2023.04.12 |
|---|---|
| [JavaScript] 기본용어 예약어 자료형 변수 23.04.11 (0) | 2023.04.11 |
| [HTML] 선택자,이미지배경, 박스속성, 가시속성 23.04.06 (0) | 2023.04.06 |
| [html] 입력태그, 공간태그, 시멘트태그, CSS(선택자) 23.04.05 (0) | 2023.04.05 |
| [html] 앵커태그 23.04.04 (0) | 2023.04.04 |
댓글