html 230524

륨·2023년 5월 24일

ex1-1

목표 - margin: auto에 대해서 이해한다.

margin: auto

<style>
    *{
        margin: 0; padding: 0;
    }
  body{
    margin: 0 auto; /*auto는 부모 요소의 공간을 기준으로 수평 중앙을 맞춘다.*/
    width: 960px;
  }
</style>

<body>
    <h1>Lorem Ipsum</h1>
    <h2>피고인의 자백이 고문·폭행·협박·구속의 부당한 장기화 또는 기망 기타의 방법에 의하여 자의로 진술된 것이 아니라고 인정될 때 또는 정식재판</h2>
    
    <p>대한민국의 주권은 국민에게 있고, 모든 권력은 국민으로부터 나온다. 대통령은 조약을 체결·비준하고, 외교사절을 신임·접수 또는 파견하며, 선전포고와 강화를 한다. 모든 국민은 신체의 자유를 가진다. 누구든지 법률에 의하지 아니하고는 체포·구속·압수·수색 또는 심문을 받지 아니하며, 법률과 적법한 절차에 의하지 아니하고는 처벌·보안처분 또는 강제노역을 받지 아니한다.

        감사원은 세입·세출의 결산을 매년 검사하여 대통령과 차년도국회에 그 결과를 보고하여야 한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는 정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다.
        
        저작자·발명가·과학기술자와 예술가의 권리는 법률로써 보호한다. 누구든지 체포 또는 구속을 당한 때에는 적부의 심사를 법원에 청구할 권리를 가진다. 헌법재판소는 법관의 자격을 가진 9인의 재판관으로 구성하며, 재판관은 대통령이 임명한다. 연소자의 근로는 특별한 보호를 받는다. 국회의원은 그 지위를 남용하여 국가·공공단체 또는 기업체와의 계약이나 그 처분에 의하여 재산상의 권리·이익 또는 직위를 취득하거나 타인을 위하여 그 취득을 알선할 수 없다.
        
        국무총리·국무위원 또는 정부위원은 국회나 그 위원회에 출석하여 국정처리상황을 보고하거나 의견을 진술하고 질문에 응답할 수 있다. 대통령은 국회에 출석하여 발언하거나 서한으로 의견을 표시할 수 있다. 대법관은 대법원장의 제청으로 국회의 동의를 얻어 대통령이 임명한다. 체포·구속·압수 또는 수색을 할 때에는 적법한 절차에 따라 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다. 다만, 현행범인인 경우와 장기 3년 이상의 형에 해당하는 죄를 범하고 도피 또는 증거인멸의 염려가 있을 때에는 사후에 영장을 청구할 수 있다.</p>
</body>

결과

ex1-2

목표 - transform, position: fixed에 대해서 이해한다.

transform: translate(x, y), translateX, translateY
transform을 이용한 요소를 중앙에 정렬시키는 방법
position fixed에 대한 이해

<style>
    #container{
        width: 500px; height: 300px;
        border: 3px solid black;
        overflow: hidden;
        position: relative;
        /*부모가 position: fixed; 자식이 position: absolute;라면
        스크롤로 부모의 위치가 이동될 때 자식 역시 따라 움직인다.*/
    }
    .circle{
        position: absolute;

        width: 50px; height: 50px;
        border-radius: 50% 50%;
        /*position: fixed; viewport를 기준으로 이동한다. 
        화면이 바뀌어도 바뀐 위치에 고정되어 움직인다.*/
        
    }
    #red{
        background: red;
        top: 5px;
        left: 50px;
        
        
        
    }
    #green{
        background: green;
        right: 50px;
        top: 5px;
    }
    #blue{
        background: blue;
        bottom: 5px;
        left: 50px;
    }
    #yellow{
        background: yellow;
        bottom: 5px;
        right: 50px;
    }
    #center{
        background: paleturquoise;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /*translate(x,y) x축, y축 이동
        translateX x축 수평 이동
        translateY y축 수직 이동
        translate: 값%은 자신의 크기만큼 이동이다. 
        100%이면 자신의 크기 100% 만큼 이동한다*/
        
        /*요소를 정확히 중앙에 위치시키는 방법
        top:50% left:50%를 통해 요소를 중앙에 위치시킨다.
        그 위치포인트에서 자식요소가 출력되면 밑,오른쪽 방향으로 출력된다.
        그래서 중앙에 있는 것처럼 보이지 않는다. translate(-50%, -50%)로
        본인의 크기의 반만큼 위,왼쪽 방향으로 이동시키면 정확히 맞게 된다. */
    }
  
