본문 바로가기

develop/HTML&CSS

[HTML] 태그 여는 태그, 닫는 태그로 이루어져있다(꺽쇠) 여닫는 태그 안에 써있는 글자에 따라 정보의 성격이 달라진다. (p는 문장, h1은 제목....) 태그를 구성하는 요소 중 '속성(attribute)'이란 것이 있는데 이것은 태그 하나만으로 표현하지 못하는 정보를 부가적으로 줄 때 설정한다. 만약 p태그로 러시아어로 된 문단을 감싸고 있을때, 웹 브라우저에게 이 문단이 러시아어라는 정보를 알려주고 싶다면 p 여는 태그에 lang이라는 애트리뷰트를 주고라고 줄 수 있다. 태그마다 자동으로 적용되는 스타일(글머리 부호, 글꼴 기울임, 굵기 변화, 밑줄... 등등)이 있는데, 이것은 CSS로 처리하면 되는 문제라서 중요한게 아니다. HTML에서 중요한것은 Semantic(의미론적인) 마크업이다. 웹브라우저에게 이것.. 더보기
[HTML] 웹 접근성 지침 웹 접근성(Web Accessibility) 이란? 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 웹 접근성 지침 이란? 웹 콘텐츠에 관한 내용 사용자들이 사용하는 도구 개발에서 지켜야할 점 브라우저나 확장 프로그램을 만드는 사람들이 주의해야 할 점 등….. 위와 같은 점 등을 구분해 가이드라인을 만든것 Home Home Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI). www.w3.org 웹 접근성 지침은 W3C에서 설립한 WAI(Web Accessibility Initi.. 더보기
[HTML] 검색 엔진 최적화(SEO) SEO(Search Engine Optimization) 네이버, 구글같은 검색엔진의 상위 노출이 되도록 적절한 키워드에 더 많이 노출되도록 할 수 있다. 우리 사이트를 찾기 쉽도록 개선하는 여러 노력을 검색 엔진 최적화라고 한다. 일반적으로 적용가능하고 요즘 사이트 개발에 필수 적용하는 방법을 알아보자 시맥틱한 HTML 시맨틱한 코드로 HTML을 작성하면 검색 엔진과 크롤러가 각 영역이 어떤 의미의 정보를 담는지 기계적으로 읽어낼수 있다. 페이지 개요와 구성, 본문 등을 파악하고 키워드 등을 이해해 검색 시 사이트 노출되는것에 도움을 준다. 태그 적절하게 작성 에 작성된 제목은 검색할때 그 사이트의 이름이다. 사이트를 가장 잘 나타내는 브랜드명, 키워드를 작성하는게 좋다. title을 자주 바꾸거나 길.. 더보기
[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)하게 작성하려면 문서나 섹션의 머리말 일반적으로 로고, 제목,.. 더보기
[CSS] BEM(Block Element Modifier)구조 BEM(Block Element Modifier)구조 BEM은 CSS 작성시 사용하는 방법론중 하나이다. 장점 명확한 구조화: 클래스명으로 구조화를 해서 구조를 쉽게 파악 가능 모듈화: 각 블록을 독립적으로 스타일링, 재사용하기 용이함 명시성: 스타일간 충돌을 방지한다. 선택자 우선순위 제어 단점 블록(Block), 요소(Element), 수정자(Modifier)를 명시하는 방식으로 작성되기 때문에 클래스 이름이 길어짐 가독성 떨어짐 클래스명이 복잡해지고 유지보수가 어려워질수 있음 css 파일이 길어지고 중복 발생 가능성이 있음 블록 Block 페이지 전체 Element(요소)를 의미하거나 하위 Element(요소)를 감싸는 컨테이너를 의미 문자, 숫자, 대시(-)로 구성 요소 Element 블록의 하위.. 더보기
[HTML] 클래스명, id 네이밍 컨벤션 네이밍 컨벤션 미리 약속한 규칙에 따라 이름을 짓는것 회사마다 커뮤니티마다 네이밍 컨벤션이 조금씩 다를 수 있다. id, class 명명 의미 있는 이름을 사용: 해당 요소의 역할이나 의미를 잘 나타내는 이름으로 짓는다. 의미가 명확하고 간결한 이름으로 지을것: 유지보수와 이해가 쉽도록 의미에 맞는 접두사를 사용 소문자 혹은 하이픈(-)을 사용하여 가독성을 높인다. 주로 많이 사용하는 접두사 큰 구역으로 분류 header - 헤더 영역 content - 본문 영역 footer - 푸터 영역 wrapper - 특정 구역을 감싸는 영역 작은 구역으로 분류 title section, sec wrap inner - 부모 구역 내부의 자식 묶음을 표현 gnb - 서비스 전체 네비게이션 바 lnb - 지역적인 네비.. 더보기

티스토리툴바