지난주에는 프리캠프 5일 과정으로 html, css, javasrcipt를 맛보기 식으로 초심자 과정으로 진행했었다.
이번주부터는 CSS를 중점으로 지난주보다 좀더 난이도가 올라간 기본자 코스이다.
태그 선택자
태그 선택자는 앞에 붙여 무언갈 따로 붙여줄 필요없이 태그명만 적어주시면 됩니다.
/ 태그 선택자 사용방법 /
태그 {
property : property value;
}
/ 사용 예시 /
div {
background-color : red;
}
폰트 기본스타일
font-size : 폰트의 사이즈를 조절하는 속성입니다.
font-weight : 폰트의 굵기를 조절하는 속성입니다.
font-style : 글자의 모양을 정하는 속성으로 기울임 여부를 정합니다.
test-decoration : 텍스트에 장식용 선을 추가합니다.
color : 폰트의 색상을 변경해주는 속성입니다.
박스모델
content : 요소의 실제 내용이 차지하는 영역
padding : 내용과 테두리 사이의 간격, 내부 여백에 해당합니다.
border : 내용과 패딩을 감싸는 테두리
margin : 테두리와 이웃하는 요소 사이의 간격, 외부 여백에 해당합니다.
box-sizing : 요소의 너비와 높이를 계산하는 방법을 지정합니다
inline 요소 vs block 요소
div, p, span, h1, h2 등 수많은 HTML 태그는
전통적으로 블록 요소와 인라인 요소 두 가지로 분류됩니다.
block 요소 :
블록 요소를 여러개 연속해서 쌓을 경우 자동으로 다음 줄로 넘어간다.
좌우 양 쪽으로 늘어나 부모 요소의 너비를 가득 채운다.
inline 요소 :
여러개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
태그에 할당된 공간 만큼의 너비만 차지한다.
전체 선택자
전체 선택자는 HTML의 모든 요소를 선택합니다.
*{
property : property value
}
그룹선택자
그룹 선택자는 여러 선택자를 그룹으로 묶는 기능입니다.
보통 그룹 선택자는 중복된 속성을 여러번 반복해서 줄 경우, 선택자를 묶어서 한번에 처리함으로써 코드를 줄여주는 역할을 합니다.
/ 동일한 속성을 반복적으로 사용 /
h2 {
color : blue;
}
p {
color : blue;
}
div {
color : blue;
}
/ 그룹 선택자를 이용해서 한번에 처리 /
h2, p, div {
color : blue
}
가상 클래스 선택자
선택자 뒤에 :가상 이벤트 를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 클래스라 합니다.
:first-child : 첫번째 자식
:last-child : 마지막 자식
:nth-child(n) : 홀수번째 자식
:hover : 마우스를 요소에 올렸을 때
가상클래스 선택자 사용방법
.some-box:hover{ background-color: red; }
.container-boxs:first-child{ margin-left: 0; }
.container-boxs:last-child{ margin-right: 0; }
.contentsBox:nth-child(n){ color: red; }
float 레이아웃
전통적으로 레이아웃을 구성할때 사용하던 방법입니다.
하지만 float 레이아웃은 PC로만 인터넷에 접속할 수 있던 시절에 고안되었기 때문에,반응형 웹에는 적합하지 않습니다.
float
HTML 요소를 일반적인 흐름(normal flow)으로부터 벗어나서 특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성입니다.
float: none (기본값)
float: left
float: right
clear
float가 적용된 요소에 추가로 줄 수 있는 속성으로, float의 영향력을 해당 요소에 한해 해제합니다.
clear: none (기본값)
clear: left
clear: right
clear: both
flex 레이아웃
flex는 레이아웃 배치 전용 기능으로 고안되었기 때문에 float에 비해 훨씬 편리합니다.
그렇기 때문에 flex가 등장한 이후부터 레이아웃에 있어서 float는 찬밥신세가 되었다고 볼 수 있습니다.
flex의 속성
1.컨테이너에 적용하는 속성
2.아이템에 적용하는 속성
1. 컨테이너에 적용하는 속성들
display : flex
flex-direction (배치 방향 설정)
row (행) : 중심축을 가로 방향으로 배치합니다.
column (열) : 중심축을 세로 방향으로 배치합니다.
justify-content (메인축 방향 정렬)
flex-start
flex-end
center
space-between
space-around
space-around
space-evenly
align-items (교차축 방향 정렬)
stretch
flex-start
flex-end
center
내용이 정말 많다. 이 많은 것들은 외우기 힘들다. 가장 중요한 것은 구조를 이해하고 뼈대 -> 내용 -> 세부적인 순으로 스스로 잘 짜놔야한다고 생각했다.
가장 많이 쓰이는 것 정도는 익숙함이 외워줄 거라고 생각한다.
-CSS 1일차 끝-
