[HTML] - 시맨틱하게 HTML 짠다는 의미란 무엇인가?

우선 시맨틱하게 HTML을 짜야하는 이유에 대해서 알아보자. 이를 위해서 시맨틱 웹의 목적과 사용이유를 짚고넘어가면 검색사이트들은 웹사이트를 검색하기 위해 검색엔진을 사용한다 이때 개발자들은 프로적트를 만들때 검색어에 많은 노출을 할 수 있어야하기 때문에 검색엔진 최적화(SEO :Search Engine Optimization)을 고려해줘야한다. 즉, 검색엔진에 잘 노출 되려면 시멘틱 웹을 따라야 한다는 뜻이기도하다. 그렇다면 계속 시멘틱 시멘특 거리는데 이 시멘틱이란 의미는 무엇인가? Semantics(의미론) 이라는 영어단어에서 알 수 있듯이 HTML 문서를 의미에 맞도록 작성하는 것을 Semantic HTML이라고 부르는 것이다. HTML에는 정답이 없기에 HTML을 각 요소의 의미에 맞게 HTML..

• format_list_bulleted HTML + CSS
• · 2022. 4. 8.
• textsms

[CSS] - 구글폰트 사용하기

1. 구글폰트 사이트에 접속하여 원하는 폰트를 선택한다. fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 선택한 폰트의 link태그나 import문을 copy한 뒤 html 내에 작성한다. (결과 확인)

• format_list_bulleted HTML + CSS
• · 2020. 10. 23.
• textsms

[CSS] - 선택자

1. 전체 선택자 : 문서내에 있는 모든 요소를 대상으로 스타일 적용할 때 사용(초기화 작업시 많이 쓰임) 2. 태그 선택자 : 특정종류의 모든 태그에 스타일 적용 3. 아이디 선택자 : 문서내의 아이디 속성값으로 접근, 아이디명은 문서내 중복되지 않아야하며, 하나의 태그를 선택할 때 사용 4. 클래스 선택자 : 문서내의 클래스 속성값으로 접근, 여러 태그를 한꺼번에 선택할 때 용이함 .클래스명으로 지정 5. 속성 선택자 : 특정 속성을 가진 태그를 선택 가능 '선택자[속성=값]'으로 지정 6. 자식선택자 : 특정 태그 바로 아래 선택 7. 자손선택자 : 특정 태그의 자식, 손자 등 모든 후손 태그들을 포함 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ..

• format_list_bulleted HTML + CSS
• · 2020. 10. 23.
• textsms

[CSS] - CSS 스타일 적용 우선순위

CSS의 적용 우선순위가 존재하는데 이는 유지보수와 관련된 중요한 문제일 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document h1 {color: red;} h2 {color: red; background-color: blue;} h3 {color:white; background-color: black;} header header header Colored by Color Scripter cs 위와 같이 헤더부분에 스타일을 작성해도 되지만 이런식으로 따로 css 시트를 작성하여 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document header1 header2 header3 header4 Colored by Colo..

• format_list_bulleted HTML + CSS
• · 2020. 10. 23.
• textsms