본문 바로가기

전체 글294

CSS Selector - 자식 선택자 1. first-child 부모의 첫 번째 자식을 선택함 Movie List Toy Story Zootopia Inside Out Coco Finding Nemo .movie:first-child { font-size: 26px; } 코드를 이렇게 작성하면 movie 클래스를 가지고 있는 요소 중 첫 번째인 Zootopia 의 폰트 사이즈가 바뀔거라 생각하지만 실제론 아무런 변화도 일어나지 않는다. ☆ first-child 는 말 그대도 부모의 첫 번째 자식을 선택하는 것인데, movie 클래스를 가진 li 요소의 부모는 ul 태그이고, ul 태그의 첫 번째 자식인 Toy Story 가 movie 클래스를 가지지 않기 때문에 해당하는 것이 없어 폰트 사이즈가 바뀌지 않는 것이다. 2. last-child.. 2023. 4. 15.
inline 요소와 block 요소의 차이 html / css 기초를 정확히 공부하지 않고 코딩을 하다보니 인라인 요소와 블록 요소의 차이 때문에 css 에서 원하는 대로 속성이 적용되지 않는 문제가 생겼지만 무엇이 원인인지 찾지 못했던 경험이 있고, css 를 공부하다 보면 인라인 요소와 블록 요소에 따라 달라지는 것들이 은근히 많아서 처음부터 확실히 정리해두고 다음 단계로 넘어가자는 생각에 정리해보게 되었습니다. inline 요소 인라인 요소로 대표적인 것은 , 태그 등이 있다. 가지고 있는 컨텐츠에 크기가 맞춰지므로 따로 크기를 지정할 수 없다. 요소가 수평으로 쌓인다.(가로배치) 상 / 하 방향에 마진을 적용할 수 없다.(좌 / 우 마진은 가능) block 요소 블록 요소로 대표적인 것은 , 태그 등이 있다. 사용 가능한 최대 가로 길이를.. 2023. 4. 12.
[제로베이스]1주차 학습요약 1주차에는 html, css 기초와 cs 지식 강의를 들었다. html, css 는 어느정도 알고있기 때문에 초반은 배속으로 들었고, 덕분에 시간을 단축해서 공부할 수 있었다. 초반에는 리스닝처럼 그동안 알고있던 것들을 다시 복기하는 정도로 공부헸지만 중반부터는 이전에 제대로 이해하지 못했던 css 지식들이 나와서 그때 이래서 코딩이 뜻대로 안됐구나.. 하고 돌아볼 수 있었다. 개념강의가 지루할 때도 있지만 코딩할 때 뭔가 알 수 없는 문제들이 생기면 다시 개념강의를 찾아듣기 때문에 이번에는 이전에 내가 놓쳤던 것들을 정리해두고 필요할 때 마다 찾아볼 생각이다. cs 지식은(특히 자료구조) 학교 다니면서도 배웠던 과목이지만 아직도 익숙해지지가 않고... 자료구조는 배워도 배워도 어려운게 아직 갈 길이 먼.. 2023. 4. 11.
CSS 선택자(Selector) - Type, Class, Id 선택자 Type 선택자 하나의 웹페이지에서 일관적으로 적용할 스타일이 있을 때 사용한다. 특정 요소를 선택하기 위해 사용하는 것 X (ex: h2 태그를 여러 번 사용하면 모든 h2 태그에 스타일이 적용되기 때문) Hello! Lorem Ipsum Have a nice day /* Type Selector */ h2 { color: purple; } h3 { color: red; } 2. ID 선택자 ID 는 중복 사용이 불가하여, 하나의 ID 는 전체 html 에서 하나의 태그에만 부여할 수 있다. Movie List Toy Story Zootopia Inside Out Lorem Ipsum Have a nice day /* ID Selector */ #movie-list { color: red; } /* C.. 2023. 4. 9.

티스토리툴바