개발 일기

태그, 태그 - 굵게 표시하기 두 태그 모두 눈으로 보기에는 차이가 느껴지지 않는다. 하지만 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문이다. 화면 낭독기에서 이게 진짜 강조된 부분인지, 아니면 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별을 할 수 있게 해줘야 한다. - 굵게 강조할 텍스트 경고나, 주의 사항처럼 중요한 내용이어서 강조해야할 때 사용한다. - 굵게 표시할 텍스트 문서의 키워드처럼 단순히 굵게 표시할 때 사용한다. 즉, 중요한지 아닌지에 따라서 구분한다. 태그, 태그 - 이탤릭체로 표시하기 텍스트가 비스틈히 이탤릭체로 표시된다. - 이탤릭체로 강조할 텍스트 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용한다. - 이탤릭체로 표시할 텍스트 마음 속의 생각이나 꿈, ..

태그 - 제목 표시하기 제목 텍스트는 일반 텍스트보다 굵고 진하게 표시된다. ~ 까지 표현할 수 있으며 가장 큰 제목이 이고 이 가장 작은 크기의 제목이다. h1 h2 h3 h4 h5 h6 결과값 : 태그 - 단락 만들기 태그는 paragraph의 줄임말로, 텍스트 단락을 만든다. 여기서 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다. 태그를 두개 삽입해서 텍스트 단락인 것처럼 보이게 할 순 있으나 실제로 웹 브라우저가 이것을 텍스트 단락으로 인식하기 어렵다. 태그 - 줄 바꾸기 줄바꿈을 하기 위해 사용한다. break의 줄임말이며 닫는 태그가 없다. 태그 - 분위기 전환을 위한 수평줄 넣기. horizontal의 줄임말로 수평 줄을 삽입할 때 사용한다. 보통 여러 개의 텍스트 단락을 나열하는 도..

시맨틱 태그를 잘 활용하고 싶은데 section과 article이 너무 헷갈려서 정리를 해본다. 왜 시맨틱 태그로 레이아웃을 만들어야 할까? 시맨틱 태그로 작성된 소스를 보면 태그만 보고도 어느 부분이 제목인지 메뉴인지 본문인지 알 수 있다. 그래서 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리하다. 또한 "어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편함이 있어서는 안된다"라는 웹접근성 시각에서 볼 때도 중요하다. 시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 보조 기구를 사용하는데 시맨틱 태그를 통해 어느 부분이 제목이고 내용인지 구별할 수 있기 때문에 사이트 내용을 정확히 전달할 수 있다. 또한 태그에 대한 역할이 정확히 정해져 있기 때문에 어떤 장치에서든 문서를 똑같이 ..

1 태그 정의 Description List 용어의 정의와 내용 설명이 필요할 때 사용하는 태그 태그는 태그 단독으로 사용될 수 없다. 의 한 쌍으로 이루어진다. 정의 정의에 대한 설명 Description Term 태그의 제목 인라인 요소 -> , , 등과 같은 블록 요소가 내부로 삽입될 수 없다. 처럼 하나 이상 연속으로 사용 가능하다. Description Description 태그의 용어를 설명 기본적으로 들여쓰기(margin-left)가 설정되어있다. 블록 요소 -> 다른 태그들을 자유롭게 삽입할 수 있다. 하나 이상의 를 형제 요소로 가질 수 있다 2 태그 활용 와 태그를 가로 정렬시킬 수 있다. html : 정의: 정의에 대한 설명 정의: 정의에 대한 설명 css : 결과값 : ※ float..

aria-label 속성은 현재 요소에 레이블을 정의하기 위해서 사용한다. text가 화면 표시되지 않을 때 사용하며, 만약 화면에 텍스트가 보인다면 aria-labelledby를 대신 사용한다. ❌ 위와 같은 버튼이 있을 때 보조기기를 사용하는 사용자에게는 대화상자를 닫는 것임을 알려줄 수 있는 것이 없기 때문에 aria-label="Close"를 적어서 보조기기에 레이블을 제공한다.

아이콘 요소를 만들기 위해 span태그 보다 i 태그를 많이 사용한다. i 태그는 이탤릭체로 스타일을 만들어주는 태그이지만 잘 쓰이지 않고 icon의 i 와 첫글자가 같아 코드 가독성이 우수하다. 수정을 할 때 i태그만 선택해서 아이콘을 변환할 수도 있다.

HTML5에서 새롭게 추가된 태그와 요소이다. 보통 여러가지 요소들을 묶을 때 div를 많이 사용했으나 figure태그를 통해 웹 접근성을 높일 수 있다. figure가 '형태'라는 뜻으로 여러가지 요소들을 묶어 한 형태로 만들어 놓는 것이라고 볼 수 있다. 태그 - 설명 글을 붙일 대상 지정 - 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다. - 만약 이미지 태그만 사용한다면 굳이 태그를 사용하지 않아도 되지만 이미지에 설명 글을 넣으려면 태그로 묶어줘야 한다. 태그 - 설명 글 붙이기 - figure 요소 안에서의 콘텐츠에 대한 제목 출력 See the Pen by..