Dani's Dev TokTok

1. 들어가며Sass 를 이용해서 React 프로젝트 스타일링 하기2. SassSass는 css 전처리기 중 하나다.재활용성, 코드의 가독성을 높여주고 유지보수를 더 쉽게 해준다.확장자는 .scss 와 .sass 두개가 있는데, scss 는 css 와 거의 비슷한 문법으로 중괄호{} 와 세미콜론 (;)을 사용한다.그래서 이 포스팅에서는 좀 더 사용하기 쉬운 scss 문법을 이용하고자 한다.scss에 대한 자세한 문법은 이전 포스팅인 https://daddda3232.tistory.com/18 를 참고하거나  reference에 있는 https://www.heropy.dev/p/Y7OrPe 여기를 참고하길 바람 SCSS를 이용해서 간단한 스타일링 하기 이전에는 단순히 css 만 사용해서 일괄적으로 스타일링..

1. 서론CSS display 속성에 대해 알아보기CSS flex 에 대해 알아보기CSS Animation 에 대해 알아보기2. 본론CSS displayCSS 의 display 속성에 대해 알아보았다.display 속성은 브라우저에서 요소를 화면에 어떻게 보이게 할지 결정해주는 속성이다.수업에서는 block, inline, inline-block, flex 에 대해 배웠다(사실 블록과 인라인은 저번주에 배웠는데 플렉스와 같이 묶어서 블로깅했다!)grid에 대해서는 이번이 아니라 다음에 배운다고 하셨다. inline과 blockhtml 태그는 기본적으로 inline 혹은 block 둘 중 하나를 기본값으로 갖는다. 1) inline내용(content)만큼만 공간이 할당된다.content만큼 내용이 할당되기..

See the Pen flex-shrink by dain (@dadain) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 flex-shrink는 자식 요소에 주는 속성이다.플렉스 아이템의 축소여부를 결정한다.기본값은 1이며, 1을 주면 축소된 상태가 되고,0을 주면 축소가 해제되며 원래의 너비를 유지한다.예시에 있는 박스의 부모 컨테이너는 자식 아이템 요소들의 너비를 합친것보다 작다.그러므로 flex-shrink 에 의해 축소되어 있다.아래 코드와 같이 마우스오버를 했을 때 0을 주면 축소가 해제되며 원래의 너비를 유지해서 옆의 요소보다 커지는 효과를 줄 수 있다..items:hover { flex-shrink: 0;}

1. 서론CSS 속성에 대해 알아보기CSS Position 에 대해 알아보기CSS Transform에 대해 알아보기2. 본론1) 글자 관련 css 속성웹 페이지에서 글꼴을 바꾸거나 글씨 크기나 색상을 바꿀 때 사용하는 css 속성을 알아보자속성용도 font-family 글자체(글꼴) 변경 font-size 글자크기 변경 font-weight 글자 두께(굵기) 변경 font-style 글자 스타일 변경 text-align 글자 정렬 변경 line-height 줖 높이 지정 text-decoration 글자에 라인스타일 지정 color 글자색 지정  font-family웹페이지에서 글꼴(글자채)를 변경해주는 속성이다.웹폰트를 변경하기 위해선 컴퓨터에 저장되어 있는 기본 글꼴을 사용하거나 외부에서 글꼴을 다운..

1. 서론CSS 선택자에 대해 알아보기2. 본론CSS 선택자(Selector)CSS 선택자는 HTML 요소의 스타일을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에게 알려주는 CSS 규칙이다.선택자 {속성명 : 속성값;} 형태로 작성한다.p { color : red; font-size : 10px;}위의 코드에서 p는 선택자(selector), color와 font-size는 속성명(property), red와 10px은 속성값(value)이다. CSS 선택자의 종류선택자를 이용해서 요소를 선택하는 방법에는 여러가지가 있다.선택자의 종류에 대해 알아보자종류사용법전체 선택자 *유형 선택자 요소명아이디 선택자 #아이디명클래스 선택자 .클래스명하위 선택자 띄어쓰기직계자식 선택자 >인접형..

1. 서론form 태그와 form 요소에 대해 알아보기input 태그, Input 태그의 type에 따른 기능 알아보기table 태그에 알아보고 만들어보기시맨틱 태그에 대해 알아보기CSS 에 대해 알아보기2. 본론Form 태그form 태그는 사용자로부터 입력받는 요소들을 감싸는 태그다.흔히 우리가 포탈사이트에서 사용하는 검색창이나 로그인창, 그리고 설문조사 등에서 form를 사용한다. form 태그는 태그 내에서 input 태그를 통해 사용자가 입력한 데이터를 묶어서 서버로 전송하는 역할을 한다.사용되는 속성은 action 과 method 가 있는데 서버에 전달할 방식을 지정해준다.action : 사용자가 폼에 입력한 값을 서버에 전달할 주소method : 사용자가 폼에 입력한 값을 서버에 전달할 방법(..

1. 서론HTML 에 대해 배우기HTML 태그에 대해 배우고 사용하기2. 본론HTML 이란?HTML은 Hypertext Markup Language 의 줄임말이다.웹 페이지를 구성하는 가장 기초적인 언어라고 할 수 있다.Hypertext : 참조(하이퍼링크)를 통해 사용자가 한 페이지에서 다른 페이지로 이동할 수 있게 하는것        웹페이지를 사용하다가 어느 문자를 클릭하면 다른 페이지로 이동하게 되는데 이 역할을 하는 텍스트를 하이퍼텍스트라고 한다.Makeup : 문서나 데이터의 구조를 명기하는 언어      문서의 구조를 표시해주는 역할을 한다. HTML 구조어느 웹사이트에서나 F12를 누르면 개발자 도구라는 것이 나온다.개발자 도구를 열면 아래와 같은 화면이 나온다.안에 들어있는 저 단어는 무..