Skeleton의 세상

CSS에서 사용할 수 있는 단위들은 여러가지가 있는데요 rem, vh, vw, vmin, vmax, ex, ch중 이번 포스팅은 rem만을 알아봅시다. rem rem은 root em의 약자입니다. 먼저 rem을 알아보기전 em을 알아볼까요? remClass 위와 같은 html을 만들었다고 가정해 봅시다. body { font-size: 10px; } .remClass { font-size: 1.5em; } 그다음 CSS를 이렇게 만들었다고 가정한다면 어떤값이 em에 포함이 될까요? 계산을 해보면 다음과 같습니다. body의 font-size인 10px * remClass의 font-size인 1.5 즉 10px * 1.5 = 15px이 적용되는 것이죠. 간단하게 설명을 해보았는데 생각해보면 간단합니다! ..

line-height란 행간을 의미합니다. 행간이란 무엇이냐 행간(leading)은 각 글줄들 사이에 적절한 공간이라 할 수 있습니다. 이러한 행간과 같은 표현을 CSS에서는 line-height 를 사용하여 글줄 사이의 수직 여백을 조정할 수 있습니다. 간단하게 코드부터 살펴볼까요? /* 1. normal 값 사용 */ p { line-height: normal; } /* 2. inherit(상속)값 사용 */ p { line-height: inherit; } /* 3. 퍼센트값 사용 */ p { line-height: 120%; } /* 4. 길이 단위 값(px, em 등) 사용 */ p { line-height: 20px; } p { line-height: 20em; } /* 5. 숫자 값(단위 표..

append() - 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다 appendTo() - 선택된 요소를 해당 요소의 마지막에 추가한다 prepend() - 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다 prependTo() - 선택된 요소를 해당 요소의 첫번째에 추가한다

onKeyPress는 특정한 키를 눌렀을 경우에 호출하는 이벤트 입니다. 키보드의 모든 키가 들어갈 수 있으며 이 키에 대한 부분은 다른 글에서 다루기로 하고 onKeyPress 사용방법을 알아 보도록 합시다 class TestReact extends Component { constructor(props) { super(props); } render() { return { 숫자 : { this.state.number } { if (e.key === 'Enter') { console.log('Enter Click'); } } } /> } } } 위와 같이 사용하시면 됩니다. 엔터를 누르면 console창에 Enter Click 이라고 나오게 됩니다! 값이 나오길 원한다면 e.target.value를 하시면..

onChange는 input 요소 값이 변경될때마다 호출됩니다. 아래의 코드를 보며 살펴봅시다 class TestReact extends Component { constructor(props) { super(props); } render() { return { 숫자 : { this.state.number } { console.log(e); //input의 값이 변경될때마다 호출됩니다. } } /> } } } 위의 onChange의 값은 message의 값을 log로 계속해서 콘솔창에 띄워줄 것입니다.

snake_case는 _ (언더스코어, underscore)를 사용하는 코딩 스타일 문법입니다. 저도 한때는 이 방법을 많이 썻는데요. 개인적은 생각으로는 2개의 단어를 합칠때만 쓰는 것이 좋다고 생각합니다. 두개를 초과하게되면 보기가 편하지 않습니다. 예를 들어 보자면 pen과 apple을 결합해야 할때 pen_apple 이렇게 합쳐집니다. 여기에 pineapple 을 결합합니다. pen_apple_pineapple 이렇게 점점 늘어나게 되죠 물론 변수의 명을 저렇게 길게 적는것은 좋은 코딩 방법이 아니기는 합니다만 2개까지는 보기가 편한데 3개가 되면 불편합니다 어떤것인지 알려주는 글이니 정리를 하자면 위와 같이 저렇게 언더스코어를 이용하여 단어를 구분하는 방법입니다.

camelCase는 코딩하는 스타일 문법입니다. 변수를 지정할때 여러 단어가 합쳐지게 되는경우가 있는데요 이때 각 단어 첫번째 글자를 대문자로 만들어 주는 것입니다. 예를들어 pen 과 apple을 합치게 되면 응~ applepen 으로 생각해 보겠습니다. applepen 이렇게 적게되면 두개의 단어를 구분하기위해 끊어 읽기가 힘들어지죠 하지만 applePen 이렇게 적는다면 대문자로 단어를 구분하기 쉽게하여 이 변수가 대체 뭐하는 변수인지 알기 쉽습니다. 정리를 하자면 2번째의 단어부터 첫 글자를 대문자로 만들어 준다!

state를 사용할때 state의 값을 바꿔줄때 어떻게 해야할까요 이때는 setState(state)를 써주면 됩니다. 간단히 코드를 통해 알아볼까요 class TestReact extends Component { constructor(props) { super(props); this.state = { number: 0, } } render() { return { 숫자 : { this.state.number } { this.setState({ number: this.state.number + 1 }) }}>+1하기 } } } 이렇게 사용하게 됩니다. setState의 사용법 어렵지 않죠? !! 주의사항 state값은 무조건 setState로만 값을 변경,업데이트 해주어야합니다. setState메서드는 파..

1. array : 배열 2. bool : 참, 거짓 3. func : 함수 4. number : 숫자 5. object : 객체 6. string : 문자열 7. symbol : ES6 문법의 심벌 개체 8. node : 렌더링할 수 있는 모든 것 9. element : 리액트 요소 10. instanceOf(className) : 특정 클래스의 인스턴스 11. oneOf(['A', 'B']) : 주어진 배열 요소 중 값 하나

youtu.be/Pah3WH7pFEA 1층 고대 슬라임 100마리 퇴치 혹은 충격량 5000만 누적하기 ☆ 잡은 슬라임 수, 누적 데미지 2층 결계의 숫자보다 높은 숫자의 카드를 획득해 결계를 속이기 ☆ 총 주운 카드 수, 처음 or 마지막 주운 카드 내용, 레드/옐로우/그린/블루 결계를 속인 카드 내용 (카드 내용 예시: 레드 3, 그린 4, 바이올렛) 3층 고대 거북이를 퇴치하여 고대 거북의 알 1000개 모으기 ☆ 시그레타, 플렛타, 리플리에게 말을 건 횟수 (왠만해서 0) 4층 좌우의 몬스터 수를 퇴치하며 균형 점수 300점 누적하기 ☆ 균형 점수가 깎인 횟수 5층 쉼터 6층 슬라임 300마리 퇴치하기. ☆ 킹슬라임 처치 횟수 (보통 3) 7층 루팡으로부터 부상 당한 모험가 리..