베이스캠프 6일차 _22년 12월 19일

학습언어

CSS

학습 내용

CSS

선택자

(태그 선택자 / id 선택자 / class 선택자 / 자손 선택자 / 다중 선택자 / 전체 선택자 / 그룹 선택자 / 가상 선택자)

1. 태그 선택자

/* 태그 선택자 사용방법 */
태그 {
    property : property value;
}

2. id 선택자

#id {
    property : property value;
}

3. class 선택자

.class {
    property : property value;
}

4. 자손 선택자 (공백으로 연결)

/* 자손 선택자 사용예시 - .box 안에 있는 #title을 선택한다. */
.box #title {
    color : red
}

5. 다중 선택자 (공백이 없으며 중첩된 선택자들을 모두 만족하는 요소를 선택합니다)

/* 다중 선택자 사용방법 */
선택자1선택자2 {
    속성 : 속성값
}

6. 전체 선택자

*{
   property : property value
}

7. 그룹 선택자

/* 그룹 선택자를 이용해서 한번에 처리 */
h2, p, div {
	color : blue
}

8. 가상 선택자
가상 클래스는 선택자 뒤에 콜론을 찍은 후 적어주면 됩니다.
선택자:가상클래스{ 속성 : 속성값 } 이런식으로 적어주시면 되며, 아래 예시를 통해 조금 더 자세히 알아보도록 하겠습니다.

.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; }

font 기본속성

font-size : 글자 사이즈
font-weight : 글자 두께
font-style : 글자 기울임
text-decoration : 글자 꾸밈(밑줄, 취소선 등)
color (글자 색)

 

css 레이아웃의 흐름

float -> flex -> grid

* Float는 *반응형 웹에 적합하지 않기 때문에 거의 사용하지 않음
❗️ 반응형 웹이란?
모바일, 태블릿, 데스크탑 PC 등 접속하는 기기의 너비에 맞추어 레이아웃이 변하는 웹페이지
flex와 grid를 상황에 따라 혼용하여 사용

float 란 ?

HTML 요소를 일반적인 흐름(normal flow)으로부터 벗어나서 특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성입니다.

• float: none (기본값)
• float: left
• float: right

clear

float가 적용된 요소에 추가로 줄 수 있는 속성으로, float의 영향력을 해당 요소에 한해 해제합니다.

• clear: none (기본값)
• clear: left
• clear: right
• clear: both

clearfix

<div class=clearfix></div> 로 float 속성 정리를 위한 태그
(정리를 원하는 태그의 형제 태그로 넣어줘야합니다.)

소감

CSS를 본격적으로 시작하였습니다.
선택자를 활용하여 모든 태그에 class를 지정하지 않아도 원하는 태그에 CSS를 적용 할 수 있었습니다.
또한 float에 대한 이해와 flex와 차이점에 대해서 학습하였습니다. 강의에서 말씀하신 것처럼 flex가 확실히 사용하기 간편한 것 같습니다.