웹
폰트와 텍스트
폰트 및 텍스트 관련 프로퍼티는 폰트의 크기, 폰트의 지정, 폰트의 스타일, 텍스트 정렬 등을 정의한다. 1. font-size 프로퍼티 텍스트의 크기를 정의한다. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size font-size - CSS: Cascading Style Sheets | MDN The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em, ex, and so forth. developer.mozilla.org default font siz..
Display, Visibility, Opacity
1. Display 프로퍼티 Display 프로퍼티는 Layout 정의에 자주 사용되는 중요한 프로퍼티이다. 키워드 설명 block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다 (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는 inline 특성을 갖는다. 아래는 p 요소에 대한 크롬 브라우저의 디폴트 CSS 이다. p { display: block; ..
박스 모델
모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box 형태란 예상대로 사각형을 의미한다. 이 Box 는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등) 그리고 위치를 근거로 하여 랜더링을 실행한다. 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다. Box 모델을 구성하는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)에 대한 설명을 아래와 같다. 명칭 설명 Content 요소의 텍스트나 이미지 등의 실제 내용이 위..
프로퍼티 값
CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. 1.키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none 이 있다. 2.크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, % 이다. px은 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100% 이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. 2.1 px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 22인치 LCD 모니터의 경우 해상..
Selector
CSS는 HTML 요소(Element)의 style을 정의한다. 그려러면 HTML이 존재해야 하고 또한 style을 적용할 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용되는 것이 셀럭터(Selector)이다. 즉, style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. Hello World! This paragraph is styled with CSS. Embbeding Style로 작성된 CSS. 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼포( , )로 구분한다. h1, p { color: red; } 1. 전체 셀렉터 * : HTML 문서 내의 모든 요소를 선택한다. HTML 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된..
기본 문법
CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)를 정의하여 화면에 어떻게 랜더링하면 되는지 브라우저에게 설명하기 위한 언어이다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없다. 1. Selector (선택자) CSS는 HTML 요소의 style을 정의 하는데 사용된다. 따라서 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야한다. 셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CS..
Layout
웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다. 공간을 분할할 수 있는 태그는 div, sapn, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div 를 사용하여 레이아웃을 구성한다. Tag Description header 헤더를 의미. nav 내비게이션을 의미. aside 사이드에 위치하는 공간을 의미. section 본문의 여러 내용(atticle)을 포함하는 공간을 의미. article 본문의 주내용이 들어가는 공간을 의미. footer 푸터를 의미한다. 이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다. div와 span의 차이는 block레벨 요소와 inline레벨 요소를 ..
사용자와의 커뮤니케이션을 위한 폼 태그
form form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 다양한 입력 양식 태그를 포함할 수 있다. ... form elements (input, checkbox, radio button, submit button...) ... action : URL 대상 / 입력 데이터(form data)가 전송될 URL 지정. method : get, post 방식 / 입력 데이터(form data)가 전달될 방식을 지정. GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라 한다. GET 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다. 예) http://jsonplaceholder.typicode...