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

웹페이지를 만들 때 폰트는 웹 디자인에 있어서 중요한 한 부분이다. 인터넷이 발전하면서 많은 디자이너 분들이 웹폰트를 만들어오셨고, 우리는 그 중 무료로 배포된 웹폰트를 가져다 써보려고 한다. 물론, 유료 웹폰트도 구매하면 사용가능하지만... 가난한 학생은 무료로 배포된 웹폰트를 감사한 마음으로 사용하렵니다... 무료 웹폰트를 구글에 검색하면 수많은 페이지들이 나온다. 나는 그 중에서도 가장 널리 쓰이고 유명한 구글 웹폰트를 사용해볼 것이다. 구글 웹폰트는 개인 작업용 뿐만 아니라 상업용으로도 사용이 가능하고 영어와 한글 둘 다 있다는 장점이 있다. 저작권에서 자유로울 수 있다는 점! 감사합니다 구글~~~ https://fonts.google.com/?subset=korean Google Fonts Ma..

CSS 공부를 하면서 아마 가장 재미있었던 부분이 transition과 transform을 공부했을 때 였던 것 같다. 시각적으로 가장 눈에 띄고 재밌는 효과를 줄 수 있는 부분이 많아서 였던 것 같다. transform 은 대상자의 모양을 변형시키는 속성이고, transition은 그 대상자의 모양이 변형되는 지속시간을 설정하는 속성이다. Transform의 속성들과 예제들 transform의 속성 transform의 속성에는 아래와 같은 것들이 있다. translate : translate은 한국어로 하면 '번역하다' 라는 뜻이지만, 기본 의미 원형에는 '옮기다'라는 뜻이 있다. 그래서 말 그대로 옮기는 속성이다. scale : 대상의 크기를 배수로 확대/축소하는 속성이다. rotate : 대상을 회..

지난 게시물에서 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도 동일하다. ..