CSS
CSS(Cascading Style Sheet) = 웹페이지의 스타일 &레이아웃을 담당하는 문서
웹브라우저 -> 웹페이지 접속 -> 서버
웹브라우저 <- 웹페이지,소스코드 <- 서버
2.CSS 기본 용법
HTML + CSS
div{
background: red;
}
선택자(Selector) {
` 속성(Property) : 속성값(Property value)
} └선언(Declaration)┘
3.CSS 세 가지 적용 방식
(1) 인라인(in-line) 적용 방식: 속성을 적용할 HTML 태그에 직접 CSS를 입력해주는 방식
(2) 태그 이용
(3) 분리된 CSS 파일 연결 : HTML 파일 & CSS 파일 따로 만든 뒤 태그를 이용해 연결시켜주는 방식
태그 rel : 해당 태그로 연결시켜줄 파일과 어떤 관계 (relation)인지 지정 href : 연결할 파일의 경로를 지정
선택자
1.태그 선택자
tag{
prorperty : value
}
2.id 선택자 - 여러개 요소 지정 불가
#id{
property:value
}
3.class 선택자 - 여러개 요소에 중복해서 지정 가능
.class{
property:value
}
4.자손 선택자
.parent .child{
property:value
}
5.다중 선택자
.class#id{
property:value
}
6.전체 선택자
{
property : value
}
7.그룹 선택자
.class1, .class2{
propery : value
}
8.가상 클래스 선택자
실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다
선택자:가상 클래스{
property : value
}
(1) :first-child - 자식 태그 첫번째
.class:first-child{
property : value
}
(2) :last-child - 자식 태그 마지막
.class:last-child{
property : value
}
(3) :nth-child(n) - 자식 태그 n번째
.class:nth-child(n){
property : value
}
(4) :hover - 버튼 위에 마우스 올리면 색이나 스타일 변하는 경우
.class:hover{
property : value
}
폰트 기본 스타일
font-size : 글자 사이즈
font-weight : 글자 두께
font-style : 글자 기울임
text-decoration : 글자 꾸밈(밑줄,취소선 등)
color : 색
박스모델
1.박스 모델: 웹 브라우저에서 HTML Element를 구성할 때 각각의 요소가 차지하는 박스 공간을 정의한 모델. 모든 HTML 요소는 박스로 되어 있다.
2.box-sizing 속성
content-box : Content 영역을 기준으로 box의 size를 적용 (기본값)
border-box : Border 영역을 기준으로 box의 size를 적용
Inline, block
1.block 요소 - div, p ,ul, dl, h1,h2,h3,h4,h5
블록 요소를 여러개 연속해서 쌓을 경우, 자동으로 다음 줄로 넘어간다
좌/우 양쪽으로 늘어나 부모 요소의 너비를 가득 채운다
2.line 요소 - a, span, img, strong, em, input,button, textarea, select
여러개의 요소를 연속해서 입력해도 자동으로 다음줄로 넘어가지 않는다
태그에 할당된 공간 만큼의 너비만 차지한다
CSS 레이아웃
1.CSS 레이아웃이란 ?
레이아웃: 문자,그림,사진 등을 요소를 지면위에 효율적으로 배열하는 일
CSS 레이아웃: CSS를 이용해서 단순한 문서 형태인 HTML을 보기 좋게 배치하고 재배열 하는 것. 관련 기능, 완성된 배열 등을 포괄적으로 지칭
2.Float 와 Flex layout
(1) 사용되어온 순서 : Float(이제는 거의 사용 x) -> Flex -> Grid (Flex,Grid는 상황에 따라 혼용)
3.float가 쓰이지 않는 이유
반응형 웹에 적합하지 않기 때문
반응형 웹이란 ?
모바일, 태블릿, PC 등 접속한은 기기의 너비에 맞추어 레이아웃이 변하는 웹페이지
4.float를 왜 배우는가?
float를 사용한 코드도 읽을 수 있어야 한다
레이아웃이 어떻게 변해왔는지 알면 flex를 더 효과적으로 사용할 수 있다
float 레이아웃
1.float란?
HTML 요소를 일반적인 흐름(noraml flow)로부터 벗어나서 특정한 컨테이나 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성
float : none (기본값)
float : left
float : right
2.clear란?
float가 적용된 요소에 추가로 줄 수 있는 속성으로, float의 영향력을 해당 요소에 한해 해제합니다.
clear : none (기본값)
clear : left
clear : right
clear : both
flex 레이아웃
1.flex 란?
CSS 레이아웃의 꽃!
CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에, 기존의 float 방식보다
훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다.
2.요소의 속성을 flex로 변경
display : flex
flex- container (display : flex 가 적용된 요소)
flex item
3.flex-direction (배치 방향 설정)
flex-direction : row(행) | column(열)
flex-direction : row (기본값)
4.justify-content : 중심축 방향 정렬
justify-content : flex-start (기본값) 컨테이너 시작부분 기준
justify-content : flex-end 컨테이너 끝부분 기준
justify-content : flex-center 컨테이너 가운데 기준
justify-content : space-between 시작,끝부분 제외 아이템들이 균일한 여백을 두고 배치
justify-content : space-around 시작,끝부분 포함 양끝 여백과 두 개 아이템 여백의 차이가 난다
justify-content : space-evenly 시작,끝부분 포함 모든 여백들이 균일하게 정렬
5.align-items : 중심축 반대 방향 정렬
align-items : stretch (기본값)
align-items : flex-start
align-items : flex- end
align-items : center
6.주의 사항
(1)align-items 는 flex-item이 한 줄일 때 우선 적용!
두 줄 이상일때에는 align-content 라는 다른 속성을 써주어야 한다.
(2)flex-direction이 바뀌면 중심축의 방향이 바뀐다!
중심축의 방향이 바뀌면, justify-content와 align-item의 정렬 방향도 함께 바뀌게 된다!
