Positioning Positioning은 시각적인 측면에서 HTML의 가장 중요한 요소 HTML 내 부분 문서의 위치를 지정하거나 객체 (Object)의 보임/숨김(visibility)을 다룸 엘리먼트의 위치를 고정시키거나 브라우저의 크기에 따라 이동하는 등의 설정을 함 정적인 HTML을 JavaScript를 이용하여 동적으로 만들기 위한 가장 기본적인 속성 width, height length(길이 값) : px, pt, cm, mm, in 등의 길이 단위 사용 백분율(%) : 상위 block에 대한 백분율 단위로 상위 block의 크기가 바뀌면 자신의 크기도 자동으로 변경 auto (width) : 100% 자신의 상위 block이 허용하는 width 크기만큼 채움 auto (height) : 0..
정리/FrontEnd
Display 웹 페이지 layout을 결정하는 CSS의 속성 중 하나 display가 적용된 요소를 웹 브라우저에 언제 어떻게 보일지를 결정 display의 속성 값 block : div, p, h, li tag 등의 기본 속성 값 inline : span, b, i, a tag 등의 기본 속성 값 inline-block none block 항상 새로운 라인에서 시작 (줄 바꿈 효과) 해당 라인의 전체 너비를 차지 width, height 속성 지정 가능 block level 요소 안에는 inline level 요소가 들어갈 수 있음 inline 새로운 라인에서 시작하지 않고 라인의 일부로 영역 차지 뒤에 나오는 tag는 줄바꿈 되지 않고 오른쪽에 표현 요소의 너비는 해당 라인 전체가 아닌 HTML 요..
Box Model CSS는 모든 엘리먼트는 여러 겹의 상자로 둘러 쌓여 있다고 가정 모든 HTML요소는 사각형 박스 모델이고 위에서 아래로 (Block level), 왼쪽에서 오른쪽으로(Inline level)으로 쌓임 컨텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구분 컨텐츠를 정렬 또는 위치를 저장하기 위해 Padding, Margin 속성을 활용 Box-sizing 모든 엘리먼트의 box-sizing은 기본값이 content-box padding과 border를 제외한 content 영역만을 box로 지정 border 까지의 영역을 box로 지정할 경우 box-sizing을 border-box로 설정 Margin Margin 속성은 Box의 Margi..
CSS 속성 Font 속성 tag 관련 속성은 CSS property로 대체 가능하므로 추천하지 않는 기능 font-family, font-size, font-style, font-variant, font-weight, font로 구성 font-family 사용법 : E {font-family: 글꼴 이름, 글꼴 이름 …} CSS Parser는 앞의 글꼴부터 읽으며 글꼴이 사용자 PC에 없을 경우 다음 글꼴을 적용 generic font 명을 뒤에서 작성하는 것이 일반적 font name에 white-space가 포함된 경우 quotation으로 감싸야 함 font-style 사용법 : E {font-style: normal | italic | oblique } italic 속성은 글자를 이텔릭체로 표시..
선택자 (Selector) Html 문서에서 CSS 규칙이 적용 타겟이 되는 다양한 종류의 CSS 선택자(selector)가 존재 일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류 복합 선택자는 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자로 분류 CSS 규칙 적용 우선순위 같은 element에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선 적용 CSS 규칙들 중 하단에 작성한 규칙이 마지막 규칙 p {} 보다 p b {}가 더 구체적인 규칙이므로 p {}가 아닌 p b{}가 적용됨 속성 값 뒤에 !important를 작성하면, 같은 엘리먼트에 대해 보다 우선적으로 스타일 적용 일반 선택자 일반 선택자 우..
CSS Cascading Style Sheets 스타일을 사용하는 이유 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있음 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있음 웹 페이지를 표현하기 위한 스타일 규칙을 모아놓은 문서 구성 선택자 (Selector), 선언 (Declaration) 두 부분으로 구성됨 선택자는 규칙이 적용되는 Element 선언 부분에는 선택자에 적용될 스타일을 작성 선언은 중괄호로 감싸며, 속성(Property)과 값(Value)로 이루어짐 .Selector{Declaration1: value1; Declaration2: value2;} 속성(Property)은 선택자에서 바꾸고 싶은 요소 (color, font, width, height, border, …) 값(v..
Form control 요소 사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용 사용자는 요청에 따라 서버는 HTML form을 전달 (회원가입 양식, 검색 양식 등) 사용자는 HTML form에 적절한 데이터를 입력한 수 서버로 전송 서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환 사용자가 입력하기 위한 control 요소들은 모두 tag 하위에 위치해야 서버로 전송됨 각 control 요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력을 받음 form 사용자가 입력한 자료들을 어떤 방식으로 서버로 전달할 것인지 결정 서버에서 여떤 프로그램을 이용해 처리할 것인지 결정 form control label form control에 레..
HTML 문서의 구성 요소 tag는 HTML 문서의 전체를 정의 Head와 Body로 구성 내용 Head 요소 문서 머리글(head), 제목(title) 문단 제목 h1 문단 제목 h2 문단 제목 h3 문단 제목 h4 문단 제목 h5 문단 제목 h6 섹션 문단 제목 1번째 섹션 문단 제목 1-1번째 섹션 문단 제목 1-2번째 섹션 문단 제목 2번째 특수문자 엔티티 이름 설명 화면출력 Non-breaking space(공백) & Ampersand & " Quotation mark " © Copyright © ® registered trademark ® HTML 기본 태그 포맷팅 요소 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있음 tag명 설명 생략된 약어 표시. Tit..
