분류 전체보기
-
input 속성 readonly와 disabledhtml 2023. 6. 21. 14:33
readonly와 disabled는 input 태그를 사용자가 입력 및 수정을 못하게 하는 비활성화 속성 readonly : form과 submit에서 사용가능 : input과 textarea에서 사용가능 disabled : form과 submit에서 사용불가 : button, optgroup, option, select, input, textarea에서 사용가능 : form으로 값을 보낼 때 disabled의 값은 전송되지 않음 참고 https://heojju.tistory.com/75 https://record-than-remember.tistory.com/entry/input-%EC%86%8D%EC%84%B1-readonly-disabled-%EC%B0%A8%EC%9D%B4%EC%A0%90
-
IA와 WBS이것저것 2023. 6. 19. 17:00
첫 프로젝트를 시작하며 실시간으로 프로젝트 진행 상황을 메신저를 통해 공유 받고 있다. 퍼블로 넘어오기 전에 현재 기획과 디자인팀의 업무를 보고 있는데 그 중 모르는 단어가 있어서 한번 찾아보았다. 클라이언트가 IA와 WBS를 이번주까지 요청한다는 내용이었다. IA와 WBS는 뭘까??? 일을 시작하며 느낀거지만 내가 알아야할 것은 정말 무궁무진하게 많은 것 같다. 내게 주어진 업무도 물론 중요하지만 프로젝트를 진행하며 이 프로젝트가 어떻게 시작되고 끝이 나는지 어떤 과정들을 거치는지 아는 것도 정말 중요한 것 같다. IA란? : Information Architecture 정보 설계 문서 : 웹 프로젝트에서는 메뉴 구조도를 의미함 : 웹/앱 서비스에서 서비스가 어떻게 구성되어 있는지 표현 WBS란? : ..
-
floatcss 2023. 6. 19. 16:36
float이란? : 떠있다라는 의미로 말그대로 화면에서 요소를 띄우는 역할 : float 속성을 가지게 되면 inline 요소가 암묵적으로 block 요소로 바뀜 float 사용시 주의사항 position의 absolute를 사용할 수 없음 => float 속성이 relative한 위치 지정을 하기 때문에 position: absolute; 속성이 적용되지 않음 float을 사용한 요소의 부모 요소는 float을 사용한 요소의 높이값을 인식하지 못함 => 부모요소에 overflow: hidden;을 적용하여 해결할 수 있음 float을 사용한 다음 요소부터 float 속성이 적용된 요소와 겹치는 현상이 발행함 => clear 속성을 사용하여 이후 요소들이 더이상 float의 영향을 받지 않게 해줌 flo..
-
displaycss 2023. 6. 19. 16:05
display란? html 요소들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성 display: none; : 화면에서 보여지지 않음 display: inline; : span, a, img, strong : 기본적으로 텍스트처럼 옆으로 쭉 나열되다가 공간이 모자르면 다음 줄로 넘어가는 특징 : width height 설정 불가 display: block; : div, p, h : 블록 요소가 있는 한줄을 전부 차지하고 높이는 컨텐츠의 높이만큼 차지하는 특징 : 옆에 공간이 남더라도 다음 줄로 줄바꿈을 함 : width height 설정이 가능 display: inline-block; : 컨텐츠가 차지하는 공간만큼을 차지함 : 옆에 공간이 남으면 inline 속성처럼 옆으로 정렬됨 : inline-b..
-
자동완성 편집창WAI-ARIA 2023. 6. 19. 14:09
자동완성 편집창이란? 편집창에 사용자가 내용을 입력할 때 추천 목록을 제공하고 추천 항목을 선택하여 완성하는 자동완성 편집창을 말함 자동완성 편집창의 유형 직렬완성형(inline) : 사용자에게 목록을 별도로 제공하지 않고 캐럿 뒤에 사용자가 입력한 글자로 시작하는 단어가 입력되며 블록으로 선택됨 : 입력서식에 글자 입력 시 단어가 자동완성 : 사용자가 추가로 글자를 입력할 때 추천 단어의 다음 글자와 일치할 경우 해당 추천 단어가 캐럿 뒤에 계속 표시되며 추천 단어와 글자가 일치하지 않으면 사라지는 구조 목록선택형(list) : 사용자가 편집창에 초점을 보냈을 때 자동완성 리스트가 제공 : 펼쳐진 목록을 방향키로 탐색할 시 편집창에 해당 내용이 들어오며 엔터를 눌러 선택하는 방식 복합형(both) : ..
-
WAI-ARIA : tabWAI-ARIA 2023. 6. 19. 11:30
tab이란? : 한 주제에 대해 여러개의 섹션을 가지고 있는 메뉴 tab list : tab, tab panel을 하나의 그룹으로 묶어 tab list라고 부름 : role = "tablist" 해당되는 영역이 tab메뉴라는 것을 알려줌 tab : tab list의 하위 영역으로 각각의 tab을 말함 : role = "tab" : aria-selected = "true"/"false" 현재 선택된 tab을 스크린리더 사용자에게 알려줌 : aria-controls = "해당되는 panel의 id값" 현재 tab과 해당된는 panel의 id값을 적용하여 서로 연결해줌 tab panel : 각각의 tab의 하위 콘텐츠 영역을 말함 : role = "tabpanel" : aria-labelledby = "해당되..