출처: https://bumcrush.tistory.com/182 [맑음때때로 여름] 
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>유효성 검사</title>
</head>

<body>
    
    <form id="myform">
    
        <h1> 회원가입</h1>
        <hr>
        <table>
            <tr>
                <td><label for="uesrid">아이디(이메일)</label></td>
                <td><input type="text" name="userid" id="userid"></td>
            </tr>
            <tr>
                <td><label for="pw">비밀번호</label></td>
                <td><input type="password" name="pw" id="pw"></td>
            </tr>
            <tr>
                <td><label for="pw-check">비밀번호 번호 확인</label></td>
                <td><input type="password" name="pw-check" id="pw-check"></td>
            </tr>
            <tr>
                <td><label for="username">이름</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr> 
            <tr>
                <td></td>
                <td><input type="submit" value="회원가입">
                    <input type="reset" value="초기화"></td>
            </tr>
        
        
        </table>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>유효성 검사</title>
    
    <script>
    
        window.onload = function(){
            
            document.querySelector('#myform').onsubmit = function(){               
                var userid = document.querySelector('#userid');
                var pw = document.getElementById('pw');
                var pwcheck = document.getElementById('pw-check');
                var username = document.querySelector('#username');
                
                // 유효성 검사 1: 공백이 없어야 한다.
                if(userid.value.trim().length < 1){
                    alert ('id는 필수 항목입니다.');
                    userid.value='';
                    userid.focus(); //커서를 userid로 이동시키는 함수
                    return false;
                }
                
                if(pw.value.trim()<1){
                    alert('비밀번호는 필수항목입니다.');
                    pw.value='';
                    pw.focus();
                    return false;
                }
                
                // pw == pwcheck 이어야 한다.
                if(pwcheck.value.trim()<1 || pw.value!=pwcheck.value){
                    alert('비밀번호 확인이 일치하지 않습니다.');
                    pwcheck.value='';
                    pwcheck.focus();
                    return false;
                }
                
                 if(username.value.trim()<1){
                    alert('이름 항목은 필수항목입니다.');
                    username.value='';
                    username.focus();
                    return false;
                }
        };
            
        };
    
    </script>
</head>

<body>
    
    <form id="myform" action="http://www.naver.com">
    
        <h1> 회원가입</h1>
        <hr>
        <table>
            <tr>
                <td><label for="uesrid">아이디(이메일)</label></td>
                <td><input type="text" name="userid" id="userid"></td>
            </tr>
            <tr>
                <td><label for="pw">비밀번호</label></td>
                <td><input type="password" name="pw" id="pw"></td>
            </tr>
            <tr>
                <td><label for="pw-check">비밀번호 번호 확인</label></td>
                <td><input type="password" name="pw-check" id="pw-check"></td>
            </tr>
            <tr>
                <td><label for="username">이름</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr> 
            <tr>
                <td></td>
                <td><input type="submit" value="회원가입">
                    <input type="reset" value="초기화"></td>
            </tr>
        
        
        </table>
    </form>
</body>
</html>

 

다 입력하면 action = > naver로 가짐

 

 

'front-end > Javascript & jquery' 카테고리의 다른 글

[jquery] 기본  (0) 2020.12.02
[자바스크립트 ] 이벤트 삭제  (0) 2020.11.30
[자바스크립트] 이벤트 전달 / 막기 (bubbling) / stopPropagation  (0) 2020.11.30
[자바스크립트] 이벤트  (0) 2020.11.30
[자바스크립트] 문서객체의 스타일 조작  (0) 2020.11.30
[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30

클릭 이벤트 / this 키워드

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event</title>
</head>

<style>
    h1 {
        border: 1px solid #999;
    }
</style>

<script>
    
    window.onload = function(){
        
        // 캐스팅_변수선언
        var hearder = document.getElementById('header');
        
        // 클릭하면 Click hearder :)♡가 뜨는 onclick 이벤트 연결
        header.onclick = function(){
            alert('Click header :)♡ '+this.innerHTML); 
            // this > 이벤트가 발생한 header를 가리키고 있다 
            // 여기서 this.innerHTML는 C L I C K! 이다          
            
        // 이벤트 제거 > 한번 클릭하고 나면 창이 다시뜨지 않는다.
        header.onclick = null;
            
        }
        
    };
    
</script>

<body>

    <h1 id="header"> C L I C K ! </h1>

</body></html>

 

이벤트 강제실행

 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event</title>
</head>

<style>
    h1 {
        border: 1px solid #999;
    }
</style>

<script>
    
    window.onload = function(){
        
    
        
        // 캐스팅
        var btn1 = document.getElementById('btn1'); //버튼id
        var btn2 = document.getElementById('btn2');
        
        var cnt1 = document.getElementById('count-a');
        var cnt2 = document.getElementById('count-b');
        
        // btn 문서객체에 클릭이벤트 적용
        btn1.onclick = function(){
            // 클릭하면 숫자증가 
            cnt1.innerHTML = Number(cnt1.innerHTML)+1;
            // a를 누르면 b 버튼 카운트도 같이 증가하고 싶다면
            //btn2.onclick();
            
        };
        
        btn2.onclick = function(){     //inner나 text나 둘다상관없음
            cnt2.innerHTML = Number(cnt2.textContent)+1;            
        };
        
        
        
    };
    
</script>

<body>
        
    <button id="btn1">Button-A</button>
    <button id="btn2">Button-B</button>
    <h1>Button-A : <span id="count-a">0</span></h1>
    <h1>Button-B : <span id="count-b">0</span></h1>
    

</body></html>

 

인라인 이벤트 모델

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event</title>
</head>

<style>
    h1 {
        border: 1px solid #999;
    }
</style>

<script>
    
    function clickH1(){
        alert('인라인 방식으로 이벤트 처리');
    }
</script>

<body>
    
    <h1 onclick="clickH1();">인라인 방식의 이벤트 정의</h1>


</body></html>

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트 ] 이벤트 삭제  (0) 2020.11.30
[자바스크립트] 이벤트 전달 / 막기 (bubbling) / stopPropagation  (0) 2020.11.30
[자바스크립트] 유효성검사  (0) 2020.11.30
[자바스크립트] 문서객체의 스타일 조작  (0) 2020.11.30
[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30

문서 객체의 스타일 변경

- style 속성 사용
- getElementById ( ) 메서드로 문서 객체를 가져옴
- style 속성에 있는 border, color, fontFamily 속성을 지정
- CSS에 입력하는 것과 같은 형식으로 입력

 

<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {
            
            // 태그이름으로 문서객체 생성 > 배열로 반환
            var divs = document.getElementsByTagName('div'); // div 아래두개모두선택
            divs[0].innerHTML='By tagname - 0 ';
            divs[1].innerHTML='By tagname - 1 ';
            
            // style
            divs[0].style.color = 'pink';       

        };
    </script>

</head>

<body>

    <div id="header-1">1</div>
    <div id="header-2">2</div>

</body></html>




<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Window Object</title>

    <script>
        window.onload = function() {

            document.getElementById('go_naver_btn').onclick = function() {
                
                var alink = document.querySelector('a');
                alink.style.display='block';
                alink.style.backgroundColor='blue';
                alink.style.fontSize=32;
                alink.style.color='yellow';
                alink.style.fontWeight='bold';
                alink.style.textAlign='center';

            };         


        };
    </script>

</head>

<body>


    <a href="http://www.naver.com">네이버로 이동</a>

</body></html>

 

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 이벤트 전달 / 막기 (bubbling) / stopPropagation  (0) 2020.11.30
[자바스크립트] 유효성검사  (0) 2020.11.30
[자바스크립트] 이벤트  (0) 2020.11.30
[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30

HTML 태그를 자바스크립트로 가져오는 방법

 

<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {

            //html 문서의 요소를 문서 객체로 만들기
            // id 속성값으로 문서 객체 생성 : 캐스팅
            // document.getElementById('아이디속성값');

            var header1 = document.getElementById('header-1');
            var header2 = document.getElementById('header-2');

            // 문서 객체의 속성 변경
            header1.innerHTML = '<i>문서객체 생성</i>';
            header2.textContent = '<i>문서객체 생성</i>';


        };
    </script>

</head>

<body>

    <div id="header-1">1</div>
    <div id="header-2">2</div>

</body></html>

 

여러 개의 문서 객체 가져오는 방법

- document 객체의 getElementById( )메서드는 한 번에 한 가지 문서 객체만 가져올 수 있음
- 아래 메서드를 이용해서 여러 개의 객체를 가져올 수 있음

 

getElementsByName(name) : 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져온다.

getElementsByTagName(tagname) : tagName과 일치하는 문서 객체를 배열로 가져온다.

 

<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {
            
            // 태그이름으로 문서객체 생성 > 배열로 반환
            var divs = document.getElementsByTagName('div'); // div 아래두개모두선택
            divs[0].innerHTML='By tagname - 0 ';
            divs[1].innerHTML='By tagname - 1 ';

        };
    </script>

</head>

<body>

    <div id="header-1">1</div>
    <div id="header-2">2</div>

</body></html>

 

HTML 5에서 추가된 메서드

querySelector / querySelectorAll 예제1)

<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {
			// CSS의 선택자로 선택할수 있는 메소드
			
            
            var div1 = document.querySelector('div'); // 가장 첫번째거 가져옴.
            alert(div1.innerHTML) // 1
            
            var divs = document.querySelectorAll('div');
            alert(divs[0].innerHTML+' : querySelectorAll'); // 1 : que~


        };
    </script>

</head>

<body>

    <div id="header-1">1</div>
    <div id="header-2">2</div>

</body></html>

 

querySelector / querySelectorAll 예제2)

<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {


            var input = document.querySelector('input[type=button]');
            alert(input.value);

            var input2 = document.querySelector('input[type=text]');
            alert(input2.value);

        };
    </script>

</head>

<body>

    <input type="button" value="네이버로 이동" id="go_naver_btn">
    <input type="text" value="텍스트">

</body></html>

 

 

querySelector / querySelectorAll 예제3)

> 유효성 검사

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Window Object</title>

    <script>

        window.onload = function() {
            document.getElementById('go_naver_btn').onclick = function() {

                var userid = document.querySelector('#userid');

                var uid = userid.value;

                if (uid.length < 1) {
                    alert('아이디는 필수 입력항목입니다.');
                } else {
                    alert('사용자가 입력한 아이디는 ' + userid.value + '입니다.');
                }

            };

        };
    </script>
    <style>

    </style>

</head>

<body>

    <input type="text" value="test" id="userid">
    <br>
    <input type="button" value="확인" id="go_naver_btn">



</body></html>

 

 

 

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 유효성검사  (0) 2020.11.30
[자바스크립트] 이벤트  (0) 2020.11.30
[자바스크립트] 문서객체의 스타일 조작  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30
[자바스크립트] json /제이슨  (0) 2020.11.27

문서 객체 생성


정적으로 문서 객체를 생성 : 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성
- 동적으로 문서 객체를 생성 : 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성

 

createElement(tagName) > 요소 노드를 생성

createTextNode(text)      > 텍스트 노드 생성

appendchild(node))        > 객체에 노드를 연결

 

텍스트 노드를 갖는 문서 객체

