본문 바로가기
Full Stack 교육 회고록

8/16-css(박스모델, 신호등 표현) javascript(DOM, htmlelement객체)

순두부 호랑이 2022. 9. 16. 12:49
728x90
SMALL

<복습>

선택자 기호
- 전체 *
- 태그 태그이름
- 클래스 .
- 아이디 #계층선택자
기호
- 자식 >
- 자손 띄어쓰기
- 근접후행 +
- 후행 ~그룹 선택자 => ,
반응 선택자
:active
:hover
 
중요!!!

!important; => 선택자의 구별 없이 가장 가중치가 센 요소
 
선택자 기호 가중치
-전체 * 0
-태그 태그이름 1
-클래스 . 10
-아이디 # 100
가중치 Best : !important
만약에 가중치가 전부 같고, 아래에 쓴 코드가 힘이 더 세다
 

<ex05폰트크기단위.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* px 고정 크기단위 */
        #span1{
            font-size: 10px;
        }

        /* em: 부모 요소 크기에 따른 배수 단위 */
        p{
            font-size: 10px;
        }

        #span2{
            font-size: 2em;
        }

        /* rem:html 문서의 폰트 크기에 따른 배수단위 */

        #span3{
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <span id="span1">px로 조정</span>
    <p>
        <span id="span2">
            em으로 조정
        </span>
    </p>
    <br>
    <span id="span3">rem으로 조정</span>
</body>
</html>

css위치속성

모든 요소는 '사각형'으로 구성되어있다.

<ex06마진>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            margin: 0px;
        }

        div{
            width: 100px;
            height: 100px;
        }
        #redBox{
            background-color: red;
            margin-left: 0px;
        }
        #blueBox{
            background-color: blue;
            margin-left:100px ;
        }
        #greenBox{
            background-color: green;
            margin-left:200px ;
        }
        #grayBox{
            background-color: gray;
            margin-left:300px ;
        }
    </style>
</head>
<body>
    <!-- div#*4 -->
    <div id="redBox"></div>
    <div id="blueBox"></div>
    <div id="greenBox"></div>
    <div id="grayBox"></div>
</body>
</html>

 

공간분할태그: 경계를 분할하거나 영역을 나눌 때 사용하는 태그 <div>,<p>,<span>

 

글자가 들어갈만한 공간은 <p>태그와 <span>태그

<ex07패딩>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #testBox{
            width: 100px;
            height: 100px;
            background-color: lime;
            /* padding: 100px; */
            padding-left: 100px;
            border: 30px solid black;
        }
    </style>
</head>
<body>
    <div id="testBox">
        내가넣은내용
    </div>
</body>
</html>

<ex08박스사이징>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            border: 20px solid gray ;
            padding: 20px;
        }
        /* Box-Sizing 
        요소의 크기를 화면에 표시하는 방식 
        Box Model
        content => padding => border => margin

        (1) content-box
        :content 영역 만을 크기의 기준으로 삼는다
        
        (2) border-box
        : border를 기준으로 안쪽에 있는 영역들을 크기의 기준으로 삼는다
        (content+padding+border)
        */

        .content-box{
            box-sizing: content-box;
        }
        .border-box{
            box-sizing: border-box;
        }

    </style>
</head>
<body>
   
    <!-- div.content-box>p -->
    <div class="content-box">
        <p>content-box</p>
    </div> 

    <div class="border-box">
        <p>border-box</p>
    </div>
</body>
</html>

<테두리 속성>

border:요소의 테두리 ex)border: 선두께 선종류 선색깔;

 

<Border-style>

solid dotted dashed dovbic groovc ridge insert outset

 

<테두리 속성>

border-width: 테두리 두께 지정

border-color: 테두리 색상 지정

border-radius: 테두리 모서리를 둥글게 만들어주는 속성

 

border-radius 속성

border-top-left-radius 왼쪽 위 설정

border-bottom-left-radius 왼쪽 아래 설정

border-top-right-radius 오른쪽 위 설정

border-bottom-right-radius 오른쪽 아래 설정

 

