Programming/MarkUp

HTML 페이지에 이미지를 삽입하기 위해서 사용하는 태그 img 태그의 속성 src속성 이미지파일을 브라우저에 나타나게 하기 위해서 필수적으로 필요한 태그 로컬에 위치한 파일의 경로 및 파일명을 입력 경로를 입력하는 방법 2가지 절대 경로란? 처음(root)부터 위치를 입력해가면서 접근하는 경로 상대 경로란? 현재 내가 있는 디렉토리를 기준으로 접근하는 경로 alt(alternative text) 이미지가 브라우저 화면에 보이지 않을 경우 속성값에 적힌 텍스트를 대신 보여준다. 스크린리더와 같이 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용한다. 브라우저에게 이미지에 대한 정보를 전달함으로써 Search Engine Optimization에 도움을 준다. srcset 여러 해상도에 대응하여 ..

Text-level 요소의 특징 요소안의 컨텐츠의 크기(자식 요소)만큼만 영역을 점유 → block-level요소와는 가로줄 한라인을 모두 차지 한다는 점과 다른 특성 자식으로 Sections, Grouping Contents를 사용 할 수 없다. ex) span > div → 이러한 방식의 마크업뿐만 아니라 손자에 사용하는 것도 모두 문법오류가 된다. Text-level 요소의 종류 , 태그 줄바꿈의 위한 태그 텍스트 박스에서 한줄로 모두 표시가 안될때에만 줄바꿈이 일어나게 해줄 때 사용하는 태그 브라우저의 화면이 줄어들면서 공간이 좁아져 한줄로 표현이 되지 않을 때 줄바꿈을 해주는 역할 와 관련된 CSS속성 work-break default속성값 → normal word-break : break-wo..

sections 태그들보단 조금 더 작은 범위의 묶음인 Grouping content 태그들에 대해서 알아보자 ,, 태그 목록을 만들때 사용하는 태그 주의사항 li요소는 ol(순서 order), ul요소(순서가없는 unorder) 와 반드시 함께 사용해야 된다. 목록을 표현할때는 최소 3개이상이 될 때 사용을 권장한다. ul과 ol안에는 직계 자식은 무조건 li이어야된다. 절대 제목같은것을 넣을려고 ul,ol 다음 자식요소로 집어넣으면 안된다. li의 자식요소들의 어떠한 요소들이 와도 상관이 없다. 직계자식이란? 바로 자기자신의 바로 위의 부모요소를 의미한다. 순서가 존재하는 목록 순서가 존재하지 않는 목록 , , 태그 사전처럼 어떠한 것을 정의할 때 사용하는 목록 주의사항 태그 안에는 직계자식으로 만을..

HTML 요소(Element)에 대해서 알아보자 / / / 등의 요소들은 HTML 문서를 만들 경우 가장 기본이 되는 요소들이다. 특히 는 뼈대인 html 파일과의 외부파일을 연동 시켜주기 위한 중요한 태그라고 볼 수 도 있다. 옛날의 경우 html파일안에 , 같은 태그등을 사용하여서 자주 사용하였지만 요즘에는 많이 외부에서 연결을 하고 있다. 물론 필요한 경우에는 html내부에서 작성을 해주기도 한다. Sections 태그 실제 사용자에게 보여지는 태그등이 존재하는 가장 상위의 태그 태그 특정한 컨텐츠의 시작 부분을 나타내는 태그 일반적으로 웹 사이트의 제일 상단에서 구역의 제목을 나타낸다. 를 header안에 자주 사용 (웹 사이트에서 은 되도록이면 한개를 사용하는 것을 권장) 태그 독립적으로 구분..

HTML이란? 웹 페이지의 가장 기본이 되는 뼈대이며 Hyper Text Markup Language의 약자이며 확장자는 .html이다 확장자란? 텍스트구조는 변경이 전혀 없지만 열리는 소프트웨어만 변경이 된다. HTML living standard(2019년 이후부터 지원) MDN 문서는 추천을 하나 한국어 잘 번역이 되어 있지 않기 때문에 되도록이면 영어로 참고를 하는 것이 좋다. HTML 문법 시멘틱한 HTML : 대부분의 요소에는 고유한 의미가 있다. 이 의미는 사람에게 필요로 하기보다는 기계(컴퓨터)가 이해할 수 있는 언어로 HTML을 코딩한다는데 그 목적이 있다. 브라우저가 우리의 문서를 이해할 수 있게 되는 것이다. 이를 통해 SEO, 접근성 등에 도움을 줄 수 있다. HTML 요소는 HTM..