⏳ 2023. 4. 24. - 2023. 4. 30. 😎 2주차 베스트 TIL에 선정되었다. 🥳 혼자 공부하면 이렇게 열심히는 정리하지 않는데, 쿠키즈와 함께라서 열정이 🔥 타오른다. 또한, 노션에 보기 좋게 정리하는 것이 화면에 최적의 경험을 제공하는 프론트엔드 개발과 결이 비슷하다고 생각했다. 그래서 학습일지 작성에 꽤 오랜 시간이 걸리지만.. 다 작성하고 나면 뿌듯하고, 복습할 때도 편한 장점이 있다! 3주차도 베스트 TIL 가보자고~ 개념원리 css는 개념적인 공부보다는 실제 적용하는 경험만 많았다. 그렇기 때문에 형제 선택자, 가상 요소 선택자 등 정확한 명칭을 모르고 사용한 경우도 있었고, 강의를 듣고 나서야 이 부분에 대한 이해가 부족했구나 느끼기도 했다.(특히, 우선순위) 하루하루 조금씩이..

⏳ 2023. 4. 24. - 2023. 4. 30. CSS 속성(Property) 한글로는 같은 속성이지만 html의 속성은 attribute, css와 js에서의 속성은 property를 의미한다. 정말 다양한 css 속성이 있는데, 그 중 몇 가지를 알아보자! width & height width와 height의 기본값은 auto(브라우저가 값을 계산)이다. 인라인 요소와 블록 요소에서의 브라우저의 계산 방법이 다르니 알아두자. padding & margin 요소는 기본적으로 다음과 같은 구조를 가진다. padding은 요소의 내부 여백을 의미하며, 사용하면 콘텐츠의 크기가 커진다. margin은 요소의 외부 여백을 의미하며 특이하게도 음수값을 사용할 수 있다. 개별적으로 값을 주기도 하지만, 단축..

⏳ 2023. 4. 24. - 2023. 4. 30. 상속 스타일을 적용했을 때, 적용된 내용이 하위 요소까지 영향을 미치는 것을 스타일 상속이라고 한다. 자연스럽게 상속되는 css 속성들은 모두 글자/문자 관련 속성들이다.(모든 속성은 아님주의!) 강제 상속 코드의 유지 보수 측면에서, 상위 요소의 값을 변경하면 하위 요소의 값도 그에 따라 자동으로 바뀌는 것이 유리한데, 그때 inherit을 사용할 수 있다. .parent { width: 400px; height: 400px; background-color: red; } .child { width: 300px; height: inherit; background-color: orange; } child 요소는 parent 요소의 height 값을 따른..

⏳ 2023. 4. 24. - 2023. 4. 30. 기본 선택자 우선순위 : 전체 < 태그 < 클래스 < 아이디 전체 선택자 *을 사용하여 모든 요소를 선택 * { color: red; font-size: 100px; } 태그 선택자 태그로 선택 div { color: red; font-size: 100px; } 클래스 선택자 .을 사용하여 선택 .box { background-color: blue; padding: 20px; } 아이디 선택자 #을 사용하여 선택 #box { background-color: blue; padding: 20px; } 복합 선택자 일치 선택자 선택자를 동시에 만족하는 요소를 선택 : 모든 선택자를 공백없이 작성 div.orange { color: orange; } div이..

⏳ 2023. 4. 24. - 2023. 4. 30. 기본 문법 선택자 : { 속성: 값; 속성: 값; } div { color: red; font-size: 100px; } /* 주석은 이렇게 */ 선언 방식 내장 html의 head 태그 안에 style 태그를 사용하여 스타일을 적용하는 방법 하나의 html 파일 안에서 스타일을 관리할 수 있지만.. 유지 보수 측면에서 불리하다. html과 css 파일을 구분하는 것이 권장하는 방법!! 인라인 html의 요소에 직접 스타일을 작성하는 방법 인라인 방식은 스타일의 우선 순위가 너무 높기 때문에 유지 보수가 어렵다. 링크 link 태그를 사용하여 css 문서를 연결하는 방법(병렬) 가장 권장하는 방법! @import css 문서 안에서, 또 다른 css ..