HTML&CSS
1.Today I learned 5 - 요소와 구조
자바스크립트를 공부하다가 중급으로 넘어가니점점 머리가 아파오고 제대로 이해한건지잘 공부하고 있는지 모를정도로 어려워졌다.개발을 처음 배우는 단계에서지금 이것과 씨름하는 것은 답이 아니라고 판단하고HTML과 CSS를 모두 공부하고 다시 자바스크립트로 돌아오기로 했다.둘
2.Today I Learned 6 - 링크
오늘 두번째로 쓰는 TILHTML 기초 개념 중에서 헷갈렸던 링크 파트를 따로 포스팅한다.링크로 사용할 부분을 < a >태그로 감싸준다.href(hypertext reference)에 연결될 링크의 정보를 속성으로 넣는다.href에 어떤 데이터를 넣느냐에 따라 외
3.Today I Learned 7 - HTML tables
오늘은 HTML에서 Table과 Form을 배웠다. 내용이 정말 많다... 처음 배우는 개념들이라 헷갈려서 복습이 필수일듯! Create a Table 태그 안에 표의 모든 데이타가 들어간다. Table Components 표의 구성요소에는 크게 행 rows 열
4.Today I Learned 8 - Form
오늘은 며칠 전에 공부하고 블로그 작성 못한HTML의 입력양식(form)에 대해 복습 겸 포스팅을 해본다.웹 페이지에서의 입력 양식텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리사용자가
5.Today I Learned 29 - CSS / 정리1
: Cascading Style Sheets인라인 : <body> 안에 원하는 태그에 직접 style속성을 활용내부 참조 : <head> 안에 <style>태그를 넣어 그 안에 CSS 코드를 넣는다. 외부 참조 - 분리된 CSS 파일기본 선택자전체 선택
6.Today I Learned 30 - CSS / 정리2
CSS의 모든 것은 박스다!margin : 테두리 바깥의 외부 여백, 배경색을 지정할 수 없다.border : 테두리 영역padding : 테두리 안쪽의 내부 여백, 요소에 적용된 배경색과 이미지가 함께 적용content : 글이나 이미지 등 요소의 실제 내용컨텐트가
7.Today I Learned 31 - CSS / Flexbox 정리
행과 열 형태로 아이템들을 배치하는축main axis (메인 축) : flex-direction에 의해서 결정됨cross acis (교차 축) : main axis의 수직 방향구성요소Flex Container (부모 요소)flexbox 레이아웃을 형성하는 가장 기본적인
8.[ Tailwind CSS ] 1.핵심 컨셉
Tailwind CSS 내부에 이미 정의된 유틸리티 클래스를 사용하여 빠르게 스타일링을 할 수 있다.CSS를 작성할 필요가 없다.클래스명에 대한 고민할 필요가 없다.유지 보수가 쉽다.hover, focus와 같은 Pseudo-class를 의미하는 수식자를 유틸리티 클래
9.[ Tailwind + Styled Component ] 0. 알아보기
Tailwind CSS는 HTML 태그에 유틸리티 클래스를 바로 작성하여 스타일링한다. 이 때문에 클래스명이 길어져 컴포넌트의 JSX코드가 지저분해진다.Styled-components를 사용하면 CSS-in-JS 문법 사용으로 컴포넌트를 깨끗하게 유지할 수 있다.Tai
10.[ Tailwind + Styled Component ] 1. 세팅하기 (CRA)
Tailwind CSS는 HTML 태그에 유틸리티 클래스를 바로 작성하여 스타일링한다. 이 때문에 클래스명이 길어져 컴포넌트의 JSX코드가 지저분해진다.Styled-components를 사용하면 CSS-in-JS 문법 사용으로 컴포넌트를 깨끗하게 유지할 수 있다.Tai
11.[ Tailwind + Styled-components ] 2. 사용하기
부트스트랩처럼 이미 정의된 유틸리티 클래스를 HTML 태그의 클래스명에 추가하여 빠르게 스타일링이 가능하다.부트스트랩의 핵심 특징들은 아래의 게시물을 참고\[ Tailwind CSS ] 1.핵심 컨셉style component는 화면에 컴포넌트가 렌더링 되었는지 추적해