＊<h1></h1>이 body에 생성됨 (createElement)

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>
    
    <script>
    
    
        window.onload = function(){
            
            // 태그 요소 생성
            var header = document.createElement('h1');
            
            // 텍스트 요소 생성
            
            // 태그 요소에 텍스트 요소 추가
            
            // 새로운 문서객체를  body 요소에 추가
            document.body.appendChild(header);
        }
    </script>
    
</head>

<body>
    
</body>
</html>

 

 

 

 

＊<h1></h1> 사이에 하이! 뽀선뽀선!을 넣어줌 (createtextNode)

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>
    
    <script>
    
    
        window.onload = function(){
            
            // 태그 요소 생성
            var header = document.createElement('h1');
            
            // 텍스트 요소 생성
            var textNode = document.createTextNode('하이! 뽀선뽀선!');
            // 태그 요소에 텍스트 요소 추가
            header.appendChild(textNode);
            
            // 새로운 문서객체를  body 요소에 추가
            document.body.appendChild(header);
        }
    </script>
    
</head>

<body>
    
</body>
</html>

 

 

 

텍스트가 없는 요소 : img

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {


            // 텍스트가 없는 요소 : img
            var img = document.createElement('img');
            document.body.appendChild(img);
        }
    </script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {


            // 텍스트가 없는 요소 : img
            var img = document.createElement('img');
            img.src = 'tae6.jpg';
            img.width = 300; //px
            img.height = 300;
            document.body.appendChild(img);
        }
    </script>

</head>

<body>

</body>

</html>

 

두개 합친 것! TEST

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {
                        
            // 태그 요소 생성
            var header = document.createElement('h1');
            
            // 텍스트 요소 생성
            var textNode = document.createTextNode('하이! 뽀선뽀선!');
            // 태그 요소에 텍스트 요소 추가
            header.appendChild(textNode);
            
            // 새로운 문서객체를  body 요소에 추가
            document.body.appendChild(header);


            // 텍스트가 없는 요소 : img
            var img = document.createElement('img');
            img.src = 'tae6.jpg';
            img.width = 300; //px
            img.height = 300;
            document.body.appendChild(img);
            
            //밑에 있는 h1에 추가한다
            document.getElementById('pposeon').appendChild(img);
        }
    </script>

</head>

<body>
    
    <h1 id="pposeon">새로운 문서객체를 추가합니다.</h1>

</body>

</html>

// 하이 뽀선뽀선은 바디에 추가된것 > document.body.appendChild(header);

 

 

 

텍스트 노드를 갖지 않는 문서 객체 / 속성 지정

 

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서객체 동적 생성</title>

    <script>
        window.onload = function() {
            var pposeon = document.getElementById('pposeon');
            console.log('h1#pposeon id->', pposeon.getAttribute('data-brackets-id')); //1087

            var link = document.getElementById('link_naver');

            // text 노드 생성 
            //var str = document.createTextNode('-' + link.getAttribute('href')); // 아래랑 같음
            var str = document.createTextNode('-' + link.href);
            link.appendChild(str);

            
            
          	// 속성 지정
            var img1 = document.createElement('img');
            img1.setAttribute('src', 'tae6.jpg');
            img1.setAttribute('width', 200);
            img1.setAttribute('height', 200);
            document.body.appendChild(img1);
            
            

        };
    </script>

</head>

<body>

    <h1 id="pposeon">새로운 문서객체를 추가합니다.</h1>

    <a href="http://www.naver.com" id="link_naver"> 네이버 </a>

</body></html>

 

 

innerHTML과 textContent의 차이.

            pposeon.innerHTML = '<i>안녕하세요</i>';
            alert(pposeon.innerHTML);
            alert(pposeon.textContent);
            // html 인식이 아닌 순수한 문자로 인식
            pposeon.textContent = '<i>안녕하세요</i>';

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 이벤트  (0) 2020.11.30
[자바스크립트] 문서객체의 스타일 조작  (0) 2020.11.30
[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30
[자바스크립트] json /제이슨  (0) 2020.11.27
[자바스크립트] 객체와 배열  (0) 2020.11.27

window 객체의 로드 완료
- window 객체 로드가 완료되는 때는?

-> HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드가 완료되는 순간

 onload를 사용한 경우

1) [ 1 ] 창뜨고 

2) 변경1 뜨면서 [ 2 ] 창 뜨고

3) 변경2가 출력

// onload가 아래쪽 body를 먼저 실행시켜준다.

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실행순서</title>

    <script>
    window.onload = function(){
        alert(2);
        var h1 = document.getElementById('h1');
        console.log('h1->', typeof(h1));
        h1.innerHTML = '변경2';
      };
    </script>

</head>

<body>

    <h1 id="h1">h1 태그가 생성 되었습니다.</h1>
    <script>
        alert(1);
        var h1 = document.getElementById('h1');
        console.log('h1!!!!!!->', typeof(h1));
        h1.innerHTML = '변경1';
    </script>

</body></html>

 

onload를 사용하지 않은 경우

1) [ 2 ] 창 뜨고

2) [ 1 ] 창 뜨고

3) 변경1

// 위에서부터 순서대로 실행된다 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실행순서</title>

    <script>
//    window.onload = function(){
        alert(2);
        var h1 = document.getElementById('h1');
        console.log('h1->', typeof(h1));
        h1.innerHTML = '변경2';
//      };
    </script>

</head>

<body>

    <h1 id="h1">h1 태그가 생성 되었습니다.</h1>
    <script>
        alert(1);
        var h1 = document.getElementById('h1');
        console.log('h1!!!!!!->', typeof(h1));
        h1.innerHTML = '변경1';
    </script>

</body></html>

onload가 없어서 h1을 불러오지 못해서(?) 에러남!

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 문서객체의 스타일 조작  (0) 2020.11.30
[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30
[자바스크립트] json /제이슨  (0) 2020.11.27
[자바스크립트] 객체와 배열  (0) 2020.11.27
[자바스크립트] 함수 / settimeout / setinterval  (0) 2020.11.27

 

1) 윈도우 객체확인

 

        var output = '';
        for (var key in window) {
            output += '[' + key + '] : ' + window[key] + '<br><br>';

        }

        window.onload = function() {
            document.body.innerHTML = output;
        };
        //console.log(window);

 

2) 네이버 창이 정해진 사이즈로 열리고, 글씨를 클릭하면 닫힌다.

open(URL, name, features, replace)

 

        window.onload = function() {
            //윈도우생성
            window.open();
            window.open('http://naver.com', 'newWin',
                'width=600, height=300', true);
            var child = window.open('', 'child', 'width=300, height=200');

            child.document.write('<h1 onclick="self.close();">From Parent window</h1>');
        };

 

3) 여러가지 객체 확인

        window.onload = function() {
            // 스크린객체
            // f12 누르고 보면 가로세로 길이 이런거나옴
            console.log(screen);
            // 로케이션 객체 확인
            console.log(location);           
            // 네비게이터 객체 확인
            console.log(navigator);
    
        };

 

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] json /제이슨  (0) 2020.11.27
[자바스크립트] 객체와 배열  (0) 2020.11.27
[자바스크립트] 함수 / settimeout / setinterval  (0) 2020.11.27
[자바스크립트] 기본  (0) 2020.11.27 
# chapter08_02
# 파이썬 외장 (External)함ㅅ
# 실제 프로그램 개발 중 자주 사용
# 종류 : sys. pickle, shutil, temfile, time, randome 등

# 예제1
import sys
print(sys.argv) #sys.argv라고 구글에 검색해보면 좋다.


# 예제2 (강제종료)
# sys.exit()

# 예제3 (파이선 패키지 위치)
print(sys.path)


#pickle : 객체 파일 읽기, 쓰기
import pickle

# 예제4(쓰기)

f = open("test.obj", 'wb')
obj = {1:'python',2:'study', 3:'basic'}
pickle.dump(obj,f)
f.close()


# 예제5(열기)

f = open('test.obj', 'rb')
data = pickle.load(f)
print(data, type(data))
f.close()


# os : 환경변수, 디렉토리(파일) 처리 관련, 운영체제 작업 관련
# mkdir, rmdir(비어있으면 삭제), rename,

# 예제6
import os
print(os.environ)
print(os.environ["USERNAME"])
print(os.environ["ATOM_HOME"])

# 예제7 (현재 경로)
print(os.getcwd())


# time : 시간 관련 처리.
import time

# 예제8
print(time.time())

# 예제9 형태변환
print(time.localtime(time.time()))

# 예제10 (간단 표현)
print(time.ctime())

# 예제11 (형식 표현)
print(time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time())))

# 예제12 (시간 간격 발생)
# for i in range(5) :
#     print(i)
#     time.sleep(1) #1초마다 실행하겠다는 뜻

# random : 난수 리턴
import random

# 예제13
print(random.random()) #0~1 실수

# 예제14
print(random.randint(1,45))
print(random.randrange(1,45))

# 예제15(섞기)
d=[1,2,3,4,5]
random.shuffle(d)
print(d)

# 예제16 (무작위 선택)
c = random.choice(d)
print(c)

# webbrowser : 본인 os의 웹 브라우저 실행
import webbrowser

webbrowser.open("http://naver.com")
webbrowser.open_new("http://naver.com")

'python_basic' 카테고리의 다른 글

[파이썬] beautifulsoup / flask 설치하기  (0) 2021.02.09
[파이썬] csv 파일쓰기 / 읽기  (0) 2020.11.30
[파이썬] 파일읽기 / 쓰기  (0) 2020.11.30
[파이썬] 내장함수  (0) 2020.11.30
[파이썬] 예외처리 Exception / try - except - else - finally  (0) 2020.11.30
[파이썬] 패키지 / init  (0) 2020.11.23
[파이썬] 모듈  (0) 2020.11.23

docs.python.org/ko/3.9/library/functions.html

 

내장 함수 — Python 3.9.1rc1 문서

내장 함수 파이썬 인터프리터에는 항상 사용할 수 있는 많은 함수와 형이 내장되어 있습니다. 여기에서 알파벳 순으로 나열합니다. abs(x) 숫자의 절댓값을 돌려줍니다. 인자는 정수, 실수 또는 __

docs.python.org

 

# Chapter08-1
# 파이썬 내장(Built-in) 함수
# 자주 사용하는 함수 위주로 실습
# 사용하다보면 자연스럽게 숙달
# str(), int(), tuple() 형변환 이미 학습

# 절대값
# abs()

print(abs(-3))

# all, any : iterable 요소 검사(참, 거짓)
print(all([1,2,3])) # and
print(any([1,2,0])) # or

# chr : 아스키 -> 문자 , ord : 문자 -> 아스키

print(chr(67))
print(ord('C'))

# enumerate : 인덱스 + Iterable 객체 생성
for i, name in enumerate(['abc', 'bcd', 'efg']):
    print(i, name)


#  filter : 반복가능한 객체 요소를 지정한 함수 조건에 맞는 값 추출

def conv_pos(x):
    return abs(x) > 2
    
print(list(filter(conv_pos, [1, -3, 2, 0, -5, 6])))
print(list(filter(lambda x: abs(x) > 2, [1, -3, 2, 0, -5, 6])))

# id : 객체의 주소값(레퍼런스) 반환

print(id(int(5)))
print(id(4))

# len : 요소의 길이 반환
print(len('abcdefg'))
print(len([1,2,3,4,5,6,7]))

# max, min : 최대값, 최소값

