Notice
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
관리 메뉴

Jade_o.o

[css] attr 실습1 - inline-block 네모칸 속 색깔 다른 작은 네모 넣기 본문

CSS

[css] attr 실습1 - inline-block 네모칸 속 색깔 다른 작은 네모 넣기

by jade 2024. 1. 12. 12:16

.(클래스)

inline-block을 활용해 보자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attr실습 - inline-block 네모칸 속 색깔 다른 작은 네모 넣기 </title>
<style>

.inline-block{
    display: inline-block;
    width:auto;
    height: 200px;
    background-color: orange;
    border: 1px solid orange;
    margin-right: 30px;
}

.d-block01{
    display: inline-block;
    background-color: skyblue;
    border:1px solid skyblue;
    width:200px;
    height: 100px;
    margin-right: 30px;
}

.d-block02{
    display: inline-block;
    background-color: green;
    border:1px solid green;
    width:200px;
    height: 100px;
    margin-right: 30px;
}

.d-block03{
    display: inline-block;
    background-color: red;
    border:1px solid red;
    width:200px;
    height: 100px;
    margin-right: 30px;
}

</style>
</head>
<body>
    <div class="inline-block">

        <div class="d-block01">HTML</div>
        <div class="d-block02">CSS</div>
        <div class="d-block03">Javascript</div>
    </div>
</body>
</html>

 

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] attr 실습2 - border 테두리 그리기  (0) 2024.01.12
[css] 선택자 종합 실습 - 건의사항 작성란  (0) 2024.01.12
[css] selector 실습5 - 속성 선택자  (0) 2024.01.12
[css] selector 실습4 - 줄무늬 모양 만들기, before,after  (0) 2024.01.12
[css] selector 실습3 - 가상 클래스 선택자 & 가상 요소 선택자  (0) 2024.01.12
'CSS' Related Articles more