5일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL

서론

정리할 것이 너무 많다

5일차에서 이어지는 CSS 학습이다. 사실 강의 자체는 5일차에 다 들었으니, 이것도 5일차라고 하는 게 맞지 않나 싶기도 하지만... 문제는 정리하고 추가로 공부하는 게 생각보다 많다는 점이다. 그리고 실질적으로는 바로 다음 날 올라왔어야 했는데, 여러 개인적인 사정으로 일주일이나 거의 미뤄진 뒤에 올라오게 되었다. 살다살다 usb 과전압으로 컴퓨터가 안 켜지고, 키보드&마우스가 고장나고, 감기 때문에 앓아누울 줄이야... 

 

아무튼, CSS 공부 겸 TIL을 계속 이어가도록 하겠다. 오늘은 프로그래머스 데브코스의 강사님들도 중요하다고 말하신 그리드라는 내용이 나온다.

 

이번 일차는 CSS 학습이다.

 

표시 유형과 레이아웃

Display

<div class="none_ele">없음</div>
<div class="inline_ele">인라인 요소</div><div class="inline_ele">인라인 요소</div>
<div class="block_ele">블록 요소</div><div class="block_ele">블록 요소</div>
<div class="inline-block_ele">인라인-블록 요소</div><div class="inline-block_ele">인라인-블록 요소</div>

.none_ele {
    background-color: red;
    border : solid 5px orange;

    display: none;
}

.inline_ele {
    width: 300px;
    background-color: blue;
    border : solid 5px orange;

    display: inline;
}

.block_ele {
    background-color: green;
    border : solid 5px orange;

    display: block;
}

.inline-block_ele {
    width: 300px;
    background-color: purple;
    border : solid 5px orange;

    display: inline-block;
}

각 요소마다 특징이 다르다.

display는 요소를 어떻게 보여줄 것인지를 결정하는 것이다. 간단하게 말하자면 인라인 레벨 혹은 블록 레벨을 새로이 변경하는 속성이라고 할 수 있다.

• 없음(none)
  특정 영역을 가리고 싶을 때 사용됨. 크기도 차지하지 않고, 화면에서 완전히 사라짐. 해당 값은 접근성 트리에서 제외되므로 스크린 리더가 읽지 않음.
• 인라인(inline)
  인라인 요소로 만듬. 콘텐츠에게 필요한 요소만 차지함. 당연하게도 줄바꿈 및 크기 변경은 안 됨. 오직 좌우 margin, padding 조절만 가능함. 콘텐츠에 따라 레이아웃의 특정 부분을 유동적으로 조절하고 싶을 때 사용. 
• 블록(block)
  블록 요소로 만듬. 기본적으로 너비를 100%로 가짐.(한 줄을 통째로 차지.) 물론 이건 기본적인 이야기이고, width, height, margin, padding 등의 속성을 변경하는 것 자체는 가능함. 다만, 그렇게 변경해도 한줄을 잡아먹는 건 달라지지 않음.
• 인라인-블록(inline-block)
  인라인-블록 요소로 만듬. 인라인과 블록 요소의 특징을 합쳐놓았음. 크기 및 여백 조절이 자유로운 인라인에 가까움. 더 쉽게 말하자면 인라인의 형상을 하고 있지만, 내부적인 속성은 블록처럼 자유롭게 조정이 가능하다는 것.

기본적으로 해당 속성값들의 기본값은 적용 요소(태그)마다 다르기에 주의해야 한다.

 

 

Visibility

<div>
    <img src="cat_img.jpg" class="cat1">
</div>
<div>
    <img src="cat_img.jpg" class="cat2">
</div>
---공간 차지---

.cat1 {
    width: 300px;
    border : solid 5px green;
    
    visibility: visible;
}

.cat2 {
    width: 300px;
    border : solid 5px green;

    visibility: hidden;
}

아래 사진이 안 보이지만, 공간은 여전히 차지한다.

레이아웃을 변경하지 않고, 요소를 보이거나 숨길 수 있는 속성이다. 즉, 요소에 의해 생성된 박스를 렌더링할 것인지 결정하는 것이다. 참고로 display의 none과 다르게 안 보여도 레이아웃에 영향을 끼친다.

 

<table>
    <tr>
        <td>1-1</td>
        <td class="co">1-2</td>
        <td>1-3</td>
    </tr>
    <tr class="co">
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td class="co">3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
    </tr>
</table>

.co {
    visibility: collapse;
}

table {
    border: 5px solid red;
}

td {
    border: 3px solid blue;
}

visibility: collapse를 적용한 테이블1

또한 visible, hidden 값 외에도 'collapse'라는 값이 존재한다. 사용법은 'visibility: collapse'이다. collapse는 테이블 요소 전용에 가까운 값이다. 다른 곳에 적용하면 hidden처럼 작용할 뿐이다.

 