</style>

<body>
    <h1>Lorem Ipsum</h1>
    <div id="container">
        <div id="red" class="circle"></div>
        <div id="green" class="circle"></div>
        <div id="center" class="circle"></div>
        <div id="blue" class="circle"></div>
        <div id="yellow" class="circle"></div>
    </div>
    
    <h1>Lorem Ipsum</h1>
</body>

결과

ex2-1

목표 - overflow: scroll과 auto의 차이에 대해서 이해한다.

overflow: scroll과 auto의 차이

<style>
    #visible, #hidden, #scroll, #auto{
        width: 400px; height: 150px;
        background: #faf4c0;
        border: 1px solid black;
        margin-top: 100px;
    }
    #visible{
        overflow: visible;
    }
    #hidden{
        overflow: hidden;
    }
    #scroll{
        overflow: scroll; /*내용이 공간을 초과하든 말든 스크롤을 표시한다.*/
    }
    #auto{
        overflow: auto; /*내용이 공간을 초과하면 스크롤을 표시한다.*/
    }
</style>

<body>
    <div id="visible">
        <h2>1. overflow: visible</h2>
        When Alice follows the White Rabbit
    </div>

    <div id="hidden">
        <h2>1. overflow: hidden</h2>
        이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한 법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다. 제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다.

국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다. 대통령은 헌법과 법률이 정하는 바에 의하여 공무원을 임면한다. 국회의원이 회기전에 체포 또는 구금된 때에는 현행범인이 아닌 한 국회의 요구가 있으면 회기중 석방된다.

공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다. 감사원은 원장을 포함한 5인 이상 11인 이하의 감사위원으로 구성한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다. 선거에 있어서 최고득표자가 2인 이상인 때에는 국회의 재적의원 과반수가 출석한 공개회의에서 다수표를 얻은 자를 당선자로 한다.

대법원장은 국회의 동의를 얻어 대통령이 임명한다. 법률은 특별한 규정이 없는 한 공포한 날로부터 20일을 경과함으로써 효력을 발생한다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 형사피고인은 상당한 이유가 없는 한 지체없이 공개재판을 받을 권리를 가진다.

모든 국민은 직업선택의 자유를 가진다. 국민경제의 발전을 위한 중요정책의 수립에 관하여 대통령의 자문에 응하기 위하여 국민경제자문회의를 둘 수 있다. 모든 국민은 인간다운 생활을 할 권리를 가진다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다.

헌법재판소 재판관의 임기는 6년으로 하며, 법률이 정하는 바에 의하여 연임할 수 있다. 대통령은 제3항과 제4항의 사유를 지체없이 공포하여야 한다. 국무총리는 대통령을 보좌하며, 행정에 관하여 대통령의 명을 받아 행정각부를 통할한다. 국가는 청원에 대하여 심사할 의무를 진다. 국회가 재적의원 과반수의 찬성으로 계엄의 해제를 요구한 때에는 대통령은 이를 해제하여야 한다.
    </div>
    <div id="scroll">
        <h2>1. overflow: scroll</h2>
        이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한 법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다. 제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다.

국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다. 대통령은 헌법과 법률이 정하는 바에 의하여 공무원을 임면한다. 국회의원이 회기전에 체포 또는 구금된 때에는 현행범인이 아닌 한 국회의 요구가 있으면 회기중 석방된다.

공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다. 감사원은 원장을 포함한 5인 이상 11인 이하의 감사위원으로 구성한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다. 선거에 있어서 최고득표자가 2인 이상인 때에는 국회의 재적의원 과반수가 출석한 공개회의에서 다수표를 얻은 자를 당선자로 한다.

대법원장은 국회의 동의를 얻어 대통령이 임명한다. 법률은 특별한 규정이 없는 한 공포한 날로부터 20일을 경과함으로써 효력을 발생한다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 형사피고인은 상당한 이유가 없는 한 지체없이 공개재판을 받을 권리를 가진다.

