🔍HTML에 존재하는 수많은 태그들을 알아보자. 상당히 길어질 것 같다... h1, h2, h3, h4, h5, h6 Heading: 제목 웹 페이지를 하나의 책이라고 생각하면 제목 태그는 목차와 같다! HTML 논리 구조에서 매우 중요한 태그. 검색엔진은 h 태그에 기반하여 결과물을 보여준다. 제목 태그를 잘 작성해 검색엔진에 노출이 잘 되게 하는 것도 고려해야한다! 주의할 점 h1 태그는 한 페이지에 한번만 사용할 것을 권장. 스타일의 목적으로 h 태그를 사용하지 말것! h1 ~ h6은 순서대로 작성해야 한다. 대한민국 부산 서면 해운대 명지 광안리 광안리 해수욕장 광안대교 대한민국 서면 부산 해운대 명지 광안리 돼지국밥 광안대교 href: hypertext reference (경로참조) tel: 전..

🔍CSS에서 사용하는 단위에 대해 정리해보자. 단위 단위에는 절대 길이 단위와 상대 길이 단위가 있다. 절대 길이 단위: px (mm, cm, in, pc, pt, ...) 상대 길이 단위: %, vw, vh, vmin, vmax, em, rem px Pixel (Picture + Element) 화면에서 이미지를 표현하는 가장 작은 단위. 고정된 값이므로 직관적인 사용 가능. 시대가 흐르고, 디바이스가 다양해짐에 따라 픽셀 밀도도 다양해졌다.그로 인해 절대 단위인 px를 사용하면 디바이스에 따라 크기나 위치가 달라지는 문제가 발생하게 됐다. 그러므로 우리는 상대 단위의 개념을 이해하고 잘 사용할 수 있어야 한다. % 부모 요소를 기준으로 하는 백분율 단위. vw, vh 화면의 넓이, 높이를 기준으로 하..

🔍CSS 상속에 대한 개념을 정리해보자. 상속(Inheritance) CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있다. See the Pen Untitled by astinaus (@astinaus) on CodePen. section 의 color 속성이 자식인 h1, h2, p에게 상속된 것을 확인할 수 있다. width, height, margin, padding, border 같은 속성은 상속되지 않는다. inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 한다. initial: 브라우저 기본 스타일 속성을 따르게 한다. unset: 속성을 자연 값으로 한다. 자연적으로 상속되면 inherit 또는 initial처럼 작동한다. button, input같은 fo..

🔍CSS 선택자에 대해 알아보자 CSS를 적용하려면 적용하고 싶은 요소를 선택하고, 요소에 맞게 스타일을 지정해줘야 한다. 여기선 이 요소를 선택하는 CSS 선택자에 대해서 알아보려한다. 전체 선택자 * { color: red; } Universal Selector head를 포함한 HTML 문서 내의 모든 요소를 선택한다. * (별표, 애스터리스크)를 사용하여 선택할 수 있다. 타입(유형) 선택자 h1 { font-weight: bold; } p { font-style: italic; } Type Selector 태그 선택자 또는 요소 선택자 라고도 부르며, 특정 태그를 선택한다. 아이디 선택자 ( # ) Hello World #title { font-size: 40px; } ID Selector id..

🔍CSS를 적용하는 다양한 방법들을 알아보자 1. 인라인 방식 Hello world 태그 자체에 style 속성으로 스타일을 주는 방식. 가상 요소(:hover, ::before, ::after 등)에 스타일을 줄 수 없어 사용에 제한이 있다. 2. 내부 스타일 ... Hello World ... html 파일 안의 head 태그 내에서 style 태그를 정의하여 스타일을 적용하는 방식 코드가 길어질수록 html 파일 길이가 길어지므로 비효율적 3. 외부 스타일 /* style.css */ p { color: red; background-color: blue; } ... Hello World ... HTML과 CSS를 분리하여 코드의 가독성과 효율성을 높이는 가장 권장되는 방식. link 현재 문서와 외..

🔍HTML은 어떻게 구성되어있는지 들여다보기 HTML 구성 HTML의 뼈대가 되는 구조이다. 크게 4가지 파트로 나눌 수 있겠다. HTML 버전이 무엇인지 브라우저에 알려주는 역할을 하는 선언 HTML5 이전 버전에서는 DTD를 참조해야 했지만, HTML5 버전 이후로는 참조할 필요가 없다. ... HTML 문서의 루트, 최상단 요소 lang 속성으로 해당 페이지의 주 언어가 무엇인지 설정 가능. 주 언어 설정은 검색엔진, 스크린리더, 번역 기능 등에 영향을 미치게 된다. 언어코드 언어 국가코드(국가) ko 한국어 KR(대한민국), KP(북한) en 영어 US(미국), GB(영국), PH(필리핀) zh 중국어 CN(중국), HK(홍콩), TW(대만), Hans(간체), Hant(번체) ja 일본어 de ..