포지셔닝 포지셔닝(Positioning)은 시각적인 측면에서 HTML의 가장 중요한 요소이다. HTML 내 부분 문서의 위치를 지정하거나 객체(Object)의 보임과 안보임(visibility)을 다룬다 엘리먼트의 위치를 고정시키거나 브라우저의 크기에 따라 이동하는 등의 설정을 한다. 정적인 HTML을 JavaScript를 이용하여 동적(Dynamic)으로 만들기 위한 가장 기본적인 속성 포지셔닝 - width, height length(길이, 값) : px, pt, cm, mm, in등의 길이단위 사용 백분율(%) : 상위 block에 대한 백분율 단위로 상위 block의 크기가 바뀌면 자신의 크기도 자동으로 변경 auto (width의 경우) : 100%, 자신의 산위 block이 허용하는 width..
Display 웹 페이지의 layout을 결정하는 CSS의 속성 중 하나 display가 적용된 요소를 웹 브라우저에 언제 어떻게 보일지를 결정 display의 속성 값 - block : div, p, h, li tag등의 기본 속성 값 - inline : span, b, i, a tag등의 기본 속성 값 - inline-block - none HTML 요소의 display 속성의 기본 설정 값을 변경하여 웹 페이지를 개발자가 원하는 모양으로 변경 가능 Display -block 항상 새로운 라인(line)에서 시작(줄 바꿈 효과) 해당 라인의 전체 너비를 차지 width, height 속성 지정이 가능 block level 요소 안에는 inline level 요소가 들어 갈 수 있음 Display - ..
Box Model CSS는 모든 엘리먼트는 여러 겹의 상자로 둘러 쌓여 있다고 가정한다. 모든 HTML요소는 사각형의 박스 모델이고 위에서 아래로(Block level), 왼쪽에서 오른쪽(Inline Level)으로 쌓인다 컨텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구분 컨텐트를 정렬 또는 위치를 지정하기 위해 padding, margin 속성을 활용 Box Model - box-sizing 모든 엘리먼트의 box-sizing은 기본값이 content-box 이다. - padding과 border를 제외한 content 영역만을 box로 지정 border까지의 영역을 box로 지정할 경우 box-sizing을 border-box로 설정 Box Model..
Font 속성 tag 관련 속성은 CSS property로 대체 가능하므로 추천하지 않는 기능 CSS Font 관련 속성은 text의 글꼴, 굵기, 크기, 스타일등을 지정 font-family, font-size, font-style, font-variant, font-weight, font로 구성 font는 하나의 선언에서 여러 font관련 속성을 지정 Font 속성 - font-family font-family 속성 사용법은 “E { font-family: 글꼴이름, 글꼴이름, … }” 이다. CSS Parser는 앞의 글꼴부터 읽으며 글꼴이 사용자 PC에 없을 경우 다음 글꼴을 적용 generic font명을 뒤에 작성하는 것이 일반적이다. font name에 white-space가 포함된 경우 q..
CSS 선택자 선택자(Selector) HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자(selector)가 존재 일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류. 복합 선택자는 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자로 분류 그 외에도 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재 선택자(Selector) - 일반 선택자 전체 선택자 (Universal Selector) 사용법은 " *{} " 이다. HTML 문서 내 모든 element를 선택 잘 사용되지 않으며 우선 순위가 가장 낮다 일반 선택자의 우선 순위는 전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자 이다. 타입 선택자(Type ..
CSS Cascading Style Sheets의 약자 스타일 사용이유 - 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. - 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. 웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서 웹 브라우저 별 CSS3 지원 CSS 구성 CSS 규칙은 선택자(selector)와 선언(declaration) 두 부분으로 구성 선택자는 규칙이 적용되는 엘리먼트 선언 부분에서는 선택자에 적용될 스타일을 작성 선언은 중괄호로 감싸며, 속성(property)과 값(value)로 이루어짐 속성은 선택자에서 바꾸고 싶은 요소 (color, font, width, height, border, …) 값은 속성에 적용할 값 여러 선택자에 동일한 스타일을 적용할 때, c..