input에 background가 설정되어 있지 않은데 자꾸 background-color가 적용되는 현상이 있었다. input에 아이콘이나 이미지가 들어가 있을 때 input 영역 값에 저 색이 들어가니 몹시 불_편했다. 찾아보니 자동완성 기능을 사용 할 때 생기는 스타일링이였다! input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow:..

스크립트 코딩 컨벤션을 정하던 중 css 컨벤션에 대하여 이야기가 나왔다. css 컨벤션이 있을거라고 생각하지 못했다. 중요하지 않다고 생각했기 때문인가.. 이야기가 나온 김에 css 컨벤션 및 스타일 가이드에 대하여 알아보았다. 유용한것 같은것만 몇개 정리해보았다. CSS에서 캐멀케이스(camelCase)는 좋지 않다. css는 하이픈을 구분자로 사용하는 프로퍼티로 되어있다. .class-name { border-bottom: 1px solid #fff; font-size: 1rem; } 2. XHTML은 소문자를 사용하는 언어이다. 케밥 케이스를 사용하는것이 표준적이며 일관성을 유지 할 수 있습니다! border: none 대신 0을 사용하자. 평소에 별 생각 없이 none을 이용해왔다. 모든 inp..

1. 경로에는 URL과 같은 절대경로와 현재 디렉토리를 기준으로 한 상대경로를 지정할 수 있다. 2. alternative text는 오류로 인하여 이미지를 불러올 수 없는경우나 비 시각적 브라우저(시각장애인이 사용하는 브라우저등) 에서 이미지를 텍스트로 대체 할 수 속성입니다. 가능한 간단하고 명료하게 작성해야 합니다. 잘못된 예시) 올바른 예시) 3. srcset srcset 속성은 다양한 크기를 가진 동일한 이미지를 명시해주는 속성입니다. 1개의 이미지를 명시하려면 해당 속성을 무시해도됩니다. 사용자의 환경에 맞추어 최적의 크기 이미지를 보여주기 위해 사용하는 속성이지만 원하는 해상도에 맞게 정확하게 명시 할 수 있는 CSS의 미디어쿼리 사용을 권장합니다. EX) 위 예시는 뷰포트 너비가 300px..

anchor tag 기본적으로 다른곳으로 이동을 시켜주는 태그입니다. Anchor 는 다른 태그들과는 다르게 지정해줘야 할 속성이 있습니다. 1) herf (Hypertext Reference) 주소값 내용 EX) 1. https://www.naver.com">네이버 절대경로로 네이버 페이지로 이동 2. 상세페이지 상대경로 이동 3. 헤더로 이동 태그 안에 설정된 ID값이 header인곳으로 이동 4. 봉구에게 메일보내기 클릭시 전자메일 보내기 실행 5. 전화하기 클릭시 전화 연결 2) target 2-1) _blank : 새로운 탭에서 오픈 2-2) _self: 현재 위치한 탭에서 오픈 (기본값 , 생략가능) 2-3) _parent: 현재 프레임의 부모 프레임에서 오픈, 부모가 없을시 _self와 동일..

문단에서 중요한 영역을 설정할 수 있는 2가지의 강조태그가 있다. 1. 두개의 차이점 - em 태그를 쓰게되면 글자가 기울어고 strong태그를 쓰게되면 bold처리가 되지만 스타일 관련은 CSS로 변경이 가능하기 때문에 브라우저에게 중요한 부분이라고 강조 하는 역할인 것을 생각하면 다르지 않다. 오늘의 저녁 메뉴는 치킨이다