# CSS
종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
CSS-in-JS
그동안 작성해온 CSS 작성 스타일은 대부분 JS와 CSS를 분리하고 모듈로 연결해서 사용했었을 겁니다. 이 방식을 CSS-in-CSS라고 합니다.모듈화된 CSS는 클래스 네임 중복을 방지해주는 등 중복 문제와 관리의 위험성을 낮춰주었습니다. 하지만 여러 CSS 파일들
23.6.7 TIL
시멘틱 태그에서 한게로 묶을때 자주 사용 랩퍼 그룹 컨테이너 검색창 마크업 border-radius로 곡선처리를 할 수 있음 currentColor - color 값이 없다면 상속 받은 컬러 적용
[CSS] img 요소 하단에 존재하는 알 수 없는 빈 공간
img 태그를 사용하여 이미지를 삽입하면 하단에 알 수 없는 빈 공간이 생긴다.개발자 도구를 켜서 확인해보면 margin 이나 padding이 적용되지 않았다.img 태그 inline-block 이여서span처럼 inline의 성질을 가지고 있기 때문이다.inline
(2023/06/05) 공부 일지!
상속되는 속성=> 디자인에 관련된 것상속되지 않는 속성=> 공간에 관련된 것인라인 블록 박스=> 인라인 박스처럼 렌더링되지만 너비와 높이를 설정할 수 있음인라인 박스=> 상, 하로는 margin, padding값을 주어도 공간이 벌어지지 않는다auto=> 자식 박스가
css margin, padding은 언제 사용할까?
간격은 margin, 영역은 padding, 예외) 상,하 마진 상쇄가 예상되는 디자인엔 padding css 작업을 하다보면 컨텐츠의 여백에 margin을 써야할지, padding을 써야할지 고민하게됩니다. 컨텐츠들 사이의 간격, 컴포넌트들 사이의 간격, 레이아웃들
#3.6~3.8
클릭할 때 class를 추가하고, 또 다시 클릭할 때 class를 제거하기 functiontoggle의 기능h1의 classList에 clicked 클래스가 있는지 확인하여clicked 클래스가 있으면 classList에서 clicked 클래스 제거하고,clicked
#3.3~3.5
java script는 style을 변경 가능하다. script로도 할 수 있지만 대부분은 event를 listen 하는데 사용한다. 예를들어 마우스를 클릭, 마우스를 위에 올리기 등등 event들을 들으면 다른 기능을 활성화 될 수 있도록 기능을 사용한다.addeve
CSS 심화 1
@import 를 사용하면 절대 및 상대경로를 사용해서 다른 CSS파일의 내용을 불러올 수 있습니다. 여러 페이지들에서 공통적으로 사용되는 스타일들을 특정 파일로 분리하여 모듈화할 수 있다.HTML내에서 <link> 로 CSS를 가져올 수 도 있다.
[css]selector, Declaration block, id, Descendant Selector
CSS dinner 게임 \-css cheat sheet 참고하기
CSS 기본 4
position 속성은 요소들이 화면에 어떻게 배치될지를 지정한다. 특이사항으로는 이 속성은 자식요소에게 대물림 되지 않는다는 점이 있다.static : 기본값으로, 전적으로 페이지의 흐름을 따르며 top, bottom, left, right, z-index 속성의 영
