[jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after

 

#jQuery #append #prepend #before #after #jQuery기초 #jQuery처음 #css #택스트

 

 

바로 설명 시작하겠다.

 

원하는 문자는 text, append, prepend, before, after를 써서 나오게 할 수 있다.

사용방법은 jQuery 기초 및 사용방법 part.2를 보고오시면 된다.(글 하단에 링크있다)

하나하나 기초적인 부분부터 설명하면

 

text를 사용하면 기존에 있던 값에다가 '덮어씌우게'된다.

append를 사용하면 text와는 달리 기존에 입력되어있던걸 '유지'한 채 '우측에' 주가로 삽입하게 된다.(부모요소 마지막에)

prepend를 사용하면 기존에 입력되어있던걸 '유지'한 채 '좌측에' 주가로 삽입하게 된다.(부모요소 맨앞에)

before를 사용하면 기존에 입력되어있던걸 '유지'한 채 '위쪽에' 주가로 삽입하게 된다.(요소에 자식이 되지 않고 그 전으로 나옴)

after를 사용하면 기존에 입력되어있던걸 '유지'한 채 '아래에' 주가로 삽입하게 된다.(요소에 자식이 되지 않고 그 다음으로 나옴)

 

자 기초적인건 끝났다 대충 text값만 집어넣고 싶은신 분들이라면 여기까지만 읽고 나가도 된다.

 

 

 

 

하지만 여기서 좀더 디테일 하게 들어간다면 말이 달라진다

가시적으로 본다면 어디 옆에나온다 어디 뒤에나온다 이렇게 말할 수 있겠지만

이렇게 이해하면 css나 다른 동적인 요소를 줄때 상당한 오류가 나올 수 있다.

 

설명은 text -> append,prepend vs befor,after 이 순서대로 차근차근 설명해보겠다.

먼저 기본화면이다.

 

 

 

Text

앞서 말했듯이 text는 안에있는 값을 덮어씌운다

먼저 내가짠 jQuery와 html부분을 보여주겠다.

 

이대로 실행하게된다면 html에 작성했던"안녕하세요 학스입니다"는 지워지고 "text"가 덮어씌워질 것이다.

 

 

밑에는 결과화면이다

 

 

만약아래 사진처럼 text를 마지막에 명령한다면?

 

 

당연하듯이 코드는 위에서 아래로 흐르고 text는 덮어씌운다 했기때문에 결과는 아래 사진처럼 나오게 된다

css(Cascading Style Sheet) 캐스케이딩 원리(폭포수)처럼

마지막에 선언된게 갑이 된다는 것이다.

 

 

 append,prepend
 vs 
after,before

아까 실행사진에서 대충 눈치 챘을수도 있지만 모른척 해주시고 설명 시작하겠다

 

append와 prepend는 태그나, id등 앞뒤에 오게하는 이벤트이다

"어? after befor가 앞뒤 아님?"

맞다

 

 

둘다 앞뒤에 오지만 가장 큰 차이는

부모요소 안에서 앞뒤냐 아니면 부모요소 밖에서 앞뒤냐의 차이다

 

"그래서 그게 큰 차이가 있나?"

있다

 

 

밑에 사진을 보면서 설명해 주겠다(복잡함을 덜하기위해 text이벤트는 제거했다)

이제 무슨 차이인지 이해가 되는가?

눈에 확 띄듯이 append와 prepend는 부모요소 안에 있기에 그 요소에 부여된 스타일까지 다 가져가는 모습이고

 

그에반해 after와 before는 부모요소 밖에 있기에 그 요소에 뭐가 부여됐던지 상관없이 부모요소 밖 앞뒤로 붙는다는 점이다.(부모요소에 부여된 스타일을 가져가지 못한다)

 

 

 

이런 디테일은 추후 그리드를 만들거나 이미지를 삽입하거나할때

중요한 요소로 작용될 수 있으니 반드시 인지하고 넘어갔으면 한다.

 

 

jQuery 기초 및 사용방법 part.1 $, #, 태그?

 

jQuery 기초 및 사용방법 part.2 hide, show, toggle

 

jQuery 기초 및 사용방법 part.3 이벤트 종류

jQuery 기초 및 사용방법 part.4 CSS vs Animate

 

 

 

 

학스의 개발일지

 

오류나 궁금하신점은
아래 댓글로 알려주시면 감사하겠습니다.