개발새발 로그

1. position 프로퍼티☝ position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다. 1.1 static (기본위치) static은 position 프로퍼티의 기본값으로 position 프로퍼티를 지정하지 않았을 때와 같다. 기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다. 기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다. 좌표 프로퍼티(top, bottom, left, right)를 같이 사용할 수 없으며 사용할 경우에는 무시된다. .stati..

1. background-image 프로퍼티 요소에 배경 이미지를 지정한다. body { background-image: url("http://poiemaweb.com/img/bg/dot.png"); } 2. background-repeat 프로퍼티 배경 이미지의 반복을 지정한다. 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. ->background-repeat 프로퍼티의 기본값이 repeat이기 때문 ->반복 출력을 멈추고 싶은 경우, background-repeat 프로퍼티값에 no-repeat를 설정한다. x축으로만 배경 이미지를 반복할 경우, background-repeat 프로퍼티값에 repeat-x, y축으로만 배경 이미지를 반복할 경우, repe..

display 프로퍼티 display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다 (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는 inline 특성을 갖는다. block 레벨 요소 block 특성을 가지는 요소(block 레벨 요소 또는 block 요소)는 아래와 같은 특징..

모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다. Box 모델을 구성하는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)에 대한 설명은 아래와 같다. Content 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다. Padding 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(tr..

CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다. px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다. 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 ..

style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다. h1, h2 { color: red; } 전체 셀렉터 ( * ) HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다) * { color: red; } 태그 셀렉터 지정된 태그명을 가지는 요소를 선택한다. p { color: red; } ID 셀렉터 id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다. #p1 { color: red; } 클래스 셀렉터 class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. c..

CSS는 HTML 요소의 style(design, layout etc)을 정의하는데 사용된다. 이를 위해서 선행되어야하는 것은 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 한다. 셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다. Link HTML에서 외부에 있는 CSS 파일을 로드하는 방식이다. 가장 일반적으로 사용된다. Embedding style HTML 내부에 CSS를 포함시키는 방식이다. Inline style HTML요소의 style 프로퍼티에 CSS를 기술하는 방식이다. Hello World Reset CSS 사용하기 Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용한다. Eric Meyer’s reset n..