일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 2020년
- 2023 회고
- 디자인시스템
- frontend
- design token
- front
- 24년 계획
- 2024 계획
- 개발자
- react
- 2021년
- vite
- 다짐
- c#
- 회고
- 디자인 토큰
- 프로그래밍
- 라이브러리제작
- nextjs
- typescript
- design-system
- mono-repo
- npm
- component
- javascript
- css framework
- 뇌를자극하는C#
- compound component
- style-dictionary
- design
- Today
- Total
목록Front-end (22)
개탕 IT FACTORY
Vue.js는 무엇인가라는것에 대해 전 포스팅에서 간략히 다루어보았습니다 오늘은 앞서 말씀드린 컴포넌트에 대해서 알아볼까합니다 컴포넌트 컴포넌트는 화면을 구성할 수 있는 블록을 의미합니다. 저는 이구조가 트리구조를 닮아서 트리구조로 생각하면서 외웠습니다 아래 두 사진을 보시면 이해하기가 쉬우실겁니다 일반 웹구조를 표현 컴포넌트로 웹구조 표현 모든것 내비게이션바,인풋박스,리스트 등의 화면 구성 요소를 잘게 쪼개어 컴포넌트로 관리하는 것입니다 이렇게 각각의 요소를 따로 쪼개면 좋은점이 있나요? 라고 생각하실텐데 네 있습니다. 실무에서 협업할시 일의 능률이나 효율면에서도 좋고 버그나 웹사이트 장애 등을 고칠때도 특정 컴포넌트에서 고치면 되기 때문에 효율적입니다.
Vue.js란 Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.-Vuejs 공식문서(https://kr.vuejs.org/v2/guide/index.html)에 나와있는 내용입니다.특히나 Vue..
전 포스팅때 다루었던 내용입니다 오늘은 CSS 셀렉터에 대해서 알아볼까합니다. CSS의 기본구조의경우 Selector { 프로퍼티 : 값 ;, 포로퍼티 : 값 ;...} 형식으로 되어있습니다 설명을 쉽게하기위해서 직접 코드를 보여드리는게 좋겠죠 h1 { color : red ; , font-family : '나눔고딕' ;...} 이런식으로 되어있습니다 하나씩 설명드리자면 셀렉터의 경우 태그명 , 전체태그(*) , ID셀렉터, 클래스 셀렉터 등 존재합니다 저도 셀렉터가 몇가지만 존재할 줄 알았는데 찾아보니 여러가지가 존재하더군요 일단 하나씩 설명드리면 1.태그 셀렉터(선택자) 태그 셀렉터의 경우 HTML 태그의 명을 이용하여 셀렉터(선택자)로 이용합니다 태그는 너무 여러가지라 다 말씀못드리지만 h1태그 ,..
전 포스팅에서는 HTML에대한 정보와 기본문법에 대해서 간략히 다루었다면 이번엔 CSS에 대해서 다루어 볼까합니다 CSS Cascading Style Sheets 한국말로는 종속형 시트 라고 적혀있는데 쉽게 생각해보면 웹사이트를 보기 좋게 꾸며주는 도구입니다. HTML로 구성된 웹사이트의경우 그저 웹문서에 지나치지 않습니다 이런식으로 꾸며지지않은 그저 그런 웹문서에 지나치지 않습니다 하지만 CSS를 이용하여서 웹사이트를 제작한다면 이야기가 달라집니다. 많이 접속하는 네이버는 CSS로 각각의 위치 지정과 그리고 사진,텍스트 등을 배치시켜 사용자가 이용하기 편하게 제작되었습니다.구글같은경우 간단한 CSS로 각각을 배치시켜 간결한 이미지로 배치시켜놨습니다. CSS의 기본구조는 전에 HTML의 태그를 쓰시면 C..
웹사이트 구축할때 쓰이는 3가지 언어에 대해서 설명 드렸습니다 HTML , CSS , javascript 그중 오늘은 HTML에대해서 자세히 알아볼까합니다. HTML 전글에서도 말씀드렸지만 HTML은 태그기반의 언어입니다. HTML의 기본구조는 이렇게 되어있습니다 Hello HTML Hello World! HTML의 기본구조입니다 보통 시작태그와 끝태그로 구성이 되어있습니다 시작태그는 등으로 /가 존재하는 태그입니다 보통 태그는 시작태그 끝태그가 존재하지만 가끔 시작과 끝을 한번에 하는 태그가 존재합니다 예를들면 같은 개행 태그같은경우 한번에 끝내도 상관없습니다. 하나씩 설명을 드리겠습니다 로 시작해서 로 끝나는건 동일하나 안에 기능들을 설명해드리죠 제목 태그 head태그안에는 title이 존재하고 그외..
HTML과 CSS,자바스크립트 간단소개 1. HTMLHTML은 (HyperText Markup Language) 마크업 언어입니다. 다른언어와 다르게 태그기반으로 설계가 되었습니다 지금 제 티스토리 블로그에서 웹 브라우저 개발자도구(F12)를 통해 캡처한 태그들입니다.HTML은 사실 문서작성을 위해서 제작이 되었습니다 하지만 현재 와서는 웹의 강력함과 편리성에 의해 그 영향력이 많이 커져있는 상태입니다. HTML은 초보자도 쉽게 익힐수 있기 때문에 (따로 문법이 있는게 아닌 태그를 알아두면 되기때문)https://www.w3schools.com/html/ 위 URL에 접속하셔서 공부하시면됩니다 (개인적으로 웹사이트 제작시 태그나 CSS,javascript 속성 등 확인할때 많이 쓴곳입니다) 2.CSSCS..