본문 바로가기

분류 전체보기

 (109)
CSS transform transform이란 - https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델 (en-US)의 좌표 공간을 변경합니다. developer.mozilla.org - 요소에 회전, 크기조절, 기울이기, 이동효과를 부여할 수 있습니다. - 시각적 서식 모델의 좌표 공간을 변경합니다. - transform을 사용해 요소를 변경하더라도, 원본 요소가 바뀌는것은 아닙니다. 사용 transform: matrix(1,2,3,4,5,6); tra..
프로젝트 준비하기 디자이너와 함께 협업하여 간단한 홈페이지를 만들기로 하였습니다. 디자이너가 피그마에서 만든 디자인을 프론트엔드인 제가 구현하기로 하였고, 아쉽게도 백엔드는 없기 때문에 API 보다는 프론트단에서 해결을 하려고 합니다. 아직 프로젝트 시작은 안했지만, 미리 프로젝트를 만들어놓으려고는 합니다. 1. 프로젝트 환경 정하기 - 개발쪽은 저에게 일임되었기 때문에, 리액트와 타입스크립트를 활용해보려고 합니다. - 레이아웃은 최대한 css와 html로만 해결해보려고는 하지만, bootstrap같은 외부 라이브러리도 필요에 따라 사용할 생각입니다. - 상태관리는 recoil을 사용할 계획입니다. 2. 프로젝트 만들기 프로젝트 이름은 심플하게 '디자이너와 함께하는 프로젝트' 라고 지었습니다. 그래도 진짜 프로젝트 이름은..
CSS 박스모델 - padding, border padding padding: 10px; /* 네 면 모두 적용 */ padding: 10px 5px; /* 세로방향, 가로방향 */ padding: 10px 5px 20px; /* top, 가로방향, bottom */ padding: 2px 3rem 0 auto; /* 위 | 오른쪽 | 아래 | 왼쪽 (위 기준으로 시계방향)*/ - 요소의 네 방향 안쪽 여백 영역을 설정합니다. - 사용방법은 margin과 거의 동일하게 사용합니다. - margin과는 다르게 collapsing이 발생하지 않습니다. border - 요소의 margin과 padding사이 영역, 요소의 테두리입니다. border-style > border의 스타일을 지정해줍니다. > 여러 키워드가 존재하며, 가장 많이 쓰이는것은 soli..
CSS 박스모델 - margin margin - 박스 모델의 가장 바깥부분의 여백을 말합니다. margin: 10px; /* 네 면 모두 적용 */ margin: 10px 5px; /* 세로방향, 가로방향 */ margin: 10px 5px 20px; /* top, 가로방향, bottom */ margin: 2px 3rem 0 auto; /* 위 | 오른쪽 | 아래 | 왼쪽 (위 기준으로 시계방향)*/ - margin으로 한꺼번에 입력할 수 있으며, margin-top, margin-left, margin-right, margin-bottom 등 하나씩 입력할 수도 있습니다. - margin에서 입력하는 값의 개수에 따라 적용되는 범위가 다릅니다. - margin에 %값을 지정했을 경우 부모의 width에 영향받는다. margin co..
CSS 박스모델 박스모델 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model The box model - Learn web development | MDN That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout. developer.mozilla.org 1. content: 콘텐츠가 표시되는 영역 2. padding : 콘텐츠와 테두리(border)사..
CSS background background-color - 요소의 배경 색을 지정할 수 있습니다. - background-image와 같이 사용할 경우, background-image보다 뒤에 렌더링 됩니다. background-image - 요소의 배경 이미지를 지정할 수 있습니다. - 배경으로 삼을 이미지의 url을 입력하여 사용할 수 있습니다. background-repeat - 배경 이미지를 반복에 추가적인 설정을 하는 속성입니다. - background-image가 설정되었을 때, 레이아웃 크기와 이미지 크기가 맞지 않는 경우 같은 이미지를 반복하여 사이즈를 맞추게 되는데, 이를 조절할 수 있습니다. - repeat-x값과 repeat-y값을 통해 가로축과 세로축을 조절할 수 있습니다. repeat-x : 가로축만 이미..
CSS 색상 color - RGB(#+16진수 또는 rgb, rgba)형식으로 색을 표시할 수 있습니다. - #+16진수 코드 > 2자리 16진수로 0부터 255까지를 표시합니다 > 2자리마다 빨간색, 녹색, 파란색을 의미합니다. > ex) rgb(255,128,36) = #FF8024 - rgba > rgb 코드에 투명도를 의미하는 알파값을 추가로 붙인 형식입니다. > 색상에 투명도까지 같이 조절할 수 있습니다. - 키워드(blue, transparent등), HSL 실린더형 좌표계 사용 등 다른 방식으로도 색을 표현할 수 있습니다. opacity - 요소의 불투명도를 설정하는 값입니다. - 기본값은 1입니다. - 자식 요소들에게 상속되지는 않지만, 투명도는 포함된 요소에 모두 적용됩니다. - 알파값 0 (투명) ..
내가 생각하는 프론트엔드 개발과 백엔드 개발의 차이점 프론트엔드 개발은 화면을 만들고 사용자와 상호작용하는 개발입니다. 백엔드 개발은 서버와 DB를 다루는 개발입니다. 이 부분에서 차이가 생긴다고 생각합니다. 백엔드는 API에서 요구로 하는 데이터를 얼마나 신속하고 정확하게 전달해주는지가 관건이며, 이를 위한 데이터 처리작업등을 수행합니다. 여러 데이터들 중에서 어떤 데이터를 구해야 하는지, 이 작업을 얼마나 빠르게 하는지가 관건입니다. 그리고 이렇게 만든 API는 다른 개발자들이 사용하게 됩니다. 반면 프론트엔드는 사용자와의 상호작용이 중점이 됩니다. 사용자 편의성과 시각적 효과는 물론이고, 웹의 비즈니스 로직을 중심으로 설계를 하게 됩니다. A라는 작업을 수행할때 B라는 결과가 나오게 하는것, 그리고 이때 얼마나 시각적인 표현을 해주는지가 중요합니다. ..

티스토리툴바