Block, Inline
- [Block] = 페이지의 가로길이 전체를 차지
-width,height 값 적용 가능(O)
-text-align 속성 적용 안 됨(X) *block 특성 상 부모의 좌, 우 너비를 전부 차지하고 있기 때문
-margin, padding 모두 적용 가능
- [Inline] = 자신에게 주어진 넓이만큼만 차지
-width,height 값 적용 안 됨(X)
-text-align 속성 적용 가능(O)
-상, 하 여백은 margin, padding으로 적용 안됨 =>line-height이용
- block, inline의 속성변경
display:block;=> 해당 요소를 Block 속성 요소로 변환
display:inline;=> 해당 요소를 Inline 속성 요소로 변환display:inline-block=> 해당 요소를 변환하여 inline과 Block의 속성을 모두 갖게 함
*display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작
기본적으로 inline 처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능
+a) 속성변경을 활용하면 각 속성을 상황에 맞게 변경하면서 유연한 방식으로 레아이아웃을 만들 수 있음
css선택자
[전체선택] ==> * { }
[TAG 선택] ==> div { }
[Class 선택] ==> .Class { }
[ID 선택] ==> #userInfo { }
-
[CSS 파일을 만들어 불러오기] ==>
<Link href = "./~~~~~" rel = "stylesheet">
(CSS코드를 파일화하여 HTML에 링크)
박스모델
| Border-box | Content-box |
|---|---|
| border-box는 고정, content-box 크기 변함 | Content-box는 고정,border-box 크기 변함 |
CSS 만들 때는 항상 Box-sizing : border-box; 로 설정 (Content-box는 실무에서 잘 안쓰임)
정렬(flex)
flex의 핵심은 여러 태그를 하나로 묶어 정렬하는데에 있음. 정렬하는데 중요한 점은
정렬시 기준이 필요하다는 점 이며, flex는 기준을 부모박스로 두고 움직이게 됨
display : flex; (flex 활성화, 기본값 정렬)
-flex - direction : column; (Box를 수직으로 나열)
-flex - direction : row; (Box를 수평으로 나열)
-justify - content : flex-start; (Box 가로를 기준으로 좌측 정렬)
-justify - content : center; (Box 가로를 기준으로 가운데 정렬)
-justify - content : flex-end; (Box 가로를 기준으로 우측 정렬)
-align - items : center; (Box 세로를 기준으로 가운데 정렬)
space - between (아이템 사이 균일간격)
space - around (아이템 둘레에 균일간격)
space - evenly (아이템 사이, 양 끝에 균일간격)
+a) margin:0 auto; => Box 좌,우 기준 가운데 정렬
+a) '선'을 만들 때에 <hr>보다는 <div>박스를 만들고 border-top 같이 테두리 하나만
표현하는 방식을 이용
+a) 하위 아이템들 정렬 시 상위 태그로 <div>태그를 만든 다음 해당 <div>태그의
CSS 속성으로 정렬 제어
Position
HTML 요소가 배치되는 방식을 결정
- absolute
-부모 요소에 relative 가 적용되어 있음 => [해당 부모의 좌표를 기준으로 이동]
- 부모 요소에 relative가 없음 => HTML의body전체를 좌표 기준으로 이동]
[박스의 절대 위치]
div {
position: absolute;
top: 0px;
left: 0px;
}
Position 사용 TIP!
1. Position: absolute 는 보통 전체화면을 기준으로 좌표 단위만큼 이동
↓
2.class="Selection"에 Position을 주면 부모인class="region"이 아닌 표시되는 화면을
기준으로 단위측정을 함
*(이에 따라 기본틀이 되는 최상위 태그박스의 포지션을 옮겼다면position으로 설정한 박스의 위치가 화면배율 [+-]에 따라 달라지게 되는 문제 발생)
↓
3. 만약 부모인class="region"에 Position: relative;를 부여하면class="Selection"은 상위 부모박스 범위를 기준으로 좌표단위 이동
- relative
원래 있던 자리를 기준으로 요소의 위치 조정
[부모 박스 기준으로 상대위치]
div {
position: relative;
top: 0px;
left: 0px;
} - fixed
스크롤과 상관없이 뷰포트 기준으로 요소의 위치 설정
[화면을 기준으로한 절대 위치]
div {
position: fixed;
top: 0px;
bottom: 0px;
}
- sticky
-요소가 원래 위치에 있다가 스크롤을 내리면 지정해 둔 좌표에서 고정됨
-부모 요소(스크롤박스)의 좌표를 기준으로 요소의 위치를 조정 가능
div {
position: sticky;
top: 0px;
bottom: 0px;
}
Class 지정으로 레이아웃 분배
ex)
<div class=Box>
<div class=In_Box>
<div class=In_Box_Left>
<div class=In_Box_Right>
<div class=In_Box_Right_upper>
<div class=In_Box_Right_bottom>
+a) <TAG>는 상위(부모)<TAG>가 있을 때 CSS 속성을 적용 가능하다
[그림을 놓고, 붙이고, 그리려면 바탕이 되는 도화지가 필요]
Margin, Border
margin-bottom => 아래쪽 여백(바깥쪽)
margin-top => 윗쪽 여백(바깥쪽)
padding-bottom => 아래쪽 여백(안쪽)
padding-top => 윗쪽 여백(안쪽)
border-radius : ~~px => 해당 값만큼 테두리를 둥글게 만듬
border:1px solid gray => 해당 값만큼 해당하는 선의 모양으로 테두리를 만듬
+a)선의 종류 (solid, dotted, groove...)
text-indent, cursor:pointer
text-indent; => +값(들여쓰기), -값(내어쓰기)
input 안의 Text의 위치 조정용으로 사용 가능
cursor:pointer; => 해당 태그박스에 마우스 포인트를 두면 선택형 커서 모양으로 변환됨
