개발새발 로그

CSS Flex -그림과 같이 flex를 적용하면 왼쪽에서 오른쪽으로 쌓아진다. -flex-direction은 row가 기본값이다 (안 적어도 row로 적용됨) -flex-direction : column -flex-direction : row-reverse -flex-direction : column-reverse flex-wrap -뷰 포트가 아이템들의 폭보다 줄어들었을 때 어떻게 할건지 정하는 것이다. -원래는 아무것도 적용하지 않으면 잘려서 보이게 된다. flex-wrap : wrap flex-wrap: wrap-reverse : 거꾸로도 가능 justify-content 지금 현재 축 방향으로 정렬해주는 것이다. 즉 축을 기준으로 왼쪽 오른쪽 가운데 등으로 정렬한다. justify-content..

CSS의 Box Model 영역에는 content , padding, border, margind 이 있다. 그리고 box-sizing 속성을 통해 width, height 프로퍼티의 대상 영역을 변경할 수 있다. box-sizing 프로퍼티의 기본값은 content-box이다. 이는 width, height 프로퍼티의 대상 영역이 content 영역을 의미한다. box-sizing 프로퍼티의 값을 border-box로 지정하면 마진을 제외한 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 한다. box-sizing -Content box Content box는 box-sizing의 기본값으로 우리가 따로 설정하지 않으..

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

폰트 및 텍스트 관련 프로퍼티는 폰트의 크기, 폰트의 지정, 폰트의 스타일, 텍스트 정렬 등을 정의한다. 1. font-size 프로퍼티 .font-size-40 { font-size: 40px; } .font-size-2x { font-size: 2.0em; } .font-size-150ps { font-size: 150%; } .font-size-large { font-size: large; } 2. font-family 프로퍼티 폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않는다. https://developer.mozilla.org/en-US/docs/Web/CSS/font-family font-family - CSS: Cascading Style Sheets | MDN ..

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 요소)는 아래와 같은 특징..

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..