HTML (3) 썸네일형 리스트형 html select가 동작하는 방식을 dom으로 살펴보자(with react) select란html에서 option태그를 자식 요소로 함께 사용하며 선택된 option의 value를 자신의 value로 가진다. 이 글에서는 select의 다음 내용에 대해 알아본다.목표select의 초기 dom 설정select를 선택할 때 어떤 dom 프로퍼티가 변경되는가select가 초기화되는 조건 알아보기 실험에 사용된 ui 주소" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 select의 초기 dom 설정 및 동작 방식select태그는 자식인 option 태그 중에서 selceted 속성을 가진 녀석을 먼저 찾는다. (react의 경우에는 select의 props인 defaultValue나 value와 일치하는 option을 찾는다) 만약 찾는다면 그 option의.. [javascript]스크립트 태그의 위치는 아무 곳이나 상관없을까? 스크립트 태그 위치 규칙1. html의 파싱(dom)은 위에서 아래로 한줄씩 이뤄짐 중간에 css 파일을 만나면 html 파싱을 멈추고 css 파싱(cssom) 스크립트 태그를 만날 시 html 파싱 중단, js 엔진에서 js 파일 다운 및 실행 방법 1. head 위치 - body가 파싱되기 전에 스크립트부터 동기적으로 파싱 - js 실행이 느리면, 빈 페이지가 보임 방법2. body 끝자락 위치 - 가장 많이 쓰는 방법 - html 페이지가 다 파싱된 이후에 js 파싱 - js 작업이 느리면, 무반응 페이지가 생성 - jsx의 경우, 불완전한 빈 페이지 생성 방법3. head위치 + async 속성 - 스크립트태그를 헤드 위치, async속성 부여 : js 파일 다운이 html 파싱과 비동기적으로 병.. word-break, overflow-wrap(word-wrap) 정리 - 텍스트 오버플로우 관리법1 1. 목적 텍스트가 컨테이너 박스의 바깥으로 빠져나오는 현상을 텍스트 오버플로우라고 부른다. 컨테이너에 고정된 width value를 줄 때 발생한다. 이 문제는 줄바꿈에 관한 2가지 css property인 word-break와 overflow-wrap으로 해결가능하다. (word-wrap은 overflow-wrap과 동의어이다.(mdn 참조) ) 이 글에서는 다루는건 이렇다 이 둘의 기본적인 기능 둘의 차이점 실전에서 사용하는 조합 방식. 2. word-break 텍스트 오버플로우가 발생할 시 자동으로 줄바꿈이 되는데, 이 때 줄바꿈을 위한 텍스트의 분절 규칙을 설정한다. 분절이란, 텍스트를 자르는 단위로 공백 분절과 음절 분절로 나눈다. 공백 분절은 공백을 기준으로 줄바꿈하는 방식이다. (공백과 하.. 이전 1 다음
