dalc3154 님의 블로그

margin: 두 박스 모델 사이의 여백padding: 한 박스 모델에서 테두리와 내용 사이의 여백 margin 속성요소 주변의 여백을 설정>>요소와 요소 사이의 간격을 조절margin:  |  | auto margin 속성너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정margin: 50px박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정margin: 0.1%autodisplay 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정  margin 속성을 사용하여 웹 문서 가운데 정렬>> 배치할 요소의 너빗값 지정좌, 우 마진을 auto로 지정 margin 상쇄위 아래 마진이 서로 만날 경우 마진이 큰 값에 작은 값이 병합되어 사라짐주의) 좌우 마진이 만날경우..

박스 모델의 방향박스 모델은 테두리나 마진, 패딩 등을 지정할 때 상하좌우 4개의 여백을 똑같이 지정하거나, 모두 다르게 지정 가능상>우>하>좌 순으로 지정 border-style 속성테두리 스타일 지정>>기본값 none>>속성값을 지정하지 않으면 테두리 관련 속성을 지정하더라도 화면에 표시되지 않음 border-style 속성값none테두리 : 기본값hidden테두리 감추기 표에서 border-collapse: collapse일 경우 다른 테두리도 표시​solid테두리를 실선으로 표시dotted테두리를 점선으로 표시dashed테두리를 짧은 직선으로 표시double테두리를 이중선으로 표시, border-width값 : 두 선 사이의 간격groove테두리를 창에 조각한 것처럼 표시, 홈이 파인 듯한 입체 ..

박스 모델이란? 웹 문서에서 내용 배치 시>> 각 요소를 박스 형태로 구성각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성 블록 레벨 요소 & 인라인 레벨 요소블록 레벨 요소태그를 사용해 요소 삽입 시 혼자 한 줄을 차지하는 것 >> 해당 요소의 너비가 100%블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음 인라인 레벨 요소태그를 사용해 요소 삽입 시 해당 콘텐츠만큼만 영역을 차지>>나머지 공간에 다른 요소 삽입 가능한 줄에 여러 개의 인라인 레벨 요소 삽입 가능 박스 모델의 기본 구성콘텐츠 영역패딩: 박스와 콘텐츠 영역 사이의 여백테두리: 박스의 테두리마진: 여러 박스 모델 사이의 여백 width, height 속성콘텐츠 영역의 크기 지정너비나 높이의 값을 px O..

속성(properties): 스타일을 적용할 대상의 특성>> 변경하고자 하는 스타일의 종류를 지정>> 속성은  CSS  규칙 내에서 선언되며, 콜론 뒤에 해당 속성에 적용할 값을 지정 값(values): 속성에 할당되어, 그 속성이 어떻게 적용될지를 구체적으로 명시>> 속성이 실제로 어떤 스타일을 나타낼지를 결정>> 값은 속성 다음에 오며, 세미콜론으로 구문을 종료하기 전에 속성 값으로 지정 CSS 값(데이터 유형)>> CSS에서 특정 속성에 유효한 데이터를 지정하는 것 길이와 거리절대 길이 단위>>px(픽셀): 가장 일반적으로 사용되는 절대 길이 단위 상대 길이 단위>>rem, em: 루트 요소의 글꼴 크기 / 요소의 글꼴 크기>>vw, vh: 뷰포트의 너비, 높이의 백분율로 나타내는 단위백분율>>부모..

글꼴 스타일: 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기 등에 영향을 주는 속성텍스트 레이아웃 스타일: 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 선이나 문자 등 요소 사이의 간격이나 정렬되는 방식을 제어할 수 있음 글꼴 관련 스타일텍스트 스타일: 사용하는 글자의 모양을 지정하는 글꼴 스타일 font-family 속성글꼴을 지정웹 문서에서 사용할 글꼴: font-family 속성으로 지정 font-family:  | [, ] 주의) 지정한 글꼴이 사용자 시스템에 없으면 의도한 글꼴이 표시되지 않음 두 단어 이상으로 된 글꼴 이름은 " "안에 표시 font-size 속성글자 크기를 지정글자 크기의 단위는 px나 pt등으로 지정(백분율도 가능) font-size:..

