[WARNING] 또야주의

임베디드 요소 임베디드 요소는 외부 소스를 가져와서 내장시키는 것이다. 🔶 img 이미지를 삽입할 수 있다. 내용을 작성하지 않는 빈 요소! 🔹 특성 src - 필수이다! 이미지의 경로를 지정한다. alt(alternative) - optional, 스크린 리더가 alt 값을 읽어 사용자에게 이미지를 설명한다. 또한 이미지를 읽어올 수 없는 경우에도 에러 페이지 대신 대체 텍스트인 alt 값을 보여줄 수 있다. alt 속성은 원래는 툴팁으로 나타나는 속성은 아니므로, title 속성을 사용하는 편이 더 적합하다. height - 픽셀 기준 높이. width - 픽셀 기준 너비. 단위를 적지 않는다. width만 적게 되면 기본적으로 원래의 너비/높이 비율을 유지한다. 🔶 웹에서 사용하는 이미지 유형 파일..

목록과 표 1️⃣ 목록 ul (unordered list / 비정렬 목록) 불렛 포인트로 구분하는 목록이다. 단순 나열하거나, 메뉴 요소에 적절하다. 특정 속성은 없다. ul 태그는 중첩이 가능한데, 불렛 포인트의 모양이 달라진다. 이 불렛 포인트는 css로 변경 가능하다. ol (ordered list / 정렬 목록) 1. 2. 3. 으로 표현되며, 레시피 순서 등에 적합하다. li (list item) 단일 아이템이며, ol과 ul은 이 li를 묶어준다! ol안의 li는 type 속성의 기본 값이 숫자이다. ➕ ol안에 포함된 li의 속성 type A를 입력하면 대문자 순서, a를 입력하면 소문자 순서, i, I를 입력하면 로마자로 나타낸다. start 시작점을 변경할 수 있다. start를 사용하지..

구조를 나타내는 요소와 시멘틱 웹 의미의, 의미론적인 웹 or 태그! 요소의 의미를 고려해서 구조를 설계하는 것이다. 웹페이지들에는 메타데이터가 부여되어 있는데, 그 데이터들을 의미적인 데이터베이스로 구축하고자 하는 것이다. non-semantic 요소(태그)는 컨텐츠에 대해 설명하지 않는다. 반면 semantic 요소는 컨텐츠의 의미를 명시(설명)한다. 먼저 non-semantic 요소부터 알아보자. 텍스트로 목적을 이해하기 어려울 수 있으므로, 마지막 목차인 '실습해보자'를 통해 더 알아본다. 🌙 non-semantic 요소 div ⭐ 는 division의 약자! 블록 레벨 요소! 통용 컨테이너의 역할이다. 내부에 컨텐츠가 없다면 눈에 보이지 않는다. 의미론적인 태그가 아닌 순수 컨테이..

메타데이터 요소 태그는 브라우저에 보이지 않는 문서에 대한 정보! html:5를 입력 또는 !탭을 누르면 기본 틀이 자동으로 입력된다. 메타데이터는 저번 포스팅에서 데이터를 설명하는 데이터라고 했었다. 가장 많이 쓰는 것은 , 가 있음! 🥦 title 태그 브라우저 탭 제목에 지정한 내용이 들어가도록 한다! 문자열만 포함할 수 있고, 하나의 title만 존재가 가능하다. 즐겨찾기의 이름 기본값으로도 들어간다. 검색 알고리즘을 고려해 title을 잘 작성하는 것이 좋다. 🌽 meta 태그 컨텐츠가 없는 빈 요소, 따라서 속성으로만 정의한다. 로 작성하여 이름(name)-값(content) 쌍으로 메타데이터를 제공 가능하다. https://developer.mozilla.org/ko/docs/Web/HTML..

텍스트 요소 🐶 h1 ~ h6 h1이 가장 높고 h6이 가장 낮은 단계이다. 단계가 낮아질 수록 글자 크기가 작아진다. 단계 순서대로 쓰는 것을 권장한다. (웹 브라우저가 제목 정보를 이용해 목차를 만드므로) 큰 글씨를 위해 , 작은 글씨를 위해 을 쓰지말라! 는 내용을 공부했는데 굉장히 뜨끔했다..! 브라우저에 따라 스타일링이 같음을 보장할 수 없는 이유라고 한다. 더해서, 하나의 을 사용하라!고 했는데... 뜨끔했던 이유는 나의 프로젝트의 일부인 아래 코드 에서 태그를 남발하고 있었기 때문. 그리고 태그까지 여백을 위해 사용하고 있었다. 나쁜 습관을 고쳐야겠다는 생각도 들고, 가 반복되는 부분은 차라리 자바스크립트 파일에서 for문으로 추가했으면 나았을까 하는 생각도 든다. 잘 썼다고 생각했지만 참 ..