모든 국민은 직업선택의 자유를 가진다. 국민경제의 발전을 위한 중요정책의 수립에 관하여 대통령의 자문에 응하기 위하여 국민경제자문회의를 둘 수 있다. 모든 국민은 인간다운 생활을 할 권리를 가진다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다.

헌법재판소 재판관의 임기는 6년으로 하며, 법률이 정하는 바에 의하여 연임할 수 있다. 대통령은 제3항과 제4항의 사유를 지체없이 공포하여야 한다. 국무총리는 대통령을 보좌하며, 행정에 관하여 대통령의 명을 받아 행정각부를 통할한다. 국가는 청원에 대하여 심사할 의무를 진다. 국회가 재적의원 과반수의 찬성으로 계엄의 해제를 요구한 때에는 대통령은 이를 해제하여야 한다.
    </div>
    <div id="auto">
        <h2>1. overflow: auto</h2>
        이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한 법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다. 제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다.

국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다. 대통령은 헌법과 법률이 정하는 바에 의하여 공무원을 임면한다. 국회의원이 회기전에 체포 또는 구금된 때에는 현행범인이 아닌 한 국회의 요구가 있으면 회기중 석방된다.

공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다. 감사원은 원장을 포함한 5인 이상 11인 이하의 감사위원으로 구성한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다. 선거에 있어서 최고득표자가 2인 이상인 때에는 국회의 재적의원 과반수가 출석한 공개회의에서 다수표를 얻은 자를 당선자로 한다.

대법원장은 국회의 동의를 얻어 대통령이 임명한다. 법률은 특별한 규정이 없는 한 공포한 날로부터 20일을 경과함으로써 효력을 발생한다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 형사피고인은 상당한 이유가 없는 한 지체없이 공개재판을 받을 권리를 가진다.

모든 국민은 직업선택의 자유를 가진다. 국민경제의 발전을 위한 중요정책의 수립에 관하여 대통령의 자문에 응하기 위하여 국민경제자문회의를 둘 수 있다. 모든 국민은 인간다운 생활을 할 권리를 가진다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다.

헌법재판소 재판관의 임기는 6년으로 하며, 법률이 정하는 바에 의하여 연임할 수 있다. 대통령은 제3항과 제4항의 사유를 지체없이 공포하여야 한다. 국무총리는 대통령을 보좌하며, 행정에 관하여 대통령의 명을 받아 행정각부를 통할한다. 국가는 청원에 대하여 심사할 의무를 진다. 국회가 재적의원 과반수의 찬성으로 계엄의 해제를 요구한 때에는 대통령은 이를 해제하여야 한다.
    </div>

    
</body>

결과

ex5-1

목표 - position: grid에 대해서 이해한다.

부모 요소 display:grid, grid-template-colums, grid-template-rows
1fx와 100px 선언의 차이
그리드 행과 열을 이용하는 방식에 대해서 이해한다.
자식 요소 grid-column, grid-row
minmax에 대해 이해한다.

<style>
    *{
        box-sizing: border-box;
    }
    .wrapper{
        display: grid;
       /* grid-template-columns: 100px 100px 100px 100px; 100px 크기의 열 4개 만들기*/ 
       /*grid-template-columns:  repeat(4, 100px); /*위 주석과 같은 기능*/
       grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 200px 200px 200px 200px;
        gap:10px;
        grid-auto-rows: minmax(100px, auto); /*첫번째값은 최소값 두번째 값은 최대값
  요소의 크기 변화의 최소값과 최대값을 정한다.*/
    }
    .item{
        background: rgb(138, 252, 214);
        text-align: center;
        line-height: 200px;
        border: 1px solid white;
    }
    .one{
       /* grid-column-start: 1;
        grid-column-end: 3;*/ 
        /*3번선까지 공간을 차지한다. 
        start 1번 부터 차례대로 2, 3, 4*/
        grid-column: 1/3; /*위의 효과와 같다 1번부터 3번까지다*/
        grid-row: 1/2; /*행을 기준으로 동일하게 작동된다.*/
        background-color: rgb(125, 170, 255);
    }
    .two{
        grid-column: 2/4;
        background-color: cyan;
        grid-row: 1/3;
    }
    .three{
        grid-column: 1/2;
        grid-row: 2/5;
    }
    .four{
        grid-column: 3/4; 
        grid-row: 3/4;
        background: rgb(253, 172, 253);
    }
    .five{
        grid-column: 2/3; 
        grid-row: 4/5;
        background: rgb(253, 172, 253);
    }
    .six{
        grid-column: 3/4; 
        grid-row: 4/5;
        background-color: deepskyblue;
    }