<ex09 borderradius.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: tomato;

            /* border-radius: 테두리를 둥글게
            
            border- 위/아래 - 왼/오 - radius
            => 특정 모서리만 둥글게
            */

            /* 1.위쪽 왼쪽 둥글게 */
            border-top-left-radius: 10px;

            /* 2.아래쪽 왼쪽 둥글게 */
            border-bottom-left-radius: 10%;

            /* 3.위쪽 오른쪽 둥글게 */
            border-top-right-radius: 20px;

            /* 4. 아래쪽 오른쪽 둥글게 */
            border-bottom-right-radius: 20px;

            /* 완전한 원으로 만들고자 할 때 */
            border-radius:50%
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

< ex10신호등>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #black{
            width: 120px;
            height: 360px;
            background-color: black;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 20px;
        }

        /* div div => o
        #red,#yellow,#green=>o
        */
        .circle{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        #red{
            background-color: red;
        }
        #yellow{
            background-color: yellow;
            margin-top: 15px;
        }
        #green{
            background-color: green;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="black">
        <!-- div.circle*3 -->
        <div class="circle" id="red"></div>
        <div class="circle" id="yellow"></div>
        <div class="circle" id="green"></div>
    </div>
</body>
</html>

<가시속성>

display: 요소가 화면에 보이는 방식 지정

block : block 형식으로 지정

inline: inline 형식으로 지정

none: 화면에 보이지 않게 지정

 

display:block

: 웹페이지의 가로공간을 모두 차지하는 속성 ex)idvm p ,h1, ul,ol,table, ...

 

display:inline

컨텐츠(내용)이 끝나는 지점까지 너비를 가지는 속성

ex) span, a ,string,textarea... 단, 너비와 높이를 설정할 수 없다

 

선택자
기호 가중치
-전체 * 0
-태그 태그이름 1
-클래스 . 10
-아이디 # 100계층
-자식 >
-자손 띄
-후행 ~
-근접후행 +상대적인 폰트 크기 단위
em => 부모요소 기준 배수
rem => html 문서 기준 배수Box Model
- 내용 : Content
- 안쪽 여백 : Padding
- 경계선 : Border
=>속성 border-radius
- 바깥 여백 : MarginBox Sizing
- content-box : 컨텐츠만을 크기
(패딩, 보더 값을 주면 전체 크기가 커짐)- border-box : 보더까지를 크기
(패딩, 보더 값을 주면 => 컨텐츠 작아짐)display
- block : 한줄의 영역 전부 차지 => width, height 설정 O
- inline : 내가 넣은 컨텐츠를 크기로 => width, height  설정 X
- none : 안보여요~
 

<ex11display>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p,span{
            width: 200px;
            height: 200px;
        }

        /* 
        p태그의 기본 display : block
        span태그의 기본 display : inline

        -display: block;
         기본 값이 무조건 가로 영역을 전부 차지하고 있는 요소 => width,height 설정 가능

        - display:inline;
          내가 담은 컨텐츠까지만 크기로 가지는 요소
          =>width,height 설정 불가능
        */
        p{
            background-color: lightblue;
            display: inline;
        }
        span{
            background-color: lightpink;
            display: block;
        }
    </style>
</head>
<body>
    <p> p태그 (block)</p>
    <p> p태그 (block)</p>
    <p> p태그 (block)</p>
    <span>span태그 (inline)</span>
    <span>span태그 (inline)</span>
    <span>span태그 (inline)</span>
</body>
</html>

<ex12none.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .answer{
            display: none;
        }

        .question:hover+.answer{
            display: inline;
        }
    </style>
</head>
<body>
    <span class="question">Q. 여러분의 mbti는 무엇인가요?</span>
    <span class="answer">A. ESFJ </span>
</body>
</html>

오후 javascript

<javascript객체> 

 

객체: 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 타입 key/value pair를 저장할 수 있는 구조

 

객체=속성(property)+메소드(method)

property: 객체의 상태를 나타내는 값(data)

method: property를 참조하고 조작할 수 있는 동작

 

<javascript 객체 특징>

- 많은 값이 포함될 수 있는 변수이다

- key/Value 쌍을 가진 정보를 나열할 수 있다

- key는 문자열이어야 한다

- value는 모든 유형이 될 수 있다

