CSS란 무엇일까?

디스플레이 코드 종류와 특징

display: block 디스플레이 블록은 아래로 차곡차곡 쌓아둔다

display: inline 디스플레이 인라인은 오른쪽으로 나란히 쌓인다 width와 height값이 적용이 안됀다 박스가 사라짐

보통 텍스트 작업시 사용

 

display: inline - block 인라인 블록은 인라인과 비슷한데 박스가 생긴다

display: none 디스플레이 논은 박스를 지워버린다

 

cascading은 어떤것이 우선으로 적용이 될까라는 코드라고 할 수 있다

 

class로 한 번에 색깔 값을 줬어도 id를 따로 적용시킨 박스는 id에 적용한 색깔 값을 따라간다

 

css 가장 마지막에 써준 속성값이 적용이된다 예를들어 li{ background: white}라고 써놔도

뒷쪽에 한 번 더 li{ background: black}이라고 기입해놓으면 검은색이 적용된다

 

코드의 부모와 자식관계

*{
box-sizing: border-box;
}
.container{
width:100%;
max-width: 1080px;
padding:40px;
margin:auto;
}
article{
width: 100%;
padding:20px;
font-size: 16px;
background-color:  #eee;
border-radius: 10px;
margin-bottom:20px;
}

h1{
font-size: 24px;
margin-bottom:10px;
}

article > h1{  여기서 ">"는 바로 아래의 자식에게만 적용이 되는 부호이다
    font-size: 20px; 
    margin: 0;
}

article p{margin: 0;}

.dark-mode { 
    background-color: black;
}

.dark-mode h1, 주고 싶은 효과가 같다면 ,를 써서 hi, p 이런식으로 써주고 효과를 넣어주면 된다

.dark-mode p {
    color: white;
}

 

reset.css를 이제부터 모든 코드에 활용해보자

마진은 컨텐츠 간의 사이간격을 말하고

패딩은 박스안의 컨텐츠의 넓이를 말해준다 박스의 테두리를 기준으로 안으로 들어간 정도

 

그리고 box-sizing:border-box를 배워야 하는데 오늘 너무 잠와서 그만해야 겠다.....

내일 아침에 다시 해보자