print(max([1,2,3]))
print(max('python study'))
print(min([1,2,3]))
print(min('python study'))

# map : 반복가능한 객체 요소를 지정한 함수 실행 후 추출
def conv_abs(x):
    return abs(x)
    
print(list(map(conv_abs,[1,-3,2,0,-5,6])))
print(list(map(lambda x:abs(x),[1,-3,2,0,-5,6])))

# pow : 제곱값 반환
print(pow(2,10))

# range : 반복가능한 객체(Iterable) 반환
print(list(range(1,10,2))) # 1 3 5 7 9
print(list(range(0,-15,-1))) # 0 ~ -14

# round : 반올림

print(round(6.5781, 2))
print(round(5.6))

# sorted : 반복가능한 객체(Iterable) 정렬 후 반환 

print(sorted([6,7,4,3,1,2]))
a = sorted([6,7,4,3,1,2])
print(a)
print(sorted(['p','y','t','h','o','n']))


# sum : 반복가능한 객체(Iterable) 합 반환
print(sum([6,7,8,9,10]))
print(sum(range(1,101)))

# type : 자료형 확인

print(type(3))
print(type({}))
print(type(()))
print(type([]))

# zip : 반복가능한 객체(Iterable)의 요소를 묶어서 반환

print(list(zip([10,20,30],[40,50,777]))) #짝이 맞지 않으면 반환되지않음 3:2 면 2개만.
print(type(list(zip([10,20,30],[40,50,777]))[0]))

'python_basic' 카테고리의 다른 글

[파이썬] csv 파일쓰기 / 읽기  (0) 2020.11.30
[파이썬] 파일읽기 / 쓰기  (0) 2020.11.30
[파이썬] 외장함수  (0) 2020.11.30
[파이썬] 예외처리 Exception / try - except - else - finally  (0) 2020.11.30
[파이썬] 패키지 / init  (0) 2020.11.23
[파이썬] 모듈  (0) 2020.11.23
[파이썬] 클래스  (0) 2020.11.23 
# chapter07-01
# 파이썬예외처리의 이해
# 예외종류
# syntax, type, name, index, value, key..error
# 문법적으로는 틀리지 않았지만, 코드실행 프로세스(단계) 발생하는 예외도 중요

# 1. 예외는 반드시 처리
# 2. 로그는 반드시 남긴다.
# 3. 예외는 던져진다.
# 4. 예외 무시.


# syntaxError / 문법 오류.
# print('error) / print('error'))


# nameError / 참조 없음
# a=10
# b=15
# pring(c)

# ZeroDivisionError
# print(100/0)

#IndexError
x=[50,70,90]
print(x[1])
# print(x[4])


# KeyError
dic={'name' :'Lee' , 'age' : 41, 'city':'busan'}
# print(dic['hobby'])

# 예외가 없는 것을 가정하고 프로그램을 작성 > 런타임 예외 발생 시 예외 처리 권장(EAFP)


# AttributeError : 모듈, 클래스에 있는 잘못된 속성 사용 예외
import time
# print(time.time2()) time2는 없다


# ValueError

x = [10,50,90]
x.remove(50)
print(x)
# x.remove(200)

# FileNotFoundError
# f = open('text.txt') 파일 없음 에러.


# TypeError : 자료형에 맞지 않는 연산 수행할 경우
x = [1,2]
y = (1,2)
z = 'test'
# print(x+y)
print(x+list(y))


# 예외처리 기본
# try : 에러가 발생할 가능성이 있는 코드 실행
# except 에러명1 : 여러개 가능
# except 에러명2 :
# else : try 블록의 에러가 없을 경우 실행
# finally : 항상 실행.


name = ['kim', 'lee', 'park']

# 예제1

try :
    z = 'kim' #'Cho' 예외처리가 된다.
    x = name.index(z)
    print('{} Found it {} in name'.format(z,x+1))
except   ValueError :
    print('not fount it = occurred ValueError!')
else :
    print('ok! else.')

print()


# 예제2

try :
    z = 'kim' #'Cho' 예외처리가 된다.
    x = name.index(z)
    print('{} Found it {} in name'.format(z,x+1))
except : # except Exception : 와 같다.
    print('not fount it = occurred')
else :
    print('ok! else.')

print()


# 예제3

try :
    z = 'cho' #'Cho' 예외처리가 된다.
    x = name.index(z)
    print('{} Found it {} in name'.format(z,x+1))
except Exception as e :
    print(e) #'cho' is not in list
    print('not fount it = occurred')
else :
    print('ok! else.')
finally :
    print('ok! finally!')

print()


# 예제4
# 에외 발생 : raise
# raise 키워드로 예외 직접 발생

try :
    a = 'park'
    if a == 'kim' :
        print('Ok! pass')
    else :
        raise ValueError #강제로 발생시키는에러.
except ValueError :
    print('Occurred! Exception!')
else :
    print('OK! else.')

'python_basic' 카테고리의 다른 글

[파이썬] 파일읽기 / 쓰기  (0) 2020.11.30
[파이썬] 외장함수  (0) 2020.11.30
[파이썬] 내장함수  (0) 2020.11.30
[파이썬] 패키지 / init  (0) 2020.11.23
[파이썬] 모듈  (0) 2020.11.23
[파이썬] 클래스  (0) 2020.11.23
[파이썬] 사용자로부터 입력받기 / input  (0) 2020.11.23

• JSON 데이터는 이름과 값의 쌍으로 이루어집니다.
• JSON 데이터는 쉼표(,)로 나열됩니다.
• 객체(object)는 중괄호({})로 둘러쌓아 표현합니다.
• 배열(array)은 대괄호([])로 둘러쌓아 표현합니다.

 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json</title>
    
    
    <script>
    
        var book = {
            name:'first java',
            price : 25000,
            publisher : 'FIRST'            
        };
        
        
        // 자바 스크립트의 오브젝트를 > String(JSON규격)
        // JSON.stringify(자바스크립트 오브젝트) : String으로 반환
        
        var jsonStr = JSON.stringify(book);
        
        window.onload = function(){
            document.getElementById('view').innerHTML=jsonStr;
            
            var str= '{"name":"first java","price":25000,"publisher":"FIRST"}';
            
            // json String > 자바 오브젝트
            var obj = JSON.parse(str);
            console.log(typeof(obj));
            console.log(obj);
            
        };
        
    
    </script>
</head>

<body>
    
    
    <h1 id="view"></h1>
    
</body>
</html>

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30
[자바스크립트] 객체와 배열  (0) 2020.11.27
[자바스크립트] 함수 / settimeout / setinterval  (0) 2020.11.27
[자바스크립트] 기본  (0) 2020.11.27 
       // 자바스크립트의 객체 생성
        // {}  : 중괄호를 이용해서 쉽게 객체 생성
        var obj = {}; // obj 이름의 객체를 생성
        //console.log('typeof(obj) =>',typeof(obj));

        // 객체의 속성 정의
        // 속성이름:속성값, 속성이름:속성값
        var member = {
            memberId: 'cool',
            memberName: '시원한',
            age: 15,
            chk: false,
            books: ['자바의정석', '퍼스트자바', '웹프로그래밍'],
            hello: function() {
                alert('안녕하세요');
            }
        };


        // 객체에 참조, 호출
        // 객체변수.속성이름
        // 객체변수.메소드이름()
        //console.log('회원의 아이디', member.memberId);
        //member.hello();

        //객체에 속성, 메소드 추가
        member.study = function() {
            alert(this.books[1] + '를 공부합니다.');
        };

        //member.study();

        member.nicName = 'COOL';

        // 속성의 삭제 : delete
        delete member.nicName;
       ///////////////////////////////////////

        // 학생들의 국어 영어 수학 점수를 관리하는 프로그램을 만들자.
        // 데이터는 학생 이름, 국어점수, 영어점수, 수학점수 -> 객체
        // 객체를 저장하는 배열

        // 학생 객체 구조
        var student = {
            name: 'KING',
            kor: 100,
            eng: 100,
            math: 100,
            sum: function() {
                return this.kor + this.eng + this.math;
            },
            avg: function() {
                return this.sum() / 3;
            }
        };

        // 학생들을 저장하는 배열을 생성
        var students = [];
        
        // 학생 데이터를 저장하는 Student 생성자 함수 정의        
        function Student(name, kor, eng, math) {
            this.name = name;
            this.kor = kor;
            this.eng = eng;
            this.math = math;
            };
            
            
        // 생성자 함수의 공통 속성은 prototype 속성으로 관리할수 있다.
        // 공통속성으로 정의하면 불필요한 메모리를 쓰지 않는다.
        // prototype 정의 : sum, avg, toString
        Student.prototype.sum = function() {
            return this.kor + this.eng + this.math;
        };
        
        Student.prototype.avg = function() {
            return this.sum() / 3;
        };
        
        Student.prototype.toString = function() {
            html = '   <tr>';
            html += '       <td>' + this.name + '</td>';
            html += '       <td>' + this.kor + '</td>';
            html += '       <td>' + this.eng + '</td>';
            html += '       <td>' + this.math + '</td>';
            html += '       <td>' + this.sum() + '</td>';
            html += '       <td>' + Math.floor(this.avg()) + '</td>';
            html += '   </tr>';

            return html;
        };             
        

        // 객체 생성
        var st1 = new Student('cool', 10, 20, 30);
        //console.log('typeof(st1)', typeof(st1));
        //console.log('st1', st1);
        
        // 배열에 요소 추가
        students.push(new Student('A01', 80, 80, 80));
        students.push(new Student('A02', 30, 100, 100));
        students.push(new Student('A03', 50, 80, 70));
        students.push(new Student('A04', 60, 60, 60));
        students.push(new Student('A05', 70, 50, 50));
        students.push(new Student('A06', 80, 80, 80));
        students.push(new Student('A07', 90, 90, 90));
        students.push(new Student('A08', 100, 100, 90));
        students.push(new Student('A09', 40, 80, 80));
        students.push(new Student('A10', 80, 80, 70));

        
        
        students.sort(function(left, right){
            return right.sum()-left.sum();
        });
        
        students = students.slice(0,3);
        
        var html = '<table border=1>';
        html += '   <tr>';
        html += '       <th>이름</th>';
        html += '       <th>국어</th>';
        html += '       <th>영어</th>';
        html += '       <th>수학</th>';
        html += '       <th>총점</th>';
        html += '       <th>평균</th>';
        html += '   </tr>';

        for (var i in students) {            
            html += students[i].toString();
        };

        html += '</table>';
        
   

        window.onload = function() {
            document.body.innerHTML = html;
        };
        
        
        
    </script>
</head>

<body>

</body></html>

        // 생성자 함수 
        function Rectangle(w,h){
            //this.width = w;
            //this.height = h;
            var width = w;
            var height = h;
            
            this.getWidth = function(){
                return width;
            }
            this.getHeight = function(){
                return height;
            }
            this.setWidth = function(w){
                width=w;
            }
            this.setHeight = function(h){
                height=h;
            }
        }
        
        var rec = new Rectangle(10,20);
        
        console.log('rec', rec.getWidth());
        console.log('rec', rec.getHeight());
        
        rec.setHeight(100);
        rec.setWidth(200);
        
        console.log('rec', rec.getWidth());
        console.log('rec', rec.getHeight());

        
        var arr = [11,78, 574, 1, 100];
        //arr.sort();
        
        /*arr.sort(function(left, right){
            return left-right;
        });*/
        
        arr.sort(function(left, right){
            return right-left;
        });
        
        
        console.log(arr);

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30
[자바스크립트] json /제이슨  (0) 2020.11.27
[자바스크립트] 함수 / settimeout / setinterval  (0) 2020.11.27
[자바스크립트] 기본  (0) 2020.11.27

