1cm

자바 프로그래밍_Day_51_CSS_레이아웃_스타일 본문

국비지원_Java/Java Programming_1

자바 프로그래밍_Day_51_CSS_레이아웃_스타일

dev_1cm 2021. 12. 7. 11:27
반응형

 

 

2021. 10. 29

 

 

     > 레이아웃 스타일 - 기본

       -> height / width

          -> 컨텐츠(내용)가 차지하고 있는 영역 크기 조절 속성

          -> 상대 크기 단위 입력 시 창 크기에 따라 변경, 절대 크기 단위 입력 시 창 크기에 따른 변화 X

 

       -> 블록 / 인라인 레벨 요소

          -> 블록 레벨 요소

             -> 한 줄 전체 차지하는 요소로 박스 모델이라고도 하는데, 한 줄에 여러 요소가 올 수 없는 요소다. (<div>, <p>, <hn>, <ul>, <ol>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>)

          -> 인라인 레벨 요소

             -> 한 줄에서 일부분만 차지하는 요소로, 한 줄에 여러 요소가 올 수 있다.(<img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>)

 

       -> display

          -> 화면 배치 방법 변경 속성으로 박스 레벨과 인라인 레벨 요소를 변경 가능하게 해줌

             -> none : 화면에서 표현되지 않고 공간도 차지하지 X

             -> block : block레벨 요소로 변경, inline을 block처럼 배치 가능

             -> inline : inline레벨 요소로 변경, block을 inline처럼 배치 가능

             -> inline-block : inline레벨이면서 content에는 block에 대한 속성 지정(inline은 margin, height, width 설정이 제대로 설정되지 않음)

 

 

     > 레이아웃 스타일 - 테두리

       -> border-style

          -> 테두리 스타일 지정

             -> none : 테두리 나타나지 않음, default

             -> hidden : 테두리 나타나지 않음

             -> dashed : 짧은(dotted보다는 긴 점선) 선으로 표시

             -> dotted : 점선 표시

             -> double : 이중 선 표시

             -> groove : 홈이 파인 것처럼 테두리를 창에 조각한 것 처럼 표시

             -> inset : border-collapse설정에 따라 groove와 같거나(collapse), 테두리가 창에 박혀있는 표시(separate)

             -> outset : border-collapse설정에 따라 ridge와 같거나(collapse),전체 박스 테두리가 창에서 튀어 나온 것처럼 표시(separate)

             -> ridge : 테두리가 튀어나온 것 처럼 표시

             -> solid : 테두리 실선 표시

 

       -> border-width

          -> 테두리 두께 지정

             -> 속성 값 : thin (얇게), medium (중간 크기), thick (두껍게) / 숫자 (두께 정도 표시) -> 위치 설정하지 않고 전체 테두리 작성 시 시계 방향 (위-우-아래-좌)으로 각 위치별로 설정 가능 / 위치 속성 : top, right, left, bottom

 

       -> border-color

          -> 테두리 색상 지정 : 각 테두리 별 설정 시 위치(top, right, ...)에 값을 넣고, 전체 한 번에 설정 시 "border-color: 색상 값"

 

       -> border

          -> 테두리 두께, 스타일, 색상을 한 번에 지정 : 각 테두리 별 설정 시 위치(top, right, ...) 이용

 

       -> border-radius

          -> 박스의 모서리 둥글게 하는 속성

          -> 위치 : top-left, top, right, ... / 각 테두리 변에서부터 설정한 값만큼의 반지름을 가지는 원이 모서리에 그려지고 그 외각 부분이 그 원을 따라 둥글게 변함

 

       -> box-shadow

          -> 박스 영역에 그림자 속성

          -> 선택자{box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상 [inset];}

 

 

     > 레이아웃 스타일 - 여백

       -> padding과 margin

          -> padding : 테두리와 컨텐츠 영역 사이 거리 조절 속성

          -> margin : box레벨 or inline레벨의 요소들 간의 간격 조절 속성

 

 

     > 포지셔닝

       -> box, inline 모델을 페이지 상에서 배치하는 스타일로 페이지 안 요소들을 원하는 위치에 배치하는 속성 : position, float 속성

 

       -> 요소 배치 - positon

          -> 페이지의 요소 자유롭게 배치해주는 속성으로 top, left, right, bottom으로 위치 지정

             -> static : 요소를 문서의 흐름에 맞춰 배치(default)

             -> relative : 이전 요소와 자연스럽게 연결해 배치, 위치 지정 가능

             -> absolute : 원하는 위치를 지정해 배치 (부모/조상 요소의 position 속성이 반드시 relative)

             -> fixed : 지정한 위치에 고정 배치

 

       -> 요소 배치 - visibility

          -> 페이지에 특정 속성을 보이거나 보이지 않게 하는 속성

             -> visible : default, 요소가 화면에 보임

             -> hidden : 요소를 화면에 안 보이게 하지만 페이지 공간은 차지

             -> collapse : 표의 행, 열, 행 그룹, 열 그룹 등에서 지정 시 서로 겹치도록 조절, 이외 영역에서는 hidden으로 처리

 

       -> 요소 배치 - z-index

          -> 페이지의 요소들을 순서대로 위에 쌓는 속성으로 속성 값이 크면 가장 위에 있는 요소, 작으면 밑에 있는 요소

             -> 요소가 항상 맨 위에 위치해야 하면 값을 999 또는 1000 등 큰 값으로 설정해준다.

 

       -> 요소 배치 - float

          -> 페이지 내 요소의 위치를 왼쪽이나 오른쪽으로 지정하는 속성 (right, left, none(배치 값 설정 X))

 

       -> 요소 배치 - clear

          -> 페이지에 float 설정이 되어 있으면 그 속성이 그대로 그 다음 요소에 영향을 미치는데 이를 초기화 시키는 속성

             -> right (오른쪽 배치 취소), left, none(설정 X, 앞에 내용 그대로 적용), both(둘 다 취소)

 

 

 

     > 실습 코드와 출력 결과

       -> 05_레이아웃스타일.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃 스타일</title>

    <link rel="stylesheet" href="./05_레이아웃스타일.css">
