5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트

마진과 갭의 차이

마진
- 인접한 요소가 없어도 적용
갭
- 인접한 요소가 있어야만 적용

플렉스 박스

화면 크기가 달라지면 그에 맞춰 플렉스 항목을 늘리거나 줄일 수 있는 유연한 상자를 활용해 레이아웃을 만듬

CSS 그리드 레이아웃

가로와 세로 방향 모두 사용
항목은 1차원(flex), 그리드는 2차원
부모 컨테이너로 묶어주어야 함
정적으로 만들어진 행의 높이를 지정

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 200px 300px;
            grid-template-rows: 50px 100px;
        }

        .items {
            text-align: center;
            border: 1px solid black;
            padding-top: 10px;
        }

        .items:nth-child(even) {
            background-color: orange;
        }

        .items:nth-child(odd) {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
    </div>
    
</body>

</html>

동적으로 만들어진 행의 높이 지정

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 200px 300px;
            /* grid-template-rows: 50px 100px; */
            grid-auto-rows: 100px;
        }

        .items {
            text-align: center;
            border: 1px solid black;
            padding-top: 10px;
        }

        .items:nth-child(even) {
            background-color: orange;
        }

        .items:nth-child(odd) {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
    </div>
    
</body>

</html>

repeat와 함께 사용하여 원하는만큼의 열을 채울 수 있음
자동 채우기
- auto-fit
  - 남은 공간 분배
- auto-fill
  - 지정한 너비 만큼의 공간을 채운 후 남은 공간은 유지
그리드 레이아웃 지정
- 마지막은 -1
- start는 시작, end는 끝으로 지정
- 영역 범위 지정은 / 로 구분

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 700px;
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 1rem;
            text-align: center;
            color: white;
        }

        .box1 {
            grid-column: 1 / -1;
            grid-row-start: 1;
            background-color: blue;
        }

        .box2 {
            grid-row: 2 / -1;
            grid-column-start: 1;
            background-color: green;
        }

        
        .box3 {
            grid-column: 2 / -1;
            grid-row-start: 2;
            background-color: orangered;
        }

        .box4 {
            grid-row-start: 3;
            grid-column-start: 2;
            background-color: orange;
        }

        .box5 {
            grid-row-start: 3;
            grid-column-start: 3;
            background-color: red;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
        <div class="box5">box5</div>
    </div>
    
</body>

</html>

grid-area 속성을 사용하여 배치

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 700px;
            display: grid;
            gap: 1rem;
            text-align: center;
            color: white;
            grid-template-areas: 
            "box1 box1 box1"
            "box2 box3 box3"
            "box2 box4 box5";
        }

        .box1 {
            grid-area: box1;
            background-color: blue;
        }

        .box2 {
            grid-area: box2;
            background-color: green;
        }

        
        .box3 {
            grid-area: box3;
            background-color: orangered;
        }

        .box4 {
            grid-area: box4;
            background-color: orange;
        }

        .box5 {
            grid-area: box5;
            background-color: red;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
        <div class="box5">box5</div>
    </div>
    
</body>

</html>

선택자

하위 선택자
- 부모 요소를 포함하여 포함된 하위 요소를 모두 선택
자식 선택자
인접 형제 선택자
- 첫 번째 요소
형제 선택자
- ~
- 지정된 범위 내의 모든 요소
속성 선택자
- 태그[속성]
특정 속성값 요소 선택
- 태그[속성=속성값]

사용자 정의 속성

형식
- data-xxx = “” (임의의 값)
같은 스타일을 여러 요소에 적용하는 :is
- :is (요소명, 요소명 …)
내용 앞 뒤에 가상 요소를 사용해 추가
- ::before
- ::after

CSS 함수

root 가상 클래스
- :root
  - 문서의 최상위 요소를 선택
clac()
- 계산을 해주는 함수
- 매개변수로 계산 식
filter()
- blur 효과를 나타낼 때 주로 사용

프로젝트 진행 순서

Front
- 기획 - 디자인(X, PPT, Figma) - 설계 - 마크업*
- 레이아웃 (html)
- 요소 (html)
- 스타일 (css)
- 이벤트 (모션, 효과) (javascript)
Back
- ?

자바 스크립트

자바 스크립트를 사용하는 이유
- 웹 요소 제어
- 웹 애플리케이션 제작
- 다양한 라이브러리 사용
- 서버 개발
인터프리터 언어
HTML 언어 안에서 <script> 태그를 통해 작성하거나, 다른 파일을 선언하여 작성할 수 있음

변수 선언

<script>
    var name = '홍길동';
    console.log(name);
    
</script>

함수 사용

함수가 사용되는 곳 보다 아래 있어야 함
콘솔 출력
- console.log(내용);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body><h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해보세요</p>
    <script>
        let heading = document.querySelector('#heading');
        heading.onclick = function() {
            heading.style.color = 'red';
        }
    </script>
</body>
</html>

알림

알림 화면을 띄움

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body><h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해보세요</p>
    <script>
        alert("안녕하세요!!");
    </script>
</body>
</html>

True, False를 반환하는 알림

import java.util.ArrayList;

class Solution {

    public static void main(String[] args) {
        solution(new int[][]{{2, 3}, {4, 3}, {1, 1}, {2, 1}});
    }

    public static int[] solution(int[][] edges) {
        int[] answer = {};
        int lastIdx = 0;
        ArrayList<Integer>[] tree = new ArrayList[1000001];
        for (int i = 0; i < edges.length; i++) {
            if (tree[edges[i][0]] == null) {
                tree[i] = new ArrayList<>();
                lastIdx = i;
            }
            tree[edges[i][0]].add(edges[i][1]);
        }

        for(int i = 1; i<tree.length; i++) {
            if(tree[i] != null) {
                System.out.println(i + " " + tree[i]);
            }
        }
        System.out.println(lastIdx);
        return answer;
    }
}

이름 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script>
        if(confirm('삭제 하시겠습니까?')){
            console.log('삭제완료');
        } else {
            console.log('삭제취소');
        }
        let name = prompt('이름 입력');
        
    </script>
</body>
</html>

쓰기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script>
        let name = prompt('이름 입력');
        document.write(name);
    </script>
</body>
</html>

태그도 삽입 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script>
        let name = prompt('이름 입력');
        document.write("<h1>name</h1>");
    </script>
</body>
</html>

홑 따옴표를 이용하면 문자열 그대로 출력 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <script>
        let name = prompt('이름 입력');
        document.write('<h1>na"me"</h1>');
    </script>
</body>
</html>

변수 할당

<script>
    var a;
    // 초기화
    a = 10;
    console.log(typeof a); // number
    // 다른 타입으로 저장
    a = "홍길동"; // dynamic data type (동적타이핑)
    console.log(typeof a); // string
</script>

여러 타입을 동적으로 대입할 수 있다.
주의
- 아무것도 안쓰는 var
  - hoisting
    - 실행 시 문서 상단으로 이동
    - var은 호이스팅
- 되도록 let, const 권장
  - let, const는 사용 시점 보다 변수가 항상 위에 있어야 함
  - 호이스팅이 안되는 것이 아님 (엑세스가 안되는 것)

<script>
    var a;
    // 초기화
    a = 10;
    console.log(typeof a); // number
    // 다른 타입으로 저장
    a = "홍길동"; // dynamic data type (동적타이핑)
    console.log(typeof a); // string

    const bbb = 100;
    bbb= 200;

    let ccc = 100;
    ccc = 200;
</script>

const는 재 할당 불가능

다양한 타입

<script>
    let number = 1.5;
    console.log(typeof(number)) // number

    let n = "홍길동";
    console.log(typeof n); // string

    let b = true;
    console.log(typeof b); // boolean

    let u;
    console.log(typeof u); // undefined

    let nr = null;
    console.log(typeof nr); // object

    // 배열
    let arr = [1,2,3];
    console.log(typeof arr); // object

    let arr2 = arr
    arr2[0] = 4
    console.log(arr) // 참조 자료형이기 때문에 원본 배열도 바뀜
    

    // 객체
    let obj = {name : "홍길동", age : 30}
    console.log(typeof obj); // object

    // 함수
    let f = function() {
        console.log('hello');
    };
    console.log(typeof(f)); // function
</script>

문자열 사이에 변수 넣기

<script>
    let name = 'kim';
    let classRoom = 204;
    let text1 = name + "님, " + classRoom + "호 강의실로 입장하세요";
    let text2 = `${name}님 ${classRoom}호 강의실로 입장하세요`; // 백틱으로 변수 넣기

</script>

형 변환

<script>
    let r = '10' - 1;
    let r2 = '10' + 1;
    console.log(r); // 빼기는 숫자로 변환됨
    console.log(r2);

    let r3 = Number('10') - 1;
    console.log(r3);
</script>

잘못된 수를 넣으면 NaN 반환

<script>
    // 문자 -> 숫자
    // Number, parseInt 차이
    let str = "1"
    console.log(parseInt(str))

    console.log(parseInt(''));

    let n = 10;
    let msg = n + "살"
    let msg2 = String(n);
    let msg3 = n.toString();

    // 16진수
    console.log(n.toString(16))

    console.log(msg)
    console.log(msg2)
    console.log(msg3)
</script>

메모

nth
- even
  - 짝수 값 지정
- odd
  - 홀수 값 지정

728x90

'FrontEnd' 카테고리의 다른 글

5/16 - DOM 요소 접근, JQuery (0)	2025.05.17
5/15 - JavaScript 문법 (1)	2025.05.17
5/13 - CSS, BOX, 이미지와 그라데이션, 반응형 웹 (0)	2025.05.17
5/12 - CSS (0)	2025.05.17
5/9 - HTML 태그, CSS 기본 (4)	2025.05.11

지원씨의 안드로이드 공부방

5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트

마진과 갭의 차이

플렉스 박스

CSS 그리드 레이아웃

선택자

사용자 정의 속성

CSS 함수

프로젝트 진행 순서

자바 스크립트

변수 선언

함수 사용

알림

True, False를 반환하는 알림

이름 입력

쓰기

변수 할당

다양한 타입

문자열 사이에 변수 넣기

형 변환

메모

'FrontEnd' 카테고리의 다른 글

티스토리툴바

5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트

마진과 갭의 차이

플렉스 박스

CSS 그리드 레이아웃

선택자

사용자 정의 속성

CSS 함수

프로젝트 진행 순서

자바 스크립트

변수 선언

함수 사용

알림

True, False를 반환하는 알림

이름 입력

쓰기

변수 할당

다양한 타입

문자열 사이에 변수 넣기

형 변환

메모

'FrontEnd' 카테고리의 다른 글

관련글

티스토리툴바