7.02 AI SCHOOL CSS(3)

이민정·2021년 7월 2일

CSS layout 코린이

✔ TODAY

✔ 학습한 내용

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

✔ 해결방법작성

✔ 학습 소감

대구 AI SCHOOL

목록 보기

5/47

✔ TODAY

오늘은 css layout에 대해 배웠다. 어제 복습하면서 필요했던 부분을 배울수 있어서 좋았다.😆(특히 정렬과 각 콘테츠간의 간격...💖)

✔ 학습한 내용

1. box model

웹사이트 만들때 각 레이아웃의 공백과 구조를 빠르게 파악할 수 있게 도와 주는 옵션
구성요소는 centent/border/padding/margin으로 4가지

1) centent
<열친테그></닫힌테그>사이에 있는 것을 말한다.

<html>
  <body>
    <div>
    </div>
  </body>
</html>

예를 들어 위와 같은 경우, html의 콘테츠는 body. body의 콘테츠는 div가 된다.

2) magin & padding

특정 오브젝트를 옮길때, 좌표이동작을 하는 속성.
구분의 기준은 border (구조확인 할 수 있음).
오브젝트 옮기자고 할 때, 기억할 개념.
- 선택된 오브젝트가 주체가 되서 스스로 움직이는 게 아님.
- 마진과 패딩에 어느쪽이 어느만큼 빈 곳을만들어 밀리면서 움직이는 것 즉, 타의에 의해서 새롭게 생긴 공간에 의해서 밀려서 생기는 현상.
- 선택된 영역이 주체가 움직이는 게 아니라 타의적으로 움직이는 거임.
padding을 사용하면 벌어지기 때문에 실제값은 벌어진 공간+원래값. 선택된 영역의 크가가 달라질수 있음.

마지막 부분과 달리, padding를 사용하면서 설정값만큼만 사이즈를 출력하고 싶을때는 아래의 속성을 사용한다.

box-sizing: border-box;

그럼 설정값 기준으로 boder와 padding이 정해져 입력한 크기 안에서 만들어진다.

margin-left: 100px;
	margin-top: 100px;
	margin-right: ;
	margin-bottom: ;
	padding-left: 100px;
	padding-top: 100px;
	padding-bottom: ;
	padding-right: ;
	border: solid 10px red;

margin: 100px 0 0 100px;  
padding: 100px 0 0  100px;

위의 margin과 padding의 코드를 아래의 코드로 줄일 수 있다(코드의 경량화). 입력순서는 시계방향으로 top > right > bottem > left 순이다.

💖tip 코드를 줄이는 이유
코드가 길면 브라우저의 로딩속도가 늦어지게 된다.

💖학습tip
익히는 법
일단 필요한 margin과 padding를 다쓰고, 위에 줄이는 방식으로 반복해서 쓰기 ( 손에 익히자!)

css에 있는 콘테츠의 margin과 padding를 다 지워도 미세한 공간이 있는데, 이건 html의 태생적인 공간이다. layout작업에 방해가 될 수 있음으로 없애주는 것이 좋다.

html,body{ margin: 0; padding: 0;}

💖tip
웹사이트 제작시 윗코드를 디폴트하는 것이 좋음

3) margin병합현상✨
웹사이트 레이어작업시 가장 많이 만나게 되는 문제 중 하나.
'형제지간', '부모자식지간' 2가지 유형이 있다.

-형제지간

<div class="margin-one"></div>
<div class="margin-two"></div>

margin-one{ width: 100%; 
	height: 100px; 
	background-color: yellow;
	margin-bottom: 100px;}

.margin-two{
	width: 100%;
	height: 100px;
	background-color: blue;
	margin-top: 100px;}

형제 태그의 margin bottem+top속성이 정상적으로 작동해도 공간이 합쳐서 커지지않는다.

margin bottem과 top이 공백을 공유함 .
형재간 속성이 같은 공간을 공유하게 되는 경우에는 숫자가 큰 값에 우선순위를 준다.

즉,큰값이 작은 값을 병함 먹어버림. 윗코드처럼 같은 크기라면, 같은 사이즈로 공유함.

-부모자식지간
가장 많이 만나게 되는 현상.
자식태그에게 margin을 줬는데,자식태그만 움직이는게 아니라 부모태그도 같이 움직인다.

<div class="margin-parent">
 <div class="margin-child"></div>
</div>

.margin-parent{
	width: 300px;
	height: 300px;
	background-color: yellow;}

.margin-child{
	position: absolute;
	width: 150px;
	height: 150px;
	background-color: blue;
	margin-top: 100px;}

tip💖
부모자식간의 margin병합을 해결하기 위해서는 position: absolute; 속성을 넣는다.

display

html에는 block과 inline 2가지 진영이 있다.

block : 연속적 작성시 Y축으로 나오며, 줄바꿈현상이 있다.
css적용시, 공간이 주여진다.
inline: 줄바꿈이 없고 X축으로 나란히 정렬된다.
css적용시, 공간이 주어지지 않는다.

둘 다 margin을 넣을때 블록에는 생기지만, 인라인에는 생기지 않는다.
즉 블록은 공간을 만들수 있는 방면(상하배치작업을 할 수 있다), 인라인은 공간을 만들수 없다. (상하배치작업이 애초에 불가능하다)

그러나 특징을 바꾸고 싶을 때, 사용하는 게 display속성이다.
즉, display속성을 통해 내가 원하는 진영을 바꿀수 있다.

