퍼블리싱 & 프론트엔드47 리액트(React) 공부 시작! 스마일라식 후 시력이 어느정도 안정되어 백수생활동안 계획했던 목표 중 하나인 리액트(React) 공부를 시작해보려고 한다. 먼저 코드잇이라는 사이트에서 온라인 강의를 듣고, 추가로 인터넷 서치와 리액트 관련 서적으로 독학을 하려고 한다. 공부하여 새롭게 알게 되는 기본 개념과 꿀팁들을 언제든 찾아볼 수 있도록 블로그에 정리할 예정이다. 리액트야, 3개월 동안 나랑 재미나게 놀아보자! 오늘부터 START~* 리액트(React)는 무엇인가? 리액트(React)는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발한 자바스크립트 라이브러리 중 하나이며, 사용자 인터페이스를 만들기 위해 사용된다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용되는 리액트는 '컴포넌트'라는 개념에 집중.. 2021. 10. 18. 부모 속성을 상속하는 CSS 태그 모음 자식 태그에 특별한 속성이 지정되어 있지 않으면 자동으로 부모 속성을 물려받아 스타일링되는 태그들이 있다. color font-family font-size font-weight line-height list-style text-align text-indent text-decoration letter-spacing opacity visibility 보통 글자, 정렬과 관련된 css 태그들이 그대로 상속되는 듯 하다. 그리고 예외적으로 태그에는 color 속성이 상속되지 않는데, 상속되지 않는 속성을 강제로 상속시킬 때는 해당 css에 inherit 라는 속성값을 사용하면 된다. 더해서, 자식의 자식 요소에는 스타일링이 적용되지 않는다는 것도 알아두자. 구글 사이트로 이동하고 싶다면 여기를 클릭하세요! 2021. 8. 17. CSS 우선 적용 순서 같은 요소에 다른 CSS 속성이 중복 설정되어 있다면 어떤 것을 우선순위로 적용될까? 아래와 같은 순서로 우선순위가 적용된다. 속성값 뒤에 !important 가 붙어있는 속성 인라인 스타일(html 파일에서 스타일 직접 지정)로 적용되어 있는 속성 선택자에 id가 쓰인 속성 class, attribute, pseudo-class로 지정한 속성 태그 이름으로 지정한 속성 부모 요소에 의해 상속된 속성 이때 만약 똑같은 선택자가 아래에 반복해서 나오면 이전의 것을 덮어쓰게 된다. 이전의 것을 덮어쓰지 않으려면 !important를 사용해 주어야 한다. 안녕? 친구하지 않을래? 2021. 8. 17. CSS 선택자 모음 예전에 한번 간단하게 정리했던 적이 있는 CSS 선택자... 그 당시에 빠뜨린 것도 있고 해서 이번 기회에 더 자세히 정리해 보았다. 태그 이름 태그 이름은 그냥 이름만 기재해서 바로 스타일링이 가능하다. 해이나 월드 안녕, 친구하지 않을래? 클래스 & 아이디 클래스는 마침표(.)로 시작, 아이디는 샾(#)으로 시작한다. 해이나 월드 안녕, 친구하지 않을래? 자식 & 직속 자식 자식과 직속 자식은 css로 스타일링 해줄때는 아래와 같이 표기한다. 아래 예제에서 자식에 스타일링을 한 경우 해당 박스 안에 태그를 가지고 있는 모든 요소에 적용되는 반면, 직속 자식에 스타일링을 한 경우 다른 태그로 한번 더 감싸진 태그는 스타일링이 적용되지 않는다. 나는 box의 직속 자식입니다. 나는 box의 직속 자식은 .. 2021. 8. 16. 배경이미지(background) 관련 CSS 모음 오늘은 광복절 대체휴무일이다. (출근 안 하는 날+_+) 그래서 새벽에 CSS를 정리하는 블로그 포스팅을 하고 있다 (후후훗-_-v) 이번 포스팅에서는 배경이미지(background)와 관련된 CSS 속성을 알아보도록 하겠다. background-color 배경색으로 색상을 지정하고 싶을 때 사용한다. HEX, RGB, 색 이름 직접 지정 모두 가능하다. 만약 배경 이미지와 중복으로 사용한다면, 이미지의 투명한 부분이 있을 경우에 그 부분을 통해 해당 색상을 확인할 수 있다. background-image 배경에 이미지(사진)를 넣고 싶을 때 사용한다. 아래와 같이 경로를 사용하여 지정하면 된다. 미리 준비한 배경이미지를 넣어 보았는데 div의 너비와 폭이 100px로 지정되어 있어 배경이미지가 잘려 보.. 2021. 8. 16. 박스 사이즈를 결정하는 box-sizing : content-box | border-box; 오늘은 박스 사이즈를 결정하는 box-sizing 태그에 대해서 알아보려고 한다. 모르고 있어도 치명적인 문제는 발생하지 않지만, 알고 있다면 분명 꿀팁이 될 것이다. 문제 인식 아래와 같이 Hello world! 라고 적혀있는 div 박스 하나를 만들었다. 그리고 해당 박스의 사이즈를 가로 200px, 세로 100px로 설정하고 3px 두께의 테두리와 20px 내부 여백도 주었다. 그리고 나서 결과를 확인해보면, 보여지는 박스의 사이즈가 내부 여백(padding), 테두리(border) 사이즈까지 더해져서 초기에 설정해준 것보다 커져 있다. - 가로값 : width 200px + (padding 20 * 2) + (border 3 * 2) = 200 + 40 + 6 = 총 246px - 세로값 : he.. 2021. 8. 7. margin: 0 auto; 가운데 정렬이 되지 않을 때 가운데 정렬을 하는 방법은 여러가지가 있는데 나는 그 중에서도 text-align:center; 와 margin: 0 auto;를 가장 많이 사용하는 편이다. 그런데 간혹 margin:0 auto;를 적용해도 가운데 정렬이 되지 않을 때가 있다. 이러한 상황에서 체크해 볼 수 있는 세가지 방법에 대해서 소개하도록 하겠다. margin: 0 auto; 가운데 정렬이 되지 않을 때 해결방법 1. 가장 첫번째로 해야 할 일은 선언이 제대로 되었는지 확인해보아야 한다. 2. auto는 자동으로 사이즈를 설정해주는 것이다. 그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능하다. margin: 0 auto; 가 반응하지 않을 때에는 해당 영역의 가로 사이즈가 제대로 설정되어 있는지 확인해보고, 만약.. 2021. 8. 2. CSS로 색상 표현하기(HEX, RGB, 색 이름) html 파일에 사용된 텍스트나 div 배경 등에 색상을 사용할 때는 CSS를 이용하면 된다. CSS에서 색상을 표현하는 방법 세가지를 포스팅으로 정리하려고 한다. 색 이름 사용하기 우리가 사용하는 색상 이름을 바로 입력하여 사용이 가능하다. p { color: red; background-color: white; } CSS에서는 140가지의 색상을 이름으로 지원한다고 한다. 아래 url을 클릭하면 지원하는 색상표를 확인할 수 있다. 그러나 이 방법은 black, white가 아닌 이상 색상을 세밀하게 원하는 대로 조절할 수 없어서 디자이너들은 거의 사용하지 않는다. 이를 보완하여 더 다채로운 색상을 표현하는 방법은 HEX, RGB를 사용하는 것이다. https://www.w3schools.com/css.. 2021. 7. 22. 클래스(class)와 아이디(id)의 차이점 html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능하다. 클래스(class)와 아이디(id)는 얼핏 보기엔 똑같은 기능을 하는 것 같지만, 알고 보면 이 둘은 큰 차이점을 가지고 있다. 이름을 불러오는 방식 클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다. 김영희 중복 사용 여부 클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 김영희 박철수 .. 2021. 7. 15. <b>와 <strong>, <i>와 <em>의 차이 태그와 태그는 웹페이지에서 확인할 때는 똑같이 볼드체로 보인다. 태그와 태그도 마찬가지로 동일하게 이탤릭체로 표기된다. 하지만 이 태그들은 시각적으로는 똑같아 보일지 몰라도, 알고 보면 각각 다른 의미를 가지고 있다. 와 차이점 태그는 bold의 약자로 특정 텍스트에 주의를 끌기 위해 글씨가 굵게 표시된다. 단순 시각적 요소로 사용되며, 주변의 컨텐츠와 비교했을 때 더 중요하다는 의미는 아니다. 하지만 와 달리 태그는 '매우 중요, 긴급, 경고'의 의미를 가지고 있다. 와 의 차이점 태그는 italic의 약자로 기울임꼴로 표시된다. 기술 용어, 외국어 구절, 등장인물의 생각 등 특정 이유로 주위와 구분을 해야 할 때 사용한다. 은 주위 텍스트와 비교했을 때 해당 부분을 강조하고 싶은 경우에 사용한다. 단.. 2021. 7. 8. 이전 1 2 3 4 5 다음
