채소의 코딩세상

이 글은 다음의 유튜브 영상을 참고하여 작성하였다. https://www.youtube.com/watch?v=tJieVCgGzhs&t=1s 1. head 위 방법은 코드 순서대로 html코드를 parsing하다가 js파일을 만나면 서버에서 다운받아 실행한 다음에 다시 parsing을 시작한다. 단점: js파일의 크기가 너무 크고 인터넷이 느리다면 웹페이지를 로딩하는데까지 오래걸린다. 2. body 위 방법은 브라우저가 html 코드를 파싱해서 준비가 끝난 후에 마지막에 script를 받아오는 방식이다. 장점: js파일은 받아오기 전에도 페이지의 컨텐츠를 보여줄 수 있다. 단점: 만약 웹사이트가 js에 매우 의존적(의미있는 컨텐츠를 보려면 js가 필요하다면)이라면 의미가 없다. 3. head + async..

리액트에서 함수형 컴포넌트의 함수 이름은 무조건 대문자로 시작한다. 그리고 여기서 jsx코드를 반환하는데 이 jsx는 문법이 html과 거의 비슷하다. 다만 다음의 3가지만 주의하면 된다! 1. 컴포넌트는 jsx를 반환할 때 반드시 하나의 태그만 반환해야 한다. 다수의 태그를 반환하고 싶다면 텅텅 빈 태그를 반환하거나 태그를 이용하면 된다! function App() { return ( Hello! ); } 2. html에서는 class라는 태그를 사용하지만 jsx에서는 className이라는 태그를 사용한다. function App() { return ( Hello! ); } 3. html처럼 작성하지만 js코드도 작성이 가능하다. js코드를 넣기 위해서는 중괄호를 사용해야 한다. function Ap..

div를 너무 남발해서 사용하면 아무 의미없이 막 쓴 태그라는 인식이 강해진다. 이를 막고자 나타난 것이 Semantic tag이다. Semantic tag는 기존의 div태그에 의미를 부여해주기 위해 등장한 태그이다! 아래 이미지와 같이 의미를 부여하여 태그를 사용한다면 태그의 쓰임을 훨씬 수월하게 알아볼 수 있다.

앞서 배운 transformation에서는 마우스를 갖다 대야만 효과를 확인해볼 수 있었다. 마우스를 대지 않고도 애니메이션 효과를 줄 수 있는 방법은 없을까? 물론 있다. 다음의 코드를 보자. 코드를 보면 @keyframes라는 부분이 보인다. 이 부분이 바로 애니메이션효과를 정의하는 부분이다. 자세히 살펴보자. @keyframes CuteSugar { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } 구조가 보이는가? @keyframes 뒤에 애니메이션 이름을 정의하고 밑에 원하는 효과를 적으면 된다. 사용은 다음과 같이 쓰면 된다. img { border: 5px solid black; border-radius: 10%; an..

transformation은 한 요소를 변형시킬 수 있다. 다음의 코드를 보자. 참고로 이미지 파일은 아무거나 사용하면 된다. img라는 요소에 transformation효과를 넣어주었다. 결과를 확인해보자. 보다시피 이미지가 회전하였음을 확인할 수 있다. rotateX(), rotateY(), rotateZ()함수에 의하여 x축 방향으로 30도, y축 방향으로 50도. z축 방향으로 10도로 회전한 것이다. 이처럼 CSS만을 가지고 3D의 영역까지 컨트롤 할 수 있다. rotate말고도 수많은 transformation이 있다. 코드를 다음과 같이 수정해보자. img { border: 5px solid black; border-radius: 10%; transform: scaleX(3); } 그리고 결..

예전에는 애니메이션 효과를 주려면 자바스크립트를 이용했어야 했다. 하지만 요즘에는 CSS만으로도 애니메이션 효과를 주는 것이 가능하다! 다음의 코드를 보자. a { color: wheat; background-color: tomato; text-decoration: none; border-radius: 5px; font-size: 55px; } a:hover { color: tomato; background-color: wheat; } 아직 transition을 쓰지 않은 코드이다. 결과를 확인해보자. 처음에는 위와 같다가 마우스를 갖다대면 아래 이미지로 변한다! 서서히 변하지 않고 갑작스럽게 휙 바뀌는 모습이다. 그럼 이에 애니메이션 효과를 주고 싶다면 어떻게 코드를 짜야 할까? 스타일 시트의 a태그에..

CSS에서도 변수를 사용할 수 있다는 사실을 알고 있는가? 다음의 코드를 보자. Life's not all gloom and despondency. website 여기서 --main-color이 변수다. CSS에서 변수를 쓰는 방법은 --를 먼저 써주고 변수이름을 써줘야 한다. 그리고 빈 공간이 있다면 -로 채워야한다. 따라서 --main-color라고 변수를 써준 것이다. 그리고 이 변수를 사용하려면 var(변수명)을 써주면 된다. 결과를 확인해보자. p태그와 a태그에 스타일이 적용되어 색이 바뀌었음을 확인할 수 있다!

우리가 앞서 배운 Pseudo Selector은 :(콜론)이 1개였다. 이번에는 콜론이 2개인 Pseudo Selector를 알아볼 것이다. 1. ::placeholder 다음의 코드를 보자. placeholder의 색을 yellogreen이 되도록 코드를 짜본 것이다. 결과를 확인해보자. 정말 placeholder의 색이 바뀌었다! 따라서 ::placeholder는 placeholder의 특성만 스타일링 하고 싶을 때 사용함을 알 수 있다. 2. ::selection 코드를 다음과 같이 작성해보자. Life's not all gloom and despondency. ::selection은 어떤 효과를 가져다 줄까? 백문이 불여일견이라고 직접 확인해보자. 다음과 같이 글씨를 마우스로 드래그하여 선택하니깐..

개발자 도구에서 확인할 수 있는 가장 중요한 selector는 state이다. 웹페이지에서 F12를 누르고 개발자 도구를 들어가서 확인해보자. 우측하단의 :hov를 눌러 확인해보면 다음과 같은 창이 뜬다. 위에 뜬 것이 state이다. 하나씩 살펴보자. 1.active 다음의 코드를 보자. 그리고 결과를 확인해보자. 박스를 마우스로 눌러보면 색이 바뀌는 것을 알 수 있다. active는 마우스를 클릭했을 때 적용됨을 알 수 있다. 2.hover 스타일 코드를 다음과 같이 살짝 바꿔보자. input:hover { background-color: tomato; } active대신 hover을 써줬다. 그리고 나서 결과를 확인해보자. 박스 위에 마우스 커서를 갖다대면 색이 바뀌는 것을 알 수 있다. hover..

html을 다루다 보면 부모 태그 안에서 자식 태그를 찾아 스타일을 적용해야하는 일이 있을 수 있다. 다음의 코드를 보자. hello Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi et sequi ipsam odio dolorem. inside 그리고 결과를 확인해보면 div안에 있는 모든 span에 스타일이 적용되었음을 확인할 수 있다. 우리가 코드에서 주목해야할 부분은 'div span'인데 이는 div밑에 있는 모든 span에 스타일을 적용시켜주겠다는 의미가 된다. div 바로 밑에 있는 span에만 스타일을 적용하는 방법도 있다. 위 코드에서 'div span'부분을 다음과 같이 수정해보자. div > span { te..