정확하게는 테이블의 행(가로)에 collapse를 적용하면, display: none처럼 행 자체가 사라진다. 위의 사진을 보면 알겠지만, 코드 상으로는 존재하는 2-n번이 사라진 상태이다.

display: none을 테이블1에 대신 적용한 테이블2

그리고 반면 열(세로)에 collapse를 적용하면 구조 자체는 유지되고 보이는 것만 사라지는, visibility: none와도 같은 효과가 적용된다. 1번째 적색-청색 테이블 사진과 2번째 적색-청색 테이블 사진을 비교하면 어떤 차이가 있는지 확실하게 알 수 있다. 2번째 테이블 사진은 구조가 붕괴되었지만, 1번째 테이블 사진은 아니다.

 

 

Float

<div>
    <img src="cat_img.jpg" class="cat1">
    중앙선거관리위원회는 대통령이 임명하는 3인, 국회에서 선출하는 3인과 대법원장이 지명하는 3인의 위원으로 구성한다. 위원장은 위원중에서 호선한다. 새로운 회계연도가 개시될 때까지 예산안이 의결되지 못한 때에는 정부는 국회에서 예산안이 의결될 때까지 다음의 목적을 위한 경비는 전년도 예산에 준하여 집행할 수 있다. 모든 국민은 능력에 따라 균등하게 교육을 받을 권리를 가진다. 대통령은 국회에 출석하여 발언하거나 서한으로 의견을 표시할 수 있다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 국회의원은 국회에서 직무상 행한 발언과 표결에 관하여 국회외에서 책임을 지지 아니한다.
    <br><br>
    <img src="cat_img.jpg" class="cat2">
    제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다. 국군은 국가의 안전보장과 국토방위의 신성한 의무를 수행함을 사명으로 하며, 그 정치적 중립성은 준수된다. 법관이 중대한 심신상의 장해로 직무를 수행할 수 없을 때에는 법률이 정하는 바에 의하여 퇴직하게 할 수 있다. 모든 국민은 사생활의 비밀과 자유를 침해받지 아니한다. 선거와 국민투표의 공정한 관리 및 정당에 관한 사무를 처리하기 위하여 선거관리위원회를 둔다. 위원은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니한다. 국가는 건전한 소비행위를 계도하고 생산품의 품질향상을 촉구하기 위한 소비자보호운동을 법률이 정하는 바에 의하여 보장한다.
</div>

.cat1 {
    width: 200px;
    float: left;
}
.cat2 {
    width: 200px;
    float: right;
}

임숨 생성기로 얻은 헌법 전문은 저작권에서 자유롭다

float에는 띄우다라는 의미가 있다. CSS 내에서 이 속성은 이미지를 어떻게 텍스트와 함께 배치할 것인지를 다루는 속성이다.

 

보통 기사 같은 것을 보면 상단 좌측이나 상단 우측에 이미지가 걸려있고, 텍스트들은 그 이미지의 두 면에 이웃하는 경우들이 있다. 그걸 만드는 것이라고 보면 된다.

 

해당 속성을 지정할 경우 display를 통한 인라인 및 블럭 설정은 무시된다.  기본값은 float: none이며, 요소를 띄우지 않는 값이다.

 

 

Position

position은 문서 내부 요소들을 어떻게 배치할 것인지를 정하는 속성이다. 레이아웃 배치 및 기타 태그의 위치 변경을 목적으로 정의한다.

 

top(상), bottom(하), left(좌),  right(우) 속성을 통해 각 배치할 위치를 정확하게 설정할 수도 있다. 사용 단위는 다른 것들과 마찬가지로 px, em, % 등이 있다.

 

즉, position은 어떤 식으로 계산 방식이 작동할 것인지를 설정하는 속성이고, top, bottom, left, right는 해당 계산 방식대로 위치의 좌표값을 정확하게 지정하는 속성이다.

 

이러한 position은 자주 사용하는 5가지의 값을 가진다.

 

static

<div class="mains">
    <div class="div_def"><h1>첫 번째 div</h1></div>
    <div class="div_edit1"><h1>두 번째 div</h1></div>
    <div class="div_def"><h1>세 번째 div</h1></div>
    <div class="div_edit2"><h1>네 번째 div</h1></div>
    <div class="div_def"><h1>다섯 번째 div</h1></div>
</div>

.mains {
    background-color : orange;
    height : 800px;
    width : 600px;
    position: static;
}

.div_def {
    background-color : yellow;
    border : solid 5px green;
    height : 100px;
    width : 400px;
    position: static;
}

.div_edit1 {
    background-color : greenyellow;
    border : solid 5px purple;
    height : 100px;
    width : 400px;
    position: static;
}

.div_edit2 {
    background-color : cyan;
    border : solid 5px brown;
    height : 100px;
    width : 400px;
    position: static;
}

