코드스테이츠 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의 차이점
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)) {
...
}
Author And Source
이 문제에 관하여(코드스테이츠 2주차 월요일 / CSS 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hun1224/코드스테이츠-2주차-월요일-CSS-기초저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)