</head>
<body>
    <h1>레이아웃 스타일</h1>

    <h2>기본스타일</h2>

    <h3>width, height</h3>
    <h4>고정 크기</h4>
    <div id="fixed-size" class="size-test">
        fdsajadfshods <br>
        ajoeirjoiwj <br>
    </div>

    <h4>가변 크기</h4>
    <div id="variable-size" class="size-test"></div>

    <hr>

    <h3>화면 배치 방법 변경</h3>
    <p>
        블록 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경할 수 있다.
    </p>

    <h4>블록 요소를 인라인 요소로 변경</h4>
    <p>display: inline</p>
    <div id="area1" class="display display-inline">1번째 영역</div>
    <div id="area2" class="display display-inline">2번째 영역</div>
    <div id="area3" class="display display-inline">3번째 영역</div>
    <div id="area4" class="display display-inline">4번째 영역</div>
    <div id="area5" class="display display-inline">5번째 영역</div>

    <p>display: inline-block</p>
    <div id="area1" class="display display-inline-block">1번째 영역</div>
    <div id="area2" class="display display-inline-block">2번째 영역</div>
    <div id="area3" class="display display-inline-block">3번째 영역</div>
    <div id="area4" class="display display-inline-block">4번째 영역</div>
    <div id="area5" class="display display-inline-block">5번째 영역</div>

    <h4>인라인 요소를 블록 요소로 변경</h4>
    <span id="area1" class="display display-block">1 번째 영역</span>
    <span id="area2" class="display display-block">2 번째 영역</span>
    <span id="area3" class="display display-block">3 번째 영역</span>
    <span id="area4" class="display display-block">4 번째 영역</span>
    <span id="area5" class="display display-block">5 번째 영역</span>

    <hr>

    <h2>테두리 스타일</h2>

    <div class="border" id="border-test1"></div><br>
    <div class="border" id="border-test2"></div><br>
    <div class="border" id="border-test3"></div><br>
    <div class="border" id="border-test4"></div><br>
    <div class="border" id="border-test5"></div><br>
    <div class="border" id="border-test6"></div><br>
    <div class="border" id="border-test7"></div><br>
    <div class="border" id="border-test8"></div><br>
    <div class="border" id="border-test9"></div><br>
    <div class="border" id="border-test10"></div><br>

    <hr>

    <h2>여백 스타일</h2>

    <div class="space">기준 div</div>

    <h3>padding</h3>
    <p>테두리와 콘텐츠 영역 사이의 거리 조절</p>
    <div class="space" id="padding1">전체 padding</div>
    <br>
    <div class="space" id="padding2">부분 padding</div>

    <br>

    <!--
    <span class="space" id="padding1" style="display: inline-block;">전체 padding</span>

    <br>

    <span class="space" id="padding2" style="display: inline-block;">부분 padding</span>
    -->

    <hr>


    <h3>margin</h3>
    <p>다른 요소들 간의 간격 조절</p>
    <div class="space" id="margin1">전체 margin</div>
    <div class="space" id="margin2">부분 margin</div>
    <!-- 
    <span class="space" id="margin1" style="display: inline-block;">전체 padding</span>
    <span class="space" id="margin2" style="display: inline-block;">부분 padding</span>
    -->

    <h2>포지셔닝</h2>
    <h4>절대 위치와 상대 위치</h4>

    <div class="outer">
        <div id="first"></div>
        <div id="second"></div>
        <div id="third"></div>
    </div>

    <h4>고정 위치</h4>
    <!-- <div id="fixed-area"></div> -->

    <hr>

    <h3>visibility</h3>
    <div class="visibility" id="v-test1"></div>
    <div class="visibility" id="v-test2"></div>
    <div class="visibility" id="v-test3"></div>

    <hr>

    <h3>z-index</h3>
    <div id="z-outer">
        <div class="z-test" id="z1"></div>
        <div class="z-test" id="z2"></div>
        <div class="z-test" id="z3"></div>
    </div>

    <hr>

    <h3>float, clear</h3>
    <div class="float-test"></div>
    <div class="float-test"></div>
    <div class="float-test"></div>
    <div class="float-test"></div>

    <hr style="clear: both;">
    
        <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><br>
    <br><br><br><br><sbr>