- 익명함수 : function ( ) {} 형태는 함수이나 이름이 없음
- 선언적 함수 : 이름이 있는 함수
- 함수 호출 : 뒤에 괄호를 열고 닫음으로 코드를 실행

       // 함수 정의
        /*
            function 함수이름 (매개변수,...){
                // 데이터처리....
                return 데이터;
            }
        */
        
        function fn(){
            alert('이름을 명시적으로 정의한 함수');
        }
        
        // 변수에 함수를 정의하는 방식에서는 익명함수 형태로 정의
        var func = function(){
            alert('변수 func에 정의한 함수');
        }
        
        // 함수 호출
        fn();
        func();
        alert(typeof(fn)+', '+typeof(func));
        
        // 매개변수가 있는 함수        
        function add(num1, num2){
            var result = num1 + num2;
            return result;
        }
        
        alert(add(10,20));
        
        
        function sumAll(){            
            var result = 0;            
            for(var i=0; i< arguments.length; i++){
                result += arguments[i];
            }
            
            return result;
            
        }
        
        alert(sumAll(1,2,3,4,5,6,7,8,9,10));
        
        function callTenTimes(callback){
            for(var i=0; i<10; i++){
                callback();
            }
        }  
        
        function callTimes(callback, num){
            
            for(var i=0; i<num; i++){
                callback();
            }
            
        }
        
        var f1 = function(){
            console.log('callback function call!!');
        }
        
        function f2(){
            console.log('f2 call!!');
        }
        // setInterval() : 특정 간격마다 함수를 실행
        var intervalId = setInterval(function(){
            var html = '<h1>'+new Date()+'</h1>';
            document.body.innerHTML=html;
        }, 1000);
        
        var jsCode = 'var num3=10;';
        jsCode += 'alert(num3);';
        
        
        // setTimeout() : 특정 시간이 지나면 함수를 한번 실행
        setTimeout(function(){
            clearInterval(intervalId);
            alert(jsCode);
            eval(jsCode);
        },10*1000);

 

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30
[자바스크립트] json /제이슨  (0) 2020.11.27
[자바스크립트] 객체와 배열  (0) 2020.11.27
[자바스크립트] 기본  (0) 2020.11.27 
    
        alert(1);
        alert('"안녕하세요"')
        console.log('1+2=', 1+2);
        console.log(' "김" == "한" ==>', '김'=='한');
        console.log(' "김" > "한" ==>', '김'>'한')
        console.log(' "김" < "한" ==>', '김'<'한')
        
        console.log(' true > fasle ==> ', true>false);
        
        var num = 100;
        console.log('num =>', num);
        
        var number = 1000; // 숫자
        var str = 'String'; // 문자
        var bool = false; // 논리값
        var func = function(){}; // 함수
        var obj = {}; // 객체
        
        console.log('변수 타입 >' , typeof(number));
        console.log('변수 타입 >' , typeof(str));
        console.log('변수 타입 >' , typeof(obj));
        
       if(typeof(number)=='number'){
            alert('변수 number는 number타입입니다');
        }
       
        
        var food = '된찌';
        var food = '김찌';
        
        console.log(food);
        
        /* confirm : 사용자의 의사표현 묻는 함수 
        yes/no > true/false     */
        
       var check = confirm('삭제하시겠습니까?');
        console.log('check=',check);
        
        /*prompt : 사용자의 데이터 입력을 받는 함수*/
        var userData =prompt('숫자를 입력해주세요.', 100);
       
      var age = Number(userData);
        
        console.log('userDate >', userData+
                   ':'+ typeof(userData));
        console.log('age >', age + ':'+ typeof(age));
    
        if(age>19){
            alert('안녕하세요!')
        }else{
            alert('성인만 가능!');
        }*/
        
        
        var str = String(true);
        console.log('str의타입은 ',typeof(str));
        
        
       /* 논리값으로 변환하는 함수 : boolea*/
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(''));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        
        console.log(0==false); // true
        console.log(undefined==false); // NaN null un~은 false
        
        console.log(!0); //true
        console.log(!!0); //false
        
        console.log('123'== 123); // true
        console.log('123'=== 123); //자료형은 다르므로 false
        
        
        /* || 논리값이 false일때만 실행*/
        (1<0) || console.log('OK');
        (1>0) || console.log('KO') ; // 참이라 실행X
        
        
        
        /* && 논리값이 true일때만 실행*/
        (1<0) && console.log('OK'); // 거짓이라 실행X
        (1>0) && console.log('KO'); 
        
        /*
        자바스크립트의 배열
        대괄호( [ ] )로 생성 가능
        모든 타입이 들어갈 수 있다.*/
        
        var arr=[];
        var arr=[123,'hello',{}, function(){}, true ];
        
        console.log('arr>', typeof(arr));
        console.log('arr =>', arr);
        
        
        /*for 반복문을 이용해서 일괄 처리*/
           for(var i=0; i<arr.length; i++){
               console.log(String(i),arr[i]);
           }
        
        
        /* for in을 이용한 반복문 */
        for ( var i in arr){
            console.log(i, arr[i])
            
        }
        
    </script>
</head>

<body>
    
    <script>
        
        var name1='카카오';
        var name2='네이버';
        
        // alert(2);
        var htmlstr = '';
        htmlstr +='<ul class="no_style">\n';
        htmlstr +='     <li>'+name1+ '</li>\n';
        htmlstr +='     <li>'+name2+'</li>\n';
        htmlstr +='</ul>';
        
        console.log(htmlstr);
        
        /*document.body.innerHTML = '<h1>안녕</h1>';*/
        document.body.innerHTML = htmlstr;
    
    </script>
    
</body>
</html>

<script>
    // alert(3);
    
</script>

'front-end > Javascript & jquery' 카테고리의 다른 글

[자바스크립트] 문서 객체 가져오기 / getElementById / querySelector  (0) 2020.11.30
[자바스크립트] 문서객체 만들기 / createElement / createTextNode  (0) 2020.11.30
[자바스크립트] onload  (0) 2020.11.30
[자바스크립트] 윈도우 객체  (0) 2020.11.30
[자바스크립트] json /제이슨  (0) 2020.11.27
[자바스크립트] 객체와 배열  (0) 2020.11.27
[자바스크립트] 함수 / settimeout / setinterval  (0) 2020.11.27

static (기본값) :위치를 지정하지 않을 때 사용한다.

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

 

참고링크 : 

 

[css] position (static, relative, absolute, fixed) 의 속성

[css] position (static, relative, absolute, fixed) 의 속성 position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다. position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(..

electronic-moongchi.tistory.com

 

1) z-position / 숫자가 클수록 앞에 위치한다.

 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POSITION 속성 </title>
</head>
    
    <style>
        div.box{
            width : 100px;
            height: 100px;
            border : 10px solid black;
            text-align: center;
            line-height: 100px;
            font-size : 30px;
            color : wheat;
            /*포지션 앱솔루트*/
            position: absolute;
            margin : 0;
        }
        
        #box1{
            background-image: url(image/tae1.jpg);
            background-size : 100%;
            /*위치설정*/
            left : 50px;
            top : 50px;
            /*숫자가 클수록 앞에온다*/
            z-index: 2; 
        }
          
        #box2{
            background-image: url(image/tae1.jpg);
            background-size : 100%;
            left : 100px;
            top: 100px;
            z-index: 3;
        }
          
        #box3{
            background-image: url(image/tae1.jpg);
            background-size : 100%;
            left : 150px;
            top : 150px;
            z-index: 1;
        }
        
        #box4{
            background-image : url(image/tae1.jpg);
            background-size : 100%;
            right : 50px;
            bottom : 50px;
        }
        
        
    </style>

<body>
    
    <div id="box1" class="box">1</div>
    <div id="box2" class="box">2</div>
    <div id="box3" class="box">3</div>
    <div id="box4" class="box">4</div>
    
</body>
</html>

 

 

2) 

 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POSITION 속성 </title>
</head>
    
    <style>
        div.box{
            width : 100px;
            height: 100px;
            border : 5px solid black;
            text-align: center;
            line-height: 100px;
            font-size : 30px;
            color : wheat;
            position: absolute;
            margin : 0;
        }
        
        #box1{
            background-image: url(image/tae3.jpg);
            background-size : 100%;
            /*위치설정*/
            left : 10px;
            top : 10px;
        }
          
        #box2{
            background-image: url(image/tae2.jpg);
            background-size : 100%;
            left : 20px;
            top: 20px;          
        }
          
        #box3{
            background-image: url(image/tae4.jpg);
            background-size : 100%;
            left : 30px;
            top : 30px;    
        }
        
        #wrap{
            position:relative;
            height: 50px;
            width : 300px;
            border: 1px solid black;
            overflow: auto;
        }
        
        
    </style>

<body>
    
    <h1> H E A D E R</h1>
    
    <div id="wrap">
    <div id="box1" class="box">1</div>
    <div id="box2" class="box">2</div>
    <div id="box3" class="box">3</div>
    </div>
    
    <h1>F O O T E R</h1>
    
</body>
</html>

 

 

3)

 

 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문제풀기</title>
    
    <style>
        div.sq{
            width: 100px;
            height: 100px;
            border : 1px solid grey;
            position: absolute;
            margin : 0;
            border-radius: 100px;
        }
        
        #sq1 {
            background-color : pink;
            background-image : url(image/tae8.gif);
            background-size : 130%;
            left : 10px;
            top : 10px;
        }
        #sq2 {
            background-image : url(image/tae9.gif);
            background-size : 130%;
            right : 10px;
            top : 10px;
        }
        #sq3 {
            background-image : url(image/tae10.gif);
            background-size : 130%;
            right:10px;
            bottom:10px;
        }
        #sq4 {
            background-image : url(image/tae11.gif);
            background-size : 100%;
            left:10px;
            bottom:10px;
        }
    </style>
    
</head>

<body>
    
    
    <div id="sq1" class=sq></div>
    <div id="sq2" class=sq></div>
    <div id="sq3" class=sq></div>
    <div id="sq4" class=sq></div>
    
</body>
</html>

'front-end > HTML & CSS' 카테고리의 다른 글

[css] button / 버튼만들기  (0) 2020.11.24
[css] background  (0) 2020.11.24
[css] attribute / 속성  (0) 2020.11.24
[css] 선택자  (0) 2020.11.23
[html5] table  (0) 2020.11.23
[html5] select  (0) 2020.11.23
[html5] form tag / input type  (0) 2020.11.23 

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css를 이용한 버튼</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">
</head>
    <style>
    
        &{
            margin:0;
            padding:0;
        }
        
        
        #btn{
            background-color: orange;
            width: 300px;
            height: 200px;            
            margin: 100px;
            border : 20px solid #EEEEEE;
            border-radius: 30px;
            text-align: center;
            line-height: 200px;
        }
        
        #btn>a{
            /*block으로바뀌어서 hover*/
            display: block;
            border-radius: 10px;
            font-family: 'Nerko One', cursive;
            font-size : 6em;
            font-weight: 500;
            text-decoration: none;
            color : #FFFFFF;
            /*font-style: italic*/
        }
        
        #btn>a:hover{
            background-color: darkgreen;
            color : green;
            background-image: url(image/tae8.gif);  
            background-size : 100%;
    </style>

