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

지난 게시물에서 Flex에 대해 공부했는데, 오늘은 Flexbox들의 정렬 방법인 justify-contet와 align-items에 대해 공부해볼 예정이다. https://babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-display-position-flex 코딩독학) CSS display, position, flex 박스 사이즈를 조절하는 방법에 이어서 박스를 배치하는 방법에는 display와 position 이라는 개념을 알아야 한다. Position 포지션의 속성값에는 아래와 같은 속성들이 있다. static: 디폴트 값이며, 아 babycoder05.tistory.com Flex의 속성값에는 box들을 감싸고 있는 c..

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

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

CSS 문법에서 크기를 설정하는 방식은 크게 3가지가 있다. 1. 고정 단위 - px, cm 등 단위로 입력하는 방법 2. 상대적 단위 - %, em, fr 등으로 입력하는 방법 3. 화면비 - vh, vw 으로 입력하는 방법 고정 단위 px는 우리가 알고 있는 컴퓨터의 픽셀 단위를 의미한다. 예를 들어 height: 200px 이면, 높이를 200픽셀로 설정하겠다는 의미다. px, cm, mm 등은 우리가 실생활에서 익숙하게 쓰는 고정된 단위로 px이 컴퓨터와 호환이 가장 높은 단위기 때문에 주로 cm, mm 보다는 px이 많이 쓰여지게 된다. 상대적 단위 %, em, fr은 모두 부모 요소에 따른 상대적 단위를 의미한다. %는 선택자가 속해있는 부모 요소 중에서의 비율을 의미하고, em도 동일하다. ..

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