1. form 관련 가상 클래스 선택자

:enabled, :disabled

활성화 / 비활성화 상태일 때

:read-only, :read-write

사용자가 편집할 수 없는/있는 상태일 때

:checked

input checkbox radio 유형일때 선택된 상태를 나타냄

:required

필수입력값일 경우

: :placeholder

입력에 대한 추가 정보가 있을 경우

2. position

position이란?

HTML 태그의 위치를 지정해주는 속성

position 속성을 이용해 페이지의 레이아웃을 결정할 수 있다.

보통 일반적인 서비스 상황에서는 margin 값을 조정해 요소의 위치를 설정한다

하지만 모달창(팝업)이나 애니메이션 같이 요소들이 겹쳐야하는 경우, position을 이용한다.

3. position의 종류

3.1 position : static

기본적으로 모든 태그들은 static 값을 가진다

html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정된다
- 정상적인 흐름 : 위에서 아래로 순서대로 앞 요소 뒤에 붙어서

3.2 position : relative

원래 자신이 있어야 하는 위치에 상대적인 속성

자신이 원래 있던 자리를 기억한다.

position : relative; 라는 값을 주고 left : 50px; 이라고 추가적으로 적어주면, 본인의 static 자리에서 왼쪽으로 50px 만큼 떨어진 자리에 위치하게 된다.
- relative 속성은 원래의 자기자리를 인식하지만, left,right,top,bottom 속성을 이용해서 움직일 때는 다른 콘텐츠들의 레이아웃에 영향을 미치지 않는다. (요소와 요소 간의 겹침 현상이 일어날 수 있다.)

3.3 position : absolute

다른 형제 요소에 영향을 받지 않지만, 부모(또는 조상) 요소에는 영향을 받는다

position : absolute; 라고 한 뒤 top : 20px; right: 30px; 이라고 추가적인 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 볼 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>relative-absolute</title>
    <style>
        .box1 {
            position: relative;
            top: 40px;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
        }

        .box2 {
            position: absolute;
            top: 40px;
            background-color: red;
            color: white;
            width: 100px;
            height: 100px;
        }

        .box3 {
            position: absolute;
            top: 30px;
            left: 30px;
            background-color: blue;
            color: white;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box3">box3</div>
<div class="box1">box1
    <div class="box2">
        box2
    </div>
</div>
</body>
</html>

absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치한다.

부모가 없다면 html의 root 요소를 기준으로 삼는다 (html 태그)

normal flow 상에서 absolute속성을 가진 element의 뒤에오는 요소는 absolute 요소의 앞 요소 뒤에 붙게된다.
- absolute = normal flow에서 벗어난 것이기 때문에

<!DOCTYPE html>
<html lang="ko">
<head>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 500px;
            margin-left: 100px;
            border: 5px solid black;
        }

        .one {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            color: white;
        }

        .one:nth-child(1) {
            position: static;
            background-color: red;
        }

        .one:nth-child(2) {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: green;
        }

        .one:nth-child(3) {
            position: static;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="one">box1</div>
    <div class="one">box2</div>
    <div class="one">box3</div>
</div>
</body>
</html>

3.4 position : fixed

스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않길 원한다면, fixed 속성을 이용

현재 사용자가 보고있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 한자리에 계속해서 위치한다.

네비게이션 같은 중요한 정보를 화면에 계속 노출시키기 위해 많이 사용하는 속성

bottom 과 right에 50px이 적용된다면 화면의 아래와 오른쪽에서 50px씩 떨어진 위치에 요소가 고정된다.

3.5 position : sticky

sticky(끈끈한, 끈적끈적한) 속성값이 적용된 요소는 조상(예시에서는 html)에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라붙는다.

아직 웹 표준 기술이 아니다 (특정 브라우저에서는 지원하지 않을 수 있다.)

3.6 z-index

요소와 요소가 겹치는 경우, 어떤 요소가 더 위로 나타나게 할지 결정할 때 사용하는 속성 (기본값 : auto)

static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 된다.

나중에 생성된 요소가 더 높은 z-index를 가지고 있다.

부모가 z-index를 높여 자식 앞으로 나올 수 없다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능

질문 :
- red box를 auto로 설정했을 때와 0으로 설정했을 때 blue box의 결과가 달라지게 되는데 이게 이해하기 어렵다.
- 또 자식요소의 z index를 어떻게 설정해야 부모를 자식위에 위치시킬수 있는가?
- 답 :
  CSS 응용(position, flex)
  - auto : html에 그려진 순서대로 그려진다. (뒤에 생길 수록 위에 있다)
  - stack context : 쌓임 순서를 관리하는 일종의 격리된 영역
    - 각 스택 컨텍스트는 독립적인 쌓임 순서를 가진다.
    - 요소에 스택 컨텍스트가 형성되면 해당 요소의 자식 요소들은 해당 컨텍스트에 영향을 받는다.
    스택 컨텍스트가 형성되는 경우:
    1. position: relative, position: absolute, position: fixed, 또는 position: sticky 속성을 가지는 요소는 새로운 스택 컨텍스트를 형성한다.
    1. flex, grid 컨테이너의 자식 요소는 스택 컨텍스트를 형성한다.
    1. opacity 속성이 1보다 작은 값으로 설정된 경우도 스택 컨텍스트를 형성한다.
    1. transform, filter, perspective, clip-path, contain 속성을 사용하는 경우도 스택 컨텍스트를 형성할 수 있다.
  - 값으로 따질때는 0과 auto가 같은 값이므로 뒤에 온 blue가 더 높다.
  - 동일한 stack context 내에서는 z-index 값이 높을수록 위에 쌓이지만, 다른 stack context 간에는 z-index값이 높다고 해서 반드시 위에 쌓이지는 않는다.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="test.css">
    <title>Title</title>
</head>
<body>
<div id="example-auto">
  <div class="box red">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

<div id="example-0">
  <div class="box red" style="z-index: auto">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue" style="z-index: 0"></div>
</div>
</body>
</html>
```
```
.box {
    position: relative;
    width: 64px;
    height: 64px;
    top: 32px;
    left: 32px;
}

.red {
    background: red;
}

.green {
    background: green;
}

.blue {
    background: blue;
}

#example-auto {
    display: inline-block;
}