기본 값이라 그런지 있으나 없으나 그게 그거다.

static은 position의 기본 값이다. 본래 기본적으로 지정된 위치가 시작 지점이다. 문서의 흐름에 따라 각 요소들이 배치되된다.  당연하지만, 위치를 임의로 설정하는 top, bottom, left, right 사용이 불가능하다.

 

absolute

<div class="mains">
    <div class="div_def"><h1>첫 번째 div</h1></div>
    <div class="div_edit1"><h1>두 번째 div</h1></div>
    <div class="div_def"><h1>세 번째 div</h1></div>
    <div class="div_edit2"><h1>네 번째 div</h1></div>
    <div class="div_def"><h1>다섯 번째 div</h1></div>
</div>

.mains {
    background-color : orange;
    height : 800px;
    width : 600px;
    position: relative;
}

.div_def {
    background-color : yellow;
    border : solid 5px green;
    height : 100px;
    width : 400px;
    position: static;
}

.div_edit1 {
    background-color : greenyellow;
    border : solid 5px purple;
    height : 100px;
    width : 400px;

    top: 35px;
    right: 20px;
    position: absolute;
}

.div_edit2 {
    background-color : cyan;
    border : solid 5px brown;
    height : 100px;
    width : 400px;

    bottom: 35px;
    left: 20px;
    position: absolute;
}

뒤에 주황색 박스를 기준으로 위치가 지정되었다.

absolute는 이름과 다르게 절대적인 값이 아니다. 오히려 타 요소에 의존하는 값이라 할 수 있다. 기본적으로 absolute는 html 구조(문서의 흐름)에서 제외되고 시작한다. 그런 탓인지 요소가 붕 떠서 다른 것과 겹칠 수 있게 된다.

 

그리고 레이아웃에도 공간을 배정하지 않는다. 대신, position 속성이 있는 가장 가까운  '상위 요소(부모)'에게서 시작 지점을 찾는다. 물론 기본값인 position: static 값을 들고 있는 부모는 제외다. (relative, absolute, fixed 속성 중 하나여야 함.)

 

만약 부모 중에서 static를 제외한 postion 값을 가지고 있을 경우, 해당 부모를 기준점으로 잡는다. 부모가 모두 position: static 이거나 그냥 position 속성이 없을 경우, 최상단의 <body> 태그 (사실상 브라우저 창 크기)를 기준으로 시작 위치를 잡는다.

 

static 제외 position 속성이 있는 가장 가까운(첫 번째) 부모라는 조건때문에 이러한 absolute은 복잡한 활용이 어렵다. 그렇기에 보통 relative 값이 있는 가장 가까운 녀석을 부모로 삼고, 해당 지점을 시작 기준으로 잡아서 사용한다.

 

relative

<div class="mains">
    <div class="div_def"><h1>첫 번째 div</h1></div>
    <div class="div_edit1"><h1>두 번째 div</h1></div>
    <div class="div_def"><h1>세 번째 div</h1></div>
    <div class="div_edit2"><h1>네 번째 div</h1></div>
    <div class="div_def"><h1>다섯 번째 div</h1></div>
</div>

.mains {
    background-color : orange;
    height : 800px;
    width : 600px;
    position: static;
}

.div_def {
    background-color : yellow;
    border : solid 5px green;
    height : 100px;
    width : 400px;
    position: static;
}

.div_edit1 {
    background-color : greenyellow;
    border : solid 5px purple;
    height : 100px;
    width : 400px;

    bottom: 35px;
    left: 70px;
    position: relative;
}

.div_edit2 {
    background-color : cyan;
    border : solid 5px brown;
    height : 100px;
    width : 400px;

    top: 35px;
    right: 70px;
    position: relative;
}

연두색과 하늘색은 본래 자기 위치에서 새로이 위치가 지정되었다.

원래 있던 위치(static 위치)를 시작 지점으로 삼는다. 문서의 흐름에서 제외되지는 않는다. 즉, 상대적 좌표계를 기반으로하는 값이다. 이를 이용하면 원래 위치에서 특정거리만큼 멀어지게 하는 것이 빠르게 가능하다.

 

fixed

<div class="mains">
    <div class="div_def"><h1>첫 번째 div</h1></div>
    <div class="div_edit1"><h1>두 번째 div</h1></div>
    <div class="div_def"><h1>세 번째 div</h1></div>
    <div class="div_edit2"><h1>네 번째 div</h1></div>
    <div class="div_def"><h1>다섯 번째 div</h1></div>
</div>

.mains {
    background-color : orange;
    height : 800px;
    width : 600px;
    position: static;
}

.div_def {
    background-color : yellow;
    border : solid 5px green;
    height : 100px;
    width : 400px;
    position: static;
}

