HTML
의미론적(Semantic) 태그
의미론적 태그란 웹브라우저나 개발자들에게 명확하게 의미를 묘사하는 것을 뜻한다. , , 같은 요소들은 의미론적인 태그들로 여겨지게 된다. Semanctic tag가 없어도 코드는 돌아가지만 브라우저 개발자가 코드를 읽고 해석할 때 Semantic tag로 작성하느냐에 따라서 코드의 의미가 다르게 다가올 수 있다. 그래서 코드를 짤 때 정확하게 의미를 부여하는 것이 중요하다. Semantic tag 의미 특징 문서의 헤더 로고, 제목, 검색 등 다른 페이지 링크를 제공하는 영역 메뉴(Home, About, Contact), 목차, 색인 등 문서의 주요 콘텐츠를 설정 한 문서에 하나의 요소만 포함 가능 문서의 일반적인 영역 - 일반적으로 ~을 포함하여 식별 - 이나 안에 들어갈 수 있다. 독립적으로 구분되거..
인라인 텍스트
다른 페이지, 같은 위치(#), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정 속성 의미 값 기본값 특징 download 리소스를 다운로드하는 용도로 사용됨을 의미 Boolean href 링크 URL URL 생략 가능 hreflang 링크 URL 페이지 언어 ko, en 등 rel 현재 문서와 링크 URL의 관계 (Link types) license, prev, next 등 target 링크 URL의 표시 위치 _self, _blank _self type 링크 URL의 MIME 타입 text/html 등 생략 가능 약어를 지정한다. Abbreviation. 보통 title 속성을 사용하여 전체 글자나 설명을 제공한다. 사용할 때 지정하고자 하는 약어를 드래그 한 다음,..
HEAD에 포함되는 태그
HEAD에 포함되는 정보 : HTML 문서의 제목 : 사이트 정보 : CSS 스타일 작성 : 주로 스타일시트를 연결할 때 사용. 그 외에 파비콘 연결 등 : 문서 안의 모든 상대 URL이 사용할 기준 URL 지정 META meta 태그는 빈태그이다. 로 열린 형식. 태그 속성 charset: HEAD에서 가장 처음에 위치하여 문자 인코딩 방식을 선언한다. (=character set) UTF-8 (조합형): 구성된 것만 있어도 가능(ㅎㅗㅇㄱㅣㄹㄷ) EUC-KR (완성형): 완성된 글자 자체를 찾는 방식(홍 길 동) - 완성된 글자를 찾지 못할 경우 글자가 깨지는 현상 content: name 또는 http-equiv 속성의 값을 작성할 때 사용하는 속성 예) http-equiv: 서버나 사용자 환경의 작..
블록요소 / 인라인 요소 특징
블록 요소 인라인 요소 예) div, h1, p 태그 예) span, img 태그 사용 가능한 최대 가로 너비를 사용한다. 필요한 만큼의 너비를 사용한다. 크기를 지정할 수 있다. 크기를 지정할 수 없다. 기본 auto 값 - width: 100% - height: 0 기본 auto 값 - width: 0 - height: 0 수직으로 쌓임 수평으로 쌓임 margin, padding 위, 아래, 좌, 우 사용 가능하다. margin, padding 위, 아래는 사용할 수 없다. (좌우 사용가능) 레이아웃을 잡는 용도 TEXT를 작업하는 용도 *padding은 여백을 만들어 시각적인 거리를 만들어낼 수는 있지만, 실질적인 요소와의 거리, 공간을 만들어내지는 못한다. 인라인의 수평구조: 한줄로 작성할 경우 ..
form, input, label 양식 속성
form 웹 서버에 정보를 제출하기 위한 양식 범위를 정의 이 다른 을 자식 요소로 포함할 수 없다. 속성 의미 값 기본값 action 전송한 정보를 처리할 웹페이지의 URL URL autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on method 서버로 전송할 HTTP 방식 GET, POST GET name 고유한 양식의 이름 novalidate 서버로 전송 시 양식 데이터의 유효성을 검사하지 않도록 지정 target 서버로 전송 후 응답받을 방식을 지정 _self, _blank _self input 사용자에게 입력 받을 데이터 양식 속성 의미 값 기본값 특징 autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 ..
블록 요소와 인라인 요소
블록 요소 블록 요소는 모든 인라인 요소를 포함 할 수 있고 다른 블록 요소도 일부 포함할 수 있다. 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다. 블록 요소 다음에는 줄바꿈이 이루어진다. display: inline CSS 명령어로 블록 요소를 인라인 요소의 속성으로 변경할 수 있다. address, article, aside, audio, blockquote, canvas, dd, dl, div, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol..
웹 기초 지식
입문자에게 추천하는 HTML, CSS 첫걸음 개요HTML, CSS 그리고 JavaScript웹 표준크로스 브라우징웹 접근성정보 통신 보조기기웹 접근성 품질인증 마크웹 개발을 위한 에디터Sublime TextAtomBr ... heropy.blog 공부를 위한 정리글이며 HEROPY님의 블로그를 참고하여 포스팅 하였습니다. 개념 HTML Hyper Text Markup Language. 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다. HTML을 이용해서 화면을 꾸미는 것이 아니라 튼튼한 구조(Semantic)를 만드는 것에 집중해야 한다. CSS Cascading Style Sheets. 마크업 언어(HTML, XML 등)가 실제 표..
HTML안에 JS파일 불러오는 위치: async, defer
브라우저가 HTML을 해석하는 과정 Loading: 불러오기 Parsing: HTML을 분석하고 DOM 트리를 만들어서 데이터를 자료 구조화한다. → 렌더링 트리 만들기 CSS 스타일 결정 Layout: 렌더링 트리가 생성될 때, 각 (Render)객체가 위치와 크기를 갖게 된다. Painting: 렌더링 트리를 탐색하면서 메모리 공간에 RGB 값을 채워간다. HTML안에 JS파일 불러오는 위치 어디서 불러오냐에 따라 스크립트 실행 순서와 브라우저 렌더링에 영향을 미칠 수 있다. 1. Parsing → 어 자바스크립트네? parsing을 멈춤 → 필요한 자바스크립트 다운/실행 → 마저 Parsing 🚨 문제점: 자바스크립트 파일이 클 경우 사용자가 오랫동안 완성되지 못한 화면을 볼 수있다. 2. 앞에서 ..