html(2)
-
[props] HTML 태그에서 attribute를 사용하듯, JSX 태그에서 커스텀속성 사용하기
props는 properties의 약자다. HTML에서 태그에는 src="", alt="" 같은 속성이 있었다. 지금 React를 사용하는 우리는 HTML 태그를 JavaScript에서 그대로 다루기를 원하고, 그래서 존재하는 것이 JSX 파일이다. 그렇다면 JSX에서도 HTML 태그 내 속성을 이용할 수 있어야 하는데, 방법은 간단하다. 나만의 커스텀 태그가 라고 가정하면, Profile의 정의는 다음과 같다. // Profile.jsx import React from "react"; function Profile (props) { return ( {props.name} {props.tel} ) } export default Profile; 인자로 props라는 키워드를 사용하며, 이는 다음과 같이 앞..
2020.05.19 -
[CSS] inline - internal - external
CSS 적용에는 3가지 방법이 있다. 1. inline 2. internal 3. external inline은 html 태그안에 style=""속성을 부여하는 것으로 가장 우선순위가 높고 그 태그만을 공략한다는 특징이 있지만, 그래서 다른 태그가 반복될 때는 일일이 복붙을 해야 하는 단점이 있다. internal은 위 inline의 단점을 극복하였다. 적용할 스타일을 html 태그에서 종합세트로 준비해놓는다. 하지만 internal은 그 스타일이 해당 .html파일에만 적용된다는 단점이 있다. external은 위 internal의 단점을 극복하였다. 적용할 스타일을 별도의 .css 파일에 묶어서 관리하고, 그것들을 사용할 html파일에서는 태그 안에 를 건다. link의 href 경로를 설정할 때, ..
2020.04.26