Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
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. 16:02 
<html>
    <head>
        <meta charset = "utf-8">
        <title>NEWS</title>
         <link rel = "stylesheet" type = "text/css" href = "file:///Users/sunghyun/shworld/rensu.html/news.css">
        </head>
        <body>
            <div class = "container">
            <header>
                <span class = "news-company">연합뉴스</span>
                <h1>새로운 기술의 발표 현장</h1>
                <div class = "header-desc">
                    <span class = "time-desc">기사입력 2023.06.27 오후 3:30</span>
                    <button class = "white-button">댓글</button>
                    <button class = "white-button">공유</button>
                </div>
            </header>
            <hr/>
            <article>
                <div class = "image-box">

                <div>
                    <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
                </div>
                <span>
                    면담에 앞서 모두 발언을 준비하고 있다.
                </span>

                </div>  
                <p>
                    이 총장: 두번 세번 피곤하게 자꾸 질문하지 마
                    내 장점이 뭔지 알아?<br>
                    <br>
                    바로 솔직한거야
                </p>
                <section class = "paragraph-group">
                    <h2> 내가 코딩 공부를 해야 하는 이유에 대하여</h2>
                <div class = "image-box">
                 <div>
                    <img src = "file:///Users/sunghyun/shworld/rensu.html/image0308.png">
                 </div>
                 <span>
                    면담에 앞서 모두 발언을 준비하고 있다.
                 </span>

                </div>  
                <p>
                    장 부장: 오늘도 이모 군의 수면바지를 내리는 재미가 쏠쏠하다<br>
                    <br>
                    바로 솔직한거야
                </p>
                </section>
            </article>

            <footer>
                <div class = "link-group">
                    <h4>관련 뉴스</h4>
                    <ul>
                        <li><a href = "https://blog.naver.com/alan0308"></a></li>
                        <li><a href = "https://blog.naver.com/alan0308"></a></li>
                        <li><a href = "https://blog.naver.com/alan0308"></a></li>
                        <li><a href = "https://blog.naver.com/alan0308"></a></li>
                        <li><a href = "https://blog.naver.com/alan0308"></a></li>
                                    
                           
                    </ul>
                </div>
            </footer>
        </div>
        </body>
</html>​
.news-company{
    font-weight:900;
}

.container{
    max-width : 600px;
    margin : 0 auto;
    border : 3px solid #c0c0c0;
    padding : 30px;
}

header h1{
    margin : 5px 0;
}

.header-desc{
    text-align : right;
}

header span.time-desc{
    font-size:12px;
    color:#909090;

}

button.white-button{
    background-color: #b0b0b0;
    border:1px solid #606060;
    margin : 0 2px;
    padding : 5px 5px;
}

.image-box{
    text-align:center;
    background-color:#f0f0f0;
    padding : 20px 20px 0 20px;
}
.image-box img{
    width: 100%;
}

.image-box span{
    width: 100%;
    color:#909090;
    font-size: 15px;
}

.paragraph-group{
    margin : 50px 0;
    border-top:1px solid #000;
}

.paragraph-group p{
    font-size:16px;
    color : #606060;
    text-indent : 16px;
}

footer{
    padding : 5px 30px;
}

.link-group{
    margin : 0 0 30px 0;
}

.link-group h4{
    margin: 2px 0;
}
.link-group ul{
    list-style: square;
}
.link-group li{
    margin:5px;
}
.link group a{
    color:#606060;
    font-weight:800;
}

 

안에 있는 대사는,,, 그냥 생각나는대로 써봤다..

HTML CSS는 코딩이라기보단 그냥 간단하게 다룰 줄 알고 속성같은 것들을 익히는게 중요한 것 같다

저작자표시

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

스프링 용어 정리  (0) 2023.09.15
[React] Class -> Function 변경 실습  (0) 2023.07.09
[인프런]CSS 실습 코드  (0) 2023.06.27
CSS 실습 코드  (0) 2023.06.27
HTML 실습 코드  (0) 2023.06.26
'인프런 실습 모음' Related Articles more