CSS

[CSS] CSS #1

로돌씨 2024. 6. 11. 16:23

배경이미지 삽입

<!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>배경</title>
    <style type="text/css">
        h1{
            background-image: url("../1_html/sample/image/img01.png");
            background-size: 180px;
            background-repeat: no-repeat; 
						->배경이미지를 반복시킬건지
            /* '.' 갯수 1 현재폴더 2개 상위폴터 3개 그 상위폴더 ... */
            background-attachment: fixed;
            /* 배경이미지 고정시키기 */
        }
        pre{
            background-image: url("../1_html/sample/image/img02.png");
            background-size: 200px;
            background-position: center;
            /* left top~right bottom */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>교통카드 못쓰는 `반쪽 애플페이`…첫날부터 혼란</h1>
    <pre>
        애플의 근거리무선통신(NFC) 결제 서비스 '애플페이'가 한국에 상륙했다. 
        애플과 현대카드는 21일 서울 용산 현대카드 언더스테이지에서 '스페셜 이벤트'
        를 열고 애플페이 서비스를 시작한다고 밝혔다.
         정태영 현대카드 부회장은 자신의 아이폰을 공개하며 애플페이 서비스 개시를 알렸다.
          이에 맞서 삼성과 네이버는 삼성페이와 네이버페이 간 연동 서비스를 이르면
           23일로 앞당기는 등 애플페이에 '맞불'을 놓고 있다.
◇"얼굴 인식후 갖다대면 끝"…간편결제 시장 '게임 체인저' 될까= 이날 정 부회장은 
"16년 전에 아이폰을 산 다음에 그 신기함에 매료돼 밤을 샜다"면서 "지난 16년 동안 아이폰이 
내 생활과 삶을 바꿨고, 이제 아주 중요한 기능인 
애플페이가 추가됐다"고 말했다. 그는 "그동안 NFC 단말기가 해외에는 많이 보급돼 있는데
 한국에는 그렇지 않아 많이 안타까웠다"면서 "그런 의미에서 오늘은 한국 페이먼트에
  중요한 이정표가 되는 날이라고 생각한다"고 말했다.
정 부회장은 또 "오래 기다려온 아이폰 유저 마음을 알기 때문에 현대카드의 독자적인 디자인을 되도록 없애고,
 애플페이의 느낌만을 온전히 전하려고 노력했다"면서 "앞으로도 사용처의 빠른 확대를 위해서도 최선을 다할 것"이라고 말했다.
이날 행사에는 던킨 올비 애플페이 인터내셔널 총괄도 참석해 "한국에서 애플페이를 선보일 수 있도록 많은 
노력을 기울인 현대카드팀과 정 부회장에게 감사하다"고 말했다.
아이폰과 현대카드를 보유한 이용자는 호환 단말기를 보유한 매장에서 
카드 실물 없이 휴대전화로 간편결제를 이용할 수 있다. 현대카드에서 발행한 비자·마스터카드 
브랜드 신용카드 또는 국내 결제 전용 신용·체크카드를 보유한 고객은 
아이폰의 '지갑' 앱이나 '현대카드' 앱에서 애플페이 기능을 활성화할 수 있다. 결제를 위해선 측면 버튼 또는 홈 버튼을
 두 번 눌러 사용자 인증을 한 뒤, 아이폰이나 애플워치를 단말기 가까이에 대면 된다. 맥과 아이패드에서는 온라인으로 이 기능을 이용할 수 있다.
현재까지 애플페이를 이용할 수 있는 곳은 전국 편의점과 코스트코, 현대백화점, 
롯데백화점, 홈플러스, 다이소를 비롯한 오프라인 가맹점과 배달의민족, 무신사, 대한항공, 폴바셋, 이니스프리 등의 웹페이지·모바일 앱이다.
    </pre>
    <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
    <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
    <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
    <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
    <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
</body>
</html>

박스(마진 , 보더 , 패딩 , 사이즈)

<!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>box 모델</title>
    <style>
        dl,dt,dd,p{margin: 0px; padding:0px;}
        .box{
            width: 600px;
            border: 3px double navy;
            margin: 50px;
        }
        dt{
            background-color: skyblue;
            text-align:center;
            font-size: 25pt;
            letter-spacing: 15px; /* 글자간 여백 */
            padding: 15px;
            border-bottom: navy 5px dashed;
        }
        dd{
            padding : 10px;
        }
        .line{
            border-bottom: red 5px dashed;
        }
    </style>
</head>
<body>
    <dl class="box">
        <dt>26회차</dt>
        <dd class="line">
            <h2>3월 22일 수요일</h2>
            <p>css 수업 + 1,2단원 평가</p>
        </dd>
        <dd>
            <h2>3월 23일 목요일</h2>
            <p>css 수업 + JS시작</p>
        </dd>
    </dl>
</body>
</html>

마진 -> 보더 -> 패딩 

 

float

<!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>float</title>
    <style>
        body{
            width: 700px;
        }
        img{
            width: 300px;
            height: 300px;
        }
        h1{
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <h1>
        교통카드 못쓰는 `반쪽 애플페이`…첫날부터 혼란
    </h1>
    <p>
        애플의 근거리무선통신(NFC) 결제 서비스 '애플페이'가 한국에 상륙했다. 
        애플과 현대카드는 21일 서울 용산 현대카드 언더스테이지에서 '스페셜 이벤트'
        를 열고 애플페이 서비스를 시작한다고 밝혔다.
         정태영 현대카드 부회장은 자신의 아이폰을 공개하며 애플페이 서비스 개시를 알렸다.
          이에 맞서 삼성과 네이버는 삼성페이와 네이버페이 간 연동 서비스를 이르면
           23일로 앞당기는 등 애플페이에 '맞불'을 놓고 있다.
◇"얼굴 인식후 갖다대면 끝"…간편결제 시장 '게임 체인저' 될까= 이날 정 부회장은 
"16년 전에 아이폰을 산 다음에 그 신기함에 매료돼 밤을 샜다"면서 "지난 16년 동안 아이폰이 
내 생활과 삶을 바꿨고, 이제 아주 중요한 기능인 
애플페이가 추가됐다"고 말했다. 그는 "그동안 NFC 단말기가 해외에는 많이 보급돼 있는데
 한국에는 그렇지 않아 많이 안타까웠다"면서 "그런 의미에서 오늘은 한국 페이먼트에
  중요한 이정표가 되는 날이라고 생각한다"고 말했다.
정 부회장은 또 "오래 기다려온 아이폰 유저 마음을 알기 때문에 현대카드의 독자적인 디자인을 되도록 없애고,
 애플페이의 느낌만을 온전히 전하려고 노력했다"면서 "앞으로도 사용처의 빠른 확대를 위해서도 최선을 다할 것"이라고 말했다.
이날 행사에는 던킨 올비 애플페이 인터내셔널 총괄도 참석해 "한국에서 애플페이를 선보일 수 있도록 많은 
노력을 기울인 현대카드팀과 정 부회장에게 감사하다"고 말했다.
<span>
    <img src="../1_html/sample/image/img01.png" >
</span>
아이폰과 현대카드를 보유한 이용자는 호환 단말기를 보유한 매장에서 
카드 실물 없이 휴대전화로 간편결제를 이용할 수 있다. 현대카드에서 발행한 비자·마스터카드 
브랜드 신용카드 또는 국내 결제 전용 신용·체크카드를 보유한 고객은 
아이폰의 '지갑' 앱이나 '현대카드' 앱에서 애플페이 기능을 활성화할 수 있다. 결제를 위해선 측면 버튼 또는 홈 버튼을
 두 번 눌러 사용자 인증을 한 뒤, 아이폰이나 애플워치를 단말기 가까이에 대면 된다. 맥과 아이패드에서는 온라인으로 이 기능을 이용할 수 있다.
현재까지 애플페이를 이용할 수 있는 곳은 전국 편의점과 코스트코, 현대백화점, 
롯데백화점, 홈플러스, 다이소를 비롯한 오프라인 가맹점과 배달의민족, 무신사, 대한항공, 폴바셋, 이니스프리 등의 웹페이지·모바일 앱이다.
    </p>
    
</body>
</html>

float -> 이미지를 텍스트와 함께 배치할 것인가 

'CSS' 카테고리의 다른 글

[CSS]CSS#4(반응형)  (0) 2024.06.28
[CSS]CSS#3  (0) 2024.06.21
[CSS] CSS#2  (0) 2024.06.13
[CSS]선택자  (0) 2024.06.05
[CSS]인라인스타일시트 / 외부스타일시트  (0) 2024.05.26