Style3 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. CSS - li 점 대신 다른 모양으로 / list-style-type , list-style-image li 디자인 속성 변경 안녕하세요. 고코더 입니다. ● 1. li 특별한 CSS 속성 없이 태그를 작성하면 점 이 기본으로 앞에 붙습니다. ● 2. 이 li에 기본 모양은 변경이 가능 합니다. list-style-type : li 앞에 모양을 변경 가능 list-style-image : li 앞에 모양을 이미지로 변경 ● 3. 그리고 속성 옵션은 아래와 같습니다. disc : 검은 원 circle : 공백 원 square 사각형 decimal : 십진수 lower-alpha : 알파벳 소문자 lower-roman : 로마자 소문자 upper-alpha : 알파벳 대문자 upper-roman : 로마자 대문자 none : 표시 안함 initial : 기본값 cjk-ideographic : 한자식 수 (一,.. 2019. 6. 21. 이전 1 다음
