<이공계기술전문연수> 13. CSS 스타일 속성 기본(5) 실습

2019/09/19 - [HTML | CSS] - <이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리)

<이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리)

1. 크기 단위 단위 설명 % 백분율 em 배수 px 픽셀 2. 색상 단위 단위 설명 #000000 HEX 코드 rgb(red,green,blue) RGB 색상 rgba(red,green,blue,alpha) RGBA 색상 hsl(hue,saturation,lightness) HSL 색상 hsla(..

jiaaan90.tistory.com

2019/09/19 - [HTML | CSS] - <이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트)

<이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트)

1. 폰트 속성 글자의 크기를 지정하는 스타일 속성이다. 크기 단위 등을 사용한다. font-size:30px; font-size:3em; font-size:large; font-size:small; font-family 속성 폰트를 지정하는 스타일 속성이다. font-..

jiaaan90.tistory.com

<<실습>>

tistory html 모드에서 코드를 올렸을때, 같은 클래스가 존재해서 글이 오류가 생겨 코드블럭만 올림

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <style>
        #div1{
            width :300px;
            height: 300px;
            border: 1px solid black;
        }
        #div2{
            width:20%;
            height:20%;
            border: 1px solid red;
        }
        #div3{
            width:50%;
            height:50%;
            border: 1px solid blue;            
        }
        a{
            border : 1px solid black;
            
        }
    </style>
    <div id = "div1">
        <div id = "div3">
            <div id = "div2">
            </div>
        </div>
    </div>
    <hr>
    <style>
        .display-test{
            width: 200px;
            height: 200px;
            background: orange;
        }
        #div4:active{
            display: none;
        }
        a{
            border : 1px solid black;
            width: 400px;
            height: 300px;
            display : block;
   
        }
        #div5{
            background: red;
            display: inline-block;
            height: 100px;
        }
        #div6{
            background: yellow;
            display: inline-block;
        }
        #div7{
            background: green;
            display: inline-block;
        }
        #div8{
            background: blue;
            display: inline-block;
        }
        
    </style>
    <a href="#"> A태그 테스트 </a>
    <hr><br>
    <h3>디스플레이 속성(none) </h3>
    <div id="div4" class="display-test">테스트 문구</div>
    <a href="#">A태그 테스트</a>
    
    <hr><br>
    <div id = "div5" class ="dispaly-test">테스트</div>
    <div id = "div6" class ="dispaly-test">테스트</div>
    <div id = "div7" class ="dispaly-test">테스트</div>
    <div id = "div8" class ="dispaly-test">테스트</div>
    <hr>
    <style>
        .border-test{
            width: 200px;
            height: 200px;
            border-width: 5px;
            
        }
        #border1{border-style: dashed;
            border-top-width: 20px;
            border-bottom-color: red;
        }
        #border2{border-style: dotted;
            border-right-width: 20px;
            border-color: red;
        }
        #border3{border-style: double;
            border-left-width: 20px;
        }
        #border4{border-style: groove;
            border-bottom-width: 20px;
        }
        #border5{border-style: inset;
            border-top-width: thin;
        }
        #border6{border-style: outset;
            border-top-width: medium;
        }
        #border7{border-style: ridge;
            border-top-width: thick;
        }
        #border8{border-style: solid;
            border-width: thick;
        }
        #border9{
            border-bottom: 2px solid red;
        }
        #border10{
            border: 10px dashed blue;
        }
    </style>
    <h3>테두리</h3>
    <div id="border1" class="border-test"></div><br>
    <div id="border2" class="border-test"></div>
    <div id="border3" class="border-test"></div>
    <div id="border4" class="border-test"></div>
    <div id="border5" class="border-test"></div>
    <div id="border6" class="border-test"></div>
    <div id="border7" class="border-test"></div>
    <div id="border8" class="border-test"></div>
    <br>
    <div id="border9" class="border-test"></div>
    <br>
    <div id="border10" class="border-test"></div>
    <br><br><hr><br><br>
    <style>
        .rad-test{
            width: 100px;
            height: 100px;
            border-width: 3px;
            border-style: solid;
        }
        #rad-test1{
            border-top-left-radius: 50px;
        }
        #rad-test2{
            border-top-right-radius: 50px;
        }
        #rad-test3{
            border-bottom-left-radius: 50px;
        }
        #rad-test4{
            border-bottom-right-radius: 50px;
        }
        #rad-test5{
            border-radius: 50px;
        }
        #rad-test6{
            border-radius: 20px 50px;
        }
        #rad-test7{
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
    </style>
    <div id="rad-test1" class="rad-test"></div>
    <div id="rad-test2" class="rad-test"></div>
    <div id="rad-test3" class="rad-test"></div>
    <div id="rad-test4" class="rad-test"></div>
    <div id="rad-test5" class="rad-test"></div>
    <div id="rad-test6" class="rad-test"></div>
    <div id="rad-test7" class="rad-test"></div>
    
    
    
    
    
    
    
    
    
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <style>
        
        #table{
            
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }
            
        td{
            border: 5px dashed black;
            
        }
        #top-left{
            border-top-left-radius: 50px;
            border-color: blue;
            border-top-style: solid;
            border-left-style: solid;
        }
        #top-right{
            border-top-right-radius: 50px;
            border-color : green;
            border-top-style: solid;
            border-right-style: solid;
            
        }
        #bottom-left{
            border-bottom-left-radius: 50px;
            border-color : yellow;
            border-bottom-style: solid;
            border-left-style: solid;
        }
         #bottom-right{
            border-bottom-right-radius: 50px;
            border-color : red;
            border-bottom-style: solid;
            border-right-style: solid;
        }
        #table tr:nth-child(2) td:nth-child(2){
            border-style: dotted;
            border-color : hotpink;
            
        }
        
    </style>
    <table id = "table">
        <tr>
            <td id = "top-left"></td>
            <td></td>
            <td id = "top-right"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td ></td>
        </tr>
        <tr>
            <td id = bottom-left></td>
            <td></td>
            <td id = bottom-right></td>
        </tr>
    </table>   
    <br>
    <hr>
    <style>
        .margin-test{
            width: 200px;
            height: 200px;
            border: 5px solid black;
            margin-bottom: 100px;
            margin-top: 100px;
            margin-left: 100px;
            
        }
        #pad1{
            padding-top: 100px;
            
        }
        #pad2{
            padding-left: 100px;
            
        }
        #pad3{
            padding: 100px;
        }
    </style>
    <div id ="pad1" div class = "margin-test">
    <p>padding-top 100px</p>
    </div>
    <div id ="pad2" class = "margin-test">
    <p>padding-left 100px</p>
    </div>
    <div id = "pad3" class = "margin-test">
    <p>padding 100px</p>
    </div>
    <hr>
    
    <style>
        .size-test{
            border : 20px solid blue;
            width: 200px;
            height: 200px;
            padding: 30px;
            margin: 20px;
        }
        #size1{
            box-sizing: border-box;
        }
        #size2{
            box-sizing: content-box;
        }
    </style>
    <div id="size1" class="size-test">
    border-box</div>
    <div id="size2" class="size-test">
    content-box</div>
    <hr>
    <style>
        #position{
            position : static;
            border : 5px solid blue;
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
        }
        #p1{
            background: yellow;
            width: 50px;
            height: 50px;
            position: relative;
            left : 100px;
            right: 100px;
        }
        #p2{
            background: purple;
            width: 50px;
            height: 50px;
            position: relative;
            left : 100px;
            right: 100px;
        }
        #fixed{
            width:100px;
            height: 100px;
            background: red;
            position: fixed;
            border: 1px solid black;
            top: 100px;
            left: 100px;
            z-index: 1000;
        }
    </style>
    <div id = "position">
        <p id = "p1"></p>
        <p id = "p2"></p>
    </div>
    
    <div id = "fixed"></div>
    <hr>
    <style>
        #p4{
           visibility: hidden;
        }
    </style>
    <p id = "p3">테스트</p>
    <p id = "p4">테스트</p>
    <p id = "p5">테스트</p>
    <hr><hr>
    
    <style>
        #wrap{
            border : 5px solid red;
            width : 500px;
            height: 500px;
            position: relative;
        }
        .z{
            position: absolute;
            width: 200px;
            height: 200px;
        }
        #z-test1{
            background: yellow;
            top: 50px;
            left: 100px;
            z-index: 13;
        }
        #z-test2{
            background: blue;
            top: 100px;
            left: 150px;
            z-index: 11;
        }
        #z-test3{
            background: purple;
            top: 150px;
            left: 200px;
            z-index: 12;
        }
        
    </style>
    <div id="wrap">
        <div id ="z-test1" class="z">요소1
        </div>
        <div id ="z-test2" class="z">요소2
        </div>
        <div id ="z-test3" class="z">요소3
        </div>
    </div>
    <hr>
    <hr>
    <style>
        .float-test{
            width: 100px;
            float: left;
        }
        .test6{
            clear: left;
        }
    </style>
    
    <ul>
        <li class = "float-test">test1</li>
        <li class = "float-test">test2</li>
        <li class = "float-test">test3</li>
        <li class = "float-test">test4</li>
        <li class = "float-test">test5</li>
        <li class = "test6">test6</li>
        <li>test7</li>
    </ul>
    
    <hr>
    <style>
        .over-test{
            height: 100px;
            width: 100px;
            border: 1px solid black;
            margin: 50px;
            font-size: 20px;
        }
        #d1{
            overflow: scroll;
        }
        #d2{
            overflow: auto;
        }
        #d3{
            overflow: hidden;
        }
        #d4{
            overflow: visible;
        }
    </style>
    <div id ="d1" class="over-test">
    자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
    </div>
    <div id ="d2" class="over-test">
    자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
    </div>
    <div id ="d3" class="over-test">
    자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
    </div>
    <div id ="d4" class="over-test">
    자바 Framework 기반 웹 응용 SW개발자 양성과정 자바 Framework 기반 웹 응용 SW개발자 양성과정
    </div>
    <br><br><br><br><br><br><br><br><br><br><hr>
    <style>
        .shadow{
            width: 500px;
            padding: 10px;
            margin-bottom: 20px;
            background: yellow;
        }
        #s1{
            box-shadow: 5px 5px;
        }
        #s2{
            box-shadow: 5px 5px 5px;
        }
        #s3{
            box-shadow: 5px 5px 5px 5px;
        }
        #s4{
            box-shadow: 5px 5px 5px 5px blue;
    </style>
    <div id = "s1" class="shadow">
        <p>박스 그림자 효과 테스트</p>
    </div>
    <div id = "s2" class="shadow">
        <p>박스 그림자 효과 테스트</p>
    </div>
    <div id = "s3" class="shadow">
        <p>박스 그림자 효과 테스트</p>
    </div>
    <div id = "s4" class="shadow">
        <p>박스 그림자 효과 테스트</p>
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글

<이공계기술전문연수> 12. CSS 스타일 속성 기본(4) 실습 (0)	2019.09.20
<이공계기술전문연수> 11. CSS 스타일 속성 기본(3) 실습 (0)	2019.09.20
<이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트) (0)	2019.09.19
<이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리) (0)	2019.09.19
<이공계기술전문연수> 8. CSS 선택자 (0)	2019.09.16

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

<이공계기술전문연수> 13. CSS 스타일 속성 기본(5) 실습

'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글

'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역