clear
flaot로 만든 박스를 따라가지 않게 만든다.
<!DOCTYPE html>
<html lang="en">
<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>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#wrapper{
width:600px;
border : 1px dotted red;
}
#w01{
width: 200px;
padding : 15px;
background-color: gray;
float: right;
}
#w02{
width: 200px;
padding : 15px;
background-color: pink;
float: left;
}
#w03{
/* width:200px; */
padding:10px;
background-color: aqua;
clear: both;
/* clear : 지정한 위치의 float을 따라붙지않는 상태 */
}
</style>
</head>
<body>
<h1>
교통카드 못쓰는 `반쪽 애플페이`…첫날부터 혼란
</h1>
<div id="wrapper">
<div id="w01">
애플의 근거리무선통신(NFC) 결제 서비스 '애플페이'가 한국에 상륙했다.
애플과 현대카드는 21일 서울 용산 현대카드 언더스테이지에서 '스페셜 이벤트'
를 열고 애플페이 서비스를 시작한다고 밝혔다.
정태영 현대카드 부회장은 자신의 아이폰을 공개하며 애플페이 서비스 개시를 알렸다.
이에 맞서 삼성과 네이버는 삼성페이와 네이버페이 간 연동 서비스를 이르면
23일로 앞당기는 등 애플페이에 '맞불'을 놓고 있다.
◇"얼굴 인식후 갖다대면 끝"…간편결제 시장 '게임 체인저' 될까= 이날 정 부회장은
"16년 전에 아이폰을 산 다음에 그 신기함에 매료돼 밤을 샜다"면서 "지난 16년 동안 아이폰이
내 생활과 삶을 바꿨고, 이제 아주 중요한 기능인
애플페이가 추가됐다"고 말했다. 그는 "그동안 NFC 단말기가 해외에는 많이 보급돼 있는데
한국에는 그렇지 않아 많이 안타까웠다"면서 "그런 의미에서 오늘은 한국 페이먼트에
중요한 이정표가 되는 날이라고 생각한다"고 말했다.
</div>
<div id="w02">
정 부회장은 또 "오래 기다려온 아이폰 유저 마음을 알기 때문에 현대카드의 독자적인 디자인을 되도록 없애고,
애플페이의 느낌만을 온전히 전하려고 노력했다"면서 "앞으로도 사용처의 빠른 확대를 위해서도 최선을 다할 것"이라고 말했다.
이날 행사에는 던킨 올비 애플페이 인터내셔널 총괄도 참석해 "한국에서 애플페이를 선보일 수 있도록 많은
노력을 기울인 현대카드팀과 정 부회장에게 감사하다"고 말했다.
</div>
<div id="w03">
아이폰과 현대카드를 보유한 이용자는 호환 단말기를 보유한 매장에서
카드 실물 없이 휴대전화로 간편결제를 이용할 수 있다. 현대카드에서 발행한 비자·마스터카드
브랜드 신용카드 또는 국내 결제 전용 신용·체크카드를 보유한 고객은
아이폰의 '지갑' 앱이나 '현대카드' 앱에서 애플페이 기능을 활성화할 수 있다. 결제를 위해선 측면 버튼 또는 홈 버튼을
두 번 눌러 사용자 인증을 한 뒤, 아이폰이나 애플워치를 단말기 가까이에 대면 된다. 맥과 아이패드에서는 온라인으로 이 기능을 이용할 수 있다.
현재까지 애플페이를 이용할 수 있는 곳은 전국 편의점과 코스트코, 현대백화점,
롯데백화점, 홈플러스, 다이소를 비롯한 오프라인 가맹점과 배달의민족, 무신사, 대한항공, 폴바셋, 이니스프리 등의 웹페이지·모바일 앱이다.
</div>
</div>
</body>
</html>
display
<!DOCTYPE html>
<html lang="en">
<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>display</title>
<!--
display 속성은 화면의 레이아웃을 결정하는 중요한 속성 .
display의 기본 속성값 : block , inline
-->
<style>
/* inline : 줄바꿈 x , block: 앞뒤로 줄바꿈 ,
none : 숨기기 , inline-block : 인라인처럼 보이고 블록처럼 동작(줄바꿈 x , 크기등을 변경가능) */
div , p{
display : inline-block;
}
</style>
</head>
<body>
<div id="header">
<h1>제목</h1>
<div id="menu1">
<p><a href="">메뉴1</a></p>
</div>
<div id="menu2">
<p><a href="">메뉴2</a></p>
</div>
<div id="menu3">
<p><a href="">메뉴3</a></p>
</div>
</div>
</body>
</html>원래라면 p태그이기때문에 한줄씩 배치되어야하지만 display로 인라인블럭타입으로 만들어줌 → 한줄에 배치된 모습
overflow
<!DOCTYPE html>
<html lang="en">
<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>overflow</title>
<!-- overflow : 요소의 박스에 내용이 더 길때 어떻게 보일지 결정하는 속성 -->
<style type ="text/css">
#body{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div id="body">
<h1> 교통카드 못쓰는 `반쪽 애플페이`…첫날부터 혼란 </h1>
<p>애플의 근거리무선통신(NFC) 결제 서비스 '애플페이'가 한국에 상륙했다.
애플과 현대카드는 21일 서울 용산 현대카드 언더스테이지에서 '스페셜 이벤트'
를 열고 애플페이 서비스를 시작한다고 밝혔다.
정태영 현대카드 부회장은 자신의 아이폰을 공개하며 애플페이 서비스 개시를 알렸다.
이에 맞서 삼성과 네이버는 삼성페이와 네이버페이 간 연동 서비스를 이르면
23일로 앞당기는 등 애플페이에 '맞불'을 놓고 있다.
◇"얼굴 인식후 갖다대면 끝"…간편결제 시장 '게임 체인저' 될까= 이날 정 부회장은
"16년 전에 아이폰을 산 다음에 그 신기함에 매료돼 밤을 샜다"면서 "지난 16년 동안 아이폰이
내 생활과 삶을 바꿨고, 이제 아주 중요한 기능인
애플페이가 추가됐다"고 말했다. 그는 "그동안 NFC 단말기가 해외에는 많이 보급돼 있는데
한국에는 그렇지 않아 많이 안타까웠다"면서 "그런 의미에서 오늘은 한국 페이먼트에
중요한 이정표가 되는 날이라고 생각한다"고 말했다.
정 부회장은 또 "오래 기다려온 아이폰 유저 마음을 알기 때문에 현대카드의 독자적인 디자인을 되도록 없애고,
애플페이의 느낌만을 온전히 전하려고 노력했다"면서 "앞으로도 사용처의 빠른 확대를 위해서도 최선을 다할 것"이라고 말했다.
이날 행사에는 던킨 올비 애플페이 인터내셔널 총괄도 참석해 "한국에서 애플페이를 선보일 수 있도록 많은
노력을 기울인 현대카드팀과 정 부회장에게 감사하다"고 말했다.</p>
</div>
</body>
</html>
내용이 body보다 클때에 overflow로 바꾸었더니 스크롤타입으로 바뀌었음
'CSS' 카테고리의 다른 글
| [CSS]CSS#4(반응형) (0) | 2024.06.28 |
|---|---|
| [CSS]CSS#3 (0) | 2024.06.21 |
| [CSS] CSS #1 (1) | 2024.06.11 |
| [CSS]선택자 (0) | 2024.06.05 |
| [CSS]인라인스타일시트 / 외부스타일시트 (0) | 2024.05.26 |