※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
※단축키
1. Ctrl + Alt 키를 누른 상태에서 위, 아래 방향 화살표로 세로 선택 영역을 조절합니다.
2. 세로로 여러 줄이 선택 된 상태에서, Shift + (←, →) 단축키로 가로 영역을 선택 할 수 있습니다.
일단 div태그로 나누기
- 유지 보수가 편해진다.
- 협업이 쉬워진다.
div. class id 이름을 누가 보더라고 알아 볼수 있게 해야함.
이름 짓기는 명사 + 명사
header-search 나 headerSearcg 식으로 이름 쓰면 좋다.
부모태그의 css는 자식도 영향을 받는다. 알게 모르게 자연스럽게 익히자.
1. 상속이 되는 css속성 :
2. 상속이 안되는 css속성:ex) div부모만 테두리 되고 자식p태그는 각각 테두리 적용안됨.
border: dashed 점선/ solid 걍선
단위
- 16px 1em = 1rem / px를 일반적으로 사용.
- px : 화소,해상도 단위
- em : 부모 태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산한다.
- rem : F12 아래 Computed 눌러서 rem이 몇px인지 확인 가능.(show all자세히)
글자 단위는 rem을 사용
이유는 인터넷창 우측 맨위 점세개- 설정-좌측에 모양-글꼴 크기(설정하면 rem단위 글씨만 반응)
div 레이아웃
- 잘안쓰는 방법 display_inline : 작은 상자 css에 ' display: inline-block; ' 넣으면
컨테이너의 빈 가로 공간 사라지고, 컨테이너에 폰트사이즈 0넣는 방법
폰트사이즈 대충16px 주면 상자가 떨어져 버림.
그때 작은 상자(좌)의 css에<vertical-align: top;>이라는 수직정렬 속성 넣으면 안떨어짐.
- float :
레이아웃의 배치를 위해 만들어진 css속성_왼쪽or오른쪽에 넣을때 사용
기본적으로 <float : none;> 값이 주어져 있음.
좌측 정렬 하고 싶으면 float: left; 우측 정렬하고 싶으면 <float: right;>
작은 상자 두개에 <display: inline-block;>없이 <float: left;> 넣으면
알아서 한줄로 빈공간에 넣어짐.근데 bottom상자가 작은상자랑 겹쳐져버림.
이때 bottom상자의 css에 <clear: both;> 넣으면 아래로 감.
clear:both; 를 쓰면 작은 상자 두개 float이 left건 right건 아래로 내릴 수 있어.
부모태그인 컨테이너 기준으로 정렬.
- 자주 쓰는 방법 flex : 작은 상자들을 감싸는 div에 클래스 이름 부여하고
그 클래스 css에<display: flex;>하면 작은 상자 한줄로 정렬됨.<div class="flexBox"> <span>밍</span> <span>한</span> <span>수</span> <span>희</span> <span>잉</span> </div>
F12 해서 flex상자 누르고 아래에 style 보면 화살표 눌러보면 flex종류 나옴.
display: flex; [화살표]
width: 500px;
height: 300px;
border: 1px solid black;
flex-direction: column-reverse;
}flex-direction: row 북서쪽에 붙어서 좌에서 우 순서로 밍한수희잉
flex-direction: column 북서쪽에 붙어서 위에서 아래 순서로 밍한수희잉
flex-direction: row-reverse 북동쪽에 붙어서 우에서 좌 순서로 잉희수한밍
flex-direction: column-reverse 남서쪽에 붙어서 아래에서 위 순서로 잉희수한밍.
flex-wrap: wrap 는 span태그들말고 div태그 들의 크기를 지키면서 정렬
밖으로 삐져나가지 않고 아래로 내려감.
- align-content는 div 두줄 이상 일때 사용
align-content: center div태그 들이 가운데 높이로 정렬
align-content: flex-start div태그 들이 위 높이로 정렬
align-content: flex-end div태그 들이 아래 높이로 정렬
align-content: space-around div태그 들이 양끝에 즉당히 붙고 높이 간격주고 정렬
align-content: space-between div태그 들이 양끝에 붙은 높이로 간격 준 정렬
align-content: stretch div태그 들이 위 높이로 간격 준 정렬
justify-content: center 위에서 가운데 정렬.
justify-content: flex-start 위에서 좌로 정렬.
justify-content: flex-end 위에서 우로 정렬
justify-content: space-between 위에서 양끝에 붙어서 같은 간격 정렬
justify-content: space-around 위에서 중앙기준으로 ? 간격 정렬 ★
justify-content: space-evenly 위에서 중앙기준으로 같은 여백 간격 정렬
- align-items는 div 한줄일때 수직정렬을 의미.
align-items: center 좌에서 가운데 높이로 정렬
align-items: flex-start 좌에서 위에 높이로 정렬
align-items: flex-end 좌에서 아래 높이로 정렬
align-items: stretch 좌에서 전체 높이론? 정렬 ★
grid>★★가장 최신의 방법
이미 격자로 나눠놓고 그 격자에 채워넣는 방식
스타일 컨테이너에
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px 200px;
(1fr 많이씀)
font 폰트를 꾸며주는 css
font: italic small-caps bold 12px/30px 폰트명; [기본 폰트 css 넣을때]
font-style 는 italic, oblique 2가지이며 italic와 oblique 기울어진 값임.
>italic은 이텔릭체가 디자인되어있는 폰트에서 사용하고
>oblique는 이텔릭체 디자인이 없더라도 무조건 글자를 기울여서 표현font-weight 굵기
font-variant 잘안씀.영어 소대문자로 변경
font-size 글씨 크기
line-height 세로 줄간격.
font-family 글꼴, 가장 앞에껄로 우선 적용,없으면 그다음꺼.
p태그에 글넣고 클래스명 font로 하고 css파일에서
@font-face {
font-family : 폰트명;
src: url(./font폴더명/폰트 다운된폴더로/폰트파일명.ttf);
}
.font {
font-family: 폰트명;
}★www.dafont.com이나 구글 폰트 있음.폰트 폴더 따로 만들어..
공간을 부여하는 css속성들>
- margin는 border를 기준으로 밖에 있는 경계.
- margin: 10px 3px 4px 5px; 마진 탑/라이트/레프트/바텀순으로 적용됨.
- padding는 border를 기준으로 안에 있는 경계 여백. 패딩 탑/라이트/레프트/바텀
※margin은 겹치기도 한다.
마진끼리 시각적인 요소가 없다면 겹칠 때가 있다.
마진끼리 겹쳤을떄 큰 마진값을 따라감.