<body>
    
    <div id="btn">
        <a>TAE</a>
    </div>
    
</body>
</html>

 

'front-end > HTML & CSS' 카테고리의 다른 글

[css] position  (0) 2020.11.24
[css] background  (0) 2020.11.24
[css] attribute / 속성  (0) 2020.11.24
[css] 선택자  (0) 2020.11.23
[html5] table  (0) 2020.11.23
[html5] select  (0) 2020.11.23
[html5] form tag / input type  (0) 2020.11.23
tag 비고
bg-imag : url(); 배경에 배경사진 넣기
bg-repeat 배경화면 사진 반복 여부 / no-repeat
position 포지션 / 위치 정해주기
attachment 배경화면 고정하기
size 사이즈 조절하기 contain(안으로)
color 색깔
    SIZE : 
  • auto : 이미지 크기를 유지합니다.
  • length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다. 백분율을 사용할 수도 있습니다.
  • cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.
  • contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background image</title>
</head>

    <style>
    
        body{
            background-image: url(image/tae1.jpg);
            background-size : 200px;
            background-repeat: no-repeat;
            background-position: bottom right;
            background-attachment: fixed
            /*background-repeat: repeat-y;*/
        }
    
        div{
            height : 300px;
            /*background-color: rebeccapurple;*/
            /*background-image : url(image/tae1.jpg);*/
            /*background-size : 50% 50%;*/
            background-size : contain;
        }
    </style>
    
<body>
    
    <div>
    
    </div>
    
</body>
</html>

'front-end > HTML & CSS' 카테고리의 다른 글

[css] position  (0) 2020.11.24
[css] button / 버튼만들기  (0) 2020.11.24
[css] attribute / 속성  (0) 2020.11.24
[css] 선택자  (0) 2020.11.23
[html5] table  (0) 2020.11.23
[html5] select  (0) 2020.11.23
[html5] form tag / input type  (0) 2020.11.23 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 속성</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">

    <style>
        h1.title {
            background-color: black;
            color: pink;
            font-size: 30 px
        }

        body {
            /*url은 경로를 표현한다*/
            background-image: url(image/tae4.jpg);
        }
    </style>

    <style>
        #size1>div:nth-child(1) {
            font-size: 100%;
        }

        #size1>div:nth-child(2) {
            font-size: 150%;
        }

        #size1>div:nth-child(3) {
            font-size: 200%;
        }
    </style>

    <style>
        #size2>div:nth-child(1) {
            font-size: 1.0em;
        }

        #size2>div:nth-child(2) {
            font-size: 1.5em;
        }

        #size2>div:nth-child(3) {
            font-size: 2.0em;
        }
    </style>

    <style>
        #size3>div:nth-child(1) {
            font-size: 16px;
        }

        #size3>div:nth-child(2) {
            font-size: 24px;
        }

        #size3>div:nth-child(3) {
            font-size: 32px;
        }
    </style>

    <style>
        #color>h4:nth-child(1) {
            /*키워드를 이용한 색상 표현*/
            background-color: aquamarine;
            color: blue;
        }

        #color>h4:nth-child(2) {
            /*rgb를 이용한 색상 표현*/
            background-color: rgb(255, 225, 255);
            color: rgb(0, 150, 150);
        }

        #color>h4:nth-child(3) {
            /*#rgba를 이용한 색상표현 : 투명도 표현*/
            background-color: rgba(100, 200, 240, 0.7);
            color: rgb(0, 0, 150);
        }

        #color>h4:nth-child(4) {
            /*#000000을 이용한 색상표현*/
            background-color: #1F158A;
            color: #FF889A;

        }
    </style>
    
    <style>
        /*박스속성 : width, height, border, padding, margin*/

        #box1 {
            background-color: black;
            color: wheat;

            /*표현영역*/
            width: 100px;
            height: 100px;

            /*테두리*/
            border: 10px solid pink;

            /*테두리와 텍스트 사이의 간격*/
            padding: 15px; /*padding-top: 50px;*/
            
            /*요소 태그들과의 간격*/
            margin : 20px;
            margin-left : 300px;
        
        }
    </style>
    
    <style>
    
        #box2 {
            background-color: pink;
            width : 100px; height: 100px;
            padding:10px; margin:10px;
            border : 10px solid grey;
            /*raidus 순서 : 11시 방향부터 시계방향*/
            /*border-radius: 10px 30px 10px 30px*/
            border-radius: 100px;
            background-image : url(image/tae1.jpg);
            background-size : contain;
            
        }
    </style>

    <style>
        
        #display span{
            background-color : #FFFFF0;
            width:100px;
            height: 100px;
        }
    
        #display>span:nth-child(1){
            /*화면에서 요소 태그를 표현하지 않는다*/
            /*display: none;*/
            
        }
        #display>span:nth-child(2){
            /*블럭속성*/
            display :inline-block;
            
        }
        #display>span:nth-child(3){
            
        }
    
    
    
    </style>
    
    <style>
    
        #font{
            font-family: 'Nerko One', cursive;
            font-size : 4em;
            font-weight: bold;
            font-style : italic;
            color : darkorchid;
            text-align: center
        }
    </style>
    
    <style>
        h3{
            text-align: center;            
        }
        h3+h4{
            text-align: right;
            margin-right: 50px;
        }
        h3+h4+p{
            line-height: 180%;
        }
    </style>
</head>

<body>
    
    
    <h1 class="title">텍스트의 중앙 정렬</h1>
    <h3>텍스트 수평 방향의 정렬</h3>
    <h4>2020.11.24</h4>
    <p>에스콰이어는 방탄소년단에 대해 “멤버들은 팝의 정상에 올랐고, ‘인기’를 새롭게 정의했으며, 전통적인 ‘남성성’에 정면 도전했다”라고 소개했다. 이어 “멤버 간 서로에 대한 애정, 자신의 인생이나 가사를 통해 본인의 약점과 감정을 드러내는 (방탄소년단의) 방식이, 스스로에게는 물론이고 서로에게 정형화한 틀을 끊임 없이 강요하는 전통적인 남성들의 방식보다 더 어른스럽고 남성적으로 보인다”라고 평가했다.</p>
    
    
        
   <h1 class="title">폰트 속성 : font-family, -size, -style -weight</h1>
    <div id="font">
        Hello! we are BTS!
    </div>
    <h1 class="title">Display 속성 : none, block, inline, inline-block</h1>
    <div id="display">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        
    </div>
    

    <h1 class="title"> 박스 속성 : width, height, border, padding, margin</h1>

    <div>
        <div id="box2">BOX2</div>
        <div id="box1">BOX BOX BOX BOX BOX BOX BOX BOX BOX BOX </div>
    </div>

    <h1 class="title">color를 표현하는 단위</h1>
    <div id="color">

        <h4> 키워드를 이용한 색상 표현</h4>
        <h4> rag (R,G,B) 이용 색상 표현</h4>
        <h4> rgba(R,G,B,A) 이용 색상표현</h4>
        <h4> #000000</h4>
    </div>

    <h1 class="title">Font-size : 단위를 확인</h1>

    <div id="size1">
        <div>font-size : 100 %</div>
        <div>font-size : 150 %</div>
        <div>font-size : 200 %</div>

    </div>

    <div id="size2">
        <div>font-size : 1.0em</div>
        <div>font-size : 1.5em</div>
        <div>font-size : 2.0em</div>

    </div>

    <div id="size3">
        <div>font-size : 16px</div>
        <div>font-size : 24px</div>
        <div>font-size : 32px</div>

    </div>



</body></html>

 

'front-end > HTML & CSS' 카테고리의 다른 글

[css] position  (0) 2020.11.24
[css] button / 버튼만들기  (0) 2020.11.24
[css] background  (0) 2020.11.24
[css] 선택자  (0) 2020.11.23
[html5] table  (0) 2020.11.23
[html5] select  (0) 2020.11.23
[html5] form tag / input type  (0) 2020.11.23 
__all__ = ['module1', 'py명', '파이썬파일이름!']

# __init__.py
# import 했을때 사용허락할 파일명만 적는다
# chapter06_03
# 패키지 작성 및 사용법
# 파이썬은 패키지로 분할 된 개별적인 모듈로 구성
# 상대경로 : ..(부모 디렉토리) .(현재 디렉토리) > 모듈 내부에서만 사용

#__pycache__ : 파이캐시 빠른실행을 위해 파이썬이 만듦 삭제가능 > 어차피 실행하면 또생김

#__init__.py : python3.3부터는 없어도 패키지로 인식
# 과거에는 init 파일이 없으면 import를 할 수 없었다.
# > 단 하위 호환을 위해 작성 추천,


# 예제1

import sub.sub1.module1 # 같은 경로일떄는 이렇게 가져오기도.
import sub.sub2.module2

# 사용
sub.sub1.module1.mod1_test1()
sub.sub1.module1.mod1_test2()

sub.sub2.module2.mod2_test1()
sub.sub2.module2.mod2_test2()

print()
print()
print()

# 예제2
from sub.sub1 import module1
from sub.sub2 import module2 as m2 #별칭 alias

module1.mod1_test1()
module1.mod1_test2()

m2.mod2_test1()
m2.mod2_test2()

print()
print()
print()

# 예제3
from sub.sub1 import *
from sub.sub2 import *
# 전체가져오기 > 하지만 필요한 것만 가져오는 것이 좋다.

module1.mod1_test1()
module1.mod1_test2()

module2.mod2_test1()
module2.mod2_test2()

'python_basic' 카테고리의 다른 글

[파이썬] 외장함수  (0) 2020.11.30
[파이썬] 내장함수  (0) 2020.11.30
[파이썬] 예외처리 Exception / try - except - else - finally  (0) 2020.11.30
[파이썬] 모듈  (0) 2020.11.23
[파이썬] 클래스  (0) 2020.11.23
[파이썬] 사용자로부터 입력받기 / input  (0) 2020.11.23
[파이썬] 함수 / 람다 (lambda)  (0) 2020.11.23 
# chapter06_02
# 파이썬 모듈
# Module : 함수, 변수, 클래스 등 파이썬 구성 요소 등을 모아놓은 파일.

def add(x,y):
    return x+y

def subtract(x,y):
    return x-y

def multiply(x,y):
    return x*y

def divide(x,y):
    return x / y

def power(x,y):
    return x ** y




# print('-' * 15)
# print('called! inner!')
# print(add(5,5))
# print(subtract(15,5))
# print(multiply(5,5))
# print(divide(10,2))
# print(power(5,3))
# print('-' * 15)


# __name__ 사용 > import할 땐 실행되지 않는다.
if __name__ == "__main__":
    print('-' * 15)
    print('called! inner!')
    print(add(5,5))
    print(subtract(15,5))
    print(multiply(5,5))
    print(divide(10,2))
    print(power(5,3))
    print('-' * 15)

# 모듈 사용 실습

import sys
import time

print(sys.path)
print(type(sys.path))

