[CSS] 개발 참고자료 목록

개요

---

이 페이지는 Css로 앱/웹 UI를 디자인 시, 검색하여 참고한 사이트 및 정보를 정리해놓았습니다.

 

참고자료 목록

---

CSS 일반

div 태그 위에 div 태그를 그리는 방법

<div class="container">
    <span class="child1"></span>
    <span class="child2"></span>
</div>

.container {
    background-color:aqua;
    /* flex-grow를 통해, div처럼 사용하기 위해 flex 사용 */
    display: flex;
    /* 100% 넘어가면 다음으로 넘겨짐 (불필요) */
    flex-wrap: wrap;
    /* 수직 가운데 정렬 */
    align-items: center;
    /* div와 div를 겹치려면 parent에 position: relative를 지정 (핵심) */
    position:relative;

    height:50px;
    margin-bottom: 10px;
}

.child1 {
    background-color: blue;
    /* div와 div를 겹치려면 첫번째 child에 position: absolute를 지정 (핵심) */
    position: absolute;

    height:20px;
    width:20px;

    margin-left: 180px;
}

.child2 {
    background-color: red;
    /* flex-grow를 통해, span을 div처럼 늘어나게 */
    flex-grow: 1;
    
    height:20px;
}

https://heinafantasy.com/62