Dust

옵투샤 꽃대가 조금 올라왔다! 귀여워..
잘라줘야하나? 싶었다가 그냥 냅둬보기로 했는데

3/1일자에 더 길게 났다ㅋㅋㅋㅋㅋㄱㅇㅇ

조명이 이상한데 암튼,, !

짠

See the Pen Untitled by min-ji07 (@min-ji07) on CodePen.

https://min-ji07.tistory.com/entry/%EC%9E%84%EC%8B%9C?category=905135 

이번에 옵튜사랑 아악무도 데려왔다
전에 올린 사진이랑 비교해보는데 잘 크고 있는건지,,,
어째 잎장을 떼서 그런지 전보다 바글바글한감은 없어보이네 흑흑
그래도 저번에 썩은부분 잘라주고 죽진 않는 거 같아서 나름 안심하고 있당
오늘은 ㅅㅎ님이 집들이 선물로 준 녹보수 집에 데려다 놔야겠다 회사에 죙일 놔뒀더니 물에 부족한겅지 햇빛이 부족한건지 비실비실해져서ㅜㅜ 식물등이라도 보야줘야겠음..

지원되는 브라우저

chrome1.0+, edge, firefox, Internet Explorer, opera7.0+, safari1.0+, samsung internet

요소에 장식용 컨텐츠를 추가할 때 사용

html 파일에서 확인 할 수 없는 가상요소임

속성 content를 써주어야 하며 속성내에 텍스트나 이미지를 추가할 수 있음

::before, ::after 사용예시

a::before{
  content:'before';
  /* a태그 앞에 before가 붙음 */
}
a::after{
  content:'after';
  /* a태그 뒤에 after가 붙음 */
}

before 예시

::before는 해당 요소 앞에 붙음

after 예시

::after는 해당 요소 뒤에 붙음

- 위에 예시를 개발자도구(f12)로 확인가능하며 해당 css도 확인할 수 있다

가상요소에 html 속성 값, 이미지 넣기

.text-tag::after{
  display: inline-block;
  content: attr(data-content);
  /* 
  html 파일의 data-content 가져옴 
  ex) content: attr(class); 일 경우 
    -> attr에는 class명(text-tag)가 들어와 태그 뒤에 text-tag가 붙는다
    
  ex) content: url('이미지경로');
    -> 원하는 이미지 출력(크기조절 불가능)
    -> 원하는 이미지 출력(크기조절 가능은 밑에 활용예시 참고
  */
  color: red;
}

::after 활용예시(이미지)

nav 상단에 new tag는 가상요소 / 가상요소의 css

- width, height로 크기 조절 해준 후 background에 이미지를 깔아줌

- background-size 로 이미지 크기를 조절 할 수 있음

<div>
  <p class="text-tag" data-content="여기서부터 가상요소 텍스트 입니다! 색도 바꿨어요">가상요소 테스트 /</p>
</div>

가상요소 테스트 /

가상요소 텍스트 줄 바꿈

.enter::after{
  content: '텍스트\A줄바꿈';
  /* 줄바꿈 원하는 곳에 \A 추가 */
  background: white;
  white-space:pre;
  /* (넘칠경우 자동줄바꿈) */
  text-align: center;
}

+ 추가로 가상요소에 html 태그 삽입 

html 속성값을 가상요소에 넣고 줄바꿈 하고 싶었는데 부트스트랩이 아니면 불가능한 것 같았다,,

결국 패딩값이랑 max-width, min-width 사용해서 임시로 만들어놓음 ,, 

가상요소 content 속성 내에 html 태그 삽입은 불가능

참고

https://stackoverflow.com/questions/14459691/bootstrap-popover-hides-line-breaks

https://dasima.xyz/css-content/