맨 땅에 프론트엔드 개발자 되기

박스 사이즈를 조절하는 방법에 이어서 박스를 배치하는 방법에는 display와 position 이라는 개념을 알아야 한다. Position 포지션의 속성값에는 아래와 같은 속성들이 있다. static: 디폴트 값이며, 아무런 포지션 값을 변경하지 않은 상태. absolute: 절대 값을 의미하며, 부모의 위치값이 지정되지 않았을 때는 웹페이지를 기준으로 위치값을 잡고, 부모의 위치값이 조정되었을 경우에는 부모 요소가 기준이 된다. fixed: 고정되었다는 뜻이며, 스크롤을 내려도 위치가 변하지 않는다. 웹페이지를 기준으로 위치값을 잡는다. relative: 상대 값을 의미하며, 부모 요소 혹은 부모 요소가 없을 경우 인접한 요소를 기준으로 위치값을 잡는다. sticky: 지정된 오프셋 값에 스크롤이 움직..

CSS 박스 모델 (Box Model) 웹 페이지를 만들 때 레이아웃을 구성하기 위해서는 박스 모델에 대해서 알아야 한다. 각각의 태그들은 태그 자신이 화면에서 차지하는 영역을 가지고 있다. 그 영역은 아래 그림과 같이 구성된다. border: 태그(컨텐츠)를 둘러싸고 있는 선. padding: 컨텐츠와 border 사이의 간격. margin: border를 기준으로 컨텐츠와 다른 컨텐츠의 사이의 간격. 이렇게 border, padding, margin 세 개의 개념만 제대로 가지고 있으면 박스모델은 전혀 어렵지 않다. 컨텐츠를 둘러싸고 있는 각각의 공간을 조정해서 크기를 조절하고 이걸을 제대로 배치할 수 있으면 레이아웃 구성은 끝이기 때문이다. 배치하는 방법은 다음에 공부할 예정이고, 먼저 박스 크기를..

CSS 문법에서 컬러는 입력하는 방법은 4가지가 있다. 1. Color Name 2. RGB 3. HEX 4. HSL Color Name 제일 쉽고 직관적인 방법으로, 컬러 이름으로 지정하는 방법이다. 그러나 세상의 모든 색을 이름으로 불러 지정하기 어렵듯이 CSS 기본 문법에서 제공하는 컬러 이름은 가짓수가 한정적이다. 어떤 컬러 이름이 제공되고 있는지 궁금하다면 아래 링크 클릭! https://www.w3schools.com/colors/colors_names.asp HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering po..