## 모듈 경로 삽입 (영구등록방법아님.)
# sys.path.append('D:/JAVA/inflearnPython/math')
#
# print(sys.path)
# import test_module (math안에 06_02를 테스트용으로 복사해서 만들었음)
#
# # 모듈 사용.
# print(test_module.power(10,3))

import Chapter06_02
print(Chapter06_02.add(10,1000000))

 

append 후 print(sys.path)

'python_basic' 카테고리의 다른 글

[파이썬] 내장함수  (0) 2020.11.30
[파이썬] 예외처리 Exception / try - except - else - finally  (0) 2020.11.30
[파이썬] 패키지 / init  (0) 2020.11.23
[파이썬] 클래스  (0) 2020.11.23
[파이썬] 사용자로부터 입력받기 / input  (0) 2020.11.23
[파이썬] 함수 / 람다 (lambda)  (0) 2020.11.23
[파이썬] while문 / while-else  (0) 2020.11.21 
# Chapter06_01
# 클래스 (ㅋㅋ붕어빵기계)
# OOP(객체 지향 프로그래밍), self, 인스턴스 메소드, 인스턴스 변수


# 클래스와 and  인스턴스의 차이를 이해하는 것이 중요
# 네임스페이스 : 객체를 인스턴스화 할 때 저장된 공간
# 클래스 변수 : 직접 접근 가능, 공유 (정수기! 공용화장실! 같은 것 ㅋㅋ)
# 인스턴스 변수 : 객체마다 별도 존재.

# 예제1)
# class dog():, class dog:, class(object):
class dog(): #object 상속
    # 클래스 속성
    specied = 'firstdog' #클래스 변수.

    # 초기화/인스턴스 속성 (java생성자)
    def __init__(self,name, age):
        self.name = name
        self.age = age


# 클래스 정보
print(dog)

# 인스턴스화 (- 코드로 구현해서 메모리에 올라간 시점.)
a = dog('happy',15)
b = dog('micky',2)
c = dog('micky',2)
# 비교
print(a == b, id(a), id(b))
print(a == c, id(b), id(c))

# 네임스페이스
print('dog1',a.__dict__)
print('dog2',b.__dict__)

# 인스턴스 속성 확인
print('{} is {} and {} is {}'.format(a.name, a.age, b.name, b.age))

if a.specied == 'firstdog':
    print('{0} is a {1}'.format(a.name, a.specied))

print(dog.specied) # 클래스에서도
print(a.specied) # 인스턴스변수에서도 바로 접근 공유 가능하다. (같은값.)


# 예제2) - self의 이해. (this같은 느낌인듯)

class SelfTest:
    def func1():
        print('func1 called')
    def func2(self): #__init__이 없어도 알아서 생성해주는 똑쟁이 파이썬..
        print(id(self)) #f값.
        print('func2 called')

f = SelfTest()

print(dir(f)) #func1과 func2가 있음을 확인 가능
print(id(f))

# f.func1() 에러! 예외.
f.func2() # self가 있는 인스턴스 메서드
SelfTest.func1() # 클래스로바로 접근해서 접근. (매개변수가 없는 클래스메소드)
                # self가 있으면 인스턴스화 시킨 변수가 self로 넘어감.
# SelfTest.func2() 반대로 에러! 예외
SelfTest.func2(f)


# 예제3)
# 클래스 변수, 인스턴스 변수

class Warehouse:
    #클래스 변수
    stock_num = 0 #재고

    def __init__(self, name):
        # 인스턴스 변수
        self.name=name
        Warehouse.stock_num +=1

    def __del__(self):
        Warehouse.stock_num -=1

user1 = Warehouse('Lee')
user2 = Warehouse('Jin')

print(Warehouse.stock_num) # 붕어빵 몇개구웠어! = 2개

print(user1.name)
print(user2.name)
print(user1.__dict__)
print(user2.__dict__)
print('before>>',Warehouse.__dict__) #stock_num:2

del user1
print('after>>',Warehouse.__dict__)

# 예제4

class dog2():
    specied = 'firstdog'

    def __init__(self,name, age):
        self.name = name
        self.age = age

    def info(self):
        return '{} is {} years old'.format(self.name, self.age)

    def speak(self, sound):
        return "{} says {}!".format(self.name, sound)

# 인스턴스 생성
d = dog2('july',4)
e = dog2('merry',10)

# 메서드 호출
print(d.info())
print(e.info())
print(d.speak('wal wal'))
print(e.speak('mung mung'))

'python_basic' 카테고리의 다른 글

[파이썬] 예외처리 Exception / try - except - else - finally  (0) 2020.11.30
[파이썬] 패키지 / init  (0) 2020.11.23
[파이썬] 모듈  (0) 2020.11.23
[파이썬] 사용자로부터 입력받기 / input  (0) 2020.11.23
[파이썬] 함수 / 람다 (lambda)  (0) 2020.11.23
[파이썬] while문 / while-else  (0) 2020.11.21
[파이썬] for문 / for-else / reversed / range  (0) 2020.11.21 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 선택자</title>

    <style>
        /* 선택자{
            속성이름 : 속성값;
            }  */

        /* 전체선택자 : 전체 폰트 컬러 값 등을 지정 
        *{
            color : purple;
        }*/


        /* 태그선택자 */
        /*
        h1, p, body {margin: 0; padding: 0;}
*/

        h1 {
            background-color: #E2A9F3;
            color: white;
        }

        p {
            color: purple;
        }


        div {
            text-align: center
        }

        form {
            border: 1px solid grey;
        }

        ul {
            border: 1px solid blue;
        }

        li {
            border: 1px solid red;
            color: green;
        }

        /* 아이디 선택자 : #id */

        #header {
            background-color: #A9E2F3;
        }

        #aside {
            background-color: #F6CECE;
        }

        #content {
            background-color: #E0F8EC;
        }

        /* 클래스 선택자 : 요소의 class 속성이 있는 것을 지정하는 선택자 */

        /* div를 붙이면 div이고 클래스가 color_white인 요소 */

        div.color_black {
            color: black;
        }

        .color_red {
            color: red;
        }

        .font_size_32 {
            font-size: 32px;
        }

        .font_weight_bold {
            font-weight: 1000;
        }

        .font_italic {
            font-style: italic;
        }

        /* 속성 선택자 : 선택자[속성이름]*/
        input[type] {
            background-color: darkkhaki;
            color: white;
        }

        /* 속성 선택자 : 선택자[속성이름=값] */
        input[type=button] {
            background-color: aqua;
            padding: 8px;
            margin: 10px;
            font-size: 20px;
            font-weight: bold;
        }

        /*  선택자[속성이름=값 */
        img[src$=png] {
            border: 3px solid red;
        }

        img[src$=gif] {
            border: 3px solid blue;
        }

        img[src$=jpg] {
            border: 3px solid black;
        }

        /* 후손 선택자 : 선택자A 선택자B
        A 태그 하위에 존재하는 태그를 기준으로 B선택자로 선택 */

        #header1 h1 {
            background-color: black;
            color: aliceblue;
            font-size: 16px;
        }

        /* 자손 선택자 : 선택자A(부모) > 선택자B(자손)
        선택자 A로 선택된 태그 바로 아래의 태그들 중 선택자B로 선택 */
        #header1>h1 {
            border: 5px solid pink;
            font-style: italic;
        }

        #nav h1 {
            border: 5px solid aqua;
        }

        /*동위 선택자 : 범위를 한정해서 선택
        선택자A+선택자B > A선택자 태그 바로 뒤에 있는 선택자B
        선택자A~선택자B > A선택자 바로뒤에있는 선택자B 전부. */
        
        #div1>h1+h2{
            background-color : red;
            color : yellow;
        }
        
        /*h1~h2로 하면 h2 다바뀜*/
        #div1>h1+h2~h2 { 
            background-color :black;
            color: aqua;
        }
        
        /* 반응 선택자
        :hover  > 마우스 커서가 특정 태그 위로 올라갈 때
        :active > 마우스 버튼 누르고 있는 상태 */
        
        h1:hover {
            background-color: green;
            cursor: pointer;
        }
        
        h2:active {
            background-color : blue;
            color : white;
        }
        
        /* 상태선택자 
        :check > 체크 상태의 input 태그 선택 > checkox, radio
        :focus > 초점이 맞추어진 input 태그 선택 > 모든 input
        :enabled > 사용 가능한 input 태그 선택
        :disabled >사용 불가능한 input 태그 선택 */
        
        input:enabled{
            border : 1px solid blue;
            background-color: aqua;
        }
        
        input:disabled{
            border : 1px solid red;
            background-color: grey;
        }
        
        input:focus{
            background-color: yellow;
        }
        
        #msg {
            padding:20px;
            background-color : bisque;
            display : none;
        }
        
        input[type=checkbox]:checked+#msg{
            display: block
        }
        
        /*구조선택자*/
        /*잘보기위해 테두리와 ㅇ 없앰*/
        #nav, #nav>li {
            border : 0;
            list-style: none; 
            margin:0;
            padding:0;
        }
        
        #nav{
            margin : 20px 0;
            overflow : hidden;
            /*float : left 속성을 #nav안으로 한정한다*/
        }
        
        #nav>li{
            /* >>> 쪽으로 바뀜 */
            float : left;
            /* 상하 좌우 픽셀*/
            padding : 0 20px;            
            border : 1px solid gray;
        }
        
        #nav>li:first-child{
            border-radius: 10px 0 0 10px;
        }
        
        #nav>li:last-child{
            border-radius: 0 10px 10px 0;
        }
        
        #nav>li:nth-child(2n){
            background-color: mediumaquamarine;
        }
        
        #nav>li:nth-child(2n+1){
            background-color: bisque
        }
        
        /*문자선택자
        ::first-letter
        ::frist-line*/
        
        p::first-letter{
            font-size:300%;
        }
        p::first-line{
            color : darkgreen;
        }
        p::selection{
            background-color: crimson;
            color : bisque;
        }
        
        /* 링크 선택자
        :link
        :visited */
        
        a:link{
            color : black;
            text-decoration-line: none;
        }
        a:visited{
            color : red;
            text-decoration-line: none;
        }
        a:hover{
            color : blue;
        }
        
        a:link:after{
            /*가상태그*/
            content : ' - ' attr(href);    
        }
        
        a:link:before{
            content : attr(href) ' - ' ;    
        }
        
    </style>
</head>

