본문 바로가기

웹 프론트 엔드

(44)

임베디드 요소 - img img : 이미지를 담는 태그 > 안쪽에 내용이 없는 닫힌 태그 - src 속성 : source, 띄울 이미지의 경로를 표시하는 속성, 필수적으로 들어가야 한다. - alt 속성 : alternative, 대체 텍스트로, 이미지가 출력되지 않을 경우 이미지의 설명을 텍스트로 나타내게 만든다. - width & height : 이미지의 가로, 세로 크기를 지정해줄 수 있다. > width속성 또는 height 속성 중 하나만 사용한다면, 이미지의 비율에 맞춰 사용하지 않은 속성도 자동으로 정해진다. > 두 속성 모두 사용한다면, 비율을 무시하고 이미지 크기를 조정한다. 반응형 이미지 - srcset 속성 : 이미지 소스를 다수 올릴수 있는 속성 > 반응형 이미지를 설정하기 위해 사용한다. > 이미지의 UR..

목록과 표 - ul&ol, dl, table, caption 1. ul , ol , li - ul : Unordered List, 순서가 없는 리스트 - ol : Ordered List, 순서가 있는 리스트 > type 속성을 통해 목록의 순서표시를 다르게 할 수 있다. ex) type = "1" => 1,2,3... type="a" = a,b,c... > start 속성을 사용하여 처음 시작하는 숫자를 정할 수 있다 ex) start = "5" => 5,6,7... > reversed 속성을 사용해 목록의 순서를 반대로 만들수 있다. ex) => 1,2,3,4 => 4,3,2,1... - li : List의 구성요소, ul태그와 ol 태그 내에서 사용한다. > li 태그 내에서 또 다른 ul이나 ol 태그를 사용할 수 있다. 리스트 출력 첫번째 리스트 두번째 리..

div, span 그리고 시멘틱 웹 div 태그 : 특정 구역을 묶는 태그 > 순수 컨테이너로서 아무것도 표현하지 않는다. = 의미가 없다 > block 속성 태그이기 때문에, 늘어날 수 있는 너비까지 끝까지 차지한다. span 태그 > div 태그와 비슷하지만 inline 속성을 갖고 있다. 시멘틱 웹 : Sementic Web, 각 부분에 메타데이터를 부여하여 웹 페이지에 의미와 관련성을 부여하는 웹 설계 방식 > 스크린리더로 페이지 탐색 시 의미론적 마크업을 푯말로 사용할 수 있다. > 개발자에게 태그 안에 채워질 데이터 유형을 제안할 수 있다. > 검색엔진과의 상호작용이 수월해진다. > 수많은 div 속에서 찾기보단, 의미가 부여된 시멘틱태그를 찾는 것이 편하다. > 시멘틱 웹에 영향받은 HTML 레이아웃 https://www.w3..

HTML 태그 : 텍스트 위 글은 html 태그 중, 텍스트 관련 태그를 정리한 글입니다. 1. 태그 - 태그란, 제목을 나타내는 태그로, header를 의미합니다.- h 뒤에 숫자를 붙여 크기를 조정할 수 있으며, 1이 제일 크고, 숫자가 커질수록 작아집니다.- 해당 태그는 block 속성이 default로 되어있습니다. - 코드 예시h1h2h3h4h5h6 위의 코드는 아래의 결과화면을 갖습니다. 2. 태그 - 태그는 하나의 문단을 나타내는 태그로, paragraph를 의미합니다.- p태그 자체가 하나의 문단을 의미 하기 때문에 block 속성을 기본으로 가지고 있습니다. - 코드 예시이것은 p 태그입니다. block 속성을 확인하기 위해서 녹색 테두리를 추가해보았습니다.위의 코드는 아래의 결과화면을 갖습니다. 3..

티스토리툴바