2019-7-20 CSS 다시 복습(Flex와 block, inline, inline-block)

CSS이론을 보고 실습을 했다가 헷갈려서 다시 이론을 복습했다.

block, inline, inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ineline Ex</title>
    <style>
        .box{
            background-color: red;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            display: inline;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

block은 element의 크기와 상관없이 옆에 block이 못오는것
display:inline-block을 하면 블록이 나란히 놓을수 있다.
inline은 박스의 모든 property설정값을 지운다. .box에 있는 프로퍼티들이 렌더링을 하면 아무것도 없다. 인라인은 text다. 텍스트는 높이도 폭도 없이 컨텐츠의 길이만 존재한다.
블록은 높이와 폭은 존재하지만 옆에 아무것도 못놓는다.
인라인-블록은 박스의 폭, 높이가 존재. 서로 옆에 놓을 수 있다.

Position

position은 4종류가 있다.
body에 margin:0, padding:0을 하는 이유는 브라우저에 기본값이 있기때문이다. 크롬은 기본값이 margin:8이다.
default로 모든 박스의 포지션은 static이다. element를 놓으면 그냥 거기에 딱 존재하는것이다. 정적이다.
fixed 포지션을 하면 우리가 보이는 화면에 딱 고정된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body{
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: red;
        }
        body{
            height: 400%;
        }
        .abs-box{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        .abs-child{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
<div class="abs-box">
    <div class="abs-child"></div>
</div>
</body>
</html>

위의 경우. abs-box와 abs-child가 따로 논다. 종속관계인데 왜그럴까?.. father에 해당하는 부모를 못찾아서? 뭔소리지? 나도 강의보면서 놀랐다…
포지션이 absolute가 되면 html에서 해당 element와 관계된(relative-부모박스)element를 찾아보고 이에 대응하는 포지션이 결정된다. 위에서는 상응하는 부모박스가 없어서 적용이 안된거다.

     .abs-box{
            width: 400px;
            height: 400px;
            background-color: yellow;
            position: relative;
        }
        .abs-child{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            right: 0;
        }

부모박스의 포지션을 relative로 설정을 하면 된다.!!!

flex

자동으로 완성되는 그리드가 없었다. flex를 사용을 하면된다.
flex를 사용할때는 부모박스(컨테이너)를 만들고, 자녀박스를 정렬?한다

selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
</head>
<body>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">
        <input type="password">
        <input type="submit">
    </div>
</div>
</body>
</html>

submit에 스타일을 적용할때 혼자작업을 하면 문제가 안되지만 팀으로 작업을 하면 문제가 생긴다.
가상셀렉터를 적용한다. 가상셀렉터란 셀렉터인데 element가 아닌것을 말한다.

<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
        input[type="submit"]{
            background-color: red;
        }
    </style>
</head>

위의 박스1,2,3중에 html태그, id, class의 사용없이 어떻게 박스3의 색깔만 바꿀까?

        .box:last-child{
            background-color: pink;
        }

last-child라는 가상셀렉터를 사용하면 된다. first-child도 있다. 가운데는? nth-child(2)이런식으로 n번째 자식을 선택할수도 있다.
nth-child(1)을 하면 1번째 요소를 선택한다. index가 0부터 시작하는게 아니다.

.box:nth-child(2n){ background-color: pink; }
.box:nth-child(2n+1){ background-color: pink; }       

2n, 2n+1등도 가능하다.
input+box{ css } : 서로가 형제라는 뜻이다.
input>box는 direct child를 말한다. 자손요소는 적용이 안된다.

css state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS State</title>
    <style>
        .box{
            background-color: red;
            font-size: 40px;
        }
        .box:hover{
            background-color: pink;
        }
        .box:active{
            background-color: green;
        }
        .box:focus{
            background-color: blue;
        }
    </style>
</head>
<body>
<textarea class="box">lalalalal</textarea>
</body>
</html>

개발자 도구를 열어서 .hov를 들어가면 active, focus, visited, hover라는 상태들이 있다.
hover state는 마우스가 위로 올라가면 pink로 변한다.
active는 박스를 클릭하면 변한다.
focus를 하면 다른 상태들이 무시된다?

느낀점

css를 보고 block이란 개념에 대해서 알게 되었다. box모델을 공부하면서 padding, margin등에 대해서 찾게 되었고, flex모델을 하면서 주축과 교차축에 대해 알게되었다. 이 부분에 대한것은 프로젝트의 레이아웃을 짜면서 옆에서 찾아보고 찾아본 결과였다. 확실히 직접 적용을 하면서 하다보니 절박함을 바탕으로 이해가 더 잘됬다.

Written on July 19, 2019