<body>
    
    <!--링크선택자-->
    <h3> 
    <a href="http://naver.com">네이버</a>
    </h3>
    
    
    <!--구조선택자-->
    <ul id="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>        
    </ul>
    
    <!--상태선택자-->
    숨기기 <input type="checkbox">
    <div id="msg" style="text-align: left">
        체크박스를 체크하면 보입니다~
    </div>
    <br>
    <input value="입력가능"> <br>
    <input disabled value="입력불가능">
    
    
    <!--반응선택자-->
    <div id="div2">
        <h1>hover - 1</h1>
        <h2>hover - 2</h2>
    </div>
    <!--동위선택자예제-->
    <div id="div1">
        <h1>Header - 1</h1>
        <h2>Header - 2</h2>
        <h2>Header - 2</h2>
        <h2>Header - 2</h2>
        <h2>Header - 2</h2>
    </div>


    <!--후손/자손선택자예제-->
    <div id="header1">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div><br>
    </div><br><br><br>


    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>


    <!--선택자[속성이름=값] 특정예제-->
    <img src="image/tae1.jpg" width="100">
    <img src="tae6.jpg" width="100">
    <img src="image/tae3.png" width="100">

    <!--속성선택자-->
    <h1>form tag -> input</h1>
    <br>
    <form>
        <ul>
            <li>
                <input type="text">
            </li>
            <li>
                <input type="button" value="Button">
            </li>
            <li>
                <input type="password" value="Button">
            </li>
            <li>
                <input type="button" value="new Button">
            </li>
        </ul>

    </form>

    <br>
    <!--아이디선택자 / 클래스 선택자 예제-->
    <div id="header" class="color_black font_size_32 font_italic">header</div>
    <div id="aside" class="color_red font_weight_bold">aside</div>
    <div id="content" class="color_black">content</div>

    <br>
    <!--태그선택자 / 문자선택자 예제-->
    <h1 class="color_black">방탄소년단, 'Life Goes On' 1억뷰 기록 ”韓가수 최다”</h1>

    <p>
        그룹 방탄소년단이 1억뷰 뮤직비디오를 추가하고 한국 가수 최다 억대 뮤직비디오를
        보유하게 됐다. 방탄소년단이 지난 20일 발표한 새 앨범 ‘BE (Deluxe Edition)’의 
        타이틀곡 ‘Life Goes On’ 뮤직비디오 유튜브 조회수가 11월 22일 오후 5시 48분경 조회수
        1억 건을 넘었다. 이로써 방탄소년단은 통산 27번째 억뷰 뮤직비디오를 보유하게 됨과 
        동시에 한국 가수 최다 기록을 자체 경신했다. 방탄소년단의 ‘BE (Deluxe Edition)’는 
        지금까지 이들이 선보인 정규 시리즈 앨범과는 다른 형태의 앨범으로, 
        지금 이 순간에 느끼는 솔직한 감정, 나아가 앞으로 계속 살아가야 하는 ‘우리’라는 
        존재에 관한 이야기를 담고 있다. 방탄소년단은 ‘Life Goes On’을 통해 열심히 달리다 
        멈춰 설 수밖에 없는, 원치 않는 상황과 마주했지만 “그럼에도 삶은 계속된다”라는 위로의 
        메시지를 전한다.
    </p>
</body></html>

 

'front-end > HTML & CSS' 카테고리의 다른 글

[css] position  (0) 2020.11.24
[css] button / 버튼만들기  (0) 2020.11.24
[css] background  (0) 2020.11.24
[css] attribute / 속성  (0) 2020.11.24
[html5] table  (0) 2020.11.23
[html5] select  (0) 2020.11.23
[html5] form tag / input type  (0) 2020.11.23

1) 테이블 만들기

 

주제 태그 비고
테이블의 구성요소 <table> 테이블을 만드는 태그
<th> 테이블의 헤더 부분 
<tr> 테이블의 행
<td> 테이블의 열 
    <table border="1">
	<th>테이블</th>
	<th>만들기</th>
	<tr><!-- 첫번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 첫번째 줄 끝 -->
	<tr><!-- 두번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 두번째 줄 끝 -->
    </table>
테이블 만들기
첫번째 칸 두번째 칸
첫번째 칸 두번째 칸

 

 

2) 테이블 디자인

 

주제 속성 비고
테이블의 디자인 변경 border 테두리 / 두께
bordercolor 테두리 / 색상
width 테이블 가로 크기
height 테이블 세로 크기
align 정렬
bgcolor 배경색
colspan 가로합병 (열)
rowspan 세로합병 (행) 
<table border="1" bordercolor="#088A29" width ="500" height="300" align = "center" >
<!--티스토리에서는 가로길이 설정이 구려서 일단냅둠-->
    <tr align = "center" bgcolor="#BEF781">
	<td>내용</td>
	<td>수입</td>
	<td>지출</td>
    </tr>
    <tr>
	<td>월급!</td>
	<td>1,000,000</td>
	<td></td>
    </tr>
    <tr>
	<td>점심값</td>
	<td></td>
	<td>5,000</td>
    </tr>
    <tr>
	<td>부모님선물</td>
	<td></td>
	<td>30,000</td>
    </tr>
    <tr>
	<td rowspan="3" align = "center" bgcolor="#BEF781">총계</td>
	<td>수입</td>
	<td>지출</td>
    </tr>
    <tr>
	<td>1,000,000</td>
	<td>35,000</td>	
    </tr>
    <tr>
	<td>남은돈</td>
	<td>965,000</td>	
    </tr>
</table>

 

내용 수입 지출
월급! 1,000,000  
점심값   5,000
부모님선물   30,000
총계 수입 지출
1,000,000 35,000
남은돈 965,000

'front-end > HTML & CSS' 카테고리의 다른 글

[css] position  (0) 2020.11.24
[css] button / 버튼만들기  (0) 2020.11.24
[css] background  (0) 2020.11.24
[css] attribute / 속성  (0) 2020.11.24
[css] 선택자  (0) 2020.11.23
[html5] select  (0) 2020.11.23
[html5] form tag / input type  (0) 2020.11.23 
        생일1 <select name="birthyear">
            <option>2020</option>
            <option>1950</option>
        </select>년
        <select name="bmonth">
            <!--value값을 명시해주면 숫자만 받을 수 있다-->
            <option value="1">1월</option>
            <option value="12">12월</option>
        </select>월
        <select name="bday">
            <option>1</option>
            <option>31</option>
        </select>일
        <br>

        생일2
        <input type="date" name="birthday"><br>
생일1 년월일
생일2

'front-end > HTML & CSS' 카테고리의 다른 글

[css] position  (0) 2020.11.24
[css] button / 버튼만들기  (0) 2020.11.24
[css] background  (0) 2020.11.24
[css] attribute / 속성  (0) 2020.11.24
[css] 선택자  (0) 2020.11.23
[html5] table  (0) 2020.11.23
[html5] form tag / input type  (0) 2020.11.23

Form tag

type = text :
type = password :
type = checkbox :
type = radio : A B C
type = color :
type = date :
type = datetime-local :
type = month :
type = week :
type = time :
type = email :
type = file :
type = hidden : 화면에는 표현되지 않는다.
type = image :
type = number :
type = range :
type = tel :
type = url :

type = sumbmit :
type = reset :

 

 

 

<!DOCTYPE html>
<!-- HTML5 문서임을 정의 -->
<html lang = "ko">
    <head>
        <title>form tag 연습</title>
        <meta charset="utf-8">
        <style></style>
        <script></script>
    </head>
    <body>
    
        <h1>Form tag</h1>
        <hr> <!--선-->
        
        <!--
        서버로 전송하고자 하는 폼 데이터를 묶는다.
        action : 데이터를 전송할 경로 - 위치
        method : 전송하는 방식 - get / post 방식
        -->
        <form action="#" method="get">
        
            type = text : <input type="text" name="username"><br>
            type = password : <input type="password" name="password"><br>
            type = checkbox : <input type="checkbox" name="chk" value="ok"><br>
            type = radio : 
            A <input type="radio" name="choice" value="A">
            B <input type="radio" name="choice" value="B">
            C <input type="radio" name="choice" value="C"><br>
            type = color : <input type="color" name="color"><br>
            type = date : <input type="date" name="date"><br>
            type = datetime-local : <input type="datetime-local" name="localdatetime"><br>
            type = month : <input type="month"><br>
            type = week : <input type="week"><br>
            type = time : <input type="time" name="time"><br>
            type = email : <input type="email" name="email"><br>
            type = file : <input type="file" name="userphoto"><br>
            type = hidden : 화면에는 표현되지 않는다. <input type="hidden" name="idx" value="1"><br>
            type = image : <input type="image" src="dispatch.png" height="50"><br>
            type = number : <input type="number" name="num"><br>
            type = range : <input type="range" name="age" min="0" max="150"><br>
            type = tel : <input type="tel"><br>
            type = url : <input type="url" name="url"><br>
            
            
            
            <br>
            type = sumbmit : <input type="submit"><br>
            type = reset : <input type="reset">
   
        
        </form>
    </body>
</html>

'front-end > HTML & CSS' 카테고리의 다른 글

[css] position  (0) 2020.11.24
[css] button / 버튼만들기  (0) 2020.11.24
[css] background  (0) 2020.11.24
[css] attribute / 속성  (0) 2020.11.24
[css] 선택자  (0) 2020.11.23
[html5] table  (0) 2020.11.23
[html5] select  (0) 2020.11.23 
# chapter05_02
# 파이선 사용자 입력
# Input 사용법
# 기본 타입(Str)

# 예제1

name = input("Enter Your Name : ")
grade = input("Enter Your Grade : ")
company = input("Enter Your Company : ")

print(name, grade, company)

# 예제2

number = input("enter number :")
name = input("enter name : ")
print("type : ", type(number), type(name)) #둘다 str로받는다.

# 예제3 (계산)
first_number = int(input("number 1 : "))
second_number = int(input("number 2 : "))

print("두수의 합 : " , first_number+second_number)

# 예제4
float_num = float(input("enter float number : "))
print("num : " float_num)
print("type : " type(float_num))

# 예제5
print("FirstName - {0}, LastName - {1}"
.format(input("enter first name : "),input("enter second name : ")))

'python_basic' 카테고리의 다른 글

[파이썬] 패키지 / init  (0) 2020.11.23
[파이썬] 모듈  (0) 2020.11.23
[파이썬] 클래스  (0) 2020.11.23
[파이썬] 함수 / 람다 (lambda)  (0) 2020.11.23
[파이썬] while문 / while-else  (0) 2020.11.21
[파이썬] for문 / for-else / reversed / range  (0) 2020.11.21
[파이썬] if문  (0) 2020.11.21 
# Chapter05_01
# 파이썬 함수(Function)
# 파이썬 함수식 및 람다

# 함수 정의방법
# def function_name(parameter):
#   code

# 예제1)
def first_func(w):
    print("Hello,", w)

word = "Good boy"
first_func(word)



# 예제2
def return_func(w):
    result = "Hello," + str(w)
    return result

x = return_func('goodgirl')
print(x)


# 예제3 (다중반환)

def func_mul(x):
    y1 = x * 10
    y2 = x * 20
    y3 = x * 30
    return y1, y2, y3  # 이런 리턴도 가능!

x, y, z =  func_mul(10)
print(x, y ,z)


# 튜플리턴
def func_mul2(x):
    y1 = x * 10
    y2 = x * 20
    y3 = x * 30
    return (y1, y2, y3) #팩킹해서 튜플로!

q = func_mul2(20)
print(type(q), q)

# 리스트리턴
def func_mul2(x):
    y1 = x * 10
    y2 = x * 20
    y3 = x * 30
    return [y1, y2, y3]

p = func_mul2(30)
print(type(p), p)

def func_mul2(x):
    y1 = x * 10
    y2 = x * 20
    y3 = x * 30
    return {'v1' : y1 , 'v2' : y2 , 'v3' :y3}

d = func_mul2(40)
print(type(d), d, d.items(), d.keys())



# 증요
# *args, **kwargs

# *args(언팩킹)
# *뒤에 단어는 아무거나 가능, 여러개 받기 가능. 튜플에자주사용.

def args_func(*args) :
    for i, v in enumerate(args) :
        print('Result : {}'.format(i), v)
    print('--------')

