C-log

이번 포스팅에서는 inline block에 관한 포스팅을 할 것이다. block으로 이루어진 태그와 inline으로 이루어져 있는 태그가 있는데 어떤 태그들이 있는지 한번 살펴 보겠다. DOCTYPE html> Document Hello World 개발 공부는 즐겁습니다. 해당 html을 작성하면 h1태그는 자동으로 줄 바꿈이 된다. 아무리 '개발 공부는 즐겁습니다.'를 내부에서 줄 바꿈이 되어 있어도 웹브라우저에선 한 줄로 표현이 된다. 이 코드를 살짝 변형을 해보면 아래와 같다. DOCTYPE html> Document Hello World 개발 공부는 즐겁습니다. 위와 같이 a태그를 삽입해도 줄은 여전히 바뀌지 않는다. 즉, a태그를 h1태그와 동일한 속성을 가진 태그가 아니라는 것을 알 수 있다...

bracket은 개발환경 IDE 중하나로 Adobe에서 개발한 IDE이다. braket의 강의를 중점 적으로 다룰 것은 아니지만 필요에 따라 사용할 수도 있을 것 같아 이렇게 포스팅을한다. 강의 내에서 중요한 개념 하나를 다루는데 그것은 바로 Emmet인데 css코드를 작성할 때 유용하게 사용되는 부가 기능이다. Emmet은 Emmet만의 특정 문법과 사용 방법이 있다. 단축 명령와 같은 개념으로 알고 있으면 좋을 듯 하다. 단축 명령어를 사용함으로써 개발시간을 조금 더 줄여 줄 수 있기에 많이들 사용하고 추천하는 듯 한다. 아래 링크는 Emmet의 문법을 모아 놓은 포스팅이다. 한번 참고로 봐도 좋을 듯 하다. 🏷️ 에멧(Emmet) 문법 모음 - 한눈에 정리 Emmet (에밋) 에밋은 HTML, XM..

캐스케이딩 1부에 이어서 2부를 시작하겠다. 이번 포스팅에서는 캐스케이딩의 규칙을 살펴볼 것이다. 여려 css가 중첩되어 있을 때 우선순위에 관해서 다룰 것이다. 먼저 코드를 살펴보자. DOCTYPE html> Document html css js li { color: red; } #idsel { color: blue; } .classsel { color: green; } 이렇게 작서된 코드의 li들의 코드 색상은 어떻게 적용이 될지 먼저 예상을 해보자. 결과는 아래 더보기와 같다. 더보기 결과적으로 보았을 때는 html에 작성한 style의 attribute color가 우선적으로 적용이 되었다. 그렇다면 해당 style attribute를 삭제하고 나면 어떻게 우선순위가 적용이 될까? 아래 더보기를 ..

이번 포스팅에서는 캐스케이딩에 관해서 포스팅을 할 것이다. 1부 2부로 나누어서 진행할 것이다. 캐스케이딩은 웹브라우저를 기반으로 이루어져 있는 html을 사용자 즉, 클라이언트가 웹 페이지 디자인에 개입할 수 있는 결정권이 있어야된다는 전제로 존재하게 된다. 예를 들어서 사용자가 눈이 좋지 않아서 자신이 보고 있는 웹페이지의 글씨 크기를 크게 기울 수 있는 것을 말하는 것이다. 더 나아가서 웹페이지를 만드는 사람(author)이 본인이 개발한 웹페이지가 어떤 모습으로 디자인이 될 수 있는지 결정하는 결정권이 필요하다라는 것이다. 따라서 웹브라우저(WEB), 사용자(USER/Client), 저자(author) 3인이 서로 조화를 이루어서 웹을 만들어 간다는 철학을 가지고 웹을 구현할 수 있는 기능으로 이..

이번 시간에는 css의 상속 관계에 관해서 포스팅할 것이다. 선택자를 공부했던 우리에겐 이젠 상속관계에 관한 것은 어려움이 없을 것이다. 상속은 어떤 property 값의 효과를 주게 되면 그 element에 속해 있는 하위의 element가 해당 효과를 이어 받게되는 성질을 상속이라 한다. 상속을 이용하게 되는 이유는 효율적으로 생상하기 위함이다. html,css 코드는 아래와 같다. DOCTYPE html> Document 수업내용 html css js html { border: 1px solid gray; color: tomato; } ul { border: 1px solid gray; color: gray; } #select { border: 1px solid gray; color: aquamar..

이번 포스팅에서는 text의 배치를 조정하는 방법을 알아 볼 것이다. css의 문법을 다루다 보니 그리 복잡한 내용을 담고 있지 않으니 실습 코드를 통해서 빠르게 이해할 수 있을 것이다. html과 css의 코드는 아래와 같다 DOCTYPE html> Document text1 text1 text1 #text1 { text-align: right; border: 1px solid gray; } #text2 { text-align: center; border: 1px solid gray; } #text3 { text-align: left; border: 1px solid gray; } 글자들의 위치들을 지정하는 text-align들의 세가지 문법들이다. right,left,center외에도 start와 e..

스택과 큐는 리스트에서 조금 더 발전한 형태의 자료구조이다. 스택과 큐의 구조는 비슷하지만 처리 방식은 다르다. 스택 후입선출(LIFO) 가장 마지막에 사입된 데이터가 가장 먼저 나오는 구조 스택의 위치는 top이라는 개념이 있다. 재귀 함수 알고리즘 원리와 일맥상통하다. 스택에 사용되는 코드 위치 top : 스택에서 가장 위에 있는 데이터를 가리는 영역이다. s.append(data) : top의 새로운 데이터를 삽입 s.pop() : top위치에 현재 데이터를 삭제하고 확인하는 연산 s[-1] : top위치에 현재 있는 데이터를 단순 확인하는 연산 스택을 이용한 알고리즘 우선 탐색 백트래킹 종류의 코딩 테스트에 효과적이므로 반드시 알아두어야 한다. 백트래킹 종류의 코딩 테스트에 효과적이므로 반드시 ..

이번 포스팅에서는 router에서 url Paramerts를 전달하는 것에 관해서 포스팅 해볼 것이다. 우선 코드를 살펴보자. SubApp.js ... return ( ( //movie 컴포넌트를 사용 ))} ... Movie.js ... {title} ... movie/:id로 router를 설정하고 해당 id는 Movie.js에서 props로 id값을 받게 설정을 한다. 해당 id값을 받아오는 곳은 Home.js로 부터 받아온다. 이를 통해서 movie API로 연결된 해당 영화의 고유 id값을 Movie.js의 Link를 통해서 Detail 컴포넌트로 전달한다. 그렇게 전달받은 id값은 Detail 내부 컴포넌트에서 다시 fetch를 통해서 정보를 추출한다. Detail 내부 컴포넌트는 아래와 같다..