CSS 과제1

과제

'뉴스기사' 페이지를 CSS 선택자, CSS텍스트를 사용하여 자유롭게 스타일을 적용

http://hyeon9502.dothome.co.kr/

 

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
#newsdiv {
    border: 2px solid;
    width: 500px;
    height: 100px;
    overflow: hidden;
}

#newsdiv:hover {
    width: 500px;
    height: auto;
    border: 2px solid;
    padding: 10px;
    word-spacing: 3px;
    line-height: 150%;
    font-family: 'Pretendard-Regular';
}

#headline {
    line-height: 30px;
}

.smallfont{
    font-size: 10px;
    padding: 0;
    margin: 0;
}

header {
    display: flex;
}

nav {
    display: flex;
    justify-content: center;
}

nav > ul {
    width: 300px;
    list-style: none;
    border: 1px solid;
}

nav > ul > li {
    display: inline-block;
    margin-right: 20px;
}

#news:hover {
    background-color: skyblue;
}

#favorite:hover {
    background-color: skyblue;
}

#resume:hover {
    background-color: skyblue;
}

a {
    color: black;
}

a:visited {
    text-decoration: none;
    color: none;
}

a:link {
    color: none;
    text-decoration: none;
}

a:active {
    color: none;
}

#login {
    list-style: none;
    display: flex;
    padding: 10px;
    margin-left: 10px;
}
#login > li {
    margin-left: 10px;
}
#login > li > a:hover {
    color: skyblue;
}

.index{
    display: flexbox;
    justify-content: center;

}

 

 

뉴스기사를 포커스 시 기사가 펼쳐지는 형식으로 만들어 보았다