본문 바로가기

분류 전체보기

 (109)
내가 생각하는 프론트엔드 개발이란? 프론트엔드 개발이란 사용자와 가장 밀접하게 상호작용 할 수 있는 분야입니다. 사용자는 프론트엔드 개발자가 만든 웹 사이트를 직접 사용하고, 상호작용 하기 때문에, 프론트엔드 개발자는 사용자가 편하게 사용할 수 있는 웹사이트를 만드는것이 중요합니다 그러기 위해서는 프로그래밍 뿐만 아니라, 사용자의 연령, 성향 등을 확인하고 사용자 친화적으로 개발을 하는것이 중요하다고 생각합니다. 그러기 위해서는 좀 더 디테일 하게 접근하는것이 중요하다고 생각합니다. 예를들자면, 똑같은 버튼이 셋 존재한다고 가정할때, 두개의 버튼의 이름은 '제출' 입니다. 그런데 하나의 버튼은 '제출하기' 입니다. 이런부분은 사소하다면 사소할 수 있고, 코드상 문제도 없습니다. 하지만 프론트엔드로서는 중요한 문제라고 생각합니다. 사용자 입..
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 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 } > 글꼴의 기본 간격에 지정하는만큼 문자마다 추가 간격을 더한다.
CSS Font https://developer.mozilla.org/ko/docs/Web/CSS/font font - CSS: Cascading Style Sheets | MDN font CSS 속성은 font-style (en-US), font-variant (en-US), font-weight, font-size, line-height (en-US), font-family (en-US)의 단축 속성입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다. developer.mozilla.org 1. font-size .text{ font-size: 12px; } - 글자의 크기를 조정하는 스타일입니다. - 보통 px를 쓰며, rem이나 em 을 사용하기도 하며, %로 비율로 지정해주기도 합니다. - 16px 가 ..
CSS 우선순위 1. 선언된 곳, 코드 위치 - 브라우저가 읽을 때 나중에 읽는 스타일이 우선순위가 높다 - 윗줄의 코드보다 아랫줄의 코드의 우선순위가 높다. 2. 명시도 - 적용범위가 적을수록 우선순위가 높다 Ex) class보다 id의 명시도가 높기때문에 id selector 가 class selector보다 우선순위가 높다 inherited 가장 최우선으로 적용한다. > 반드시 써야하는 상황이 아니면 사용하지 않는것이 좋다.
CSS 상속 제어 CSS 상속 - 부모태그에 적용된 CSS 는 자식태그에 동일한 CSS가 존재하지 않는 한 상속된다. initial .parent{ color : blue; font-size: 7px; } .child{ color: initial; font-size: initial; } > 부모 태그의 CSS 스타일을 상속받지 않게 하는 속성 .child{ all : initial; } > 부모로부터 오는 css 스타일이 많다면 all을 사용하여 한번에 처리할 수 있다. inherit /* CSS */ div{ border: 1px solid silver; margin: 2px; } .child1{ color: red; } .parent1, child2{ color: blue; } .parent2 *{ color:inhe..
CSS 선택자 - 전체 선택자( * ) 전체 선택자 *{ color: red; } > *를 사용하여 전체 태그에 대해 사용할 수 있습니다. > 가급적 CSS 맨 윗줄에 적용해야합니다. > 다른 태그 앞에 기본적으로 * 가 붙어있습니다. span + * { color: green; } > 전체 선택자를 인접형제 선택자( + ), 또는 선택자 결합과 함께 사용하여 활용할 수 있습니다.

티스토리툴바