##########################################
15. 색상
1) 영단어 표기 ( 120 여개 됨 )
예> color:red|blue|aqua|...
2) 16진수 ( 0~15)
- #RRGGBB ( 6비트), #RGB ( 3비트 )
- #FFFFFF: 흰색
#000000: 검정
예> color: #FF6347;
3) 10진수 ( 0~255) + rgb(r,g,b)
- rgb(0~255,0~255,0~255)
rgb(0,0,0) <==검정
rgb(255,255,255) <==흰색
예> color: rgb(15, 184, 226);
4) 투명도 + 10진수 ==> rgba(0~255,0~255,0~255, 0~1)
- alpha값은 0이면 완전투명, 1이면 완전불투명
예> color: rgba(15, 184, 226, 0.3);
##########################################
16. visibility 속성
용도: 요소를 보이거나 보이지 않게 동작.
문법:
visibility:visible(기본)|hidden|collapse
* display:none vs visibility:hidden
display:none 은 영역유지 안됨.
visibility:hidden 는 영역유지가 됨.
- visibility:collapse 는 <table> 를 안보이게 처리(영역유지 안됨)
##########################################
17. 투명도(opacity) 속성
- 요소의 투명도 제어
- 0~1 사용 ( 0:완전투명, 1:완전불투명)
예> opacity:0.3
##########################################
18. 글꼴(font) 관련
1) 스타일 속성
font-style:normal|italic|oblique|..
2) 두께 속성
font-weight:bold|bolder|lighter|100~900
3) 사이즈 속성
font-size:rem(*)|px
4) 글꼴 속성
- font-family: 값1, 값2, 값3;
- 값에 지정가능한 이름 2가지
가. generic family ( 실제 글꼴들의 카테고리라고 생각하자 )
- 웹브라우저에서 기본적으로 제공
- 여러 폰트가 가지는 특별한 주요 특징을 가짐.
- 종류: serif
sans-serif
monospace(고정폭글꼴)
cursive(필기체)
산술글꼴
나. font family
- generic family에 속하는 실제 글꼴의미.
대표:
serif: Tims New Roman, Geogia
sans-serif: consolas
monospace: ..
결론:
글꼴들의 특징을 담은 generic family가 있고
그 안에 공통특징은 공유하지만 생김새는 다른 여러 다양한 font family가 있다고 생각하자.
- 웹브라우저가 글꼴(font)를 결정하는 방법
가. font-family를 명시적으로 지정하지 않은 경우
- 웹브라우저의 표준글꼴에 설정된 font family로 랜더링된드
현재 설정된 표준글꼴인 font family는 Malgun Gothic이다.
따라서 웹 브라우저에서 출력되는 글꼴은 Malgun Gothic임.
글꼴확인 방법은 마우스 오버 또는 개발자도구에서 computed 탭 클릭하면 됨.
나. font-family를 명시적으로 지정한 경우
a. generic family만 지정한 경우
font-family: serif;
<== 웹브라우저의 글꼴설정에서 정의된 serif에 해당하는 실제 font family로 랜더링이 된다.
현재는 Batang 글꼴임.
font-family: sans-serif;
<== 웹브라우저의 글꼴설정에서 정의된 san serif에 해당하는 실제 font family로 랜더링이 된다.
현재는 Malgun Gothic 글꼴임.
b. font family 지정한 경우 ( 마지막에는 generic family 지정 권장 )
font-family: 'Malgun Gothic', 'Batang', serif;
font-family: 'Malgun Gothic', 'Batang', sans-serif;
* 단축표현식
font: style weight size family;
예> font: italic bold 2rem 'Malgun Gothic', 'Batang', serif;
19. 구글폰트
- 웹폰트(web font)라고 부름.
- 장점은 로컬에 설치된 폰트와 상관없이 사용 가능함.
단점은 <link> 사용해야됨.
http://fonts.google.com 접속해서
language 와 generic family 먼저 선택 > 목록에 나온 글꼴 선택 > get Fonts 버튼 선택 >
get embed code 선택 > <link> 와 css 복사해서 사용.
20. text 관련 속성
1) 색상
color: red
2) 수평 정렬
text-align:center|left|right|justify(양쪽정렬)
3) 밑줄 및 취소선
text-decoration: underline|overline|line-throuth
4) 대소문자, 첫글자 대문자
text-transform:uppercase|lowercase|capitalize
5) 첫라인 들여쓰기
text-indent:10px;
6) 줄간격
- font-size:16px 에 비례해서 적용됨
line-height: 값
예> line-height: 1
line-height: 2
line-height: 0.8
#############################################
21. FlexBox
1) 개요
전통적으로 레이아웃 처리할 때 사용했던 방식은 position과 float을 사용하는 방식임.
FlexBox 문법을 적용하면 매우 쉽게 레이아웃 및 수직 정렬, 요소 순서(ordering), 동적 사이징
처리가 가능함.
2) 2가지 구성요소
- 반드시 부모(flex container)/자식(flex item)관계가 성립되어야 한다. ( 자손은 적용안됨 )
- 중첩가능
- 1차원 (행(기본)/열)으로 배치됨.
( 전형적인 normal flow 를 따르지 않음 )
- 부모는 display:flex 로 지정
( 실행결과: -모든 div item 들이 가로(행) 배치됨.
-명시적으로 지정된 height 제외한 나머지는 가장 큰 height 값이 적용됨.
-브라우저 화면을 줄이면 어느정도까지 줄어듬 )
- 부모는 display:inline-flex 로 지정
( 실행결과: -모든 div item 들이 가로(행) 배치됨.
-명시적으로 지정된 height 제외한 나머지는 가장 큰 height 값이 적용됨.
-브라우저 화면을 줄여도 안줄어듬.
이유는 inline이기 때문에 자체적인 크기를 고수한다.)
가. flex container
- display:flex;
- container에서 사용가능한 속성들
나. flex item
- item에서 사용가능한 속성들
예>
.container{
display:flex;
}
<div class="container">
<div>item</div>
<div>item</div>
<div>item</div>
<div>item
<div>item2</div> <== flex item 아님. 자손은 제외
</div>
<div class="container2"> <== 중첩 가능
<div>item</div>
</div>
</div>
3) Container에서 사용 가능한 속성
* 2가지 축
주축: item이 배치되는 방향의미
기본은 row
교차축: 주축의 수직인 방향의미.
가. flex-direction 속성
- 주축의 방향 결정
- 속성값:
row : 기본값, 왼--->오
row-reverse: 오---->왼
column: 위-->아래
column-reverse: 아래 --> 위
나. flex-wrap 속성
- 화면크기를 줄일때 어느정도까지는 축소되고 item이 안보이게 된다.
축소되지않고 새로운 줄에 랜더링이 가능하도록 제어.
-속성값:
nowrap : 기본
wrap : 상단기준 ( 아래쪽에 wrap 됨)
wrap-reverse: 하단기준 ( 위쪽으로 wrap 됨 )
- 특징
wrap 되면 기존의 최대 height가 아닌
컨텐츠의 height만 차지함.
계속 화면을 줄이면 하나의 열로 표시됨.
다. flex-flow
flex-direction 와 flex-wrap 의 축약표현식
문법: flex-flow: direction wrap
예> flex-flow: row wrap;
라. align-items
- 교차축에 대한 정렬
- 속성값
flex-start
flex-end
center
baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
stretch : 기본값. 기본적으로 item을 늘려서 Container를 꽉 채운다.
마. justify-content
- 주축에 대한 정렬
- 속성값
flex-start
flex-end
center
space-around
space-between
space-evenly
바. align-content
- 반드시 wrap된 상태에서만 적용가능. nowrap 적용안됨.
- align-items + justify-content 합성 기능.
속성값
flex-start
flex-end
center
baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
stretch
space-around
space-between
space-evenly
4) item에서 사용 가능한 속성
가) order 속성
- 기본적으로 코드에 지정된 순서로 표시된다.
order를 이용해서 나타내는 순서를 변경할 수 있다.
- order:0 기본값
-1 0 1
(앞) (기본값) (뒤)
나) algin-self 속성
- align-items ? Container에 지정해서 모든 item들의 교차축 정렬 제어.
- algin-self ? 개별적인 item의 교차축 정렬.
( container에서 설정한 align-items의 교차축 정렬값을 재정의함 )
속성값:
flex-start
flex-end
center
baseline : item의 실제 컨텐츠의 기준에 맞춰 정렬됨.
stretch : 기본값. 기본적으로 item을 늘려서 Container를 꽉 채운다.
'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| CSS 5일차 - Grid(1) 행 과 열 (0) | 2024.05.02 |
|---|---|
| CSS 5일차 - FlexBox(2) (1) | 2024.04.26 |
| CSS 4일차 - FlexBox(1) (0) | 2024.04.25 |
| CSS 4일차 - 색상, visibility, opacity, font, google font, text (0) | 2024.04.25 |
| CSS 4일차 - 3일차 정리 (0) | 2024.04.25 |