display: inline-block;
display: block;
display: inline;

x축정렬이면서 공간이 생겼으면 좋겠고 상하배치가 가능했으면 하는 경우,
'display: inline-block;'적용 .

💥주의
메뉴버튼만들때 자주 사용한다.
inline요소주의점(인라인-블락 다포함!)
사이에 미세하게 공간이 있음. inline요소는 기본적으로 공백을 가져올수 있음(정확한 레이어아웃 작업에 방해가 될 수 있음)

vertical-align

결과가 뒤죽박죽으로 정렬이 되어있을때, 정렬이 깔금하게 하고자 할때 사용된다.

.inline, .inline-block, img {vertical-align: top}

가장 큰 사이즈를 중심으로 정렬된다.

많이 사용한다..(...진짜 필요했던 속성...)

vertical-align: top
vertical-align: middle
vertical-align: bottem

주의
inline속성에만 가능하다!!!!!
img 는inline-block의 성격을 가지고 있다.

position

가장 중요하고 가장 복잡한 속성...

차원
1차원:선
2차원:평면, 서로 다른 박스가 붙여져 있다면 같이 밀린다.
3차원: 현실세계자체, 움직임의 특징 붙여있어도 따로 움직일 수 있고 안 움직일 수 있음
- z축의 등장 이미지의 레이어개념과 비슷함

웹사이트는 2차원으로만 구성되어 있지 않는다. 적절하게 2,3차원을 섞어있다.

💖tip
선택한 영역을 2차원,3차원으로 만들것인지 결정하는 속성값. 포지션을 이해할려면 차원을 이해할려함.

3가지 경우를 고려해서 분류

1) 마진탑사용시 부모 자식 지간에 발행하는 마진 병합현상이 일어나는 지
2) 탑, 라이트, 바텀, 레프트 속성을 사용이 가능한지
3) 자식의 높이 값이 부모에게 영향을 주는지

✨💥중요하면서 주의할 것
3가지를 기준으로 포지션의 속성갑이 같고 있는 특징을 파악한다.

position의 4가지 속성값을 가진다.
1) static

마진탑(자식) 부모자신간의 마진병합
-부모가 높이값을 가지고 있지않으면 자식의 높이값을 가짐.
-탑 라이트 바텀 레프트 사용할 수 없음.
2차원 포지션 스테틱은 2차원의 속성을 가지고 있는 속성값.
포지션 속성을 가지고 있지않아도 동일한 값.
즉 모든 html는 스테틱의 값 즉 포지션 스테익은 디폴트

2) fixed
화면위치에 아예 고정하는 속성
배너에서 많이 사용한다.

마진탑(자식) 보모간의 마진병합이 일어나고 있지않음.
탑 라이트 바텀 레프트를 사용할 수 있음. 브라우저 왼쪽 상단을 기준으로 움직임
부모 높이값이 없으면, 자식값이 부에게 영향을 줄 수 없다. 즉 자식에게 영향이 없음 없어짐
3차원영역에 포함되는 속성값중에 하나

3) relative

부모자식간의 병합마진이 일어남.
탑 라이트 바텀 레프트 사용할 수 있음. 최초 박스가 있는 기분으로 움직임.
-부모 높이 값이 없으면 부모가 자식값을 따름 자식의 값이 부모에게 영향을 줌.

2,3차원의 특징을 다 가지고 있음 혼합형이다.

💖tip
top, right, bottem, left는
'margin-top right bottem left' 과 다르게 자기자신이 주체가 되서 움직이는 속성
차이점 있음!

4) absolute

부모자식간의 마직 병합현상이 일어나지 않음.
탑 라이트 바텀 레프트는 사용가능
. 그러나 기분이 브라우저기준
부모의 포지션기준에 따라 달라짐.
- 부모가 스테이틱(2차원)이면, 브라우저 기준
-부모가 3차원포지션이면, 부모가 기준( 원래자리기준으로 좌표기준이 움직임)
relative 도 동일함
부모의 높이값이 없으면, 자식의 값을 받지 않고 사라짐. 부모는 자식 값을 영향 받지 않는다.
3차원적 특징을 가지고 있다.

위의 내용를 정리한 코드들은 github링크로 첨부한다.
layout.html
layout.css

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

display와 vertical-align의 개념을 헷갈렸다.ㅜ
position이 48가지 경우의 수를 익혀야 layout을 잘 다룰 수 있다던데... 구분하는 3가지도 아직은 개념이 안잡히는 것 같다.

✔ 해결방법작성

display와 vertical-align의 개념이해는 _직접코드를 입력하고 출력값을 보며 이해를 했다. display이는 block과 inline의 속성에 관한 것이고, vertical-align에 관한 것이다.
position이 48가지 경우의 수는
아직 부족하여 이번 주말내에 직접 코드를 써며 이해할 것이다.
-3가지 분류에 관해서는 강사님이 주신 캡쳐본과 구글링을 통해 이해를 할 수 있었다.

✔ 학습 소감

항상 그렇듯, 시간이 너무 빨리가는 것 같다. 배운 내용을 리스트로 정리하면 몇 가지가 안되는 것 같은데... 코드를 쓰는 손이 아직 느리는 것 같고. 배운 언어와 속성에 관해 이해는 하여도 작성하고 적용하는 것에 시간이 오래걸린다. 그래서 이번주 주말에 배운 내용을 총 복습할 겸 페이지 몇개를 만들어 볼 것 이다.