- 한 쌍의 key/Value 뒤에 쉼표를 이용하여 구분해주어야 한다

- 객체에서 명명된 값을 property 라고 한다

- 변수는 예약어 이름을 가질 수 없지만 객체는 어떤 이름이어도 상관없다

- 객체 변수를 복사하면 참조가 복사되고 객체가 복사되지 않는다

 

<javascript 객체 종류>

원시값(기본 데이터 유형)을 제외한 모든 값은 객체이다

- 배열

- 함수

- 객체

- 날짜

- 수학

-정규 표현식

- new 키워드로 정의된 boolean, 숫자, 문자열

 

<내장객체>

내장객체(Built-in Object)

: 브라우저의 자바스크립트 엔진에 내장된 객체 필요한 경우 객체를 생성해서 사용할 수 있음

ex) 날짜(Date)객체 생성   var today=new Date()

 

<Ex01Date.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 현재 시간, 날짜
        let day = new Date();
        console.log(day);

        let t_year = day.getFullYear(); //년도
        let t_month = day.getMonth()+1;//월(0~11)
        let t_date = day.getDate();//일
        let t_day = day.getDay(); //요일(0~(일)~6(토))

        if(t_day==5){
            t_day="금";
        }

        console.log(t_year+"년"+t_month+"월"+t_date+"일"+t_day+"요일");

        let hour = day.getHours(); //시
        let min = day.getMinutes(); //분
        let sec = day.getSeconds(); //초

        console.log(hour+"시"+min+"분"+sec+"초")
    </script>
</body>
</html>

<Ex02정규표현식.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //전화번호 체크 정규표현식
        let regPhone = /^01([0|1])-?([0-9]{4})-?([0-9]{4})$/;

        let phone = '010-5000-5000';
        //console.log(regPhone.test(phone));
        if(regPhone.test(phone)==true){
            console.log("맞는 형식");
        }else{
            console.log("틀린 형식");
        }
    </script>
</body>
</html>

<Ex03 문자리터럴.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = 15;
        var b = 5;
        var c ="자바스크립트";
        var sar = "저는 "+(a,b)+"살이고 "+c+"를 좋아합니다";

        //문자리터럴 형식
        var str2 = `저는 ${a+b}살이고 ${c}를 좋아합니다`;
        console.log(str2);
    </script>
</body>
</html>

<브라우저 객체 모델(bom)>

window: 브라우저 객체의 최상위 객체(웹 브라우저 창)

screen: 사용자의 모니터 정보(속성)제공 객체

