본문 바로가기

스타일3

React.js - JSX에서 스타일을 지정하는 방법 / inline Style 사용법 JSX에서 style 속성에 값을 주는 방법 안녕하세요. 고코더 입니다. ● 1. JSX에서는 스타일 시트 즉 CSS를 Inline 형식으로 입력하는 방법을 알아보도록 하겠습니다. 흔히 HTML과 CSS를 배울 때 태그에 style이란 속성 값을 선언하고 안에 디자인할 내용을 채워 넣습니다. ● 2. 예를 들면 이렇습니다. 많이 보던 방식입니다. 1번 라인 : 문자열을 빨간색으로 바꾸는 스타일을, 배경은 검은색을 적용합니다. Inline stylesheet ● 3. 하지만 JSX에서는 인라인 방식의 CSS를 Object 형식으로 만들어서 직접 태그에 넣는 방식의 인라인 스타일 방식이 사용 가능합니다. 이렇게 하면 가독성도 좋고 개발하기도 매우 편리합니다. 그 방법을 알아보도록 하겠습니다. 1번 라인 : .. 2021. 1. 22.
HTML - style 태그를 두번 선언하면 어떻게 될까? style 태그 중복 선언 안녕하세요. 고코더 입니다. ● 1. 많은 분들은 이미 알고 계시겠지만 최근에 코딩하다 알게 된 사실인데요. HTML에 요소에 style 태그를 선언해서 CSS 속성을 입력할 수 있습니다. Q. 그런데 이 style태그를 두 번 입력한다면 브라우저는 어떻게 해석할까? A. 정답은 처음 style 태그만 입력 받는다 ● 2. 한번 실험을 해보겠습니다. 아래처럼 태그를 입력했습니다. ● 3. 그리고 결과는 당연히 빨간색으로 글자가 표현됩니다. ● 4. 그럼 같은 속성만 무시되는 거 아니냐고 하실 텐데요 이번에는 뒤에 스타일 속성에 display를 none으로 해보겠습니다. ● 5. 결과는 역시 빨간색 글자만 나오네요. (앞에 이미지 복붙 아니고 결과 값 캡쳐했습니다.!) 알고 있던.. 2019. 7. 4.
에버노트 - 서식없이, 스타일 없이 붙혀넣기 텍스트만 붙혀넣어 보자 안녕하세요. 고코더 입니다. ● 1.웹에 있는 데이터를 노트로 붙혀넣을때 웹에 있는 스타일 그대로 예를 들면 제 블로그를 붙혀넣으면 속해있는 UL 태그와 LI태그까지 함께 됩니다. ● 2. 당 원래의 요소를 빼고 텍스트 문자 그대로 붙혀넣고 싶다면 단축키 Shift + Ctrl + V로 붙혀넣으시면 됩니다. 그러면 이렇게 태그가 없이 텍스트가 붙혀집니다. 그럼 기존의 서식이 있다면 서식과 어울러져 붙혀넣기가 됩니다. ● 3. 오늘 에버노트를 오래 사용하는 분의 작업을 지도하다가 모르시는 분이 꽤 계셔서 남기게 됐습니다. 마무리 메모장에 붙혀넣어서 서식을 뺀후에 다시 노트에 붙혀넣는 방식은 그만하셔도 됩니다. 2019. 6. 20.