1.html과 css분리하기
html 부분에 '\' 설정해주기. 다음 설정을 통해 css파일을 html파일로 불러올 수 있어서 html과 css를 따로 작성할 수 있다.
2.CSS 구성요소
1) CSS Selectors
css selector란 style을 적용할 요소를 선택하는 표현형식이다.
- css파일에서 selector 작성법
selector { property: value; } 의 구성인데..
태그명 { property: value; } : 해당태그전체에 적용
#id명 { property: value; } : 해당id를 부여한 태그들에 적용
.class명 { property: value; } : 해당class를 부여한 태그들에 적용
( id와 class차이 : id는 고유한 값으로 중복불가, class는 중복가능
즉, 묶고 싶을 때는 class, 고유하게 설정하고 싶을 때 id 사용한다 )
2) box-sizing
- {
box-sizing: border-box;
}
먼저 box-sizing이란 박스의 사이즈 계산 기준을 어떻게 잡을 것인가에 대한 설정이다.
만약 width=100px;이란 값을 주었을 때 누군가는 실제 박스자체를 100px로 잡을 수도 있고
누군가는 컨텐트영역을 100px로 잡고 여기에 paddding값, border값을 더해서 박스를 더크게 잡을 수도 있다.
즉, width를 설정할 때 실제 박스 크기로? 컨텐트영역 크기로? 할 것인지 등을 정하는 것이 box-sizing속성이다.
-(default값이다)content-box : content-box를 설정(즉, 실제 박스크기는 content-box + padding + border 가 된다.)
-border-box : 박스테두리를 설정
-initial : 기본값으로 설정
-inherit : 부모 요소 속성 상속
여기서 일반적으로 사람들이 box-sizing: border-box를 좋아해서 모든 요소에 이런 설정을 넣어주고 싶어한다.
그래서 생긴 것이 아래 코드다.
- {
box-sizing: border-box;
}
3) font-family
font-family = 폰트 종류 여러개..
처음봤을 때 왜 폰트 종류를 여러개 설정하는지 궁금했다.
이는 예비용이다. 첫번째 폰트가 기본 폰트고, 만약 첫번째 폰트를 지원안하면 두번째 폰트, 두번째도 안되면..
이런식이다.
4) media
@media : 반응형 레이아웃을 만들기 위한 css요소
html head부분에
-
모바일 우선(mobile first) : 작은 가로폭부터 만들기, min-width사용
A
@media ( min-width: 768px ) {
B
}
@media ( min-width: 1024px ) {
C
}
기본A -> (화면점점커질수록) B -> C -
데스크톱 우선(desktop first) : 큰 가로폭부터 만들기. max-width사용
A
@media ( max-width: 1023px ) {
B
}
@media ( max-width: 767px ) {
C
}
기본A -> (화면점점작아질수록)B -> C
5) flex
화면이 줄어들고 확장됨에 따라 요소도 같이 줄어들 것이냐 확장될 것이냐 설정
a태그안에 b태그가 있을 때
a{
display: -webkit-flex; // 사파리용 명령어
display: flex; //일반용 명령어
}
b{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
flex : 원래크기 상관없이 1은 같이 줄어들거나 확장될 것이다라는 설정.
0은 원래크기를 유지하기 위해 같이 줄어들거나 확장되지 않겠다는 뜻이다.
flex말고 flex-grow, flex-shirnk, flex-basis 등을 써서 각 경우에 대한 것만 따로따로 설정도 가능하다
6) width(height)
px : 고정됨. 브라우저가 커지든 작아지든 그냥 자기 크기 유지함
% : 브라우저에 대한 퍼센트로 브라우저가 변형되면 변형된 브라우저에 맞춰 퍼센트 자동적용.
max-width : 최대크기를 정하고 이보다 브라우저 크기가 클 때는 고정px처럼 max-width값을 유지
하지만 브라우저를 줄여 최대크기 이하의 브라우저 크기가 되면 그에 맞춰 줄어듬.
min-width : 최소크기를 정하고 이보다 브라우저 크기가 클 때는 브라우저에 맞춰 적용
브라우저가 줄어들어 최소크기 이하의 브라우저 크기가 되면 그때부터 고정px처럼 자동작용
즉 브라우저 크기가 max-width보다 커지면 max-width는 고정px처럼 늘어나지 않음
브라우저 크기가 min-width보다 작아지면 min-width는 고정px처럼 줄어들지 않음
7) image
img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다.
src : 이미지의 경로
alt : 이미지를 표시할 수 없을 때 출력할 내용
width : 이미지의 가로 크기
height : 이미지의 세로 크기
loading : 이미지 로딩 방식 (eager, lazy 로 브라우저 상에 나타나면 이미지를 불러오냐 아님 미리 다 불러와놓느냐)
