반응형 태그4 메인 페이지 인덱스 꾸미기 메인 페이지 인덱스 꾸미기 제 공부 메인 페이지 입니다. https://dongjin6539.github.io/web2023/ 기존에 공부하기 전에 받았던 페이지를 자신의 것으로 수정해봤습니다!!! 기존 페이지 색상 바꾸기 먼저 해당 부분에 코드 구성이 어떻게 되어있는지 확인을 해봐야합니다. 그러기 위해서 오른쪽 마우스 버튼를 누르면 검사가 나옵니다. 그것을 클릭해봅니다. 단축키는 F12입니다. 나오면 위와 같은 순서대로 해봅니다. 1번처럼 해당 버튼을 클릭하면 화면의 부분을 클릭할 수 있습니다. 2번처럼 화면에 알고 싶은 부분을 클릭을 해봅니다. 그러면 해당 부분의 코드가 나오고 밑에 css가 어떻게 되어있는지 나옵니다. 3번처럼 해당 부분의 css를 확인하고 3번의 오른쪽 위에 부분을 보시면 해당 폴.. 2023. 5. 7. 섹션과 관련된 태그(Section Related Tag) 섹션과 관련된 태그(Section Related Tag) 태그 의미 · 문서의 주요 콘텐츠 영역을 설정합니다. · 주제별 그룹의 콘텐츠 섹션을 설정합니다. · 문서의 독립적인 컨텐츠 섹션을 설정합니다. · 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. · 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다. · 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다. · 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다 · 문서 관련 연락처 콘텐츠 섹션을 설정합니다. ~ · 각 섹션의 제목을 설정합니다. 태그 문서의 주요 콘텐츠 영역을 설정합니다. 웹 문서의 핵심이 될 수 있는 내용을 포함한다. 문서에서 한 번만 사용이 가능합니다. 개념적 요소의 섹션보다는 영역을 표현하기 위한 태그입니다. 반복되는 .. 2023. 2. 22. 텍스트 관련 태그 텍스트 관련 태그 1. 블록 레벨 요소 태그 태그 의미 ~ · HTML 문서에서 제목을 정의할 때 사용하는 태그 · 제목의 수준 순서 : h1 → h2 → h3 → h4 → h5 → h6 · HTML 문서에서 단락을 정의할 때 사용하는 태그 · 텍스트의 행을 바꾸는 태그 · 공백이나 줄바꿈 등 상관없이 있는 그대로 나오는 태그 2. 인라인 요소 태그 태그 의미 · 강조하고 싶은 텍스트를 정의하기 위한 태그이면 기울임체로 표시 · 중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시 · 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시. · 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시 · 주의 사항, 법적 제한, 저작권 등을 정의하기 위한 태그이며 작은 글씨로 표시 · 아래첨.. 2023. 2. 17. 시멘틱 마크업과 논리적인 순서 마크업 시멘틱 마크업 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다. 실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다. 시멘틱 마크업의 사용 이유 1. 검색 엔진 최적화(SEO) 검색 엔진이 시멘틱 태그를 중요한 키워드로 간주하기 때문에 유리하다. 2. 웹 접근성 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다. 3. 가독성 단순한 태그로 둘러싸인 요소보다 의미있.. 2023. 2. 17. 이전 1 다음 반응형