</body>
</html>

 

 

 

 

 

       -> 05_레이아웃스타일.css

/* 기본 스타일 테스트 */
.size-test {
    border: 2px solid seagreen;
}

#fixed-size {
    width: 200px;
    height: 200px;
}

#variable-size {
    width: 50%;
    height: 200px;
}

.display{
    width: 150px;
    height: 50px;
    border: 2px solid black;
    color: wheat;
}

#area1 {
    background-color: sienna;
}

#area2 {
    background-color: slateblue;
}

#area3 {
    background-color: plum;
}

#area4 {
    background-color: blueviolet;
}

#area5 {
    background-color: cornflowerblue;
}

.display-inline {
    display: inline;
}

.display-inline-block {
    display: inline-block;
}

.display-block {
    display: block;
}

/* 테두리 스타일 테스트 */
.border {
    width: 100px;
    height: 100px;
    border: 5px;
}

#border-test1 {
    border-style: none;
}

#border-test2 {
    border-style: hidden;
    box-shadow: 10px 10px 10px 10px green inset;
}

#border-test3 {
    border-style: dotted;
}

#border-test4 {
    border-style: dashed;
    border-top-color: hotpink;
}

#border-test5 {
    border-style: double;
    border-color: red;
}

#border-test6 {
    border-style: groove;
    border-top-left-radius: 10px 20px;
}

#border-test7 {
    border-style: inset;
    border-bottom-left-radius: 50px;
}

#border-test8 {
    border-style: outset;
}

#border-test9 {
    border-style: solid;
}

#border-test10 {
    border-style: ridge;
}

/* 여백 스타일 테스트 */
.space {
    width: 100px;
    height: 100px;
    background-color: beige;
}

#padding1 {
    padding: 20px;
}

#padding2 {
    padding-top: 50px;
    padding-right: 100px;
}

#margin1 {
    margin: 50px;
}

#margin2 {
    margin-top: 30px;
    margin-left: 20px;
}

/* 포지셔닝 테스트 */
.outer {
    position: relative;
    /* top: 100px;
    left: 100px; */
    /* border: 1px solid; */
}

#first {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

#second {
    /* position: absolute;
    top: 50px;
    left: 50px; */
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
}

#third {
    /* position: absolute;
    top: 100px;
    left: 100px; */
    width: 100px;
    height: 100px;
    background-color: red;
}

#fixed-area{
    width: 100px;
    height: 100px;
    background-color: indigo;
    /* position: fixed; */
    position: sticky;
    top: 50px;
    left: 50px;
}

/* visibility 테스트 */
.visibility {
    width: 100px;
    height: 100px;
    border: 1px solid;
    margin-bottom: 5px;
}

#v-test1 {
    background-color: hotpink;
}

#v-test2 {
    visibility: hidden;
    /* display: none; */
    background-color: beige;
}

#v-test3 {
    background-color: skyblue;
}

/* z-index 테스트 */
.z-test {
    width: 150px;
    height: 150px;
    border: 1px solid;
    position: absolute;
}

#z-outer {
    position: relative;
    height: 310px;
}

#z1 {
    background-color: seagreen;
    top: 50px;
    left: 50px;
    z-index: 2;
}

#z2 {
    background-color: red;
    top: 100px;
    left: 100px;
    z-index: 4;
}

#z3 {
    background-color: violet;
    top: 150px;
    left: 150px;
    z-index: 3;
}

/* float 테스트 */
.float-test {
    border: 1px solid;
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 3px;
    margin-bottom: 10px;
}
반응형

'국비지원_Java > Java Programming_1' 카테고리의 다른 글

자바 프로그래밍_Day_53_웹 문서 구조  (0) 2022.05.30
자바 프로그래밍_Day_52_CSS 스타일, 변형  (0) 2021.12.07
자바 프로그래밍_Day_50_CSS_선택자_우선순위  (0) 2021.12.02
자바 프로그래밍_Day_49_CSS선택자  (0) 2021.11.12
자바 프로그래밍_Day_48_폼 관련 태그  (0) 2021.10.30
'국비지원_Java/Java Programming_1' Related Articles more
Comments