본문 바로가기

전체 글

 (147)
List ol 어떤 정보를 관련있는 목록의 형태로 보여주고 싶을 때 list와 관련된 태그인 ul, ol, li를 사용할 수 있다. ol과 ul 태그의 direct 자식 요소로는 li 태그 를 사용하는 것이 웹 표준이다. ordered list는 순서가 중요한 아이템들을 하나의 목록으로 감싸 주는 태그이다. 첫번째 아이템 두번째 아이템 세번째 아이템 ul un-ordered list는 순서가 바뀌어도 상관없는 아이템들을 하나의 목록으로 감싼다. 순서가 중요하지 않은 아이템 dl 단어를 정의할 때, 또는 key-value 형태로 정보를 제공하고 싶을 때 dl, dt, dd, dfn을 사용할 수 있다. dl 태그의 direct 자식 요소로는 dt, dd, div를 사용한다. Common uses for this el..
HyperText Anchor | link 웹 사이트에 링크 정보를 포함하고 싶을 때 anchor 태그를 이용한다. anchor 태그를 클릭하면, 현재 웹 사이트에서 다른 웹 사이트로 이동하거나, 현재 웹 사이트에서 내가 보고 있지 않은 다른 화면으로 이동할 수 있다. Attribute href anchor 태그에는 반드시 포함되어야 할 href라는 attribute이 있다. href는 hypertext refrence(주소값)의 약어이다. Click Me 해당하는 url로 이동 현재 웹 사이트에서 해당하는 id를 가지고 있는 요소로 이동 해당하는 주소에 메일을 쓸 수 있는 창으로 이동 모바일에서 해당하는 전화번호로 call을 할 수 있는 창으로 이동 target 새로운 탭을 열어서, 해당하는 주소로 이동 aria-lab..
Text | Heading & Paragraph 웹 사이트에 정보를 담을 때에는, 그 정보의 성격에 맞는 적절한 태그를 이용하는 것이 중요하다. 글로 이루어진 정보를 나타낼 때에는, 글의 제목과 소제목 그리고 글의 내용을 구분해 주는 태그를 적절하게 사용한다. Heading | title heading & paragraph heading | title h3 h4 h5 h6 Paragraph | contents 웹 사이트의 정보를 담을 때에는... 줄 바꿈을 하고 싶을 때에는... +) br | break +) span | The HTML element is a generic inline container for phrasing content, which does inherently represent anything. Emphasis 문단에 담는 텍스트..
What is HTML? HTML(Hyper Text Markup Language) what is html? 브라우저의 주소창에 원하는 사이트의 url을 입력하고 enter 키를 누르면, 우리가 원하는 웹 사이트를 볼 수 있다. 또는 컴퓨터에 저장되어있는 이미지, pdf 파일 등을 브라우저를 통해 열어볼 수도 있다. 웹 사이트 뿐만 아니라 이미지, pdf까지 우리가 "브라우저"를 통해서 보는 모든 것들은 "html"이라는 파일이며, 이 파일은 다양한 태그들로 이루어져 있다. 웹사이트에 스타일과 사용자와의 상호작용 기능을 더해주는 css파일, js파일도 결국 html의 태그로 삽입되어 보여진다. 즉 html이 없으면, css와 js도 없다. what is html5? The term HTML5 is essentially a buz..
Markdown VScode에서 제공하는 markdown preview를 이용하면, 내가 .md 파일에서 작성하는 내용들을 시각적으로 확인할 수 있다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 paragraph bold italic strikethrough quote un-orderd list also un-orderd list orderd list orderd list orderd list HERE My tistory blog Header Description cell 1 cell 2 cell 3 cell 4 console.log('Hello World!') console.log('Hello World!'); github flavored markdown
MVC & Dependency Injection MVC | Model, View, Controller MVC 패턴이란, 소프트웨어 디자인 패턴 중 하나로, UI를 개발할 때 흔하게 사용된다. MVC 패턴은 어플리케이션을 세 가지 부분 model, view, controller 으로 나눈다. 이렇게 역할에 따라 Layer를 나눔으로써 더 쉽게 코드를 테스트할 수 있고, 유지보수 할 수 있다. 만약 역할을 나누지 않고, 리액트 컴포넌트 안에 네트워크 통신을 하는 로직을 작성했다면, ??? 컴포넌트의 유닛테스트에 네트워크 통신에 대한 테스트도 포함된다. 즉, 유닛 테스트를 할 때 마다 네트워크 통신이 발생하게 되는데, 이것은 매우 나쁜 상황이다. 이것을 막기 위해 layer를 나누는 MVC 모델을 이용하는 것이기도 하다. 아래에 살펴볼 Dependency ..
Responsive Design CSS Units CSS 문법은 크게 selector, property, value 세 가지로 나누어져 있다. value 중에서도 단위를 가지고 있는 값들이 있는데, 이 단위의 종류도 다양하다. Absolute unit px | pixels, 모니터 위의 가장 작은 화면 단위 고정된 값이기 때문에, 컨텐츠가 담겨있는 컨테이너의 크기가 늘어나거나 줄어들어도, 전혀 반응하지 않는다. 사용자가 브라우저에서 지정하는 폰트 사이즈에 반응하지 않는다(Cascading rule) pt | points Relative unit | Content is water 🥛 % 어떤 기준에 대해서 상대적으로 계산되는 값 어떤 속성의 값이냐에 따라 부모 요소 또는 자기 자신을 기준으로 한다. 예를 들어 어떤 요소의 width: 5..
PostCSS what is PostCSS? Sass, Less, PostCSS와 같은 툴을 CSS PreProcessor(전처리기)라고 하는데, 이런 툴을 이용하면 우리가 순수 CSS를 작성하면서 겪는 문제를 해결하고, 한계를 극복할 수 있다. Auto Prefixer yarn create react app 명령어를 이용해서 생성된 폴더에는, 다음과 같이 다양한 툴이 자동으로 설치된 폴더가 포함된다. node modules에는 설치된 툴이 모두 포함되어있는데, 여기에 PostCSS도 포함된다. yarn 파일(설치된 모든 툴을 관리)의 autoprefixer는 PostCSS가 제공하는 기능 중 하나이다. 예를 들어, 순수 css로 fullscreen 상태일 때의 스타일을 정의하려면, 브라우저 호환성 문제 때문에 똑같은..

티스토리툴바