args_func('Lee')
args_func('Lee','Park','Jin')

# **kwargs
# 딕셔너리로 이해.
def kwargs_func(**kwa) :
    for v in kwa.keys():
        print("{}".format(v), kwa[v])
    print('--------')

kwargs_func(name1='Lee')
kwargs_func(name1='Lee', name2='Park', name3='Jin')

# 전체 혼합
def example(args_1, args_2, *args, **kwargs):
    print(args_1, args_2, args, kwargs)
example(10, 20, 'Lee', 'Kim', 'Park', age1=20, age2=30, age3=40)


# 중첩함수
# 함수안의 함수는 바깥에서 사용 불가.
def nested_func(num):
    def func_in_func(num):
        print(num) #2
    print("In func") #1
    func_in_func(num+100) #2

nested_func(100)


# 람다식 예제
# 메모리 절약, 가독성 향상, 코드 간결
# 함수는 객체 생성 > 리소스(메모리) 할당
# 람다는 즉시 실행 함수 (heap초기화) > 메모리 heap초기화
# 남발 시 가독성이 오히려 감소.

def mul_func(x,y):
    return x*y

lambda x, y : x*y

a = lambda x, y : x*y
print(a(5,6))

def mul2_func(x,y):
    return x*y
###############################
# 일반적 함수 > 변수 할당.
q = mul2_func(10,50)
print(q)
print(mul2_func(10,50))
mul2_func_var = mul_func
print(mul2_func_var(20,50))

# 간단한 것은 람다식으로 사용하는 것이 편함.
lamdbd_mul2_func = lambda x,y:x*y
print(lamdbd_mul2_func(50,50))

def func_final(x, y, func):
    print('>>>>', x * y * func(100,100))

func_final(10,20, mul2_func_var)
func_final(10,20, lambda x,y:x*y) #이름이 없기에 즉시실행!

'python_basic' 카테고리의 다른 글

[파이썬] 모듈  (0) 2020.11.23
[파이썬] 클래스  (0) 2020.11.23
[파이썬] 사용자로부터 입력받기 / input  (0) 2020.11.23
[파이썬] while문 / while-else  (0) 2020.11.21
[파이썬] for문 / for-else / reversed / range  (0) 2020.11.21
[파이썬] if문  (0) 2020.11.21
[파이썬] 집합 ([]) {,}  (0) 2020.11.21 
# chapter04_03
# 파이썬 반복문
# while 실습

# while <expr>:
#   <statement(s)>

# 예제1

n=50
while n > 0:
    n-=1
    print(n)


# 예제2
a = ['foo', 'bar','baz']

# while a: = while True :

while a:
    print(a.pop(0))



# 예제3
# break, continue

n = 5

while n>0 :
    n-=1
    if n==2:
        break
    print(n)
print('Loop Ended.') # 4, 3

# 예제4
m = 5

while m>0 :
    m-=1
    if m==2:
        continue
    print(m)
print('Loop Ended.') # 4, 3, 1, 0

# 예제5 - if 중첩

i = 1
while 1 <=10:
    print('i : ',i)
    if i == 6:
        break
    i += 1

# 예제6 while - else

n = 10
while n>0 :
    n-=1
    print(n)
    if n==5:
        break
else :
    print('else out.')


# 예제7
a = ['foo', 'bar', 'baz','qux']
s = 'qux'

i = 0

while i < len(a) : # i < 4
    if a[i] == s:
        print(s, 'found')
        break
    i+=1
else :
    print(s, 'not found in list')


#  무한반복
# while True :

# 예제8

a = ['foo','bar','baz']

while True :
    if not a :
        break
    print(a.pop())

'python_basic' 카테고리의 다른 글

[파이썬] 클래스  (0) 2020.11.23
[파이썬] 사용자로부터 입력받기 / input  (0) 2020.11.23
[파이썬] 함수 / 람다 (lambda)  (0) 2020.11.23
[파이썬] for문 / for-else / reversed / range  (0) 2020.11.21
[파이썬] if문  (0) 2020.11.21
[파이썬] 집합 ([]) {,}  (0) 2020.11.21
[파이썬] 딕셔너리 { : }  (0) 2020.11.21 
# chapter04_02
# 파이썬 반복문
# for 실습

# 코딩의 핵심
# for in <collection>
#   <loop body>

import sys
import io

sys.stdout = io.TextIOWrapper(sys.stdout.detach(), encoding = 'utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.detach(), encoding = 'utf-8')
#한글깨짐 방지


for v1 in range(10) : # 0-9까지 10개.
    print('v1 is :', v1)

for v2 in range(1, 11) : # 1-10까지
    print('v2 is :', v2)

for v3 in range(1,11,2) : # 1-11까지 2개씩 점프
    print('v3 is :', v3)

# 1~1000합을 구하자

sum1 = 0

for v in range(1,1001):
    sum1 += v

print('1-1000까지의 합 :  ',sum1)

# range 함수
print('1-1000까지의 합 : ', sum(range(1,1001)))
print('1-1000까지 4의 배수의 합 : ', sum(range(4,1001,4)))
print(type(range(1,11)))


# iterables : 반복할 수 있는 객체
# iterables data 문자열, 리스트, 튜플, 집합, 딕셔너리
# iterable 리턴 함수 : range, reversed, enumerate, filter, map, zip


# 예제1
names = ['kim','pakr','cho','lee','choi','yoo']

for name in names :
    print ('You are : ', name)

# 예제2
lotto_number = [12, 19, 21, 28, 36, 37]

for n in lotto_number :
    print ("current number : ", n)

# 예제3
word = "beautiful"

for s in word :
    print('word : ', s)

# 예제4
my_info = {
    "name" : "lee",
    "age" : 33,
    "city" : "seoul"
}

for k in my_info:
    print('key :', k , my_info[k])

for v in my_info.values():
    print('value :', v)


# 예제5
# if와 for같이쓰기

name = 'FineAppLE'

#isupper 대문자인지 / islower 소문자인지
for n in name :
    if (n.isupper()):
        print(n)
    else:
        print(n.upper()) #대문자로 출력

# break
numbers = [14, 3, 4, 7, 10, 24, 17, 2, 33, 15, 34, 36, 38]

for num in numbers:
    if num == 34 :
        print ('Found 34!')
        break; #36, 38 은 실행되지 않도록.
    else :
        print('Not Found :', num)


# continue

lt = ["1", 2, 5, True, 4.2, complex(4)] #여러가지자료형
#boolean을 빼고 출력하기
for v in lt :
    if type(v) is bool:
        continue #들여쓰기 생각해놓자 JAVA와다름.
    print("current type :", v,"의 타입은 ", type(v))
    print("multiply by 2:", v*3) # 참고로 true*3=1

# for - else
numbers = [14, 3, 4, 7, 10, 24, 17, 2, 33, 15, 34, 36, 38]

for num in numbers :
    if num == 49 :
        print("Found : 49")
        break
else :
    print("Not Found: 49")
    # for문이 다돌고 break를 만나지 않으면(이 경우 49를 찾지못하면)
    # 마지막에 for-else가 실행된다.

# 구구단 출력 2~9단
for i in range(2,10):
    for j in range(1,10):
        #print(i,"*",j,"= ", i*j)
        print('{:4d}'.format(i*j), end='') #4자리 정수로 출력, end=''
    print()

# 변환 예제
name2 = 'Aceman'
print('reversed :', reversed(name2))
print('reversed :', list(reversed(name2)))
print('Tuple :', tuple(reversed(name2)))
print('set :', set(reversed(name2))) #순서X

'python_basic' 카테고리의 다른 글

[파이썬] 사용자로부터 입력받기 / input  (0) 2020.11.23
[파이썬] 함수 / 람다 (lambda)  (0) 2020.11.23
[파이썬] while문 / while-else  (0) 2020.11.21
[파이썬] if문  (0) 2020.11.21
[파이썬] 집합 ([]) {,}  (0) 2020.11.21
[파이썬] 딕셔너리 { : }  (0) 2020.11.21
[파이썬] 튜플 ()  (0) 2020.11.21 
# chapter04_01
# if 실습

import sys
import io

sys.stdout = io.TextIOWrapper(sys.stdout.detach(), encoding = 'utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.detach(), encoding = 'utf-8')
#한글깨짐 방지

# 기본형식
print(type(True)) #0이 아닌 수, "abc", [1,2,3..] (1,2,3..)
print(type(False)) # 0, "", [], (), {} 비어있음.

# 예1

if True : # if 'a',
    print('good')

if False : # if '',
    print('bad')


# 예2) if-else
if False :
    print('Bad!')
else :
    print('good!')


# 예3) 연산자와 if문

# 관계연산자
# >, <=, <, >=, ==, !=

x=15
y=10

# 양변이 같은 경우
print(x == y)
# 양변이 다른 경우
print(x != y)
# 왼쪽이 클 경우
print(x>y)
#오른쪽이 크거나 같을 경우
print(x <= y)

city=""

if city:
    print("You are in:", city)
else :
    print("please enter your city")



city2="seoul"

if city2:
    print("You are in:", city2)
else :
    print("please enter your city")


# 논리 연산자
# and, or, not


a = 75
b = 40
c = 10


print('and : ', a > b and b > c)
print('or : ', a > b or b > c);
print('not : ', not a > b)
print('not : ', not b < c)


# 산술, 관계, 논리 우선순위
# 산술 > 관계 > 논리
print('e1 : ' , 3+12>7+3)
print('e2 : ', 5+ +10 *3 > 7+3*20)
print('e3 : ', 5+10 > 3 and  not 7+3==10)
# 1) 5+10, 7+3
# 2) 15>3 10==10
# 3) true and not True


sc1=90
sc2='A'

# 예4)
# 복수의 조건이 모두 참일 경우에 실행
# tap키 or 4번 space

if sc1 >=90 and sc2 =='A' :
    print('Paa')
else :
    print('Fail')

# 예5)
id1 = 'vip'
id2 = 'admin'
grade = 'platinum'

if id1 =='vip' or id2 =='admin' :
    print('관리자입장')

if id2 == 'admin' and grade == 'platinum' :
    print('최상위관리자')

# 예6)

num = 90

if num>=90 :
    print('Grade : A')
elif num >=80 :
    print('Grade : B')
else :
    print('과락')

# 예7)
# 중첩 조건문
Grade ='A'
total = 95

if Grade == 'A':
    if total >=90:
        print('장학금 100%')
    elif total >=80:
        print('장학금 80%')
    else :
        print('장학금 50%')
else :
    print('장학금 없음')


# in, not in.

q = [10,20,30]
w = {70,80,90,100}
e = {"name" : "Lee", "city" : "seoul", "grade" : "A"}
r = (10, 12,14)

print(15 in q)
print("seoul" in e.values())

'python_basic' 카테고리의 다른 글

[파이썬] 함수 / 람다 (lambda)  (0) 2020.11.23
[파이썬] while문 / while-else  (0) 2020.11.21
[파이썬] for문 / for-else / reversed / range  (0) 2020.11.21
[파이썬] 집합 ([]) {,}  (0) 2020.11.21
[파이썬] 딕셔너리 { : }  (0) 2020.11.21
[파이썬] 튜플 ()  (0) 2020.11.21
[파이썬] 리스트 []  (0) 2020.11.13

+ Recent posts

티스토리툴바