20230220 TIL
CSS Basic
Web Browser
Cascading Style Sheet
스타일& 레이아웃 담당
div{ bg: red;}선언 = 선택자{속성: 속성값;}
CSS 적용방식
-
인라인방식 속성 적용할 태그에 직접 입력 <div style~>
-
분리된 css 파일 연결
태그 선택자
tag{property: value;}
id선택자 (특정한 태그)
#id{ pro: value}
태그 id{}
Class 선택자 - 중복선택 가능
.class{ property: value;}
자손 선택자
.parent-공백-.child{ 속성: 값;}
다중 선택자
.title#headline{} 두 조건을 모두 만족시키는애들만 선택
.class#id {}
FONT 기본 속성
폰트-사이즈 : 글자 사이즈
폰트-웨이트 : 글자 두께
폰트-스타일 : 글자 기울임
텍스트-데코레이션 : 글자 꾸밈(밑줄, 취소선 등)
컬러 : 글자 색
VS Code 작성시 팁
div.class#ID + TAB : 단축키
link + TAB(enter)
박스 모델?
모든 html요소는 박스 형태로 되어 있음
-컨텐트박스 : 컨텐트 영역을 기준으로 박스의 사이즈를 적용(디폴트값)
-보더박스 : 보더 영역을 기준으로 박스의 사이즈 적용
블록요소 vs 인라인 요소
-
블록 : div, p 좌우 양쪽으로 늘어나 부모 요소의 너비를 가득 채움
Div p ul dl p h1 h2 h3 h4 h5
-
인라인 : 자동으로 다음줄 x, 크기만큼만
a. pan img strong em input button texarea select
-
display : inline | block
CSS 레이아웃
: 보기좋게 배치, 재배열하는 기능, 배열 등
선택자(셀렉터)2
1.전체 선택자
*{ box-sizing : border box;}2.그룹 선택자
.class1, .class2{}
3.가상 클래스 선택자
html실제 수정 x
선택자: 가상 클래스{}
.class:first-child{}
첫번째 p태그만 선택(<> last-child)
-
class:nth-child(3){} ; 세번째 요소
-
box1p:nth-child(2n){} ; 짝수요소
.class:hover{} 요소 위에 마우스가 올라갔을 때 발동
.button1:hover{}
FLOAT/FELX LAYOUT
CSS 레이아웃의 흐름
float (거의 사용안함; 반응형 웹(모바일,태블릿 등 기기 너비에 맞춰 레이아웃 변화)에 부적합) → flex → grid ;상황에 따라 혼용
Float & Clear
float:none(기본값)
clear: none(기본값)
다시 아래로 끌어당겨줌
FLEX
-
css레이아웃의 꽃, 플로트보다 수월하고 간단
-
display: flex; → flexible box로 변환
- flex-direction : row | column (행, 렬)
ㄴ row의 기본값
- justify-content : 중심축 방향 정렬(row;가로)
-
flex-start(기본값) 시작점 기준
-
flex-end 끝점
-
center 중앙정렬
-
space-between : 균일한 여백, 양끝 마진 없음
-
space-around : 각각 균일한 좌우 여백
-
space-evenly : 여백의 크기 차이(vs around)
모든 여백의 크기 균일하게 정렬(메뉴, 카드형 레이아웃)
-align-items : 중심축 반대 방향(row;세로)
-
stretch 기본값 ; 쭉 늘려서 꽉 채움
-
flex start, end : 시작점, 끝점 기준 정렬
- center : 중앙 기준 정렬
cf. row-reverse, column-reverse : 스타트,엔드도 변경
Velog를 처음 시작하면서 노션에 기록해두었던 것들을 옮기는지라 이미지 오류가 많이 떴다... 노션을 참고하자