location: 사용자 브라우저 주소창 url 에 대한 정보(속성, 새로고침 기능(메소드)제공 객체

history: 이전에 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메소드 제공

navigator: 현재 방문자가 사용하는 브라우저 정보와 운영체제의 정보를 제공

document: html 요소와 관련된 작업을 도와주는 다양한 메소드를 제공

navigator: 현재 방문자가 사용하는 브라우저 정보와 운영체제의 정보를제공

document: html 요소와 관련된 작업을 도와주는 다양한 메소드를 제공

 

<Ex04Bom.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="window.close()">닫기</button>
    <button onclick="location.href = 'https://www.naver.com'">네이버로 이동</button>
    <a href="Ex04history.html">페이지 이동</a>
    <script>
        //window: 브라우저 창
        //open(): 새창 띄우기
        //alert,prompt,confirm (window생략)
        //window.open("https://www.nate.com","네이트","width=400,height=500,left=100,top=50")
        
        //screen: 사용자의 모니터 정보
        console.log('화면 너비 : ${screen.width}');
        console.log('화면 높이 : ${screen.height}');

        //navigator: 현재 사용자가 사용하는 브라우저/운영체제 정보 제공
        console.log("브라우저 이름 : "+ navigator.appName);
        console.log("브라우저 사용 언어 : "+navigator.language);

        //location:주소창 정보
        console.log("현재 주소: "+ location.href);
    </script>
</body>
</html>

<ex04history.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- history: 방문 사이트 정보 -->
    <button onclick="history.back()">이전 페이지로 이동</button>
</body>
</html>

 

 

<문서 객체 모델(DOM)>

HTMLElement 

모든 종류의 html요소를 나타내는 인터페이스

- getElement 메소드를 통해서 원하는 객체를 조회

- 조회된 객체들을 대상으로 구체적인 작업 처리

innerHTMTL은 요소를 바꾸어야 한다

<ex05htmlelement.html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id = "p1"><b>Hello</b>, JS!</p>

    <span>가</span>
    <span class="c1">나</span>
    <span>다</span>

    <br>

    <h1></h1>
    <h1 class="c1"></h1>

    <br>
    <input type="checkbox" name="subject" value="자바">자바
    <input type="checkbox" name="subject" value="안드">안드로이드
    <input type="checkbox" name="subject" value="웹">웹
    <input type="text" name="subject">
    <textarea name="subject" id="ta"></textarea>

    <div id="tt"></div>

    <button onclick="getId()">ID가 p1인 태그 접근</button>
    <button onclick="getSpan()">Span태그 접근</button>
    <button onclick="getClass()">class가 c1인 태그 접근</button>
    <button onclick="getName()">name이 subject인 태그 접근</button>

    <script>
        function getId(){
            //id가 p1인 요소에 접근
            //getElementById
            let p1 = document.getElementById('p1');
            console.log(p1);
            //innerHTML: 태그사이에 있는 모든 요소 가지고 오기
            //                          (텍스트+태그)
            console.log(p1.innerHTML);
            //innerText:태그사이에 있는 모든 텍스트 요소 가지고 오기
            console.log(p1.innerText);
        }

        function getSpan(){
           let spans = document.getElementsByTagName('span');
           console.log(spans);
           for(var i =0; i<spans.length;i++){
            console.log(spans[i].innerText);
           }
        }

        let getClass = () =>{
           let c1 = document.getElementsByClassName('c1');
           console.log(c1);
           for(var i=0; i<c1.length; i++){
            //텍스트요소만 추가
            // c1[i].innerText = "<u>클래스로 접근</U>";
            //텍스트+태그 요소도 추가 가능
                c1[i].innerHTML="<u>클래스로 접근!</u>";
           }
        } 

        function getName(){
            var sub = document.getElementsByName('subject');
            console.log(sub);
            for( var i =0; i<sub.length; i++){
                //form태그 내의 사용자 입력한(선택한)값을 가지고 오고 싶을때
                //value를 사용!!!!
                console.log(sub[i].value);
            }
            var ta = document.getElementById('ta');
            ta.value = "텍스트추가!";
        }
    </script>
</body>
</html>

<ex06dom실습>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>클릭 한번 해볼까요?</h1>
    <button onclick="mkH1()">h1태그 생성</button>
    <button onclick="mkA()">a태그 생성</button>
    <button onclick="mkUl()">ul태그 생성</button>

    <div id="div1"></div> 


    <script>

        let div1 = document.getElementById('div1');

        function mkH1(){
            //div1.innerHTML=div1.innerHTML+"h1"
            div1.innerHTML += "<h1>DOM 활용하기</h1>";
        }

        function mkA(){
            div1.innerHTML+="<a href='#'>google로 이동</a>";
        }

        function mkUl(){
            div1.innerHTML += "<ul>";
            div1.innerHTML += "<li>HTML</li>";
            div1.innerHTML += "<li>CSS</li>";
            div1.innerHTML += "<li>JS</li>";
            div1.innerHTML += "</ul>";   
        }
    </script>

</body>
</html>
728x90
LIST

'Full Stack 교육 회고록' 카테고리의 다른 글

9/20 css(flow, overflow,position) javascript(jquery, addremove)  (0) 2022.09.20
9/19 css(flex) javascript(j.query)  (2) 2022.09.19
8/15 CSS(아이디, 클래스, 계층 선택자) JAVASCRIPT(화살표함수,함수)  (0) 2022.09.15
9/14- html(회원가입화면, 테이블 실습)/ javascript(반복문, 조건문, 배열, 내부 외부 인라인 javascript)  (0) 2022.09.14
9/13- HTML(기초,태그)-정리완료 / javascript(연사자,자료형,입출력,변수)  (1) 2022.09.13

'Full Stack 교육 회고록' Related Articles

티스토리툴바