1. HTML 문서와 CSS 파일 연결
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />하나의 HTML 문서에 여러 CSS 파일을 적용할 수 있다
2. 텍스트
테두리
- border-style 기본값은 none이므로 다른 속성값을 지정하지 않으면 보이지 않음
- border-radius : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
border-radius - CSS: Cascading Style Sheets | MDN
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
developer.mozilla.org
글꼴
- 글자의 크기: font-size
- 굵기: font-weight
- 밑줄, 가로줄: text-decoration
- 자간: letter-spacing
- 행간: line-height
* 웹폰트
구글폰트 사용 시 html, css 모두 변경해야 함 https://fonts.google.com/?subset=korean¬o.script=Kore
정렬
- 가로 정렬: text-align / 값: left, right, center, justify(양쪽 정렬)
- 세로 정렬: vertical-align 속성 (부모 요소 display 속성이 반드시 table-cell이어야함)
3. 절대단위 & 상대단위
- 절대 단위: px, pt 등 ex. 9pt = 12px
- 상대 단위: %, em, rem, ch, vw, vh 등
**rem
- root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem
- 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절
- 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리
- 크롬 기본 글꼴 크기는 16px
vs. em 은 부모 엘리먼트에 따라 상대적으로 크기가 변경
* vw, wh : viewport width, viewport height
1vw = 1/100 viewport width → 100vw, 100vh
4. 박스 모델
margin > border > padding > content
margin 음수값 : (ex. 카드 겹치는 효과)
박스를 벗어나는 컨텐트 : https://codepen.io/oyeon-kwon/pen/zYBNxPL
| block | inline-block | inline | |
| 줄 바꿈 여부 | 줄 바꿈이 일어남 | 줄 바꿈이 일어나지 않음 | 줄 바꿈이 일어나지 않음 |
| 기본 너비 | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 O/X | 가능 | 가능 | 불가능 |
span(인라인속성) 은 width, height를 지정해도 박스의 크기를 변경할 수 없음
강제로 바꾸기 위해서는??
display: inline-block; (크기만 조정O, 줄바꿈X)
5. 셀렉터 Selector
header > div { } /* header에 소속된 div 자식 */
header div { } /* header에 소속된 div 후손들 */
section ~ p { }
p ~ section { } /* p태그의 형제인 section을 선택 */
section + p { } /* section과 가장 가까운 형제인 p태그를 1개만 선택 */
https://lucky-kor.github.io/css-selector/
* 나중에 공부할 셀렉터
- 가상 클래스 선택자
- UI 요소 상태 선택자
- 구조 가상 클래스 선택자
- 부정 선택자
- 정합성 확인 선택자
6. Flexbox
부모 요소에서 사용하는 Flexbox 속성
- display: flex
- flex-direction: row / row-reverse / column / column-reverse
- flex-wrap : 하위 요소 크기 > 상위 요소 크기 → 자동 줄 바꿈 설정 nowrap , wrap , wrap-reverse
- justify-content : 축 수평방향 정렬 flex-start , flex-end, center, space-between, space-around
left vs flex-start → start (flexbox가 2개 이상일 때 권장) - align-items : 축 수직 방향 정렬 stretch , flex-start , flex-end , center , baseline
자식 요소에서 사용하는 Flexbox 속성
flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
#box1 {
flex: 1 1 auto;
}
#box2 {
flex: 0 1 auto;
}
#box3 {
flex: 0 1 auto;
} /* 1:0:0 기본크기를 제외하면 box1이 차지함 */
Q. 계산기 실습 중 양쪽 하단에 border-radious 속성이 적용되지 않는 현상 발생
A.
현상 : div.container에서 적용한 border-radious 눈에 보이지 않음
시도1 : .container 안에 있는 .input에 border-radious 적용
→ 결과 : 여전히 보이지 않음
시도2 : 최하단 양 끝의 버튼의 모서리에 각각 border-radious 적용
→ 키패드 0, 키패드 = 에게 HTML에서 id를 부여 후 CSS에서 아래 사진과 같이 적용
→ 결과 : border-radius 적용 완료
+ 궁금한 점 개인 학습
CSS 우선 순위 : 충돌 시 selector가 구체적일수록 우선순위가 높다
- 속성 값 + !important
- 인라인 스타일 : HTML에서 태그 자체에 style 속성 지정
- 식별자 #id
- 식별자 .클래스, :추상클래스
- 태그명
- 상위 객체에 의해 상속된 속성
.checked { color: blue }
.unchecked { color: white !important }
- HTML 에밋 단축키 → div.container>div.output
- SASS, SCSS : CSS 전처리기 ($변수, @for @if 등) → 추가 공부해보기
