1. 글꼴
- font-style : 기본값 normal, italic (기울어진 체)
- font-weight : 기본값 400 (normal), 700 (bold), 100 ~ 900
- font-size : 브라우저 기본 폰트 16px
- line-height : 한 줄의 높이, 요소의 글꼴 크기의 배수로 지정하는 것을 권장, height와 동일한 px를 넣으면 수직 정렬 가능하다!
- font-family : 여러 개 지정, 왼쪽에서 오른쪽 방향으로 진행된다. 시도를 하는데 안 되면 오른쪽으로 넘어가고, 되는 경우 오른쪽 모든 것을 무시한다. 맨 오른쪽에 serif (바탕체) 적어주기. san-serif 고딕체 의미.
<a href="">Google</a>a{
display: block;
width: 200px;
height: 100px;
background-color: royalblue;
color: white;
font-size: 32px;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 100px;
}
2. 문자
- color : 기본값 rgb(0, 0, 0) 검은색
- text-align : 정렬 방식 (수평) 기본값 left
- text-decoration : 거창한 데코레이션이 아닌, 선으로 하는 데코레이션, 위에 긋거나 중간에 긋거나 아래에 긋거나 없거나 기본값 none line-height 중간선
- text-indent : 첫 줄 들여쓰기 (음수 사용하면 outdent 들어간다.)
3. 배경
- background-color : 기본값 transparent 투명한 (border도 transparent 이용)
- background-image : url("경로") 이용하여 배경 이미지 삽입 바둑판식 출력
- background-repeat : 바둑판식 출력이니 기본값 repeat → repeat-x는 수평 반복이고, repeat-y는 수직 반복이다. no-repeat은 반복하지 않는다.
- background-position : 배경 이미지 위치, 방향1 방향2를 이용하거나 x축 y축 이용하기.
- background-size : 기본값 배경 이미지 실제 크기인 auto, cover는 더 넓은 너비에 맞추고, contain은 더 좁은 너비에 맞춘다.
- background-attachment : 배경 이미지 스크롤 특성, 기본값 scroll이고 필요한 경우 fixed 이용하기.
웹 페이지 섹션 구현 시, 유용하게 이용 가능하다. parallax에 이용하기 (요소는 움직일 때, 배경 움직이지 않게 만듦.)
4. 배치
- position : 기본값 static 기준 지정 후 위치 지정하기
- 요소 쌓임 순서 : 어떤 요소가 사용자와 더 가깝게 있는지 결정하는 조건
- absolute, fixed : display block으로 변경된다.
요소 쌓임 순서
1 → 1 안되면 2 → 2 안되면 3
순서대로 진행하는 것이기 때문에 앞 조건 만족시키지 못하면 뒤에 적용되지 않는다.
1. position 적용된 것이 더 위로 보인다. 기본값인 static은 없다고 봐도 무방하다.
2. z-index가 높을 수록 더 위로 보인다. [z-index] 2번째 조건, -1 이용하여 뒤로 보내기
3. html 다음 구조일 수록 더 위로 보인다.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container{
width: 400px;
height: auto;
background-color: royalblue;
}
.container .item{
font-weight: bold;
font-size: 22px;
border: 4px dashed red;
}
.container .item:first-child{
width: 100px;
height: 100px;
background-color: yellow;
}
.container .item:nth-child(2){
width: 150px;
height: 100px;
background-color: orange;
}
.container .item:last-child{
width: 100px;
height: 200px;
background-color: tomato;
}
relative를 적용하면 움직인 박스는 허상이고, 실제는 원래 있던 자리의 박스이다.
따라서 배치로 잘 사용하지 않고,
absolute의 위치 상 부모를 만드는 경우에 많이 이용한다.
absolute를 설정하면, 배치 기준이 부모가 된다. 따라서 item 1과 item 3 상호작용이 없어지면서 붕 뜨게 된다. 위치상 부모를 설정하지 않으면 위치 상 부모가 뷰포트가 된다. (body → html → viewport)
그래서 원하는 위치 상 부모를 만들고 싶으면 relative 적용하기.
fixed는 viewport 기준으로 배치한다.
position : relative; 들어와도 다 무시하고 viewport 기준으로 배치한다.
스크롤 내려도 고정되는 경우에 많이 이용한다. (헤더 메뉴 같은 경우)
| relative | absolute | fixed |
| 위치 상 부모 만들 때 이용한다. 왜냐하면 옮겨진 박스는 허상이기 때문 |
위치 상 부모 기준 배치 | 뷰포트 기준 배치 |
position : absolute와 position : fixed는 block 요소로 변경된다.
5. 플렉스 (정렬)
1차원 축으로 정렬하기.
- 1차원 레이아웃
- Flex Container와 Flex Items
- display : flex (block 요소) inline-flex (inline 요소) → 블록은 수직으로 쌓이고, 인라인은 수평으로 쌓인다.
- flex-direction : 주 축 설정, 기본값 row, reverse 들어가면 반대로 진행 (row-reverse는 오른쪽에서 왼쪽으로)
- flex-wrap : 묶음 여부, 기본값 nowrap, wrap은 줄 바꿈 시도한다.
- justify-content : 주 축 정렬 방식, 기본값 flex-start
- align-content : 교차 축 여러 줄 정렬 방식, 기본값 stretch (조건 까다로워서 align-items를 많이 이용한다.)
- align-items : 교차 축 한 줄 정렬 방식, 기본값 stretch
| justify-content | align-content | align-items |
| 주 축 정렬 방식 기본값 stretch flex-start, flex-end, center |
교차 축 여러 줄 정렬 방식 기본값 stretch flex-start, flex-end, center 조건이 까다로움 1. flex-wrap : wrap; 2. 아이템 2줄 이상 3. 빈 공간 있어야 함 (그래야 정렬 가능) |
교차 축 한 줄 정렬 방식 기본값 stretch flex-start, flex-end, center 줄을 기준으로 정렬 |
'web > html css' 카테고리의 다른 글
| [패스트캠퍼스] 국비지원 flip 만들기 (0) | 2023.05.18 |
|---|---|
| [패스트캠퍼스] 국비지원 13일차 학습일지 (0) | 2023.05.17 |
| [패스트캠퍼스] 국비지원 5일차 학습일지 (0) | 2023.05.09 |
| [패스트캠퍼스] 국비지원 3일차 학습일지 (0) | 2023.05.07 |
| [css] 반응형 Layout (0) | 2023.03.20 |