Jade_o.o

CSS - Cascading Style Sheet 웹 페이지를 디자인하기 위해 사용하는 스타일 시트 언어 개발자 도구 F12 • 브라우저에서 개발 편의를 위해 제공하는 도구 • 지금 보고 있는 웹페이지의 HTML, CSS, Javascript 등을 볼 수 있다 • 해당 코드를 수정하여 자기 마음대로 변경이 가능 • HTML 구조 및 CSS 값 등을 확인 가능하므로 자주 사용 예정 • 특정 요소 코드 보기 / 크기 줄이기 / 모바일 버전 확인 가능 HTML5에서의 스타일 적용 • HTML5 이전 버전에서는 HTML 자체에서 Style을 컨트롤 할 수 있는 태그 , 등을 사용 • HTML은 결국 텍스트를 전달하는 문서 이자 문서의 구조 • HTML 본연의 기능이 아닌 디자인 적 요소가 추가되면서 많은 혼란을..

• Auto Rename Tag • Korean Language Pack for Visual Studio Code • Live Server

HTML 요소는 Semantic하게 작성되어야 한다. “웹 페이지를 이루는 요소에 의미와 맞는 태그를 사용하자!” Semactic tag Semactic tag • • • • ~ • • • • : 헤더 (로고, 메뉴 아이템 등) : 푸터 (하단 영역) : 네비게이션 (다른 곳으로 이동 가능한 링크들) : 콘텐츠 영역임을 표시. 한 html 페이지당 한 번 사용하는 것이 바람직함 (중첩 x) : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 (ex. 광고 등) : 하나의 의미있는 요소 (ex. 기사 리스트 중에서 기사 하나) : article을 포함 (그룹화 목적) 왜 Semactic 해야할까? • SEO (Search Engine Optimization, 검색최적화) • 검색엔진은 HTML 코드를 분석해..

테이블을 만들어보자 테이블 • 표를 만들 때 사용하는 태그 • 과거에는 테이블을 사용하여 레이아웃을 구성 하였으나 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 태그를 사용 • 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 것이 기본 • : 표를 감싸는 태그 • : 표 내부의 행 • : 표 내부의 제목 칸 • : 행 내부의 일반 칸 속성 • border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding : 셀 내부의 간격 • align : 테이블 정렬 속성 • width 와 height : 테이블의 너비와 높이 • bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색 속성 • colspan : 해당 칸이 점유하는 열의 수 지정 • ro..