코드스테이츠 2주차 월요일 / CSS 기초

용도에 따라 css 파일을 구분해준다

header, footer {
    font-size: large;
    text-align: center
    padding: 0.3em 0;
    background-color: #4a4a4a;
    color: #f9f9f9;
}
...

예를 들어style.css에서는 페이지의 텍스트나 색상 효과, padding, margin등의 속성들을 지정했다면

//layout.css
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.container{
    display: flex;
    flex: 1;
}
...

layout.css에는 페이지 요소들의 배치에 대한 속성들을 지정해서 용도에 따른 css스타일링을 구분해 준다.

id와 class의 차이점

Selector

/* class가 class이면서 id가 id인 엘리먼트 */
.class#id{ 
	...
}
/* class가 class인 엘리먼트의 id가 id인 후손 엘리먼트 */
.class #id{

}

/* div 바로 다음에 오는 p엘리먼트 */
div + p {
	...
}

/* div에 인접한 모든 형제 엘리먼트 p */
div ~ p {
	...
}

/* div엘리먼트중 첫번째 자식 엘리먼트 */
div:first-child {
	...
}

/* span엘리먼트중 마지막 자식 엘리먼트 */
span:last-child {
	...
}

/* div엘리먼트의 자식 엘리먼트 중 2번째 엘리먼트가 p인것 */
div > p:nth-child(2) {
	...
}

/* div엘리먼트의 자식 엘리먼트 중 홀수번 째 엘리먼트가 p인것 */
div > p:nth-child(2n + 1) {
	...
}

/* div의 자식 엘리먼트 중 첫번째 p엘리먼트 */
div > p:first-of-type {
	...
}

/* p의 형제 엘리먼트중 마지막 p엘리먼트 */
p:last-of-type {
	...
}

/* div의 형제 엘리먼트중 3번째 div엘리먼트 */
div:nth-of-type(3) {
	...
}

/* span의 형제 엘리먼트중 뒤에서 3번째 span엘리먼트 */
span:nth-last-of-type(3) {
	...
}

/* div엘리먼트중 id가 advanced가 아닌 것 */
div:not(#advanced) {
	...
}

/* p의 형제 엘리먼트중 3번째 p엘리먼트가 아닌 모든 p엘리먼트 */
p:not(:nth-of-type(3)) {
	...
}