</style>

<body>
    <div class="wrapper">
        <div class="one item">One</div>
        <div class="two item">Two</div>
        <div class="three item">Three</div>
        <div class="four item">Four</div>
        <div class="five item">Five</div>
        <div class="six item">Six</div>
    </div>
</body>

결과

ex6-2

목표 - grid-area에 대해서 이해한다.

grid-area

<style>
    .grid-container{
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-template-rows: 100px 200px 200px 100px;
        background-color: white;
        padding: 10px;
    }
    .grid-container > div{
        text-align: center;
        font-size: 15px;
    }
    .item1{
        /*grid-area: 1/1 / span 1 / span 2;
        /*첫번째 값은 2행 1열에서 시작한다는 의미이다. 두번째 값 span 2는 2개의 행을 차지한다는 의미이다.
        세번째 값 sapn 3는 열 3개의 공간을 차지한다는 의미이다.
        grid-column: 1/3; /*위의 효과와 같다 1번부터 3번까지다
        grid-row: 1/2;*/
        grid-area: 1/1 /span 1/ span 2;
        background-color: brown;
        overflow: hidden;
    }
    .item2{
        /*
        grid-column: 1/2; 
        grid-row: 2/3;*/
        grid-area: 2/1 /span 1 / span 1;
        background-color: rgb(252, 242, 155);
        overflow: hidden;
    }
    .item3{
        /*grid-column: 2/3; 
        grid-row: 2/4;*/
        grid-area: 2/2 / span  2 / span 1;
        background-color: dodgerblue;
        overflow: hidden;
    }
    .item4{
        /*
        grid-column: 1/3; 
        grid-row: 4/5;*/
        grid-area: 4/1 / span 1 / span2;
        background-color: indigo;
        overflow: hidden;
    }
</style>

<body>
    <div class="grid-container">
        <div class="item1"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></div>
        <div class="item2"><span>대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다.

            법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다.</span></div>
        <div class="item3"><span>정부는 예산에 변경을 가할 필요가 있을 때에는 추가경정예산안을 편성하여 국회에 제출할 수 있다. 공무원의 신분과 정치적 중립성은 법률이 정하는 바에 의하여 보장된다.

            모든 국민은 신체의 자유를 가진다. 누구든지 법률에 의하지 아니하고는 체포·구속·압수·수색 또는 심문을 받지 아니하며, 법률과 적법한 절차에 의하지 아니하고는 처벌·보안처분 또는 강제노역을 받지 아니한다.
            
            헌법재판소 재판관은 정당에 가입하거나 정치에 관여할 수 없다. 근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다.
            
            국가는 사회보장·사회복지의 증진에 노력할 의무를 진다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다.
            
            대법원장의 임기는 6년으로 하며, 중임할 수 없다. 대한민국의 주권은 국민에게 있고, 모든 권력은 국민으로부터 나온다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.
            
            군인 또는 군무원이 아닌 국민은 대한민국의 영역안에서는 중대한 군사상 기밀·초병·초소·유독음식물공급·포로·군용물에 관한 죄중 법률이 정한 경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다.</span></div>
        <div class="item4"><span>전직대통령의 신분과 예우에 관하여는 법률로 정한다. 국가는 평생교육을 진흥하여야 한다. 국군은 국가의 안전보장과 국토방위의 신성한 의무를 수행함을 사명으로 하며, 그 정치적 중립성은 준수된다.

            국토와 자원은 국가의 보호를 받으며, 국가는 그 균형있는 개발과 이용을 위하여 필요한 계획을 수립한다. 대통령이 궐위되거나 사고로 인하여 직무를 수행할 수 없을 때에는 국무총리, 법률이 정한 국무위원의 순서로 그 권한을 대행한다.
            
            법관이 중대한 심신상의 장해로 직무를 수행할 수 없을 때에는 법률이 정하는 바에 의하여 퇴직하게 할 수 있다. 법률은 특별한 규정이 없는 한 공포한 날로부터 20일을 경과함으로써 효력을 발생한다.</span></div>
      
    </div>
</body>