본문 바로가기

HTML

[HTML] 태그 여는 태그, 닫는 태그로 이루어져있다(꺽쇠) 여닫는 태그 안에 써있는 글자에 따라 정보의 성격이 달라진다. (p는 문장, h1은 제목....) 태그를 구성하는 요소 중 '속성(attribute)'이란 것이 있는데 이것은 태그 하나만으로 표현하지 못하는 정보를 부가적으로 줄 때 설정한다. 만약 p태그로 러시아어로 된 문단을 감싸고 있을때, 웹 브라우저에게 이 문단이 러시아어라는 정보를 알려주고 싶다면 p 여는 태그에 lang이라는 애트리뷰트를 주고라고 줄 수 있다. 태그마다 자동으로 적용되는 스타일(글머리 부호, 글꼴 기울임, 굵기 변화, 밑줄... 등등)이 있는데, 이것은 CSS로 처리하면 되는 문제라서 중요한게 아니다. HTML에서 중요한것은 Semantic(의미론적인) 마크업이다. 웹브라우저에게 이것.. 더보기
[HTML] 문서의 특정부분으로 이동 (a태그 이용) .markdown h2 a[aria-hidden=true] { height: 1em; opacity: 0; visibility: hidden; margin-left: 8px; font-size: .8em; transition: all .25s; } .header-link { width: 22px; height: 22px; background-image: url(/link.7cd35d148e6e0bec.svg); background-position: 50%; background-repeat: no-repeat; background-size: contain; display: inline-block; }​ Output href="#output" 는 id가 output 인 요소의 위치로 이동하게 해준다. htt.. 더보기
[HTML] 시맨틱 요소 (section,article,nav,aside) 시맨틱 요소란? Semantic : 의미의, 의미론적인 의미론적으로 구조화된 요소 문서 구조를 명확히 정의하고 검색 엔진, 웹브라우저, 스크린 리더 등이 콘텐츠의 성격을 잘 이해하고 해석하도록 돕는다. 시멘틱 요소를 잘 사용하면 웹페이지의 접근성과 SEO(검색 엔진 최적화)에 도움이 된다. Sectioning Element(section,article,nav,aside)사용시 주의할점 section article nav aside ⇒ h태그(h1~h6) 반드시 필요 단원을 하나 여는것과 같다. 단원에는 주제,제목이 반드시 들어가야한다 즉, Sectioning element내에는 반드시 heading태그를 작성해야 한다. 시맨틱(Semantic)하게 작성하려면 문서나 섹션의 머리말 일반적으로 로고, 제목,.. 더보기