✍️ CSS 레이 아웃
✏️ display - inline, block, inline-block
1. inline
영역의 크기가 내부 컨텐츠의 크기로 정해진다.
width와 height로 크기를 만들 수 없다.
margin, padding의 top과 bottom을 지정할 수 없다.
'좌우' 여백은 추가할 수 있다.
연달아 inline 요소를 만들었을 때 가로 배치된다.
2. block
width와 height를 통해 영역의 크기를 지정할 수 있다.
width를 지정하지 않으면 가로 전체를 차지한다.
연달아 block요소를 만들었을 때 세로배치 된다.
3. inline-block
inline 요소와 block 요소의 특징을 모두 갖고 있다.
width, height, margin, padding 모두 제한없이 사용 가능하다.
여러 요소가 가로배치된다(세로 배치 되지 않는 것이 특징이다).
✏️ 요소 없애는 방법 - display none; visibility hidden
display: none;
코드상으로는 존재하지만 렌더링 하지 않는다(width와 height를 그리지 않는다).
특징으로는 레이아웃 요소에서 배제를 시키기 때문에 해당 공간이 없어지는 것과 동시에
빈 공간을 채울 요소가 존재하면 해당 요소가 빈 공간을 채우게된다.
display: hidden;
자리를 차지하면서 눈에서 보이지 않게 하는 특징이 display: none; 과의 차이점이다.
✏️ float
둥둥 뜨게하다는 의미가 있다. float 다음에 오는 요소가 차지하는 영역
위에 float 속성으로 지정한 block 또는 inline 요소가 차지하고 있기 때문이다.
한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 자신을 감싸는 컨테이너의
좌우측을 따라 배정된다.
보통의 흐름이란 block 요소인 경우 요소가 세로로 쌓이는 부분
inline 요소의 경우 옆으로 연달아 쌓이는 것을 일컫는다.
주위를 감싼다는 말은 float 속성이 적용된 태그 뒤에 나오는 태그가
float에 할당한 값이 (left or right) 인지에 따라 그 주변에 배치된다는 의미이다.
예를 들면 float: left; 이고 다음 요소가 block이면서 text로 이루어졌다면
오른쪽에 text가 배치됨으로써 float 속성 태그 오른쪽을 text 감싸는 것이다.
요소의 배치는 css를 통해 이루어지기 때문에 float를 잘 쓰지 않는다.
<div class="image"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit 생략...</p>
.image {
float: right;
margin: 10px;
width: 100px;
height: 100px;
background-color: hotpink;
border: 5px solid blue;
}
✏️ position (N)
position 개념을 이해하기 전 position이 변경되기 이전의 상태에서 기본값을 이해하는 것이 중요.
그래야 position을 적용한 후의 상태를 이해하기 용이. normal 상태가 의미하는 block과 inline
별 특징을 먼저 숙지.
1. position: static;
normal 상태의 position을 일컫는다.
(top, bottom, left, right) property를 사용할 수 없다.
2. position: relative;
자기자신이 기준점이 된다.
normal flow에 따라 배치한다.
프로퍼티로 top, bottom left, right가 있다.
위의 속성 값으로 양수, 음수 모두 사용할 수 있다.
3. position: absolute;
부모요소중 static이 아닌 요소가 위치이동의 기준점이 된다.
부모요소에 static이 없을 때 body가 기준이 된다.
absolute에 적용된 태그는 normal flow에서 제거된다.
제거된 위치에 다음태그가 자리를 차지한다.
id가 'parent'인 div에 position: relative가 적용되었고
id 'child'인 div에 position: absolute가 적용되었다.
부모의 요소 안에 자식요소를 배치하고 싶을 때 relative와 absolute를 같이 쓰면 좋다.
<div></div>
<div id="parent">
<div id="child"></div>
</div>
<div></div>
body {
display: flex;
justify-content: center;
align-items: center;
margin-top: 45vh;
}
div {
width: 200px;
height: 200px;
margin-right: 5px;
border: 5px solid tomato;
}
#parent {
position: relative;
}
#child {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
left: 45.5px;
top: 47.5px;
}
4. position: fixed;
viewport 왼쪽 상단을 기준점으로 삼는다.
view port를 기준으로 삼기 때문에 페이지가 내용과 관계없이 띄우고 싶은 요소에 적용을 한다.
이를테면 네비게이션바, 채팅 봇 등이 있다.
5. position: sticky;
스크롤 되는 대상의 하위에 적용시켜야 작동한다.
해당 속성을 용도는 특정 위치에서 position fixed 처럼 작동 시키고자 할 때 사용한다.
이를테면 fixed의 경우 viewport 내에서 특정한 위치에 계속 위치하고 있는 반면 sitcky
의 경우 scroll을 하다 position fixed가 적용되고 있는 대상을 만났을 때 그 때부터
position fixed의 효과가 작동하는 것이다.
✏️ overflow
요소의 콘텐츠가 너무 커서 블록 서식 범위를 벗어났을 때 처리 방법을 제공하는 속성이다.
범위가 넘친 text들은 다음에 위치한 태그와 겹칠 수 있기 때문에 overflow에 대해 조치를
취하면 유용하다.
1. overflow: visible; (default)
기본 값으로 overflow를 적용하지 않은 것과 같다.
2. overflww: hidden;
지정된 범위의 크기를 벗어난 텍스트에 대해서 보이지 않게 한다.
3. overflow: scroll;
block 서식 밖으로 나간 내용에 해당 할 경우 스크롤을 통해서 볼 수 있다.
4. overflow: auto;
넘쳐 흐르게 되면 scroll을 보여주게 되고 그렇지 않을 경우 스크롤이 보이지 않게 처리해준다.
✏️ z-index
z축 순서를 지정하는 property
z축은 화면에서 보이는 요소간의 전 후 표현한다.
정수(음수, 0, 양수)로 값을 지정할 수 있다.
position에 아무 것도 주어지지 않은 경우 요소가 아래로 싸이는 것처럼 요소간 겹침이 발생했을 때
순차적으로 아래에 적은 요소가 전의 요소 위에 쌓이게 된다.
그런데 만약 특정 요소 중 어느 한 요소가 position: static 아닌 값을 지니게 되면 해당 요소가 맨
앞에 배치되게 된다.
예를 들어 위의 세개의 박스의 경우 모두 position: static으로 조정되어있다. 만약 해당 box의 2번
박스에 static 값이 아닌 갑이 부여되었을 때 2번 상자가 맨 앞으로 위치하게 된다.
순차적으로 쌓이는 특성으로 인해 3번 박스를 2번 박스 뒤로 보내고 싶을 때 position에 값을 주지
않고 쉽게 작성하기 위해 z-index를 통해 순서를 부여하여 자유자재로 그 순서를 변경할 수 있다.
낮은 값일 수록 사용자 입장에서 아래 깔리게 되고 높은 값일 수록 사용자와 가까워진다.
✍️ CSS 색상과 배경
✏️ 색상 - HEX(16 진수), rgb, rgba
color의 정의하는 방법
1. 키워드 및 투명도 사용
2. rgb 3차원 좌표계 사용(# + 16진수 표기법 or rgb(), rgba())
16진수 표기법
16진수의 표기법 작성시 6자리이고 앞에서 부터 2자리씩 각각 Red, Green, Blue를 구성한다.
rgb 표기법
rgb(숫자, 숫자, 숫자)으로 표현한다.
숫자의 경우 0~256 중 하나의 값을 갖는다.
rgba 표기법
rgba(숫자, 숫자, 숫자, 숫자)로 표현한다.
마지막 수치는 투명도에 대한 수치이며 0~1사이의 값을 갖는다.
작은 값일 수록 투명해지고 높은 값일수록 선명해진다.
✏️ opacity
내부요소 모두의 불투명도를 설정한다.
배경색만의 불투명도를 설정하고 싶으면 background-color를 이용한다.
property 이름이 붙투명도이기 때문에 작을수록 흐리고 클수록 진하다.
기본 값은 (1 or 100%)이다.
(0~1)값 또는 (0~100)값을 갖는다.
✏️ backgroud-color, background-image
background-color
배경색을 지정한다.
keyword, 16진수, rgb(x, y, z), rgba(w, x, y z) 모두 사용 가능하다.
background-image
background-image: none; 이 기본값이다.
background-image: url('상대경로')로 입력할 때 해당 요소의 크기에 비례해서 이미지가
바둑판식 배열로 공간을 차지하게 된다.
✏️ backgroud-repeat
background-repeat
background-repeat: repeat;
기본값이다. x축 y축 모두 반복이 된다.
background-repaet: repeat-x;
가로 축만 반복이된다.
background-repaet: repeat-y;
세로 축만 반복이된다.
background-repeat: no-repeat;
반복이 되지 않게 하나의 크기만 보여진다.
✏️ backgroud-position
background-image: url('상대경로')의 요소가 차지하는 영역 안에서 위치를 조정한다.
📏 background-position: x, y;
x축과 y축에 값을 넣어줌으로써 위치를 조정해 줄 수 있다.
그림의 왼쪽 상단 꼭지점 (0,0)을 기준으로 위치를 잡는다.
만약 background-position: 100px 150px;로 값을 줄 경우 (100, 150)의 좌표를
왼쪽 상단 모서리로 해서 위치를 잡는다.
🔐 keyword로 값 전달하기
left, center, top, bottom 값을 주거나 복합적으로 값을 할당할 수 있다.
background-position: left;
image를 왼쪽에 붙이고 height 측면에서 중앙정렬시킨다.
background-position: right;
image를 오른쪽에 붙이고 height 측면에서 중앙정렬시킨다.
background-position: top center;
image를 맨위 중앙정렬시킨다.
background-position: bottom center;
image를 맨아래 중앙정렬시킨다.
✏️ backgroud-origin
background-origin
위 속성은 image 상단의 왼쪽 좌표를 어떤 박스를 기준으로 잡을 것인가를 결정하는 속성이다.
background-origin: content-box;
이미지 왼쪽 상단 꼭지점의 기준이 padding 안쪽에 있는 content box가 된다.
background-origin: padding-box;
이미지 왼쪽 상단 꼭지점의 기준이 padding이 되고 해당 값이 기본값이다.
background-origin: border-box;
이미지 왼쪽 상단 꼭지점의 기준이 모서리가된다.
✏️ backgroud-size
배경 이미지의 크기를 작용하는 속성이다.
절대길이 상대길이 모두 사용 가능하다.
background-size: auto;
기본 값이다.
해당 영역을 지정한 사이즈 만큼 이미지가 차지하게 된다.
background-size: contain;
이미지의 비율을 유지하면서 가로의 크기에 맞추어 크기를 맞춘다.
위 속성을 사용 할 때 이미지는 잘리지 않는다.
background-size: cover;
이미지가 비율을 유지하면서 세로의 크기에 맞추어 제일 크게 확대한다.
만약 해당 영역의 가로 크기가 이미지의 크기를 다 담지 못하면 가로 부분은 잘린다.
background-size: length, length;
위와 같이 절대길이 2개를 입력 할 경우 비율이 깨지고 해당 사이즈로 이미지가 편집 된다.
background-size: length;
위와 같이 절대길이를 1개만 입력 할 경우 비율을 유지한 채 width 값에 맞추어 세로 값을
계산하게 된다.
background-size: percent;
background-size: cover와 다른 점은 percent의 경우 가로에 맞추어 이미지를 제일 크게
배치한다. 따라서 해당 태그의 새로 길이가 길고 이미지가 해당 크기를 다 채우지 못한
경우가 발생했을 때 세로로 빈 공간이 생기고 cover의 경우 세로 길이에 맞추기 때문에 서로
빈 공간이 생기지 않아 서로 다르다는 것을 알 수 있다.
✏️ backgroud(shorthand)
background의 단축 속성이다.
background 단축 속성에 무엇이 있는지 있는지 아는 것이 중요하다. 설정하지 않을 경우 기본 값을
따르기 때문.
background-color의 경우 마지막에 작성한다.
background-size의 경우 position/size 순서로 입력을 한다.
하위 속성 기본값
background-image: none;
background-position: 0% 0%;
background-size: auto auto;
background-repeat: repeat;
background-origin: padding box;
background-clip: border-box;
background-attachment: scroll;
background-color: trasnparent;
background: green;
background: url("상대경로") repeat-y;
background: border-box red;
background: no-repeat;
