아카이브

[JS] Style 속성과 속성값 정리 본문

Language/JavaScript

[JS] Style 속성과 속성값 정리

Rayi 2024. 2. 20. 10:24

속성은 요소들이 가지는 특징입니다.

때문에 어떠 속성은 모든 종류의 태그에서 사용할 수 있는 반면, 어떤 속성은 정해진 종류의 태그에서만 사용할 수 있습니다.

1. Display

요소를 어떤 영역 범위로 하여 보여줄 것인지 결정합니다.

block block 요소. 한줄을 전부 차지하는 사각형 영역
none 객체 없음
inline 내용의 길이에 따라 크기가 달라지는 사각형 영역
inline-block 표현은 inline이나, 내용은 block 요소. 인접한 inline과는 같은 줄에 표시됨
list-item 글머리가 추가된 block 요소

2. Border

영역 범위를 시각화합니다.

none 선 없음
dotted 짧은 점선
dashed 긴 점선
solid 실선
double 이중 실선 (borderWidth > 3px)
groove 3d
ridge 테두리가 양각으로 표시
inset 영역이 음각으로 표시
outset 영역이 양각으로 표시

 

3. Position

영역 범위를 시각화합니다.

static 기본값
absolute 절대적인 위치를 가짐. 위치값은 style.position = relative인 상위 요소를 기준으로 함
relative style.position = absolute인 하위요소의 위치값 기준이 됨

 

+) position과 관련된 속성들

zIndex 화면에 보이는 우선순위 (숫자가 높을수록)
left x 좌표
top y 좌표
width 너비 (px 또는 %)

4. Float

요소들을 어떤 기준으로 정렬할 것인지를 결정합니다.

CSS에서는 float, JS에서는 styleFloat 또는 cssFloat이라고 불립니다.

none 기본값
left 왼쪽 정렬
right 오른쪽 정렬

5. 자바스크립트가 필요할 때

일반적으로 각 객체의 변화는 자바스크립트보다는 CSS를 통해 변경하는 것이 좋습니다.

그러나 요소의 크기가 정확하기 않거나 미리 예측하지 못하는 경우 CSS로 작성하는 것이 어렵기 때문에,

자바스크립트를 이용한 조작도 알아야 할 필요가 있습니다.

 

예시 중 하나로, 팝업 창을 화면 가운데 배치하는 경우가 있습니다.

<html>
    <head>
        <meta charset="UTF-8">
        <title>practice12_center_position</title>
        <script type="text/javascript">
            var ctrl = {
                moveCenter: function(){
                    var testDiv = document.getElementById('testDiv');
                    var top, left;

                    if (window.innerHeight){
                        top = window.innerHeight / 2;
                        left = window.innerWidth / 2;
                    }
                    var height = testDiv.offsetHeight / 2;
                    var width = testDiv.offsetWidth / 2;

                    testDiv.style.top = (top - height) + 'px';
                    testDiv.style.left = (left - width) + 'px';
                }
            }
        </script>
    </head>
    <body>
        <div>
            <button type="button" onclick="ctrl.moveCenter();">center positioning</button>
        </div>
        <div id="testDiv" style="background-color: gray; height: 50px; width: 100px; position: absolute; z-index: 1;"></div>
    </body>
</html>

 

728x90

'Language > JavaScript' 카테고리의 다른 글

[JS] Syntax | 06. Promise  (1) 2024.07.24
[JS] Syntax | 05. Callback  (2) 2024.07.22
[JS] Object | 06. Element  (0) 2024.02.14
[JS] Object | 05. Document  (0) 2024.02.14
[JS] Object | 04. Cookie  (0) 2024.02.13
'Language/JavaScript' Related Articles more
Comments