오늘의 수업 일정
수| Day 10
✍️ #6.0 to #6.5
✔️ 코드 챌린지
수업 간단 정리
.DS_Store파일은 맥os나 윈도우에서 만든 보이지 않는 임시파일이다.
.gitignore는 무시하고 싶은 파일 이름을 기록하는 파일이다.
.gitignore에 .DS_Store 을 적고 무시해주자!
카카오 클론
각 페이지마다 html과 css를 만들자
BEM Block_Element--Modifier!
⭐BEM 정리 참고하기⭐
- block : .btn {}
- elements(요소) : .btn__price {}
- modifiers(수식어) : .btn--big {}
단점 : 클래스 선언 종류가 많아서 코드가 길어진다.
장점 : 코드를 다시 볼때 이해에 도움을 준다.
오늘의 실습) 상단바꾸미기
.status-bar{
display: flex;
justify-content: center;
}
.status-bar_column{
width:33%
}
.status-bar_column:first-child span{
margin-right: 5px;
}
.status-bar_column:nth-child(2){
display: flex;
justify-content: center;
}
.status-bar_column:last-child{
display: flex;
justify-content: flex-end
}
.status-bar_column .fa-battery-quarter{
margin: 0px 5px;
}코코아 클론 챌린지 QUIZ
하아.....진짜 css에 이렇게 시간을 써야하나 싶은데
왜 만드는게 이렇게 어려운거냐 ㅠㅠㅠㅠㅠㅠㅠ진짜 말도 안된다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
아니..... 왜 안되지? 도대체 왜 정렬이 안되냐고!!!!!!!
따로 떼서 만들면 각자 정렬도 잘되고 정상적인데 박스를 다 합치면 하나씩 어긋난다..
특히 li를 사용하라고 해서 사용했는데 도대체가 저걸 어떻게 움직이지?
그냥 div박스로 쭉 만들면 편할텐데 왜 음악 리스트를 li사용하라고 했는지 모르겠다
어디서부터 잘못된건지 손도 못대겠어.. 결국 미완성품 제출했는데.. 너무 슬푸다..
과제 최종본
오늘 하루를 클론 만들기로 불태웠다.....하......
하나 이해되면 또 다른게 문제고..어쩌면 좋냐 9ㅅ9
li안에 div넣고 정렬까지 했다? 근데 문제는 nth-child이게 사용이 안되더라고.. 부모태그 안에 있어야하는데 div를 쪼개놔서 ㅠㅠ 그리고 여전히 문제인 상단바.. 왜 저럴까? 뭐때문에 왼쪽으로 안 붙을까? 정말.. 어렵꾸나...😂😂
오늘 챌린지를 진행하며 배운 것
-
ol, ul태그의 안에는 li태그 외에는 다른 태그는 바로 자식 선택자로 위치할 수 없다. div를 사용하고 싶다면 li태그를 먼저 만든 후에 그 안쪽으로 div태그를 작성해야한다.
-
BEM사용법! 오전에 과제할때는 빨리 만들기 바빠서 태그 이름 크게 신경안쓰고 썼는데 오후에 수정하려고 보니까 너무 중구난방이라 써볼까?하고 사용했는데 확실히 정리되는거 같고 위치찾기도 쉽고 좋은거같다. 유용하게 사용하는걸루~