#example-0 {
    display: inline-block;
    margin-left: 64px;
}
```

4. flex

flex-container에 충분한 공간이 있어야 의도한대로 배치가 가능하다.

직계 자식에만 영향을 줄 수 있다.

https://studiomeal.com/archives/197

1. flex-container에 사용하는 속성

display : flex

자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 것을 설정하는 방법

부모 요소를 flex-container 자식 요소를 flex-item 이라고 부른다

1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용한다.

flex-direction

컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정

row : 기본값, 왼쪽에서 오른쪽 (주축이 행 방향)

column : 위에서 아래 방향 (주축이 열 방향)

row-reverse : 오른쪽에서 왼쪽

column-reverse : 아래에서 위 방향

justify-content ()

주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 간격 설정을 할 수 있다

flex-start, flex-end, center, space-between, space-around, space-evenly

align-items, align-content

align-items : 교차 축을 기준으로 정렬
- 기본값 : stretch

align-content : 컨테이너의 교차 축의 아이템들이 여러 줄일 때 사용 가능
- flex-wrap:wrap 인 상태에서 사용해야 한다. (overflow가 발생하면 요소를 다음줄로 넘긴다.)

gap

아이템 사이의 간격을 설정할 때 사용 할 수 있는 속성

gap: 10px;

flex-wrap

한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지 결정

요소가 많아졌을 때 유용한 옵션

flex-flow

flex-direction flex-wrap 단축속성

flex-flow: row wrap;

2. flex-item에 사용하는 속성

flex-basis

flex-item의 초기 크기를 설정

width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 것

auto 기본값

flex-basis 값이 적용되어있다면 row일 경우 width 값이 무시, column일 경우 height 값이 무시된다

💡

기본적으로 px이나 em 등의 단위값을 사용하며, 0외에 다른 상숫값을 사용할 수 없다.

flex-grow

아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정한다.

형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받는다.

값을 0을 줄 경우 늘어나지 않는다.

flex-grow : 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당받는다.

flex-grow : 2(2이상의 수) → 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배(배수로)의 여백 공간을 할당받는다. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라진다.

💡

flex-basis:0을 주게 되면 여백 공간이 아니라 전체 공간을 분할한다.

flex-shrink

아이템의 크기를 고정하거나 축소할 때 사용한다.

값을 0을 줄 경우 (아이템의 크기는)줄어들지 않는다.

단 grow 로 인해 여백 공간이 할당 된 경우, 그 여백 공간은

기본값 : 1

align-self

부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여한다.
- 기본값 stretch

flex

단축속성

flex-grow flex-shrink flex-basis

flex: 1 1 100px;

과제

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../CSS/login.css">
    <title>로그인 화면</title>
</head>
<body>
<div id="login_area">
    <p>더 편리해진 위니브에 오신 것을 환영합니다.</p>
    <button id="login_btn"><img id="weniv-logo" src="img/weniv-logo.svg" alt="위니브 로고">로그인</button>
    <div id="options">
        <div id="find_area">
            <img id="icon-lock" src="img/icon-lock.png" alt="잠금아이콘">
            <p>아이디 | 비밀번호 찾기</p>
        </div>
        <div id="register">
            <img id="icon-user" src="img/icon-user.png">
            <p>회원가입</p>
        </div>
    </div>
</div>
</body>
</html>

#login_area {
    display: flex;
    flex-direction: column;
    width: 350px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
}

#login_area > p {
    width: 215px;
    height: 15px;
    font-size: 10px;
    margin-inline-start: 15px;
}

#login_btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;
    width: 318px;
    height: 40px;
    border-radius: 4px;
    background-color: #711BFF;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
}

#login_btn > p {

    width: 34px;
    height: 15px;
}

#options {
    display: flex;
    justify-content: space-between;
    margin: 0 13px;
}

#register {
    display: flex;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
}

#register img {
    width: 16px;
    height: 16px;
}

#register > p {
    width: 45px;
    height: 15px;
    font-size: 10px;
}

#find_area {
    display: flex;
    align-self: flex-start;
    justify-content: center;
    align-items: center;
}

#find_area img {
    width: 16px;
    height: 16px;
}

#find_area p {
    width: 113px;
    height: 15px;
    font-size: 10px;
}

기타

html 3d로 보이게 만들기 : https://imjignesh.com/how-css-perspective-works/

모집 공고 보는법 : 3년이하의 경력 채용 공고는 신입이 지원해봐도 좋다.

flex 연습 사이트 : https://flexboxfroggy.com/#ko

codepen 설명 : https://hello-bryan.tistory.com/70

마진이나 top, bottom 같은 위치 조정 옵션은 px 보다 % 나 em을 사용하는 것이 좋다!

추가 내용

IR 기법 : 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것
- 네이버
```
.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}
```
- width랑 height값을 0이 아니라 1로 준 이유 : 브라우저가 0이면 랜더링 과정에서 삭제하는 경우가 있어서 1로 준다

transform 속성 : 위치나 모양을 변화시킬 수 있는 속성 (PC의 GPU를 이용하도록 해준다. ⇒ 속도 👍)

오늘의 소감 / 떠오르는 생각

역시 flex는 어렵다

개인 플젝… 할 수 있겠지??

'Dev > ESTsoft 오르미' 카테고리의 다른 글

JavaScript2 (타입 ~) (0)	2024.02.22
JavaScript1 (~조건문과 반복문) (0)	2024.02.22
CSS1 (기초 & CSS Box Model) (0)	2024.02.22
HTML_2 (form, table) (1)	2024.02.22
HTML_1 (기본개념) (0)	2024.02.22

CSS2 (Position & Flex)

1. form 관련 가상 클래스 선택자

:enabled, :disabled

:read-only, :read-write

:checked

:required

: :placeholder

2. position

position이란?

3. position의 종류

3.1 position : static

3.2 position : relative

3.3 position : absolute

3.4 position : fixed

3.5 position : sticky

3.6 z-index

4. flex

1. flex-container에 사용하는 속성

flex-direction

justify-content ()

align-items, align-content

gap

flex-wrap

flex-flow

2. flex-item에 사용하는 속성

flex-basis

flex-grow

flex-shrink

align-self

flex

과제

기타

추가 내용

오늘의 소감 / 떠오르는 생각

'Dev > ESTsoft 오르미' 카테고리의 다른 글

티스토리툴바