[FrontEnd1] 5월 첫째주 한페이지 개념 정리

SMALL

안녕하세요:) 보라해바라기입니다~

벌써 5월이 일주일이나 지나갔네요...

시간이 참 빠름을 요즘 계속 느끼고 있어요 ㅠㅠ

오늘은 다른 날 보다 내용 자체는 적습니다.

first-child, nth-child(숫자), last-child
가상요소 (before, after)의 적용 (컨텐츠, 도형)
어썸폰트

가 주 내용입니다!

1. 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>Review(220507)</title>
    <link rel="stylesheet" href="./review(220507).css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
</head>
<body>
    <h1 id="title">5월 첫째주 개념 정리</h1>
    <div id="wrap">
        <div id="cont1">
            <h3 id="title">child 요소 (무지개 만들기)</h3>
            <div id="rainbow">
                <div>red</div>
                <div>orange</div>
                <div>yellow</div>
                <div>green</div>
                <div>blue</div>
                <div>navy</div>
                <div>purple</div>
            </div>
        </div>
        <div id="cont2">
            <h3 id="title">가상 요소 (before, after)</h3>
            <div id="contents">
                <h4 id="title">컨텐츠 활용</h4>
                <div id="me">it's me!</div>
            </div>
            <div id="shape">
                <h4 id="title">도형 활용</h4>
                <div id="me">it's me!</div>
            </div>
        </div>
        <div id="cont3">
            <h3 id="title">어썸폰트 사용(fb, insta, kakao)</h3>
            <div>
                <span style="color: blue;">
                    <i class="fa-brands fa-facebook fa-3x"></i>
                </span>
                <span style="color: magenta;">
                    <i class="fa-brands fa-instagram fa-3x"></i>
                </span>
                <span style="color: purple;">
                    <i class="fa-brands fa-twitch fa-3x"></i>
                </span>
            </div>
        </div>
    </div>
</body>
</html>

2. css

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

#title{
    text-align: center;
}

#wrap{
    width: 1350px;
    height: 300px;
    background-color: aliceblue;
    position: relative;
    top: 10px;
    left: 50px;
}

#cont1{
    width: 450px;
    height: 300px;
    background-color: aliceblue;
    float: left;
}

#cont1>#rainbow>div{
    width: 50px;
    height: 100px;
    float: left;
    margin-top: 10px;
}

#cont1>#rainbow>div:first-child{
    background-color: red;
}

#cont1>#rainbow>div:nth-child(2){
    background-color: orange;
}

#cont1>#rainbow>div:nth-child(3){
    background-color: yellow;
}

#cont1>#rainbow>div:nth-child(4){
    background-color: green;
}

#cont1>#rainbow>div:nth-child(5){
    background-color: blue;
}

#cont1>#rainbow>div:nth-child(6){
    background-color: navy;
}

#cont1>#rainbow>div:last-child{
    background-color: purple;
}

#cont2{
    width: 450px;
    height: 300px;
    background-color: aliceblue;
    float: left;
}

#cont2>#contents{
    width: 440px;
    height: 130px;
    background-color: aliceblue;
    border: 1px solid black;
    position: relative;
    top: 3px;
}

#cont2>#contents>#me{
    width: 200px;
    height: 50px;
    background-color: lightpink;
    margin: 10px auto;
}

#cont2>#contents>#me::before{
    content: 'hello~';
    color: blue;
}

#cont2>#contents>#me::after{
    content: 'bye~';
    color: red;
}

#cont2>#shape{
    width: 440px;
    height: 130px;
    background-color: aliceblue;
    border: 1px solid black;
    position: relative;
    top: 5px;
}

#cont2>#shape>#me{
    width: 200px;
    height: 80px;
    background-color: lightgreen;
    margin: 10px auto;
}

#cont2>#shape>#me::before{
    display: block;
    content: '';
    background-color: blue;
    width: 3px;
    height: 20px;
}

#cont2>#shape>#me::after{
    display: block;
    content: '';
    background-color: red;
    width: 3px;
    height: 20px;
}

#cont3{
    width: 450px;
    height: 300px;
    background-color: aliceblue;
    float: left;
}

#cont3>div{
    position: relative;
    top: 20px;
    left: 20px;
}

3. 한페이지 정리

728x90

저작자표시

'HTML & CSS' 카테고리의 다른 글

[Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 1 (0)	2022.06.23
[FrontEnd1] 토이스토리 페이지 보강 (컨텐츠 영역 설정, 푸터 영역 추가- 로고, 카피라이트) (0)	2022.05.10
[FrontEnd1] 토이스토리 페이지 보강 (로고 삽입, 메뉴 설정, 폰트 설정, 검색창 만들기) (0)	2022.05.01
[FrontEnd1] 4월 다섯째주 한페이지 개념 정리 (0)	2022.05.01
[FrontEnd1] 4월 넷째주 한 페이지 개념 정리 (0)	2022.04.24