Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

파란색가운의 개발 블로그

[인프런]CSS 실습 코드 본문

인프런 실습 모음

[인프런]CSS 실습 코드

파란색 가운 2023. 6. 27. 14:55 
* {
    padding : 0;
    margin : 0;
}

.cell{
    display:inline-block;
    width : 30%;
    margin :0 1%;
}

.cell img{ 
    width : 100%; 
}

.row {
    margin : 20px 0;
    text-align: center;
}

header{
    margin: 10px 5%;
    padding : 20px 0;
    border-bottom: 1px solid #3333b0;
    border-top:1px solid #3333a0;
}

header h1{
    font-size:21px;
    display:inline;
}
header span{
    font-weight: 900;
    background-color:#f0f000;
}
<html>
    <head>
        <meta charset = "utf-8">
        <title>갤러리</title>
        <link rel = "stylesheet" type = "text/css" href = "file:///Users/sunghyun/shworld/rensu.html/gallery.css">
    </head>
    <body>
        <header>
            <h1>나의 갤러리</h1>
            <span>NEW</span>
        </header>
        <div class = "row">
            <div class = "cell">
                <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
            </div>
            <div class = "cell">
                <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
            </div>
            <div class = "cell">
                <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
            </div>
        </div>
        <div class = "row">
            <div class = "cell">
                <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
            </div>
            <div class = "cell">
                <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
            </div>
            <div class = "cell">
                <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
            </div>
        </div>
    </body>
</html>

클래스에 관하여 CSS를 적용시킬때는 .classname{ }

id 선택자를 css에 적용시에는 #idname{ }

태그 선택자를 css에 적용 시에는 tagname{}

예를 들어 h1 태그 안에 있는 div태그에 다 적용시키고 싶다면

h1 div{ } 이런 식으로 해주면 그 안에 있는 모든 div 태그들에 대하여 적용할 수 있다

저작자표시

'인프런 실습 모음' 카테고리의 다른 글

[React] Class -> Function 변경 실습  (0) 2023.07.09
[인프런] CSS 실습 코드  (0) 2023.06.27
CSS 실습 코드  (0) 2023.06.27
HTML 실습 코드  (0) 2023.06.26
웹 입문 강의 실습 코드  (0) 2023.06.26
'인프런 실습 모음' Related Articles more