HTML / CSS - 고급 3편

* scss를 활용한 간단한 디자인

* 리스트 만들기

조건 : <li> 태그에.active 클래스 부여시 배경색 과 폰트 컬러 변환 / Nesting 문법 이용

1. html 으로 뼈대 생성

html

<ul class="menu-list">
	<li>Cras justo odio</li>
	<li>Dapibus ac facilisis in</li>
	<li>Morbi leo risus</li>
</ul>

2. scss를 먼저 css처럼 작성

* {
box-sizing:border-box;
}
.menu-list ul { }
.menu-list li {
	cursor: pointer;
        list-style: none;
        padding: 10px 10px;
        width: 350px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-bottom: none;
}
.menu-list li:active {
	background: rgb(26, 121, 230);
    color: white;
}

3. scss를 Nesting 문법 적용하여 작성

css

.menu-list {
    ul {
    }
     li {
        cursor: pointer;
        list-style: none;
        padding: 10px 10px;
        width: 350px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-bottom: none;
     }
}
.menu-list li {
    &:active{
        background: rgb(26, 121, 230);
        color: white;
    }
} /* &을 사용하여 li태그에 직접 클래스 부여 */

* alert 박스 만들기

조건 : 박스 내부 글씨는 <p>태그 사용, mixin/include 또는 extend 문법 사용

1. html 으로 뼈대 생성

html

<div class="alertbox-box">
        <div class="alertbox-green">
          <p>
            <span>Well done!</span>
            You successfully read this important alert message.
          </p>
  	</div>
        <div class="alertbox-blue">
          <p>
            <span>Heads up!</span>
            This alert needs your attention, but it`s not super important
          </p>
  	</div>
        <div class="alertbox-yellow">
          <p>
            <span>Warning!</span>
            Better check yourself, you're not looking too good.
          </p>
  	</div>
</div>

2. extend문법 사용하여 css작성

%alertbox {
    width: 800px;
    height: 60px;
    padding: 10px 20px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 5px;     
}
.alertbox-box {
    width: 800px;
    height: 500px;
    display: flex;
    flex-direction: column;    
}
.alertbox-green {
    @extend %alertbox;
    background-color: RGB(221, 239, 215);
    border: 1px solid rgb(154, 243, 124)
}
.alertbox-blue {
    @extend %alertbox;
    background-color: RGB(216, 236, 246);
    border: 1px solid rgb(138, 207, 241);
}
.alertbox-yellow {
    @extend %alertbox;
    background-color: RGB(253, 248, 227);
    border: 1px solid rgb(247, 226, 142);
}
p {
    width: 100%;
    height: 100%;
    margin: auto;
    vertical-align: middle;
    line-height: 200%;
}
span {
    font-size: 18px;
    font-weight: 600;
}