본문 바로가기

분류 전체보기

 (137)
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라는 결과가 나오게 하는것, 그리고 이때 얼마나 시각적인 표현을 해주는지가 중요합니다. ..
내가 생각하는 프론트엔드 개발이란? 프론트엔드 개발이란 사용자와 가장 밀접하게 상호작용 할 수 있는 분야입니다. 사용자는 프론트엔드 개발자가 만든 웹 사이트를 직접 사용하고, 상호작용 하기 때문에, 프론트엔드 개발자는 사용자가 편하게 사용할 수 있는 웹사이트를 만드는것이 중요합니다 그러기 위해서는 프로그래밍 뿐만 아니라, 사용자의 연령, 성향 등을 확인하고 사용자 친화적으로 개발을 하는것이 중요하다고 생각합니다. 그러기 위해서는 좀 더 디테일 하게 접근하는것이 중요하다고 생각합니다. 예를들자면, 똑같은 버튼이 셋 존재한다고 가정할때, 두개의 버튼의 이름은 '제출' 입니다. 그런데 하나의 버튼은 '제출하기' 입니다. 이런부분은 사소하다면 사소할 수 있고, 코드상 문제도 없습니다. 하지만 프론트엔드로서는 중요한 문제라고 생각합니다. 사용자 입..
CSS 레이아웃 1. display - html 요소가 차지하는 공간을 결정하는 CSS 요소입니다. - 각 html 요소는 display가 지정되어 있으며, CSS 에서 새롭게 지정해 줄 수도 있습니다. inline - span 태그 등이 여기에 속합니다. - 내부 콘텐츠의 크기가 영역의 크기이며, 임의로 크기를 지정할 수 없습니다. - margin, padding의 top/bottom 을 지정하지 못합니다. block - div 태그, p 태그가 여기에 속합니다 - 영역의 크기를 width, height로 지정할 수 있습니다. - width를 지정하지 않으면 가로 전체를 차지합니다. - 여러가지 요소가 세로로 배치됩니다. inline-block - input 태그가 여기에 속합니다. - 영역의 크기를 width, he..
CSS - 단위와 값 숫자, 길이, 백분율   - normal과 같은 기본 단위가 존재합니다.   - 절대길이와 상대길이가 존재합니다.      > 절대길이는 모니터에서 보이는 고정값을 길이로 가지는 반면,         상대길이는 기준에 따라 정해지며, 기준이 바뀌면 길이도 바뀌게 됩니다.    1. 절대길이 - px      - 픽셀(px)은 화면에서 보여주는 하나의 장치 픽셀(점)을 의미했지만,         현재는 1/96 in(인치) 을 맞출 수 있도록 하는 장치 픽셀을 의미합니다.       - 절대길이는 사용자 설정을 따르지 않게 되므로 접근성 문제를 유발할 수 있습니다.     2. 상대길이 - em, rem      -  em은 상대적인 단위로, 부모요소의 폰트 사이즈에 비례하여 결정됩니다.      -  r..
CSS Font - text관련 1. text-align .text{ text-align: center; } - 텍스트의 정렬을 설정하는데 사용하는 스타일입니다. - block 요소일때만 적용됩니다. - block 요소이더라도 가로의 길이가 짧은 경우 제대로 적용되지 않습니다. 2. text-indent .text{ text-indent: center; } - 들여쓰기 하는데 사용되는 스타일입니다. - 텍스트의 들여쓰기 간격을 지정해 줄 수 있습니다. 3. text-decoration .text{ text-decoration: underline; } - 텍스트를 꾸미는 데 사용합니다 - 밑줄(underline), 텍스트 위쪽 줄긋기(overline), 점선(dashed) 등의 다양한 옵션을 사용할 수 있습니다. 4. word-break..
CSS FONT - 글자 간격( letter-spacing , word-spacing ) 글자 간격 스타일 - 모든 폰트엔 폰트 제작자가 설정한 글자 간격이 존재한다. - 이를 letter-spacing과 word-spacing 으로 지정해줄 수 있다. letter-spacing .text{ letter-spacing: 5px; } > 글꼴의 기본 간격에 지정하는만큼 글자마다 추가 간격을 더한다. > 음수로 지정하여 글자 간격을 붙일 수 있다. word-spacing .text{ word-spacing: 10px } > 글꼴의 기본 간격에 지정하는만큼 문자마다 추가 간격을 더한다.

티스토리툴바