TIL/CSS 3

[TIL] CSS - img src 가 아직 없을 때 화면 비워 놓기

제목을 간단 명료하게 쓰기도 어려운.. "img src 가 아직 없을 때 화면 비워 놓기" .. 이미지 파일을 업로드 하는 코드를 구현하였는데 파일을 선택하기 전 상태일 때 아래와 같은 그림이 계속 떠 있었다. 이미지가 에러 뜰 때 자주봤던 그림인 것 같아서 너무 거슬렸당.. 어떻게 지우지? 해서 여러 방법을 찾아보았다. 아직 코딩 초보초보인 나는 이런거 찾는데도 2시간 정도를 허비한다.. ^^ .. JavaScript 코드로 img src = "" 빈칸일 때 어쩌구 저쩌구 이런 방법도 있는듯 했는데 스택오버플로우에서 정말 명쾌한 방법을 찾아냈다 img[src=""] { display: none; } 너무 짧고 간단하고 복잡하지 않게 단 한줄의 코드로 보기 싫었던 쬐그만 이미지를 지워주기 완료! 헤헤

TIL/CSS 2023.03.16

[TIL] calc() 함수 - 반응형 사이트 만들 때

가변적으로 변하는 페이지나 반응형 사이트를 만들 때, width/ height 값을 주기 까다로운 경우에 사용하면 좋은 calc() 함수 calc() 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다 ! 전체 너비를 3등분 하고 싶은 경우 전체 너비에서 중간 60px만 띄우고 싶은 경우 위 경우 말고도 사칙연산을 이용하여 width, height, font-size, margin, padding 등등으 값을 조정하거나 각도, 수치, 변형등에도 사용할 수 있다 calc() 함수의 특징 🍞 사칙연산과 마찬가지로 곱하기, 나누기가 먼저 연산된다. 🍞 +와 - 연산자는 좌우에 공백이 있어야 한다. calc (50% -8px)은 백분율 값과 음수로 해석하여 유효하지 않음 🍞 *와 / 연산자는 공백을 ..

TIL/CSS 2022.12.21

[TIL] CSS ㅡ class / id에 스타일 적용하기

오늘은 css에서 class, id 속성에 스타일을 지정하는 방법을 공부해 보겠읍니다 🫡 ( class/ id를 각각 언제 써야 하는지는 저도 다시 공부를 해보려해요..자아성찰) 간단하게 보자면 id는 : 전체 문서에서 딱 그 태그만 표현하고 싶을 때 사용하는 것이고, class는 : 여러가지 태그를 한번에 바꾸어 주고 싶을 때 사용하는 것 !! 이제 본격 스타일을 지정해줘 볼까요 우선 태그의 속성 부분에 id/class 를 써 주고, 이름은 임의로 'yellow' / 'blue'로 지정 !! 추후에는 더 디테일하고, 의미있는 네이밍을 해야겠찌요 이제 각각에 스타일을 지정해 줄건데, id 값에는 #(샾)을 써줘야고, class에는 .(피리어드)를 써줘야 합니다. 이것은 필수에오 id 속성에는 폰트 컬러와..

TIL/CSS 2022.09.06