이동규

개발 잘하고 싶다

1. 완성화면 바로가기

교육용 Web IDE 가 갖추어야 할 요소를 모두 갖춘 위즈랩과 구름 EDU 의 화면을 참고하여 개발했다.

[2D Web IDE]

완성화면

[3D Web IDE]

완성화면

2. 개발 TIP

TIP1. 클래스명은 최대한 간결하게!

클래스명은 요소가 담아내는 내용만이 드러나도록 간결히 작성해야 하는데, 이 때 중복된 이름의 클래스를 작성할 수 있다.

이러한 문제를 해결하기 위해 직계 자손 지정자(‘>’)를 활용하여 스타일에서 요소를 훅할 수 있게 하자.

아래와 같이 클래스 명을 간결하게 작성하고, 직계 자손 지정자로 정리하니 코드가 매우 깨끗해졌다.

<body>
    <div class="root">
        <div class="studio">
            <!-- studio 상단 -->
            <div class="header">
                <div class="left">
				...
                </div>
                <div class="right">
				...
                </div>
            </div>
            <!-- studio 중앙 -->
            <div class="body_frame">
                <div class="body">
                    <!-- studio 왼쪽 자습서 -->
                    <div class="left__tutorial">
                        <div class="header">...</div>
                        <div class="body">...</div>
                        <div class="footer">...</div>
                    </div>

                    <!-- studio 오른쪽 에디터 -->
                    <div class="right__editor">
                        <div class="header">
                            <div class="left">
                                ...
                            </div>
                            <div class="right">
                                ...
                            </div>
            <!-- studio 하단 -->
            <footer class="footer">
                <div class="left">
                    ...
                </div>
                <div class="middle">
                    ...
                </div>
                <div class="right">
                    ...
                </div>
            </footer>
        </div>
    </div>
</body>

/* studio 왼쪽 자습서의 header와 body 예시 */
.studio > .body_frame > .body > .left__tutorial > .header {
    position: sticky;
    color: #313338;
    background-color: #f7f8fa;
    padding: 0.5rem 1.25rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #e7e8ef;
}

.studio > .body_frame > .body > .left__tutorial > .body {   
    background-color: #fff;
    color: #000;
    padding: 1.875rem;
    overflow: auto;
}

TIP2. @media query 는 최대한 하단에 배치!

media query 를 활용하여, 화면의 크기가 600px 이하일 때 자습서와 에디터의 flex-direction 이 row → column 으로 배치되게끔 코드를 작성했는데, 작동이 되지 않았다.

그 이유를 알아보니, css 의 casecade 작동 방식 때문에 동일한 요소를 지정해서 사용할 수 밖에 없는 media query 에서는 충돌이 발생할 수 밖에 없고 따라서 특정 상황에서 속성이 변화하게 해야하는 query 문은 항상 하단에 배치해야 함을 알 수 있었다.

/* 동일한 요소를 지정하는 경우 가장 마지막 스타일이 적용되므로, 화면 크기가 600이하로 줄어들어도 작동하지 않음. */
@media all and (max-width: 600px) {
    .studio > .body_frame > .body {
        display: flex;
        flex-direction: column;
        overflow: scroll;
    }
}

.studio > .body_frame > .body {
	display: flex;
    flex-direction: column;
}

/* 올바른 예 */
.studio > .body_frame > .body {
	display: flex;
    flex-direction: column;
}

@media all and (max-width: 600px) {
    .studio > .body_frame > .body {
        display: flex;
        flex-direction: column;
        overflow: scroll;
    }
}

댓글남기기

참고