728x90
반응형

Front/HTML 39

[HTML] aria-hidden

aria-hidden 아이콘에 추가 aria-hidden="true"하면 아이콘 문자가 액세스 가능한 이름에 포함되지 않도록 숨긴다. ex) Tweet false 요소는 렌더링된 것처럼 접근성 API에 노출됨. true 요소가 접근성 API에서 숨겨져 있음. undefined(기본) 요소의 숨겨진 상태는 렌더링 여부에 따라 사용자 에이전트에 의해 결정. 출처 : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden aria-hidden - Accessibility | MDN The aria-hidden state indicates whether the element is exposed to an acce..

Front/HTML 2022.07.21

[html] <option hidden>

선택 당월 누적 기간을 설정하는 selectbox를 만드는데, 사용자가 선택할수는 없지만 필요한 option을 추가하기 위해서 option 태그에 hidden 속성을 추가하였다. 사용자가 앞쪽에 기간을 임의로 설정을 하면 change event 가 발생할 때 선택이라는 option 이 선택되도록 하였다. tag에 hidden 을 주면 사용자에게 숨길 수 있다는 것은 알았지만 여러 option 태그 중에 하나, 부분만 숨기는 설정을 처음 경험해 보아서 기록으로 남긴다.

Front/HTML 2022.06.22

[HTML] 공백 넣기

웹 화면에 공백을 넣어야 할 경우가 있다. 그냥 space를 이용해도 공백이 넣어지긴 하는데, 원하는대로 삽입이 안되는 경우가 있다. 그럴 때, 사용하는 것이 1. 를 삽입하는 것이다. nbsp는 Non-bresaking Space ( 줄바꿈 없는 공백 )를 축약한 문자이다. 여러개를 삽입하면 여러 개의 공백을 추가할 수 있으며, nbsp를 포함하는 문자열의 길이가 줄 길이보다 긴 경우, 문자열 자체를 다음줄로 넘겨주는 기능도 있다. 2. - 공백 두개 만큼의 자리 차지 / - 공백 네개 만큼의 자리 차지 여러개의 공백이 필요할 때 사용가능하다. nbsp와는 다르게 줄바꿈에 영향을 주지 않는다. 3. 사용하기 태그 안에 space bar와 enter 키를 사용하여 넣은 공백이 그대로 들어가게된다. 이 태..

Front/HTML 2022.04.29

[HTML][TABLE] <thead> / <tbody> / <tfoot>

/ / 태그들은 테이블 생성시, 각각 머리글, 본문, 바닥글영역을 표시하는데 사용한다. 스펠링만 보더라도 각각의 의미를 파악하는데 그리 어렵지는 않다. 머 리 글 본 문 ! 바 닥 글 태그는 적어주지 않더라도 테이블을 생성하면 자동으로 삽입이 된다. 필수로 세개의 태그를 적어주어야 하는 것은 아니며, 각각의 영역을 구분해줘야 할 때 사용하면 된다.

Front/HTML 2022.03.20

[HTML] a href ="#"

a태그의 href 속성은 링크된 페이지의 URL을 명시하는 용도로 사용됩니다. URL 자리에는 1. 절대주소 2. 상대주소 3. #id값 : 같은 페이지에서 해당 id값을 가지는 요소에 연결 4. # : 의미 없는 URL을 부여 ->누르면 페이지의 상단으로 이동한다. cf. a hef = "#" : 새로운 페이지 이동 x , 누르면 페이지 상단으로 이동 a hef = "#;" : 새로운 페이지 이동 x , 누르면 페이지 상단으로 이동 x

Front/HTML 2022.01.23

[HTML] <form> 태그안의 id, class, name 속성

form태그는 사용자가 입력한 내용을 서버에 넘겨주기 위해 자주 사용되는 태그인데, 태그안에 id, class, name 속성을 넣어 줄 수 있다. 각각의 차이점이 무엇인지 정확하게 알아보자. 사실 form태그가 아닌 다른 태그안에서도 똑같이 구분되어지므로 하나를 알면 백을 알게된다. ^_^ 1. id - 고유한 식별을 목적으로 하는 경우 사용 -> 페이지에서 유일하다. 2. class - 재사용을 목적으로 하는 경우 사용 -> 여러요소에 적용 가능하며 같은 클래스인 요소에 일괄적으로 같은 효과를 줄 수 있다. 3. name - form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요 ->submit기능을 사용하지 않을 것이라면 생략 가능.

Front/HTML 2022.01.10

[HTML] <label> 태그 +

태그란? - 태그는 사용자 인터페이스(UI) 요소를 설명할 때 사용 - 보통 태그와 함께 쓰인다. - for 속성을 사용하여 다른 요소와 결합할 수 있다. - for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다. ( name도 가능! ) - 결합하고자 하는 요소 내부에 요소를위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있습니다. + 추가 : label태그의 for 라는 속성을 삽입해서 의 id값과 일치 시키면 체크 박스의 클릭 범위를 증가시킬 수 있습니다. label에 적은 문자를 눌러도 input 안에 커서가 들어간다 !!!!!! checkbox와 같이 눌러야하는 부분이 작은경우 더욱 유용하게 쓰인다. Ex) 여러분의 나이대를 골라보세요. 남자 20대

Front/HTML 2022.01.07

[HTML] <label> 태그

- 태그는 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용합니다. - 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. ( 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있습니다. ) - 이러한 요소는 브라우저에 의해 일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있습니다. - 요소를 사용할 수 있는 요소 : , , , , , ,

Front/HTML 2022.01.03
728x90
반응형