공부/HTML, CSS4 inline과 block의 차이 HTML에서 요소는 웹 페이지 레이아웃에서 작동하는 방식에 따라 블록 또는 인라인 요소로 분류된다. block , , ~ 등의 블록 수준 요소들은 사용 가능한 전체 너비를 차지하고 앞/뒤에 새 줄을 만든다. 일반적으로 페이지 구조를 만들고 콘텐츠를 섹션으로 나누는 데 사용된다. 블록 수준 요소는 다른 블록 및 인라인 수준 요소를 포함할 수 있다. 예) Block-level element This is a paragraph inside a block-level element. inline , 및 과 같은 인라인 요소는 필요한 만큼의 너비만 차지하며 앞/뒤에 새 줄을 만들지 않는다. 일반적으로 블록 수준 요소 내 텍스트 스타일을 지정하는 데 사용된다. 인라인 수준 요소는 블록 수준 요소를 포함할 수 없지만 .. 2023. 4. 7. <li>요소는 왜 <ul>요소의 자식 요소여야 할까? : unordered list, 비정렬 목록 태그 → 요소는 순서가 중요하지 않은 목록을 나타낼 때 사용한다. 요소 내 들어갈 항목의 순서가 필요하다면 요소를 사용한다. 과 의 직계 자식 요소로는 오직 요소만 올 수있으며 하나 이상의 자식을 가져야 한다. : ordered list, 정렬 목록 태그 → 요소는 순서가 중요한 목록을 나타낼 때 사용한다. 과 요소의 차이가 순서의 중요성에 있는 만큼 태그로 마크업 된 목록의 항목은 불릿(•)으로 표시되는 반면 태그로 마크업 된 목록의 항목은 숫자료 표시된다. : list item, 목록의 항목 태그 → 요소는 목록 내 아이템을 나타낸다. 따라서 반드시 목록을 나타내는 혹은 요소 내 항목으로 요소가 위치한다. → 및 요소는 목록을 만드는 데 사용하며 요소는 목.. 2023. 4. 7. 시멘틱 HTML의 필요성 시멘틱 태그 → Semeantic을 직역하면 의미론적인이라는 뜻을 가지고 있다. 즉 시멘틱 태그란 의미를 부여한 태그라는 뜻이다. 시멘틱 태그는 HTML5에서 처음 등장했고 , 등의 만 보고서 문서를 더 쉽게 이해할 수 있게 되었다. 시멘틱 태그의 종류 사이트의 머리부분에 사용 메인 콘텐츠를 나타내는데 사용 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소 개별 콘텐츠를 나타내는 요소 좌우측의 사이드 영역 사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분 제목과 부제목을 묶어서 나타내는 요소 웹 페이지 메뉴를 만들 때 사용 태그 대신 시멘틱 태그를 사용해야 하는 이유 HTML 문서의 가독성과 유지보수가 쉬워짐. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main),.. 2023. 4. 6. CSS position 사용 방법 - CSS의 position 속성은 HTML 요소의 위치를 지정하는 데 사용됨. - position 속성은 주로 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됨. position: static - position 속성의 기본값. - HTML에 작성한 순서 그대로 브라우저 화면에 표시됨. - 따라서 top, left, bottom, right 속성은 무시됨. position: relative - 요소를 원래 위치를 기준으로 상대적으로(relative) 배치 가능. - 요소의 위치 지정은 top, bottom, left, righr 속성을 이용해 요소가 기존 위치에 있을 때의 상하좌우로부터 얼마나 떨어지게 할지를 지정함. position: fixe.. 2023. 3. 30. 이전 1 다음
