ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 3차시_CSS심화
      2학년/멋사 2023. 3. 28. 16:45

      + 이글을 쓴 지 6개월이 지난 지금
      이 조빱디저인을 못햇는가… 걍 그리드 쓰고 패딩마진 양옆 딱딱딱 주면 될걸 싶음 ㅋㅋ


      와....감격 
      누군가의 가르침을 받는다는 것....
      내가 10시간 삽질 할 걸 1시간으로 줄여준다는 것..................................
      저번에 크기에 따라 게시글과 사진 사이 간격이 지멋대로 되고
      고정크기에 맞추어 디자인을 해서 열받는 점이 한 두개가 아니었음.
      그치만? 이번시간에 레이아웃 배운 뒤  그리드 적용시켜주니까
      드디어!!!!!! 페이지크기가 어떻게 되든 일정한 너비를 보여줌 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

      이렇게 hover하면 나오는 소소한 ......은 아니고 ...소소하지않음 코드가......

      <!DOCTYPE html>
<html lang="ko">
<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>Jihye</title>
    <link rel="stylesheet" href="/과제/page2style.css">
</head>
<body>


    <!-- header > blog name + search -->
    <header>
        <span class ="samsun">
            <div class ="menu_bar"></div>
            <div class = "menu_bar"></div>
            <div class = "menu_bar"></div>
        </span>
    <h1>Jihye's Blog</h1>
    <br><br>
    <hr>

    <nav class="search">
        <p class="mnu">
            <a class ="menu" href ="https://zmal.tistory.com/">♩home</a>&nbsp;&nbsp;&nbsp;
            <a class ="menu" href="https://zmal.tistory.com/"> ♩NEW_POST</a>&nbsp;&nbsp;&nbsp;
            <a class ="menu" href="https://zmal.tistory.com/"> ♩STUDY</a>&nbsp;&nbsp;&nbsp;
            <a class ="menu" href="https://zmal.tistory.com/"> ♩DAILY</a>&nbsp;&nbsp;&nbsp;
            <a class ="menu" href="https://zmal.tistory.com/"> ♩MEMO</a>&nbsp;&nbsp;&nbsp;

        </p>
        <form >
            <input class="inputbox" type="text" placeholder="INPUT KEYWORD">
            <button class ="searchbtn">→</button>
        </form>
    </nav>

    <hr>
    </header>
    
    <!-- finish header -->

    <!-- section > contents -->
    <section>

        <h3>NEW POST</h3>
        <br>
        <nav class = "post_box">

            <div class="box1">
                <div class="imgg">

                <a href="https://zmal.tistory.com/" target="_blank"><img src="tomboy.png" width="180px" height="180px"></a>     
            </div>
                <div class="info1">
                    <b><span class="title" >tomboy</span></b>
                    <sub><small><br>2023/01/01 22:10 </small></sub>
                    <br><p class="target_post">Warum denkst du, dass es um Nacktheit geh Weil deine Ansicht so unhöflich ist Anders denken Dann wird es dir gefallen
                    Hallo, mein Name ist Ye Bei Ye Bei Die Art, wie du sprichst, ist dumm, dein Körper ist sexy, sexy
                    Also in einer Tiara mit Diamanten Damit ich laut lache, laut lache Verzerrte Lorelei, brauche keinen Mann Philosophieverrückte Leserin, Selfmade-Frau Es ist so absurd zu dieser ignoranten Geschichte
                    Publikum buht Du hast mich ausgetrickst, du bist ein Lügner ein nackter Filmstar die Nacht, in der das Sternenlicht gebrochen ist
                    Auch wenn Sie nicht in Form sind, auch wenn es kaputt ist Auch wenn du nie wieder geliebt wirst Warum denkst du, dass es um Nacktheit geh Weil deine Ansicht so unhöflich ist Anders denken Dann wird es dir gefallen
                    Hallo, mein Name ist Ye Bei Ye Bei Die Art, wie du sprichst, ist dumm, dein Körper ist sexy, sexy
                    Also in einer Tiara mit Diamanten Damit ich laut lache, laut lache Verzerrte Lorelei, brauche keinen Mann Philosophieverrückte Leserin, Selfmade-Frau Es ist so absurd zu dieser ignoranten Geschichte
                    Publikum buht Du hast mich ausgetrickst, du bist ein Lügner ein nackter Filmstar die Nacht, in der das Sternenlicht gebrochen ist
                    Auch wenn Sie nicht in Form sind, auch wenn es kaputt ist Auch wenn du nie wieder geliebt wirst                                      
                </p>
                <button class ="more"><span>More...</span></button>
                <br><br><br><br><br>
            </div>
        </div>
            
            <nav class="box2">
                <div class="imgg">
                <a href="https://zmal.tistory.com/" target="_blank"><img class = "porfile" src="square.jfif" width="180px" height="180px"></a>
            </div>
                <div class="info2">
                    <b><span class="title">Square</span></b>
                    <sub><small><br>2022/03/23 11:34 </small></sub>
                    <br><p class="target_post2">All die Farben und Persönlichkeiten, die du nicht durchschauen kannst, was ich wirklich bin, du tust mir weh, ohne zu bemerken, dass ich so pleite bin, als hätte mich jemand gerade ausgeraubt. Ich bin nicht unbesiegbar. Ich habe viele Erinnerungen daran, schwächer zu werden, ich weiß Ich bin nicht liebenswert
                    Ich weiß, dass ich nicht geliebt werden kann, aber du weißt, was du zu sagen hättest Warum denkst du, dass es um Nacktheit geh Weil deine Ansicht so unhöflich ist Anders denken Dann wird es dir gefallen
                    Hallo, mein Name ist Ye Bei Ye Bei Die Art, wie du sprichst, ist dumm, dein Körper ist sexy, sexy
                    Also in einer Tiara mit Diamanten Damit ich laut lache, laut lache Verzerrte Lorelei, brauche keinen Mann Philosophieverrückte Leserin, Selfmade-Frau Es ist so absurd zu dieser ignoranten Geschichte
                    Publikum buht Du hast mich ausgetrickst, du bist ein Lügner ein nackter Filmstar die Nacht, in der das Sternenlicht gebrochen ist
                    Auch wenn Sie nicht in Form sind, auch wenn es kaputt ist Auch wenn du nie wieder geliebt wirst                       
                    </p>
                    <button class ="more"><span>More...</span></button>
                    <br><br><br>

                </div>
            </nav>
                <nav class="box3">
                    <div class="imgg">
                        <a href="http://zmal.tistory.com/" target="_blank"><img class="profile" src="nmix.jfif"width="180px" height="180px"></a>
                    </div>
                    <div class="info3">
                        <b><span class="title">Young Dumb Stupid</span></b>
                        <sub><small><br>2021/03/04 15:55</small></sub>
                        <br><p class="target_post3">Turn it, turn it up
                            Bang, can you hear that right now? Heart pounding, get loud
                            So freak, gonna be rough watch out Step on the boundary before my feet, wow Flipped another page, no lines drawn
                            (Fill it out as you wish) Wipe away the fear before the unknown path (Let's face it)
                            We'll draw a story Оne shot, two shots, all post it Imagine about to make new waves, sway yeah yeah
                            Not so perfect now, but I love this moment  Freely making my way, the way I want, one, two  Got no genre our movie
                            Not a moment predic o freak, gonna be rough watch out Step on the boundary before my feet, wow Flipped another page, no lines drawn
                            (Fill it out as you wish) Wipe away the fear before the unknown path (Let's face it)
                            We'll draw </p> 
                            <button class="more"><span>More...</span></button>
                            <br><br><br>
                    </div>
                    
                    </div>
                </nav>
            </nav>
                <div class="page_num">
                    <a href="https://zmal.tistory.com/" target="_blank">< ... </a>
                    <a href="https://zmal.tistory.com/" target="_blank"> 1 </a>
                    <a href="https://zmal.tistory.com/" target="_blank"> 2 </a>
                    <a href="zmal.tistory.com" target="_blank"> 3 </a>
                    <a href="https://zmal.tistory.com/" target="_blank"> ...></a>
        
                </div>
        </nav>
    </section>
    <hr>
    <br>

    <footer>
    <nav  class="under">
        <span class="info_under">
            <span class="under_login1">LOGIN_ADMIN</span>  
            <span class="under_login">SCOIA_LINK</span>
        </span>
        
        <nav class="login_box">
            <form class ="loginbtn">
                <label class ="login_word" for="id">ID</label>
                <input class= "input_box" type="text" id="id" placeholder="Input Your ID">
                <label class ="login_word" for="pw">PW</label>
                <input class ="input_box" type="password" pw = "pw" placeholder="Input Your password">
                &nbsp;&nbsp;<input class="submit" type ="submit" value="Submit">
            </form>
        </nav>
        <nav class="login_box2">
            <a href="https://www.instagram.com/zmal_s/" target="_blank"><img src="instagram.jfif" width="50px" height="50px",alt="insta"></a>
            &nbsp;<a href="https://www.twitter.com/" target="_blank"><img src="twitter.png" width="50px" height="50px",alt="insta"></a>
        </nav>
</nav>
<br>
</footer>

</body>
</html>

       

      h1{
   
    margin : 10px auto 60px auto;
    width : fit-content ;
    height : fit-content ; 
    font-size: 80px;
    font-family :'Times New Roman', Times, serif;
    color :rgb(87, 87, 87);
    text-shadow: -1px -1px 1px #aaa,
                0px 4px 1px rgba(201, 196, 196, 0.5),
                4px 4px 5px rgba(153, 149, 149, 0.7),
                0px 0px 7px rgba(215, 211, 211, 0.4)
}
body{
    margin: 50px;
    border:5px solid rgb(226, 222, 222);
    border-radius: 80px;
    box-shadow: 10px 10px 8px 1px rgba(127, 127, 137, 0.75);;

}

.search{
    margin:10px 10px;
    display:flex;
    justify-content: space-between;
}

.inputbox{
    border : 0px;
    border-bottom : 2px solid #d7d7d7;
    width: 300px;
    height: 35px;
    font-size: 16px;
    background-color: #f5f5f5;
    text-align: center;
}
.searchbtn{
    border :0px ;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    border-bottom: 2px solid #d7d7d7;
    transition-duration: 0.3s;
    box-shadow: 1px 2px 1px #d7d7d9;
    
}
.searchbtn:active{
    margin-left: 5px;
    margin-top: 5px;
    box-shadow: none;
}

.menu{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:larger;
    color: rgb(87, 87, 87);
    text-decoration: none;

}
.menu:hover{
    text-decoration: underline;
    transform:translateY(-3px);
    transition:0.2s;
    text-decoration: underline;
    font-weight: bold;
    font-size:x-large;
}
section{
    margin: auto auto;
    padding: 20px;
    height: 100;
    display:flex;
    flex-direction: column;
    align-items: space-between;
}
.samsun{
    display: inline-block;
    color:#2d2d2e;
    margin:50px;
}
.menu_bar{
    width: 35px;
    height: 5px;
    background-color:rgb(85, 84, 84);
    margin : 6px 0;
    border-radius: 30px;
}

.post_box{
    display: grid;
    grid-template-columns: 90%;
    grid-template-rows: auto;
    
}
.box1{
    justify-content: space-between;
    display: flex;
   
}
.box2{
    justify-content: space-between;
    display: flex;
}
.box3{
    justify-content: space-between;
    display: flex;
}
.imgg{
    margin:30px;
}

.target_post {
    display:block;
    width:fit-content;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.target_post2 {
    display:block;
    width:fit-content;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.target_post3 {
    display:block;
    width:fit-content;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.more{
    width:125px;
    height: 40px;
    margin:15px 512px 0 45px;
    border:0px;
    border-radius: 30px;
    background-color: #e8e9ec;
    font-size: 16px;
    font-weight: bold;
    margin:0 auto;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;   
}

.more span{
    position:relative;
    z-index :1;
}

.more:after{
    content:"";
    position: absolute;
    left:0;
    top:0;
    height: 490%;
    width: 140%;
    background:#c6c8c8;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-98) translateY(-25%) rotate(45deg);
    transform:translateX(-98%) translateY(-25%) rotate(45deg);

}
.more:hover:after{
    -webkit-transform:translateY(-9%) translateY(-25%) rotate(45deg);
    transform: translateX(-9%) translateY(-25%)rotate(45deg);
}
h3{
    margin :10px auto 20px auto;
    width : fit-content;
    font-size :40px;
    font-family :'Times New Roman', Times, serif;
    color:#c6c8c8

}

.page_num {
    margin:0 auto;
    width: fit-content;
    align-content: center;
    font-weight: bold;
    color: #a5a5a5;
}
.page_num a{
    padding : 10px;
    text-decoration: none;
    color:inherit;
}
.page_num a:hover{
    color :#2d2d2e;
    font-size: larger;
    font-weight: bolder;
}
.page_num a:focus{
    text-decoration: underline;
}


.under{
    display: flex;
    align-items: center;
    justify-content: center;
}



.login_box{
    margin : 20px 20px;
    padding:20px 60px;
    border:0px solid #a5a5a5;
    box-shadow:  5px 5px 30px #d9d6d6;
    border-radius: 10px;
    display: flex;
    
}
.loginbtn{
    display: flex;
    margin:15px auto;
    align-items: center;

}

.login_word{
    border:0px;
    padding:3px;
    padding:10px auto;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
}

.submit{
    border :0px ;
    border-radius: 10px;
    width: 60px;
    height: 30px;
    text-align: center;
    border-bottom: 2px solid #d7d7d7;
    transition-duration: 0.3s;
    box-shadow: 1px 2px 1px #d7d7d9;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:#2d2d2e;
    
}
.submit:active{
    margin-left: 5px;
    margin-top: 5px;
    box-shadow: none;
}

.input_box{
    border : 0px;
    border-bottom : 2px solid #d7d7d7;
    width: 150px;
    height: 20px;
    font-size: 6px;
    background-color: #f5f5f5;
    text-align: center;
    
}
.login_box2{
    margin : 20px 20px;
    padding:23px 100px;
    border:0px solid #a5a5a5;
    box-shadow:  5px 5px 30px #d9d6d6;
    border-radius: 10px;
    display: flex;
    
}
.info_under{
    position: absolute;
    z-index:1;
    display:flex;
    font-size:large;
    font-weight: bold;
    border:0px solid #aaa;
    
}
.under_login{
    padding: 90px;
    padding-bottom: 200px;
}
.under_login1{
    padding:90px;
    padding-bottom: 100px;
    padding-right: 350px;

}

      좀 하면서 열받는 부분이 한두개가 아니었다만............... 뿌듯하구만 +0+
       
       
       
      CSS 레이아웃 종류

      • display
        • 요소를 어떻게 보여줄지 결정.
          • inline : 새로운 요소 생성 시 같은 줄 표시 . <a> <img> <span> / width height margin top margin bottom 불가
          • block : 너비를 100%가짐. <h1> <p> <div> / width height margin padding 변경 가능 text-align 가능
          • inline-block : 줄 바꿈 x / block처럼 width height 가짐 상하 margin padding 유효
      • position
        • 요소의 위치 관여
          • relative : 원래 요소 기준 상대적
          • absolute : 가장 가까운 부모 기준 절대적. 다른거 무시
          • fixed : 고정위치
          • sticky : 특정 위치에 도착하면 고정
          • z-index : 심도 관여 . 속성이 없으면 0 취급 클수록 올라감
      • float
        • 기본적인 문서 흐름의 배치에서 벗어나는 것
        • margin 무시
        • clear: both; 하면 무시된 컨텐츠가 다시 정렬됨
      • flex-box
        • 부모요소
          • flex-direction : 정렬 방향 결정 ( row로 가능 기본값 col)
          • flex-wrap : item이 컨테이너를 벗어나면 줄을 바꾸는 속성
          • justify-content : 수평정렬 (start : 첨부터 정렬 / center : 중앙부터 정렬 / end : 끝으로 정렬 space-around : 중앙선 정렬 / space-between : 사이간격 정렬
          • justify-items : 수직 정렬
          • align-content : 수직으로 여러줄의 요소 정렬
        • 자식 요소
          • flex-grow : item의 확장과 관련된 속성 ( 내부 요소 늘어남)
          • flext-shrink : “ 축소 관련
          • grid : 가로세로 레이아웃 가능
            • 부모div의 display grid로 지정 . grid-template-columns와 grid-template-row의 크기 지정
            • 자식 div에는 grid area지정
      728x90

      '2학년 > 멋사' 카테고리의 다른 글

      js_이벤트 실습_덜 된 코드...+ 완성!  (0) 2023.04.06
      JS_Dom 구조  (0) 2023.04.04
      2차시_CSS_2  (0) 2023.03.23
      2차시 -CSS_1 문제많은 내 페이지 css....  (0) 2023.03.22
      [1차시]- HTML  (0) 2023.03.20

      관련글 관련글 더보기

      댓글

    Designed by Tistory.
    티스토리 친구하기

    티스토리툴바