※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
마크업언어란?
태그 등을 이용하여 데이터의 구조를 명기하는 언어의 한가지.
기술적 마크업은 문서의 일부에 이름을 다는데 주로 사용.
주요 마크업 언어: HTML
마크업 개발의 실질적 의미? 웹퍼블리셔라고도 함..
웹페이지의 뼈대를 구성하는 HTML과
화면 디자인을 코드로 나타내는 CSS를 개발을 의미
실질적 동작을 나타내는 JS(자바스크립트)
마크업 개발의 중요성?
디자인과 기술의 오작교 역할
기획 →디자인 →마크업 →FE(프론트) / BE(백) →QA →릴리즈
웹 서비스의 규모가 클수록, 디자인 복잡도 상승
디자인 관리를 위해 생겨난 디자인 시스템을 잘 개발/ 유지 하기 위해서는
결국 마크업의 역할이 가장 중요
기획+디자인+프론트엔드 = 마크업
웹 접근성 중요
★★기초이론은 유튜브의 '생활코딩' 영상 보기
- 핵심 HTML >
한마디로<div><p>마크업</p></div>
2. Block vs Inline
Block: 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록
"을 만듭니다. 브라우저는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것과 비슷. 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함.
ex ) diiv, h1, p
Inline: 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지함.
ex ) span, img, a, strong
꽉찬거는 블록, 인라인은 일부에 있는것.
3. 시맨틱 마크업 >
검색 엔진 최적화(SEO) / 접근성 / 유집수
시맨틱 html은 주어진 목적을 위해 요소를 사용하기 때문에
사람과 기계가 읽고 이해하기가 더 쉽다.
4. HTML Emmet >
★★★쳐보면서 습관.
마크업 개발의 속도를 붙여줄 치트키!
자동완성: tab키 / div(tab키)
텍스트: {} / div{안녕}
자식 요소: > / div>div
형제 요소: + / div>p+a
올라가기: ^ / div>p^div
반복하기: / ul>li4
그룹화: () / ul>(li>a)4
클래스: . /
아이디: # /
속성[attr] / img[alt="이미지 설명"]
넘버링: $ / div.item$6
5. HTML 학습 팁
구글 검색 / 질문하기전 최대한 찾아보기 / 검색은 영문이 유리함.
공식 문서나 튜토리얼 문서를 잘 확인하자 / 배운것을 기록하자
검색할때 html ooo mdn 이라고 검색하는거 추천(ooo는 자유)
