반응형 CSS8 크기를 조절 하는 px 대신 쓰는 rem에 대해서 슈퍼코딩을 진행했다 과제를 주셨는데 하다 보니 이상한 문제가 생겼다. 먼저 오늘 내게 주어진 과제부터 보자 현재 저희 페이지 보시면 알람 아이콘이 있는데 거기에 안 읽음 표시를 구현해 주세요. 이게 무슨 말이냐면 이런 식으로 표시를 하라는 거다 정말 별거 아닌 문제다 전에 포스팅했던 글에서도 했듯이 2023.06.27 - [개발공부] - CSS 박스 배치 (2)__position CSS 박스 배치 (2)__position body { display: flex; justify-content: center; } justify-content는 박스의 가로 배열을 담당한다 정확히는 메인 축의 방향으로 움직이는데 기본적으로는 x축이 메인 축이 된다. 반대로 display: flex; justify-content:.. 2023. 6. 28. CSS 선택자들(Selector, Psuedo Selector) 선택자와 상태 특정 요소만 선택을 해보자 id는 유일무이한 것이다 하나의 이름만 쓸 수 있다. 1번 2번 이렇게 같은 id명을 쓰면 안 된다. 1번 2번 이런 식으로 다른 이름을 써야 한다. css에서 위의 버튼들을 불러오려면 어떻게 해야 할까? #btn-1 { background-color: black; } 이런 식으로 id명 앞에 #을 붙여서 적용하면 된다. id와는 다르게 동일한 아이들끼리 뭉쳐서 스타일을 적용시킬 수 있는 class이다. 1번 2번 class는 이렇게 같은 이름으로 정할 수 있으며 불러올 때는 . 으로 불러온다 .btn { color: white; } 이렇게 할 수 있다. 또 다른 방법을 보자 하위 요소들 중에서 몇 번째 아이만 스타일을 적용한다 라고 했을 때는 main .btn:.. 2023. 6. 27. CSS 박스 배치 (2)__position body { display: flex; justify-content: center; } justify-content는 박스의 가로 배열을 담당한다 정확히는 메인 축의 방향으로 움직이는데 기본적으로는 x축이 메인 축이 된다. 반대로 display: flex; justify-content: center; align-items: center; align-items은 기본적으로는 y축으로 움직인다 position 위치를 직접적으로 움직여 준다 여러 옵션이 있는데 오늘은 absolute를 살펴보자 body :nth-child(1) { background-color: #e0493a; position: absolute; top: 20px; } 1번 div에 위 코드를 적용 시켰다 top에다가 20px을 줬는데 아무리.. 2023. 6. 27. css 박스 모델과 display flex (1) 와 span은 기본적으로 inline 태그이기에 안에 내용이 없으면 화면에 표시가 안된다. 하지만 display 옵션을 block로 바꾸면 div처럼 사용이 가능하다. span { display: block;} CSS박스 모델???????? margin : 박스 테두리 바깥의 공간 border : 박스 테두리 - 선의 굵기, 모양, 색 지정 가능 border: 1px solid gray; padding : border 와 내부 컨텐츠 영역 사이의 공간 padding, margin, border적용시 일부분에만 적용하기 border-bottom: 1px solid black; padding-left: 20px; margin-right: 10px; 이런식으로 특정 부분만 적용 가능 또는 padding: 20.. 2023. 6. 27. 이전 1 2 다음 반응형
