style 태그 중복 선언


안녕하세요.
고코더 입니다.


 1. 많은 분들은 이미 알고 계시겠지만
최근에 코딩하다 알게 된 사실인데요.
HTML에 요소에 style 태그를 선언해서
CSS 속성을 입력할 수 있습니다.

Q. 그런데 이 style태그를 두 번 입력한다면
브라우저는 어떻게 해석할까?
A. 정답은 처음 style 태그만 입력 받는다

 2. 한번 실험을 해보겠습니다.
아래처럼 태그를 입력했습니다.


 3. 그리고 결과는 당연히 빨간색으로 글자가 표현됩니다.



 4. 그럼 같은 속성만 무시되는 거 아니냐고 하실 텐데요
이번에는 뒤에 스타일 속성에 display를 none으로 해보겠습니다.


 5. 결과는 역시 빨간색 글자만 나오네요.
(앞에 이미지 복붙 아니고 결과 값 캡쳐했습니다.!)


알고 있던 분들은 뭐 이런 걸 가지고 
하시겠지만 저는 어제 코딩하다 처음 알았네요.
재밌는 HTML에 세계 입니다.


마무리


혹시 style 태그가 안 먹힌다면
이미 선언했는지 한번 체크해보세요.




댓글을 달아 주세요


에디터에서 태그 수정이 되지 않을 때


안녕하세요.
고코더 입니다.


티스토리 태그는 컨텐츠와 연관된 카테고리와 그룹화 
하는데 쓰이는 기능입니다.
태그도 입력해야 조금 더 사용자가 찾을 수 있는
컨텐츠가 되겠죠?

그런데 오늘 글을 쓰던중 모르고
태그를 길게 입력 하였더니 

▼글쓰기 에디터에서 삭제가 되지 않습니다.
길이가 너무 길어서 X가 보이지 눌리지 않기 때문입니다. 


▼ 이런 본문에서도 너무 길 tag 때문에 
가독성이 떨어지네요.


▼ 걱정 할 필요는 없습니다.
티스토리 어플로 들어 간다음
글 설정에 들어가면 태그 란이 보입니다. 



▼ 여기서 쉼표로 구분된 태그를 전부 지우고 저장하면은
정상적으로 다시 태그 등록이 가능합니다. 




티스토리 관련 추천 컨텐츠




마무리


태그는 짧고 간결하고 명확하게!





댓글을 달아 주세요


jquery img src selector


안녕하세요.
고코더 입니다.


개발을 하던 중에 이미지의 src 속성 
이미지의 주소를 선택하여 수정할 일이 생겼는데
쓸모가 많은 방식인거 같아 
블로그를 남겨드립니다.

제이쿼리에서 img의 src 속성으로 당연히 선택을 할 수 있습니다.
제 블로그에 있는 이미지 주소를 사용해 말씀드리겠습니다.

https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg


▼ 이미지 src를 선택하는 3가지 방법입니다.

1
2
3
4
5
6
7
8
9
10
11
1. 이미지 주소 전체를 넣어 검색
    - 하나의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']")
2. 이미지 주소 앞 에서부터 매칭.
    - 같은 폴더 기준이나 같은 URL의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net']")
 
 
3. 이미지 주소 뒤 에서부터 매칭.
    - 이미지 파일명을 사용하여 선택할때 유용 합니다.
    ex) $("img[src$='epantheo.jpg']")
cs

▼ 제가 작성한 예제 파일도 한번 확인해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    function src_selector1(){
      $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']").css("width","200");
    }
    function src_selector2(){
      $("img[src^='https://tistory1.daumcdn.net']").css("width","300");
    }
    function src_selector3(){
      $("img[src$='epantheo.jpg']").css("width","400");
    }
    </script>
</head>
<body>
    <img src="https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg" width="100">
    <br>
    <input type="button" onclick="src_selector1();" value="src 전체 이름으로 선택">
    :: https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg
    <br>
    <input type="button" onclick="src_selector2();" value="src 앞에서부터 검색으로 선택">
    :: https://tistory1.daumcdn.net
    <br>
    <input type="button" onclick="src_selector3();" value="src 뒤에서부터 검색으로 선택">
    :: epantheo.jpg
    <br>
</body>
</html>
cs

▼ 웹상에서 확인한 화면 입니다. 


특정 이미지만 선택하여
작업이 필요할때 src로 선택하면 다른 CSS의 속성과 얽히지 않게 코딩이 가능합니다.



마무리


블로그 스킨 수정할때 딱 좋더라고요


댓글을 달아 주세요