예방이의 개발일기

▶︎ Semantic Tags 의미의, 의미가 있는 HTML에 Semantic Tags를 사용하는 이유 SEO (검색엔진최적화) Accessibility (웹 접근성) ex) 스크린리더 ▶︎ article / section 신문에서 기사 하나, 블로그 포스트에서 포스트 하나 이 자체만으로 독립적으로 다른페이지에 보여졌을 때 전혀 문제가 없을 때 사용할 수 있음 메인 안에 있는 다른 내용들과 전혀 상관없이, 고유한 정보르 나타낼 때 안에서 연관된 내용을 묶어 줄 때 사용함 연관 있는 내용을 보여줄 떄 사용 ▶︎ i / em 둘 다 동일한 이탤릭체로 표시됨 스크린 리더로 읽게 된다면? : 시각적으로만 이탤릭체 : 강조하는 이탤릭체 ▶︎ b / strong : 시각적으로만 볼드체 : 정말 중요한 강조하는 볼드..

개발자 도구에서 요소 탭을 확인해 보면 $0이라고 연한 회색으로 표시되어있는 것을 확인해볼 수 있다. $0은 해당 노드를 지칭하는 것이다! $0 변수에 노드가 할당되어있다는 것이다. 개발자도구 콘솔탭에서 테스트를 할 때 유용하다. 항상 document.querySelector~~ 이렇게 노드들을 다 찾아서 선택했는데 위에 이미지 처럼 노드 선택후 a 변수에 $0 할당 필요한 노드 찾아서 클릭만 하고 다시 변수에 할당... 이런식으로 하면 금방 노드를 찾아서 테스트 해볼 수 있다.

pxtoem 이라는 사이트가 원래 있었는데 없어졌다. 그래서 찾아본 px to em converter 사이트! 1. TOOL px -> em 뿐만아니라 다른 기능들도 제공하고 있다. 2. nekoCalc px -> em px -> rem px -> % Base unit -> px 3. px to vw px to vw 4. PUBLISHING px -> vw excel to html 변환도 있다. 5. w3schools px to em

에디터에서 가져온 글을 태그 안에서 보여주는데 띄어쓰기 없는 영어 같은 경우 줄바꿈이 되지않고 넘쳐버리게 되었다. 왜그런지 찾아보니 pre태그는 글을 그대로 보여주는 특징이 있어 width가 넘어가도 줄바꿈이 되지 않는다고 한다. white-space: pre-wrap; word-break: break-all; pre 태그에 위에 css를 적용해주면 해결이된다. 📌 참고 pre 태그는 마크업의 공백을 그대로 보여줍니다. Reference/HTML 태그는 마크업의 공백을 그대로 보여줍니다. by @webs 2022. 11. 15. 태그는 마크업의 공백을 그대로 보여줍니다. 코드를 보여줄 때 공백과 줄바꿈을 그대로 보여주기 때문에 태그와 같이 webstoryboy.co.kr [HTML] 태그- 텍스트를 그대..

SCSS Architecture (7-1 패턴) 📁 scss/ | |– 📁 abstracts/ | |– 📄 _var.scss # 각종 변수 | |– 📄 _mixins.scss # Mixin ||– 📄 _function.scss # 함수 | |– 📁 vendors/ | |– 📄 _swiper.scss # 외부 라이브러리 | |– 📄 _datepicker.scss # 외부 라이브러리 | |– 📁 base/ | |– 📄 _reset.scss # Reset/normalize | |– 📄 _typography.scss # Typography rules | |– 📄 _print.scss # print rules | |– 📁 layout/ | |– 📄 _gnb.scss # Global Navigation | |– 📄..

CSS filter를 이용해 사진에 다양한 이미지 변화효과를 부여할 수 있다. 필터는 주로 이미지, 배경, 테두리 렌더링 조정할 때 쓰인다. SVG 필터도 적용할 수 있다고 한다. /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); f..

순서에 따른 가상 클래스에 대해서 공부해보자. 순서관련 가상 클래스에는 1. first-child 2. first-of-type 3. last-child 4. last-of-type 5. nth-child() 6. nth-of-type() 이렇게 6가지가 있다. 클래스 이름이 매우 비슷해서 용도의 헷갈림이 많다. 📌 child vs of-type ✅ child : 형제 요소 중 형제 요소들 중에서만 형제 요소가 아니면 해당되지 않는다. ✅ of-type : 해당 요소(클래스) 중 자신의 유형과 일치하는 (형제요소 고려해야함) p의 first-of-type이면 p태그 중 자신이 무조건 첫번째라면 다 해당된다. 📌 참고 - 시니어 개발자도 모르길래 만든 영상 - 수코딩

📌 fieldset과 legend 태그를 적극 활용하자 회원정보 거주지 정보 fieldset : 웹 양식의 여러 컨트롤 + 을 묶을 때 사용 - 해당 태그에 disabled 속성을 부여할 수 있음 🔥 disabled 줄 시 그 안에 있는 입력 요소들도 같이 disabled됨 (input 한개씩 disabled로 제어할 필요가 없어짐) - name 속성을 줄 수 있음 document.forms.[폼이름].[필드셋이름] 으로 찾을 수 있음 특성 속성값 설명 disabled disabled - 지정할 경우, 모든 자손 컨트롤 비활성화 - 제출시 데이터에 미포함 - 브라우저 이벤트 작동 X form form의 id값 - 외부에 이 있을 때 명시적으로 연결해줌 - 요소의 id name fieldset의 name값..

선택자 패턴에서의 우선순위 적용 규칙 !important 인라인 스타일 요소 style="color:red" #id .class 속성기반 가상 Tag * CSS 명시도 계산법 1. inline 스타일 : 1000점 2. Id 선택자 개수(#) : 100점 3. Class 선택자 개수 (.) : 10점 4. Tag, Element 선택자 개수 : 1점 5. !important : 그냥 강제로 무조건 적용 (99999999...점) 6. 전체 선택자 (*) : 0점 7. 가상 엘리먼트는 무시 * 전역선택자(*), 조합자(+, >, ~, "", ||)과 부정 의사 클래스는 명시도 영향 없음 * 부정의사 클래스 내부에 선언한 선택자는 영향을 끼침 * 점수가 같다면 가장 마지막에 (가장 하단에) 작성된 선언이 적..