- Ch 4. 웹에서 시작하기
- Codepen.io
- project를 직접 만들지 않고 프론트엔드 테스트 코딩 가능
- 각 언어의 전처리기를 선택할 수 있음.
- 브라우저 스타일 초기화
- width, height 속성 : 가로-세로 너비 설정
- background-color 속성 : 배경색 설정
- reset-css cdn : reset.min.css 사용 (브라우저 스타일 기본 설정 초기화) 권장
- codepen.io css base : reset 설정
- Emmet
- 약어 사용으로 명령어 자동 완성 기능
- Codepen.io
- Ch 5. HTML 개요
- 기본 문법
- content 형태는 요소(Element)
- 부모와 자식 관계의 이해
- 요소의 내부의 요소는 각자의 기준에서 상대적으로 부모-자식 관계를 갖는다.
- 자식 요소는 줄 바꿈과 들여쓰기로 구분하여 사용하여 시각적 구분한다.
- 부모 요소를 포함한 나를 감싼 모든 요소는 상위(조상)요소라고 한다.
- 빈 태그
- 닫힌 태그가 없는 경우를 빈 태그라고 한다.
- 명확한 작성의 빈 태그 문법 <태그 /> 사용 권장.
- 내용없이 속성과 값을 사용할 경우에 필요.
- ex) img태그 src, alt 속성으로 이미지 활용
- 글자와 상자
- 인라인 요소 : 글자를 만들기 위한 요소
- 수평으로 쌓이고 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
- 인라인 요소는 내/외부 여백은 가로만 적용된다.
- 자식 요소에 블록 요소를 사용할 수 없다.
- 블록 요소 : 상자(레이아웃)를 만들기 위한 요소
- 수직으로 쌓이고 아무것도 나타내지 않고 콘텐츠 영억을 설정하는 용도.
- 가로 너비는 부모 요소의 크기만큼 자동으로 늘어난다.
- 세로 너비는 콘텐츠 크기만큼 자동으로 줄어든다.
- 가로 세로 너비 사이즈, 내/외부 여백 모두 지정이 가능하다.
- 자식 요소에 블록 요소를 사용할 수 있다.
- 인라인 요소 : 글자를 만들기 위한 요소
- 기본 문법
- Ch 6. HTML 핵심 정리
- 핵심 요소 정리
- 블록 요소
- div 태그 : 블록 요소로 구분을 위한 요소. (Division)
- h1 태그 : 제목을 의마하는 블록 요소. h1~6(중요도/크기에 따라 구분)
- p 태그 : 문장을 의미하는 블록 요소. (paragraph)
- ul 태그 : 순서가 필요없는 목록의 집합을 의미하는 블록 요소. (Unordered List)
- li 태그 : 목록 내 각 항목을 의미하는 블록 요소. (List Item)
- ul 태그는 하나 이상의 li 태그를 가져야하고 li도 ul로 감싸져있어야한다.
- 인라인 요소
- img 태그 : 이미지를 삽입하는 인라인 요소. (Image)
- 필수 속성 src와 alt를 갖는다.
- a 태그 : 다른/같은 페이지로 이동하는 하이퍼링크 지정하는 인라인 요소.(anchor)
- href 속성 : 링크 URL, target 속성 : 링크 URL의 탭 위치
- span 태그 : 구분을 위한 인라인 요소.
- br 태그 : 줄 바꿈을 위한 인라인 요소. (break)
- label 태그 : 라벨 가능 요소의 제목을 명시하는 인라인 요소.
- 라벨 가능 요소는 input type 중 checkbox, radio 등
- img 태그 : 이미지를 삽입하는 인라인 요소. (Image)
- input 태그 : 사용자가 데이터를 입력하는 인라인-블록 요소
- 가로/세로 여백 지정 가능.
- placeholder 속성 : 사용자가 입력할 값의 힌트 속성
- value 속성 : 미리 채워둘 값 속성
- disabled 속성 : input 비활성화 속성
- table 태그 : 행과 열의 집합 표 요소.
- tr 태그 : 행을 지정하는 요소. (Table Row)
- 행과 열 중 행이 우선 작성
- td 태그 : 열을 지정하는 요소. (Table Data)
- tr 태그 : 행을 지정하는 요소. (Table Row)
- 블록 요소
- 핵심 요소 출력 연습
- 주석
- 수정사항이나 설명 등을 작성
- cmd + / (단축키)
- 전역 속성
- title 속성 : 요소의 정보나 설명을 지정
- style 속성 : 요소에 적용할 css 지정
- class 속성 : 요소를 지칭하는 중복 가능한 이름
- css 혹은 js 선택자로 사용하여 제어하기 위함.
- id 속성 : 요소를 지칭하는 고유한 이름
- data-이름 속성 : 요소에 데이터를 지정
- js, css에서 사용될 데이터를 요소에 저장
- 핵심 요소 정리
Hello World !