text-align
left, right, center, justify
-
justify 마지막 라인 제외하고 텍스트를 양쪽 끝으로 정렬 -> 다른 라인에 비해 공백의 범위가 너무 커지기 때문에, 적용되지 않는것으로 추측
블록레벨안의 인라인 요소들(텍스트,이미지 등) 정렬함 -
위와 같은 방법으로 가로정렬하며 세로정렬 하고 싶은 경우 padding,margin 속성을 추가하여 사용하면 된다.
vertical align
- 인라인 요소의 수직 정렬을 맞추기 위해 사용하는 속성
vertical-align: baseline; /* 텍스트의 위치 부모의 베이스라인. 기본값 */
vertical-align: sub; /* 부모의 아래첨자 베이스라인에 맞춰 정렬 */
vertical-align: super; /* 부모의 윗첨자 베이스라인에 맞춰 정렬 */
vertical-align: text-top; /*부모 엘리먼트 폰트의 상단으로 정렬 */
vertical-align: text-bottom; /*부모 엘리먼트 폰트의 하단으로 정렬*/
vertical-align: middle; /*폰트의 중간 위치를 부모의 베이스라인 + x축 높이 절반에 해당하는 위치로 정렬 */
vertical-align: top; /* 인라인 박스를 감싸고 있는 공간의 상단으로 정렬*/
vertical-align: bottom; /* 인라인 박스를 감싸고 있는 공간의 하단으로 정렬 */
고양이 이미지 밑에 약간의 공간이 남는 이유?
인라인 블록이기 때문에. 인라인 블록은 베이스라인이 있다고 판단한다.
vertical-align: bottom; 혹은
display: inline-block 사용하면 된다.text-indent
텍스트가 시작하기 전의 빈 공간을 설정할 수 있다. (들여쓰기 공간 설정)
text-decoration
텍스트에 붙는 라인 꾸며주는 속성
상/하단에 라인 그릴 수 있고, 라인 종류랑 색도 지정 가능
but 디자인 목적으로는 잘 사용하지 않고, 보통 a태그 기본값 없애려고 자주 사용함
p{
text-decoration: none;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;
text-decoration: line-through;
}text-overflow
부모 컨테이너를 넘어간 컨텐츠가 어떻게 보여질지
- clip: 기본값. 컨테이너의 끝에서 텍스트 자름
- ellipsis 잘린 텍스트를 말줄임 표시로 나타냄
text-overflow 속성은 그 자체만으로 넘친 컨텐츠를 만들어서 처리하지 않습니다.
컨테이너에 overflow:hidden, white-space:nowrap 속성이 같이 사용되어야 합니다.
말줄임('...')
한줄 말줄임 코드
overflow:hidden; /* 요소를 넘어가는 컨텐츠를 숨깁니다. */
/* 텍스트의 공백을 만났을때 어떻게 처리할지 설정하는 속성입니다. nowrap은 공백을 만나도 줄바꿈하지 않습니다.*/
white-space:nowrap;
text-overflow:ellipsis; /* 요소의 크기를 넘친 텍스트를 말줄임 처리합니다. */
}여러줄 말줄임 코드
/* -webkit-box, -webkit-box-orient 속성은 웹표준 속성이 아닙니다.
앞으로 삭제되거나 기능이 변경될 수 있기 때문에 주의가 필요합니다. */
p {
overflow: hidden;
/* 자식요소들의 배치를 지정하는 속성입니다. flex의 예전 버전입니다. */
display:-webkit-box;
-webkit-line-clamp: 2; /* 블록 컨텐츠의 라인 수를 제한하는 속성입니다.*/
/* 자식요소들의 배치를 수직으로 만드는 속성입니다. flex-direction의 예전 버전입니다. */
-webkit-box-orient: vertical;
}position
위치를 지정해주는 속성
position: static
position의 기본값
html에 쓴 태그 순으로 정상적인 흐름에 따라 위치가 지정된다
position : relative
'상대적'인 속성. 원래 자신이 있어야 하는 위치에 상대적이다.
자신이 원래 있던 자리를 기억한다.
position:relative;
left: 40px;위 코드는 자신이 기존에 있어야할 자리에서 왼쪽으로 40px만큼 떨어진다.
- relative 속성은 원래의 자리를 인식하지만 left,right,top,bottom 속성으로 움직일때는 다른 컨텐츠의 레이아웃에 영향을 미치지 않는다.
position: absolute
static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 움직이게 된다.
position : fixed
스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않았으면 한다면, 이 fixed 속성을 이용
- fixed는 현재 사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 고정된다.
- 많은 사이트들이 페이지가 스크롤 되어도 중요한 정보(검색창, 네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성
position : sticky
sticky 속성값이 적용된 요소는 조상에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라붙음
<style>
section {
height: 1000px;
border: 3px solid black;
}
h2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
background: greenyellow;
margin: 0;
}
</style>
<body>
<h1>sticky test</h1>
(section>h2{오늘의 메뉴$}+ul>(li>lorem)*3)*3
</body>z-index
- 어떤 요소가 더 위로 나타나게 할지 결정할때 사용하는게 바로 z-index 속성
- 덮어쓰기 순서값
- static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됩니다.
- 부모가 z-index를 높여 자식 앞으로 나올 수 없다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능하다.
- 부모의 z-index 값이 작으면 아무리 자식의 z-index값이 커도 위로 올라올 수 없다!
- 실무에서는 보통 10 단위로 줌. 기억하기 힘들어서
float
-
요소를 띄워서 좌 혹은 우로 정렬하는 속성을 가진다
-
하지만 왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있습니다.
-
아래 왼쪽 화면은 이미지에 float:left 속성, 오른쪽 화면은 float:right 속성을 둔 결과임.
블록 박스 태그 vs float 속성 태그
- float 속성을 주면 '1번째' 컨텐츠가 차지하는 공간만큼만 넓이가 바뀌게되고 왼쪽으로 배치된다.
블록 속성 태그는 아래와 같이 가로 전체의 넓이를 가지는 속성을 가지고 있다.
1번째에 float:left 속성을 준 그림은 다음과 같다.
Float 속성을 주면, 1번째 컨텐츠가 차지하는 공간만큼만 넓이가 바뀌게되고 왼쪽으로 배치된다. 그리고 float된 요소들의 넓이의 합이 부모 컨테이너의 넓이보다 커지면 순차적으로 아래로 떨어지는 모습을 보인다.
- Inline 요소에 float속성 적용하면, display 속성값이 자동으로 block 으로 바뀌게 된다. width, height, margin 등의 속성값 자유롭게 사용 가능함.
- 자식 요소들이 모두 float 속성을 가질 때는 부모 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못함!!
-> 원래 내부 자식요소 높이에 따라 부모요소 높이가 정해지는데, 자식에 float 적용하면 반영x
-> 부모는 normal flow (일반적인 흐름) 이지만, 자식들은 Flow 속성 주었기 때문에 일반적이지 않음. 자식들의 존재 인지하지 못함. 안에 아무것도 없다고 생각함.
해결법
- 부모 요소에 overflow 속성 추가
overflow은 Block-Formatting-Context(줄여서 BFC)를 생성.
BFC는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만든다. 그렇게 때문에 컨테이너 요소에 overflow: visible 제외한 다른 overflow 속성 추가하여 해결하기
.wrap {
border: 4px solid blue;
overflow: hidden;
}- 부모요소 높이값 직접 지정하기
좋은 방법은 아님. 자식요소 높이 변경되었을 경우 부모의 높이도 변경해야 한다. - clear 속성 사용
float이 사용된 요소의 바로 다음 형제 요소에 clear 속성 사용
left, right, both 세가지 value 가지며, float 사용된 요소가 정렬된 방향에 따라 적절히 사용하면 된다.
해당 속성은 오직 float 해제만을 위해 사용된다.
- clear-fix 방법론
css의 ::after 가상 요소로 해결. 부모 요소에 가상으로 마지막 자식 요소 덧붙여서, 해당 요소에 clear 속성 주기. 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법.
이렇게 하면 부모 요소와 이후에 float 요소 따라오는 현상들까지 모두 다 해결된다.
BFC
Block Formatting Context
웹페이지 화면에 css 랜더링하는 과정의 한 부분으로,block 레벨 요소들이나 float 된 요소들이 서로 상호작용 하여 화면에 보여지게 되는 방법(block formatting)을 결정하는 구역(context)을 말한다.
다음과 같은 경우 BFC가 생성됩니다.
- html 요소를 사용했을 때
- float: left, right
- overflow : visible 을 제외한 속성값(auto, hidden, scroll)을 사용했을 경우
- display: table-cell, inline-block, flow-root
- position:absolute, fixed 등등
BFC가 생성되면 다음과 같은 작용을 합니다.
- 내부, 외부 float을 해제합니다.
- 마진 컬랩싱 (margin collapsing) 현상을 막습니다.