.div_edit1 {
    background-color : greenyellow;
    border : solid 5px purple;
    height : 100px;
    width : 400px;

    top: 50px;
    right: 150px;
    position: fixed;
}

.div_edit2 {
    background-color : cyan;
    border : solid 5px brown;
    height : 100px;
    width : 400px;

    bottom: 100px;
    left: 150px;
    position: fixed;
}

스크롤시 하늘색과 연두색 상자가 따라온다

fixed에는 고정되어 있다는 뜻이 있다. 그리고 이 녀석은 브라우저 창을 고정적인 시작 지점으로 삼는다. 즉, 브라우저 화면에 고정된 UI를 구현할 때 사용하는 속성이다.

 

당연하게도 해당 속성을 적용한 요소는 문서의 흐름에서 제외된다. 스크롤이 되어도, 화면이 자잘하게 바뀌어도 고정이라 할 수 있는, fixed 요소는 특별한 일이 없는 한 남는다.

 

sticky

<div class="mains">
    <div class="div_def"><h1>첫 번째 div</h1></div>
    <div class="div_edit1"><h1>두 번째 div</h1></div>
    <div class="div_def"><h1>세 번째 div</h1></div>
    <div class="div_edit2"><h1>네 번째 div</h1></div>
    <div class="div_def"><h1>다섯 번째 div</h1></div>
</div>

.mains {
    background-color : orange;
    height : 2000px;
    width : 600px;
    position: static;
}

.div_def {
    background-color : yellow;
    border : solid 5px green;
    height : 100px;
    width : 400px;
    position: static;
}

.div_edit1 {
    background-color : greenyellow;
    border : solid 5px purple;
    height : 100px;
    width : 400px;

    top: 50px;
    right: 0px;
    position: sticky;
}

.div_edit2 {
    background-color : cyan;
    border : solid 5px brown;
    height : 100px;
    width : 400px;

    top: 0px;
    left: 100px;
    position: sticky;
}

자신들이 있는 지점 즈음을 지나면 따라서 내려온다.

최근에 추가된 속성이다. 문서의 흐름에 남아있고, relative처럼 늘 작동한다. 그러나, 스크롤을 하다가 특정 기준점을 넘을 경우 fixed 속성처럼 특정 지점에 요소를 고정시킨다. 요약하자면 relative처럼 작동하다가 설정한 위치에 도달 시 해당 지점에 고정된다.

 

설정한 위치 지점은 top 속성으로 결정 가능하다. 대충 요소가 따라서 내려오는 지점을 더 일찍이 맞추거나, 더 늦게 맞출 수 있다. right와 left는 단순히 좌우 위치만 담당하는 것 같다.

 

요즘 웹사이트를 보다보면 위에 달려 있는 내비게이션이 조금 아래로 내려와야 따라서 내려오는 효과를 보여주거나, 아니면 스크롤을 많이 내리면 배경 이미지 위에 무언가가 나타나는 등의 효과를 사용하는 웹사이트들이 있다. 아마 그런 곳에 쓰는 게 아닌가 싶다.

 

 

flexbox

CSS 플렉스박스 바로가기

 

 

grid

추후 링크 추가 예정

 

 

CSS 주의사항

• CSS는 대소문자를 구분하니 클래스 대소문자에 주의하자.
• 명칭으로 한글 사용 자체는 가능하지만, 가능한 한 한글을 쓰지 말자.
• 결합에 계층을 주의하자, 실 프로젝트에서 많아지다보면 온갖 일이 벌어진다.
• HTML 코드 상에서의 순서를 생각하면서 작성해주면 편하다.
• 세부 선택자를 잘 잡았는지 확인하자, 길어지면 자주 헷갈릴 수도 있다.
• ID, 클래스 선택자는 숫자로 시작하면 안 된다.

 

사족

이 글이 올라오기까지 자그마치 1주일이 걸렸다...

잠깐, 플렉스박스와 그리드는 어디 갔냐고 할 수도 있는데, 위에 나와있는대로 내가 자주 찾아볼 것 같아서 별도의 글로 따로 올릴 예정이다. 사실 두 개 모두 워낙 어려운 편이고 양도 많은지라 불가피하기도 했다. (특히 그리드가 그렇다.)

 

또한, 이외의 글들로(지금 이 글도 포함) 추후 따로 정리해서 별도의 글로 분리할 생각이다. 일단 내가 알고 있는 지식들을 정리하는 것이 필요할 것 같기 때문이다. 이유는 간단하다. 지금 이 글을 쓰면서도 이전의 용어를 까먹어서 뒤로 돌아가는데, 막상 그걸 못 찾는 일이 왕왕 벌어지고 있다.

 

어쨌거나 CSS는 이번 글로 끝이다. 서서히 자바스크립트가 다가오고 있다. 장비도 새로 갖췄겠다 이제 미루는 일이 최대한 없도록 해야겠다.