3일만에 끝내는 HTML, CSS, JS 기초

CSS 텍스트와 폰트 프로퍼티 머리글 1 (가운데) 머리글 2 (왼쪽) 머리글 3 (오른쪽) 이 태그는 일반적인 문단 태그인데 텍스트의 색상이 회색이 되었습니다. 페이지의 기본 텍스트 색상은 body 태그의 selector 에 정의된 색상을 갖게 됩니다. 여기서 a 태그의 링크는 밑줄이 없습니다. example.com 머리글 1 (가운데) 머리글 2 (왼쪽) 머리글 3 (오른쪽) 이 태그는 일반적인 문단 태그인데 텍스트의 색상이 회색이 되었습니다. 페이지의 기본 텍스트 색상은 body 태그의 selector 에 정의된 색상을 갖게 됩니다. 여기서 a 태그의 링크는 밑줄이 없습니다. example.com CSS 글꼴 프로퍼티 (CSS font property) 는 활자체 (font family), 굵기 (..

CSS 마진, 패딩 CSS 마진 프로퍼티 (margin property) 는 테두리의 바깥쪽 여백의 크기를 설정 합니다. 마진은 완전히 투명해서 배경 색상을 갖을 수는 없습니다. CSS 로 태그의 각 면 (위, 오른, 바닥, 왼쪽) 의 마진 (margin) 을 제어할 수 있습니다. 어떤 태그의 각 면의 마진을 한 줄로 표현할 수가 있는데, 4가지 값을 갖는 경우에는, 앞에서부터 위, 오른, 아래, 왼쪽 순으로 마진 값을 갖습니다. 아래와 같이 갯수에 따라 가리키는 면이 다릅니다. CSS 패딩 프로퍼티 (padding property) 는 마진과 달리, 태그의 테두리 속에 (즉, 태그의 내용과 테두리 사이에) 흰 색의 공간을 추가합니다. 그런데 마진 (margin) 과 달리 패딩 (padding) 은 태그..

CSS 테두리 프로퍼티 CSS 테두리 프로퍼티 (border property) 는 태그의 테두리 색상, 폭, 및 스타일을 지정합니다. 테두리-스타일 프로퍼티 (border-style property) 로는 테두리의 종류를 지정합니다. border-style: dotted; //도트 ...... border-style: dashed; //데시 ------ border-style: solid; //실선 ______ border-style: double; //이중선 ====== border-style: inset; //들어간 3차원 border-style: outset; //돌출된 3차원 border-style: none; //없음 border-style: hidden; //숨겨짐 일단 테두리-스타일 프로퍼티..

CSS 배경 색상 및 배경 이미지 배경 색상 속성으로, 태그의 배경 색상을 지정합니다. CSS 에서 색상은 아래의 방법으로 지정합니다. 색상의 이름으로 지정하는 방법 "blue" 16진수 값으로 지정하는 방법 "#0000ff" RGB 값 (빛의 3원색) "rgb(0,0,255)" 배경-이미지 (background-image) 속성은 태그에 배경으로 사용될 이미지를 지정합니다. 기본 값으로 배경-이미지 속성은 수평방향, 수직방향으로 반복됩니다. 어떤 이미지는 수평 또는 수직의 한쪽 방향으로만 반복되어야 할 때가 있습니다. 이미지를 수평으로만 반복시키고 수직으로는 반복하지 않게 하려면, background-repeat: repeat-x; 속성을 추가합니다. 배경 이미지를 딱 한번만 나오게 하려면 backgr..

CSS 구문 및 선택자 CSS 규칙은, 선택자(Selector) 와 선언부로 구성됩니다. CSS 세상에 들어오신 것을 환영합니다. 이 문단에 CSS 스타일을 입혔습니다. 여기서 CSS 선택자(selector) [예에서는 p] 는 스타일을 지정하고 싶은 HTML 태그입니다. 선언부 [위 예에서는 { } 괄호 사이의 내용] 는 세미콜론 [;] 으로 구분하여 하나 이상의 선언 내용으로 구성됩니다. 각 선언 내용들은 콜론[:] 을 사이에 두고 CSS 속성 이름과 속성 값을 쌍으로 가지고 있습니다. 그리고 CSS 선언 내용은 항상 세미콜론으로 끝나고 선언부 전체는 { } 괄호로 둘러 싸야 합니다. CSS 선택자 들은 결국 HTML 태그를 찾는 역할을 하는데, 태그의 이름이나, id, class 이름, 속성 등을 ..