전체 선택자스타일을 문서의 모든 요소에 적용할 때 사용별(*)사용주로 웹 브라우저의 기본 스타일(마진/패딩)을 초기화할때 사용 타입 선택자특정 태그를 사용한 모든 요소에 스타일 적용태그명{ 스타일 규칙 }클래스 선택자특정 부분에 스타일 적용클래스 이름을 사용해 다른 선택자와 구별하며, 클래스 이름 앞에 반드시 마침표(.)을 붙여야 함.클래스명{ 스타일 규칙 }>>태그 안에 class="클래스명" 을 지정해 준 것에만 지정됨 id 선택자특정 부분에 스타일을 한 번만 적용아이디 이름을 사용해 다른 선택자와 구별하며,id 이름 앞에 반드시 #을 붙여야 함#아이디명{ 스타일 규칙 }>>id선택자는 문서에서 단 한번만 적용 가능함(id는 중복 불가) 그룹 선택자같은 스타일 규칙을 공유하는 요소를 묶어서 적용선택자..

케스케이딩(Cascading)은 위에서 아래로, 계단식으로 코드를 적용한다는 의미이다 CSS는 우선순위가 있는 스타일 시트로서, 두가지 스타일이 겹칠 경우 특정 기준에 따라 스타일을 적용한다 스타일의 우선순위1) 중요도 기준사용자가 지정한 스타일>제작자 스타일> 브라우저 기본 스타일 2) 중요도가 같을 경우, 적용 범위 기준(스타일 적용 범위가 좁을수록 우선)!important: 1순위인라인 스타일(해당 태그만): 2순위id 스타일: 3순위클래스 스타일: 4순위타입 스타일: 5순위 3) (같은 적용 범위에서)소스 코드의 작성 순서나중에 작성한 스타일이 이전에 작성한 스타일을 덮어씀 ##스타일의 상속부모 요소에 적용된 스타일은 포함된 자식 요소에게도 이어짐단, 배경색과 배경 이미지는 상속되지 않음

CSS는 Cascading Style Sheets: 종속된 스타일 형식웹 페이지의 디자인과 레이아웃을 구성하는 데 사용되는 스타일 시트 언어 Cascading: 위에서 아래로 흐르는, 상속 또는 종속하는Style: HTML 문서의 겉모습(디자인)을 결정짓는것>> HTML요소의 형태, 색, 정렬, 배치 등을 제어 스타일시트를 사용하는 이유1) 웹 문서의 내용과 상관없이 디자인만 변경 가능>>내용을 수정해도 디자인엔 전혀 영향 없음 2) 다양한 기기에 맞게 탄력적으로 바뀌는 문서 제작 가능>>CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 기기에 맞게 CSS만 바꿔주면 같은 내용을 여러 기기에서 볼 수 있음3) 반응형 웹 디자인>>사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라..

vite를 사용해 리액트 프로젝트 생성npm create vite@latest 이후 터미널에서 대화형으로 프로젝트 설정Project name: 프로젝트 폴더명Package name: package.json의 name 속성값으로 지정(소문자)Select a framework: ReactSelect a variant: TypeScript>> 명령어 실행 폴더 내에 Project name의 리액트(ts) 프로젝트가 생성>> 프로젝트 폴더로 이동(cd Project-name) package.json에 명시된 의존성 설치npm install 개발 서버 실행npm run dev>> http://localhost:5173/ 열기 # vite로 생성된 react 프로젝트 구조  1. node_module: 설치된 패키..

input 태그 외에 폼에서 사용하는 태그들 textarea 태그여러줄을 입력하는 텍스트 영역 태그내용 textarea의 속성cols: 텍스트 영역의 가로 너비를 문자 단위로 지정rows: 텍스트 영역의 세로 길이를 줄 단위로 지정. 지정한 숫자보다 줄이 많아지면 스크롤 막대 생성>>cols에서 지정하는 글자 수는 영어 소문자를 기준으로 함. 한글 1글자는 영문 2글자 취급이므로 cols에 지정한 숫자의 절반이 1줄에 들어가게 됨 CSS를 사용해 텍스트 영역의 크기를 정의 가능 select, option 태그드롭다운 목록을 만들어 주는 태그사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택함 select 태그: 드롭다운 목록>> 클릭 시 옵션이 요소 아래쪽으로 펼쳐짐 option 태그: 데이터 목..